ampproject · dreamofabear · May 9, 2019 · Mar 20, 2019 · Mar 20, 2019 · Mar 21, 2019
diff --git a/demo/canvas/canvas.js b/demo/canvas/canvas.js
@@ -0,0 +1,126 @@
+/**
+ * Copyright 2018 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const existingCanvasBtn = document.getElementById('existingCanvasBtn');
+const newCanvasBtn = document.getElementById('newCanvasBtn');
+const doubleCanvasBtn = document.getElementById('doubleCanvasBtn');
+
+const myCanvas = document.getElementById('myCanvas');
+const myCtx = myCanvas.getContext('2d');
+
+function draw(e) {
+  myCtx.lineTo(e.offsetX, e.offsetY);
+  myCtx.stroke();
+}
+
+myCanvas.addEventListener('mousedown', e => {
+  myCtx.strokeStyle = 'red';
+  myCtx.lineWidth = 2;
+  myCtx.setLineDash([10, 10]);
+  myCtx.beginPath();
+  myCtx.moveTo(e.offsetX, e.offsetY);
+  myCanvas.addEventListener('mousemove', draw);
+});
+
+myCanvas.addEventListener('mouseup', e => {
+  myCanvas.removeEventListener('mousemove', draw);
+});
+
+existingCanvasBtn.addEventListener('click', async () => {
+  // Scenario #1:
+  // Canvas is already on the page
+  myCtx.fillStyle = 'blue';
+  myCtx.strokeStyle = 'blue';
+  myCtx.lineWidth = 5;
+  myCtx.setLineDash([1, 0]);
+  myCtx.beginPath();
+  myCtx.strokeRect(212.5, 222.5, 75, 55);
+  myCtx.fillRect(240, 247.5, 20, 30);
+  myCtx.moveTo(200, 222.5);
+  myCtx.lineTo(250, 182.5);
+  myCtx.lineTo(300, 222.5);
+  myCtx.closePath();
+  myCtx.stroke();
+
+});
+
+newCanvasBtn.addEventListener('click', async () => {
+  // Scenario #2:
+  // Create a canvas element using document.createElement()
+  const canvas = document.createElement('canvas');
+  const newCanvasDiv = document.getElementById('newCanvasDiv');
+  canvas.width = 250;
+  canvas.height = 250;
+  newCanvasDiv.appendChild(canvas);
+  const ctx = canvas.getContext('2d');
+
+  ctx.lineWidth = 5;
+  ctx.fillStyle = 'orange';
+  ctx.strokeStyle = 'orange';
+  ctx.strokeRect(87.5, 97.5, 75, 55);
+  ctx.fillRect(115, 122.5, 20, 30);
+  ctx.moveTo(75, 97.5);
+  ctx.lineTo(125, 57.5);
+  ctx.lineTo(175, 97.5);
+
+  ctx.closePath();
+  ctx.stroke();
+});
+
+doubleCanvasBtn.addEventListener('click', async () => {
+  // Scenario #3:
+  // Two different canvas elements created at the same time.
+  // This scenario is needed to make sure async logic works correctly.
+  const canvasOne = document.createElement('canvas');
+  const canvasTwo = document.createElement('canvas');
+
+  canvasOne.width = 250;
+  canvasOne.height = 250;
+  canvasTwo.width = 250;
+  canvasTwo.height = 250;
+
+  const newCanvasDiv = document.getElementById('newCanvasDiv');
+
+  newCanvasDiv.appendChild(canvasOne);
+  newCanvasDiv.appendChild(canvasTwo);
+
+
+  const ctxOne = canvasOne.getContext('2d');
+  const ctxTwo = canvasTwo.getContext('2d');
+
+  ctxOne.lineWidth = 5;
+  ctxOne.fillStyle = 'red';
+  ctxOne.strokeStyle = 'red';
+  ctxOne.strokeRect(87.5, 97.5, 75, 55);
+  ctxOne.fillRect(115, 122.5, 20, 30);
+  ctxOne.moveTo(75, 97.5);
+  ctxOne.lineTo(125, 57.5);
+  ctxOne.lineTo(175, 97.5);
+  ctxOne.closePath();
+  ctxOne.stroke();
+
+  ctxTwo.lineWidth = 5;
+  ctxTwo.fillStyle = 'green';
+  ctxTwo.strokeStyle = 'green';
+  ctxTwo.strokeRect(87.5, 97.5, 75, 55);
+  ctxTwo.fillRect(115, 122.5, 20, 30);
+  ctxTwo.moveTo(75, 97.5);
+  ctxTwo.lineTo(125, 57.5);
+  ctxTwo.lineTo(175, 97.5);
+
+  ctxTwo.closePath();
+  ctxTwo.stroke();
+});
diff --git a/demo/canvas/index.html b/demo/canvas/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html style="background: #e6e9e9;">
+<head>
+  <meta charset="utf-8" />
+  <title>Hello World</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="/demo.css" rel="stylesheet">
+  <script src="/dist/main.mjs" type="module"></script>
+  <script src="/dist/main.js" nomodule defer></script>
+  <!-- This comment block is intended to make it easier to test both the script module and nomodule path -->
+  <!-- Comment either block to enable module/nomodule or disable it. -->
+  <!-- <script src="/dist/main.js" defer></script> -->  
+</head>
+<body style="background: #e6e9e9;">
+  <div src="canvas.js" id="upgrade-me">
+    <div id="canvasButtonsDiv">
+
+      <button id="existingCanvasBtn">Draw on already existing canvas</button>
+      <button id="newCanvasBtn">Create new canvas and draw on it</button>
+      <button id="doubleCanvasBtn">Create two new canvases and draw on them</button>
+    </div>
+    <div>
+      <canvas width="500" height="500" id="myCanvas"></canvas>
+      <div id="newCanvasDiv"></div>
+    </div>
+  </div>
+  <script type="module">
+    import {upgradeElement} from '/dist/main.mjs';
+    upgradeElement(document.getElementById('upgrade-me'), '/dist/worker/worker.mjs');
+  </script>
+  <script nomodule async=false defer>
+    document.addEventListener('DOMContentLoaded', function() {
+      MainThread.upgradeElement(document.getElementById('upgrade-me'), '/dist/worker.js');
+    }, false);
+  </script>
+  <!-- This comment block is intended to make it easier to test both the script module and nomodule path -->
+  <!-- Comment either block to enable module/nomodule or disable it. -->
+  <!-- <script async=false defer>
+    document.addEventListener('DOMContentLoaded', function() {
+      MainThread.upgradeElement(document.getElementById('upgrade-me'), './dist/worker.js');
+    }, false);
+  </script> -->
+</body>
+</html>
diff --git a/demo/demo.css b/demo/demo.css
@@ -32,3 +32,19 @@ li {
 code {
   white-space: pre-wrap;
 }
+
+canvas {
+  background: #fff;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+}
+
+#myCanvas {
+  float: left;
+  margin-right: 5px;
+}
+
+#canvasButtonsDiv {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/demo/index.html b/demo/index.html
@@ -19,6 +19,7 @@ <h3>Basic</h3>
     <li><a href='prime-numbers/'>Prime Numbers</a></li>
     <li><a href='svg/'>SVG Rendering</a></li>
     <li><a href='comments/'>Comment Rendering</a></li>
+    <li><a href='canvas/'>Canvas</a></li>
   </ul>
 
   <h3>Frameworks</h3>

diff --git a/package.json b/package.json
@@ -38,6 +38,9 @@
     "release": "np",
     "prepublishOnly": "npm run build"
   },
+  "dependencies": {
+    "@types/sinon": "7.0.10"
+  },
   "devDependencies": {
     "@ampproject/rollup-plugin-closure-compiler": "0.9.0",
     "@babel/cli": "7.4.4",
@@ -69,6 +72,7 @@
     "rollup-plugin-copy": "2.0.1",
     "rollup-plugin-replace": "2.2.0",
     "rollup-plugin-terser": "4.0.4",
+    "sinon": "7.1.1",
     "sirv": "0.4.0",
     "tslint": "5.16.0",
     "typescript": "3.4.5"
@@ -89,12 +93,12 @@
     {
       "path": "./dist/worker/worker.mjs",
       "compression": "brotli",
-      "maxSize": "8.4 kB"
+      "maxSize": "10.3 kB"
     },
     {
       "path": "./dist/worker/worker.js",
       "compression": "brotli",
-      "maxSize": "10.0 kB"
+      "maxSize": "11.8 kB"
     },
     {
       "path": "./dist/main.mjs",
@@ -104,7 +108,7 @@
     {
       "path": "./dist/main.js",
       "compression": "brotli",
-      "maxSize": "3.1 kB"
+      "maxSize": "3.3 kB"
     }
   ],
   "esm": {

diff --git a/src/main-thread/commands/interface.ts b/src/main-thread/commands/interface.ts
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 export interface CommandExecutor {
   execute(mutations: Uint16Array, startPosition: number, target: RenderableElement): number;
   print(mutations: Uint16Array, startPosition: number, target?: RenderableElement | null): Object;

diff --git a/src/main-thread/commands/offscreen-canvas.ts b/src/main-thread/commands/offscreen-canvas.ts
@@ -0,0 +1,35 @@
+import { WorkerContext } from '../worker';
+import { TransferrableKeys } from '../../transfer/TransferrableKeys';
+import { MessageType } from '../../transfer/Messages';
+import { CommandExecutor } from './interface';
+import { OffscreenCanvasMutationIndex } from '../../transfer/TransferrableMutation';
+
+export function OffscreenCanvasProcessor(workerContext: WorkerContext): CommandExecutor {
+  return {
+    execute(mutations: Uint16Array, startPosition: number, target: RenderableElement): number {
+      if (target) {
+        const canvas = target as HTMLCanvasElement;
+        const offscreen = canvas.transferControlToOffscreen();
+        workerContext.messageToWorker(
+          {
+            [TransferrableKeys.type]: MessageType.OFFSCREEN_CANVAS_INSTANCE,
+            [TransferrableKeys.target]: [target._index_],
+            [TransferrableKeys.data]: offscreen, // Object, an OffscreenCanvas
+          },
+          [offscreen],
+        );
+      } else {
+        console.error(`getNode() yields null – ${target}`);
+      }
+
+      return startPosition + OffscreenCanvasMutationIndex.End;
+    },
+    print(mutations: Uint16Array, startPosition: number, target?: RenderableElement | null): Object {
+
+      return {
+        type: 'OFFSCREEN_CANVAS_INSTANCE',
+        target,
+      };
+    },
+  };
+}
diff --git a/src/main-thread/commands/offscreen-polyfill-calls.ts b/src/main-thread/commands/offscreen-polyfill-calls.ts
@@ -0,0 +1,102 @@
+import { CommandExecutor } from './interface';
+import { OffscreenContextPolyfillMutationIndex } from '../../transfer/TransferrableMutation';
+import { NumericBoolean } from '../../utils';
+import { Strings } from '../strings';
+
+export function OffscreenPolyfillCallProcessor(strings: Strings): CommandExecutor {
+  return {
+    execute(mutations: Uint16Array, startPosition: number, target: RenderableElement): number {
+      const float32Needed = mutations[startPosition + OffscreenContextPolyfillMutationIndex.Float32Needed] === NumericBoolean.TRUE;
+      const argCount = mutations[startPosition + OffscreenContextPolyfillMutationIndex.ArgumentCount];
+      const methodCalled = strings.get(mutations[startPosition + OffscreenContextPolyfillMutationIndex.MethodCalled]);
+      const isSetter = mutations[startPosition + OffscreenContextPolyfillMutationIndex.IsSetter] === NumericBoolean.TRUE;
+      const stringArgIndex = mutations[startPosition + OffscreenContextPolyfillMutationIndex.StringArgIndex];
+
+      const argsStart = startPosition + OffscreenContextPolyfillMutationIndex.Args;
+      let argsTypedArray: Uint16Array | Float32Array;
+      let argEnd = argCount;
+
+      if (float32Needed) {
+        argEnd *= 2;
+        argsTypedArray = new Float32Array(mutations.slice(argsStart, argsStart + argEnd).buffer);
+      } else {
+        argsTypedArray = mutations.slice(argsStart, argsStart + argEnd);
+      }
+
+      const mainContext = (target as HTMLCanvasElement).getContext('2d');
+      let args = [] as any[];
+
+      if (argCount > 0) {
+        argsTypedArray.forEach((arg: any, i: number) => {
+          if (stringArgIndex - 1 === i) {
+            args.push(strings.get(arg));
+          } else {
+            args.push(arg);
+          }
+        });
+
+        // setLineDash has a single argument: number[]
+        // values from the array argument are transferred independently, so we must do this
+        if (methodCalled === 'setLineDash') {
+          args = [args];
+        }
+      }
+
+      if (isSetter) {
+        (mainContext as any)[methodCalled] = args[0];
+      } else {
+        (mainContext as any)[methodCalled](...args);
+      }
+
+      return startPosition + OffscreenContextPolyfillMutationIndex.End + argEnd;
+    },
+    print(mutations: Uint16Array, startPosition: number, target?: RenderableElement | null): Object {
+      const float32Needed = mutations[startPosition + OffscreenContextPolyfillMutationIndex.Float32Needed] === NumericBoolean.TRUE;
+      const argCount = mutations[startPosition + OffscreenContextPolyfillMutationIndex.ArgumentCount];
+      const methodCalled = strings.get(mutations[startPosition + OffscreenContextPolyfillMutationIndex.MethodCalled]);
+      const isSetter = mutations[startPosition + OffscreenContextPolyfillMutationIndex.IsSetter] === NumericBoolean.TRUE;
+      const stringArgIndex = mutations[startPosition + OffscreenContextPolyfillMutationIndex.StringArgIndex];
+
+      const argsStart = startPosition + OffscreenContextPolyfillMutationIndex.Args;
+      let argsTypedArray: Uint16Array | Float32Array;
+      let argEnd = argCount;
+
+      if (float32Needed) {
+        argEnd *= 2;
+        argsTypedArray = new Float32Array(mutations.slice(argsStart, argsStart + argEnd).buffer);
+      } else {
+        argsTypedArray = mutations.slice(argsStart, argsStart + argEnd);
+      }
+
+      let args = [] as any[];
+
+      if (argCount > 0) {
+        argsTypedArray.forEach((arg: any, i: number) => {
+          if (stringArgIndex - 1 === i) {
+            args.push(strings.get(arg));
+          } else {
+            args.push(arg);
+          }
+        });
+
+        // setLineDash has a single argument: number[]
+        // values from the array argument are transferred independently, so we must do this
+        if (methodCalled === 'setLineDash') {
+          args = [args];
+        }
+      }
+
+      return {
+        type: 'OFFSCREEN_POLYFILL',
+        target,
+        Float32Needed: float32Needed,
+        ArgumentCount: argCount,
+        MethodCalled: methodCalled,
+        IsSetter: isSetter,
+        StringArgIndex: stringArgIndex,
+        Args: args,
+        End: startPosition + OffscreenContextPolyfillMutationIndex.End + argEnd,
+      };
+    },
+  };
+}
diff --git a/src/main-thread/install.ts b/src/main-thread/install.ts
@@ -59,6 +59,7 @@ export function install(fetchPromise: Promise<[string, string]>, baseElement: HT
         if (!ALLOWABLE_MESSAGE_TYPES.includes(data[TransferrableKeys.type])) {
           return;
         }
+
         mutatorContext.mutate(
           (data as MutationFromWorker)[TransferrableKeys.phase],
           (data as MutationFromWorker)[TransferrableKeys.nodes],