[WIP] Add export density to canvas renderer

packages/core/app/components/SideBar.js

@@ -29,6 +29,7 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
     settings: {
       persistRandomOnExport,
       showStateExport,
+      engine,
       hidePresets,
       hideScaleToFit,
       initialScaleToFit,
@@ -51,6 +52,8 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
 
   const [values, setValues] = useValues(name, inputs, exportedPresets);
 
+  const showDensitySelector = engine.isRasterExport ?? false;
+
   const handleOnChange = (e, name, value) => {
     setValues(name, value);
   };
@@ -93,6 +96,17 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
   useInteractiveInputs(inputs, iframe, handleOnChange);
   useShortcuts(handleExport);
 
+  const DensityPicker = () => (
+    <Input
+      className={css.input}
+      key="input-exportDensity"
+      name="exportDensity"
+      values={values}
+      inputDef={densityInput}
+      onChange={handleOnChange}
+    />
+  );
+
   return (
     <AsideComponent>
       <div className={css.section}>{children}</div>
@@ -190,16 +204,19 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
 
         <div className={css.sep} />
         {!showMultipleExports ? (
-          <div className={cn(css.row, css.noWrapRow)}>
-            <Button
-              className={css.grow}
-              primary={iframeLoaded}
-              onClick={() => handleExport()}
-              disabled={!iframeLoaded || lastRun === undefined}
-            >
-              {lastRun === undefined ? "Error" : iframeLoaded ? "Export" : "Loading content"}
-            </Button>
-          </div>
+          <>
+            {showDensitySelector && <DensityPicker />}
+            <div className={cn(css.row, css.noWrapRow)}>
+              <Button
+                className={css.grow}
+                primary={iframeLoaded}
+                onClick={() => handleExport()}
+                disabled={!iframeLoaded || lastRun === undefined}
+              >
+                {lastRun === undefined ? "Error" : iframeLoaded ? "Export" : "Loading content"}
+              </Button>
+            </div>
+          </>
         ) : (
           <>
             <Button
@@ -211,14 +228,7 @@ export const SideBar = ({ name, exports: functionExports, iframe, mainRef, child
               {lastRun === undefined ? "Error" : iframeLoaded ? "Export SVG" : "Loading content"}
             </Button>
             <div className={css.sep} />
-            <Input
-              className={css.input}
-              key="input-exportDensity"
-              name="exportDensity"
-              values={values}
-              inputDef={densityInput}
-              onChange={handleOnChange}
-            />
+            <DensityPicker />
             <Button
               className={css.grow}
               primary={iframeLoaded}

packages/core/src/mechanic-utils.js

@@ -133,6 +133,7 @@ const extractSvgSize = el => {
  * Draws a dataUrl to canvas
  * @param {string} dataUrl - SVG string to draw
  * @param {HTMLCanvasElement} canvas - A canvas element to draw into
+ * @param {number} ratio – the pixel density to render at
  */
 const dataUrlToCanvas = (dataUrl, canvas, ratio = 1) =>
   new Promise((resolve, reject) => {

packages/create-mechanic/CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Updated canvas based templates to use the new `getCanvas` function
+
 ## 2.0.0-beta.9 - 2022-08-12
 
 ### Fixed

packages/create-mechanic/function-templates/canvas-image/index.js

@@ -1,17 +1,12 @@
-export const handler = ({ inputs, mechanic }) => {
+export const handler = ({ inputs, mechanic, getCanvas }) => {
   const { width, height, text, color1, color2, radiusPercentage } = inputs;
+  const { canvas, ctx } = getCanvas();
 
   const center = [width / 2, height / 2];
   const radius = ((height / 2) * radiusPercentage) / 100;
   const angle = Math.random() * Math.PI * 2;
 
-  const canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
-
-  const ctx = canvas.getContext("2d");
-
-  ctx.fillStyle = "#F4F4F4";
+  ctx.fillStyle = '#F4F4F4';
   ctx.fillRect(0, 0, width, height);
 
   ctx.fillStyle = color1;
@@ -31,9 +26,9 @@ export const handler = ({ inputs, mechanic }) => {
   ctx.arc(center[0], center[1], radius, 0 + angle, Math.PI + angle, false);
   ctx.fill();
 
-  ctx.fillStyle = "#000000";
+  ctx.fillStyle = '#000000';
   ctx.font = `${height / 10}px sans-serif`;
-  ctx.textAlign = "center";
+  ctx.textAlign = 'center';
   ctx.strokeText(text, width / 2, height - height / 20);
   ctx.fillText(text, width / 2, height - height / 20);
 
@@ -42,29 +37,29 @@ export const handler = ({ inputs, mechanic }) => {
 
 export const inputs = {
   width: {
-    type: "number",
+    type: 'number',
     default: 400,
   },
   height: {
-    type: "number",
+    type: 'number',
     default: 300,
   },
   text: {
-    type: "text",
-    default: "mechanic",
+    type: 'text',
+    default: 'mechanic',
   },
   color1: {
-    type: "color",
-    model: "hex",
-    default: "#E94225",
+    type: 'color',
+    model: 'hex',
+    default: '#E94225',
   },
   color2: {
-    type: "color",
-    model: "hex",
-    default: "#002EBB",
+    type: 'color',
+    model: 'hex',
+    default: '#002EBB',
   },
   radiusPercentage: {
-    type: "number",
+    type: 'number',
     default: 40,
     min: 0,
     max: 100,
@@ -84,5 +79,5 @@ export const presets = {
 };
 
 export const settings = {
-  engine: require("@mechanic-design/engine-canvas"),
+  engine: require('@mechanic-design/engine-canvas'),
 };

packages/create-mechanic/function-templates/canvas-video/index.js

@@ -1,19 +1,15 @@
-export const handler = async ({ inputs, mechanic }) => {
+export const handler = async ({ inputs, mechanic, getCanvas }) => {
   const { width, height, text, color1, color2, radiusPercentage, turns } =
     inputs;
 
+  const { canvas, ctx } = getCanvas();
+
   const center = [width / 2, height / 2];
   const radius = ((height / 2) * radiusPercentage) / 100;
   let angle = 0;
 
-  const canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
-
-  const ctx = canvas.getContext("2d");
-
   const drawFrame = () => {
-    ctx.fillStyle = "#F4F4F4";
+    ctx.fillStyle = '#F4F4F4';
     ctx.fillRect(0, 0, width, height);
 
     ctx.fillStyle = color1;
@@ -33,9 +29,9 @@ export const handler = async ({ inputs, mechanic }) => {
     ctx.arc(center[0], center[1], radius, 0 + angle, Math.PI + angle, false);
     ctx.fill();
 
-    ctx.fillStyle = "#000000";
+    ctx.fillStyle = '#000000';
     ctx.font = `${height / 10}px sans-serif`;
-    ctx.textAlign = "center";
+    ctx.textAlign = 'center';
     ctx.strokeText(text, width / 2, height - height / 20);
     ctx.fillText(text, width / 2, height - height / 20);
 
@@ -53,36 +49,36 @@ export const handler = async ({ inputs, mechanic }) => {
 
 export const inputs = {
   width: {
-    type: "number",
+    type: 'number',
     default: 400,
   },
   height: {
-    type: "number",
+    type: 'number',
     default: 300,
   },
   text: {
-    type: "text",
-    default: "mechanic",
+    type: 'text',
+    default: 'mechanic',
   },
   color1: {
-    type: "color",
-    model: "hex",
-    default: "#E94225",
+    type: 'color',
+    model: 'hex',
+    default: '#E94225',
   },
   color2: {
-    type: "color",
-    model: "hex",
-    default: "#002EBB",
+    type: 'color',
+    model: 'hex',
+    default: '#002EBB',
   },
   radiusPercentage: {
-    type: "number",
+    type: 'number',
     default: 40,
     min: 0,
     max: 100,
     slider: true,
   },
   turns: {
-    type: "number",
+    type: 'number',
     default: 3,
   },
 };
@@ -99,6 +95,6 @@ export const presets = {
 };
 
 export const settings = {
-  engine: require("@mechanic-design/engine-canvas"),
+  engine: require('@mechanic-design/engine-canvas'),
   animated: true,
 };

packages/dsi-logo-maker/CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Refactored all canvas based functions to use the new `getCanvas` functionality
+
 ## 1.1.0 -2021-09-29
 
 ### Changed

packages/dsi-logo-maker/README.md

@@ -2,7 +2,7 @@
 
 ## Usage
 
-Run:
+Run the following commands:
 
 ```
 npm i

packages/dsi-logo-maker/functions/fillAnimatedCanvas/index.js

@@ -1,21 +1,23 @@
-import { getColors } from "../../utils/graphics";
+import { getColors } from '../../utils/graphics';
 import {
   computeBaseBricks,
   computeBlockGeometry,
   precomputeBlocks,
   getIndexModule,
-} from "../../utils/blocks";
-import { drawBlock } from "../../utils/blocks-canvas";
+} from '../../utils/blocks';
+import { drawBlock } from '../../utils/blocks-canvas';
 
-export const handler = ({ inputs, mechanic }) => {
+export const handler = ({ inputs, mechanic, getCanvas }) => {
   const { width, height, logoWidth, logoRatio, duration } = inputs;
 
+  const { canvas, ctx } = getCanvas();
+
   const rows = 2;
   const cols = 13;
   const logoHeight = Math.floor((logoWidth / logoRatio) * rows);
-  const words = ["DESIGN", "SYSTEMS", "INTERNATIONAL"];
+  const words = ['DESIGN', 'SYSTEMS', 'INTERNATIONAL'];
 
-  let colors = getColors("Random Flag");
+  let colors = getColors('Random Flag');
   const blockGeometry = computeBlockGeometry(logoWidth, logoHeight, rows, cols);
   const baseBricks = computeBaseBricks(words, blockGeometry.fontSize);
   const blocksByIndex = precomputeBlocks(blockGeometry, baseBricks);
@@ -35,19 +37,14 @@ export const handler = ({ inputs, mechanic }) => {
     position = { ...position };
     if (position.x + block.width < width) {
       position.x += block.width;
-      colors = getColors("Random Flag");
+      colors = getColors('Random Flag');
       brickOffset++;
     } else {
       position.x = position.x - width;
       position.y += block.height;
     }
   }
 
-  const canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
-  const ctx = canvas.getContext("2d");
-
   const draw = () => {
     ctx.save();
     ctx.clearRect(0, 0, width, height);
@@ -96,30 +93,30 @@ export const handler = ({ inputs, mechanic }) => {
 
 export const inputs = {
   width: {
-    type: "number",
+    type: 'number',
     default: 300,
     min: 100,
   },
   height: {
-    type: "number",
+    type: 'number',
     default: 300,
     min: 100,
   },
   logoWidth: {
-    type: "number",
+    type: 'number',
     default: 80,
     min: 10,
   },
   logoRatio: {
-    type: "number",
+    type: 'number',
     default: 9,
     max: 20,
     slider: true,
     min: 6,
     step: 1,
   },
   duration: {
-    type: "number",
+    type: 'number',
     default: 5000,
     step: 500,
     min: 1000,
@@ -142,6 +139,6 @@ export const presets = {
 };
 
 export const settings = {
-  engine: require("@mechanic-design/engine-canvas"),
+  engine: require('@mechanic-design/engine-canvas'),
   animated: true,
 };