Skip to content

Commit

Permalink
Merge master
Browse files Browse the repository at this point in the history
  • Loading branch information
delima02 committed Mar 20, 2019
1 parent baec6af commit ca5b033
Show file tree
Hide file tree
Showing 14 changed files with 1,069 additions and 3 deletions.
98 changes: 97 additions & 1 deletion demo/hello-world/hello-world.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,100 @@ btn.addEventListener('click', async () => {

const boundingClientRect = await h1.getBoundingClientRectAsync();
h1.textContent = h1.textContent + JSON.stringify(boundingClientRect);
});

/*
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const context = canvas.getContext('2d');
// Call all methods on a CanvasRenderingContext2D to verify they run fine
context.clearRect(1, 2, 3, 4);
context.fillRect(1, 2, 3, 4);
context.strokeRect(1, 2, 3, 4);
context.fillText("hello", 1, 2);
context.strokeText("hello", 1, 2);
context.measureText("hello");
context.lineWidth = 2;
context.lineCap = "butt";
context.lineJoin = 'bevel';
context.miterLimit = 11;
context.setLineDash([1, 2, 3]);
console.log(context.getLineDash());
context.lineDashOffset = 33;
context.font = 'bold 48px serif';
context.textAlign = "center";
context.textBaseline = "bottom";
context.direction = "rtl";
context.fillStyle = 'blue';
context.strokeStyle = 'red';
console.log(context.createLinearGradient(0, 0, 10, 10));
console.log(context.createRadialGradient(0, 0, 5, 10, 10, 15));
console.log(context.createPattern(new OffscreenCanvas(50, 50), "repeat-y"));
// creating a pattern did not work with 'img' or 'canvas' elements
context.shadowBlur = 5;
context.shadowColor = 'green';
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.beginPath();
context.moveTo(10, 10);
context.lineTo(20, 20);
context.bezierCurveTo(10, 10, 20, 20, 30, 30);
context.quadraticCurveTo(10, 10, 30, 30);
context.arc(15, 15, 5, 0, 6);
context.arcTo(0, 0, 10, 10, 15);
context.ellipse(0, 0, 5, 5, 6, 0, 22);
context.rect(10, 10, 5, 5);
context.closePath();
const path = new Path2D();
context.fill(path);
context.stroke(path);
context.clip(path, "evenodd");
console.log(context.isPointInPath(path, 10, 10, "nonzero"));
console.log(context.isPointInStroke(path, 10, 10));
context.rotate(10);
context.scale(2, 2);
context.translate(10, 10);
context.transform(1, 2, 3, 4, 5, 6);
context.setTransform(6, 5, 4, 3, 2, 1);
context.resetTransform();
context.globalAlpha = 33;
context.globalCompositeOperation = "hello";
const imageData = context.createImageData(50, 50);
console.log(imageData);
console.log(context.createImageData(imageData));
context.putImageData(imageData, 100, 100);
// throws because "source width is 0"
//console.log(context.getImageData());
context.imageSmoothingEnabled = false;
context.imageSmoothingQuality = "high";
context.save();
context.restore();
// undefined for now
// console.log(context.canvas);
context.filter = "supercalifragilisticespialidocious";
*/
const div = document.createElement('div');
document.appendChild(div);
div.innerHTML = '<iframe srcdoc=""></iframe>';

});
41 changes: 41 additions & 0 deletions src/main-thread/commands/offscreen-canvas.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { WorkerContext } from "../worker";
import { TransferrableKeys } from "../../transfer/TransferrableKeys";
import { MessageType } from "../../transfer/Messages";
import { NodeContext } from "../nodes";
import { TransferrableMutationRecord } from "../../transfer/TransferrableRecord";
import { NumericBoolean } from "../../utils";

declare var OffscreenCanvas: any;

export class OffscreenCanvasProcessor {
private nodeContext: NodeContext;
private workerContext: WorkerContext;

constructor(nodeContext: NodeContext, workerContext: WorkerContext) {
this.nodeContext = nodeContext;
this.workerContext = workerContext;
}

process(mutation: TransferrableMutationRecord): void {
const nodeId = mutation[TransferrableKeys.target];
const target = this.nodeContext.getNode(nodeId);

if (!target) {
console.error('getNode() yields a null value. Node id (' + nodeId + ') was not found.');
return;
}

// Probably should find a way to pass in w and h
const offscreenCanvasInstance = new OffscreenCanvas(100, 100);

this.workerContext.messageToWorker({
[TransferrableKeys.type]: MessageType.OFFSCREEN_CANVAS_INSTANCE,
[TransferrableKeys.target]: {
// This is a TransferredNode (index: number, transferred: NumericBoolean)
[TransferrableKeys.index]: target._index_,
[TransferrableKeys.transferred]: NumericBoolean.TRUE,
}, // TransferredNode - canvas element????
[TransferrableKeys.data]: offscreenCanvasInstance, // Object, an OffscreenCanvas
});
}
}
1 change: 1 addition & 0 deletions src/main-thread/debugging.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ const MUTATION_RECORD_TYPE_REVERSE_MAPPING = {
'5': 'GET_BOUNDING_CLIENT_RECT',
'6': 'LONG_TASK_START',
'7': 'LONG_TASK_END',
'8': 'OFFSCREEN_CANVAS_INSTANCE',
};

export class DebuggingContext {
Expand Down
3 changes: 3 additions & 0 deletions src/main-thread/mutator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { TransferrableMutationRecord } from '../transfer/TransferrableRecord';
import { TransferrableKeys } from '../transfer/TransferrableKeys';
import { TransferrableNode } from '../transfer/TransferrableNodes';
import { WorkerContext } from './worker';
import { OffscreenCanvasProcessor } from './commands/offscreen-canvas';

export class MutatorProcessor {
private strings: Strings;
Expand Down Expand Up @@ -61,6 +62,7 @@ export class MutatorProcessor {
const eventSubscriptionProcessor = new EventSubscriptionProcessor(strings, nodeContext, workerContext);
const boundingClientRectProcessor = new BoundingClientRectProcessor(nodeContext, workerContext);
const longTaskProcessor = new LongTaskProcessor(callbacks);
const offscreenCanvasProcessor = new OffscreenCanvasProcessor(nodeContext, workerContext);

this.mutators = {
[MutationRecordType.CHILD_LIST]: this.mutateChildList.bind(this),
Expand All @@ -71,6 +73,7 @@ export class MutatorProcessor {
[MutationRecordType.GET_BOUNDING_CLIENT_RECT]: boundingClientRectProcessor.process.bind(boundingClientRectProcessor),
[MutationRecordType.LONG_TASK_START]: longTaskProcessor.processStart,
[MutationRecordType.LONG_TASK_END]: longTaskProcessor.processEnd,
[MutationRecordType.GET_GOOD_OFFSCREEN_CANVAS]: offscreenCanvasProcessor.process.bind(offscreenCanvasProcessor),
};
}

Expand Down
8 changes: 7 additions & 1 deletion src/transfer/Messages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export const enum MessageType {
// NAVIGATION_PUSH_STATE = 8,
// NAVIGATION_REPLACE_STATE = 9,
// NAVIGATION_POP_STATE = 10,
OFFSCREEN_CANVAS_INSTANCE = 11,
}

export interface MutationFromWorker {
Expand Down Expand Up @@ -69,4 +70,9 @@ export interface LongTaskStartToWorker {
export interface LongTaskEndToWorker {
[TransferrableKeys.type]: MessageType.LONG_TASK_END;
}
export type MessageToWorker = EventToWorker | ValueSyncToWorker | BoundingClientRectToWorker | LongTaskStartToWorker | LongTaskEndToWorker;
export interface OffscreenCanvasToWorker {
[TransferrableKeys.type]: MessageType.OFFSCREEN_CANVAS_INSTANCE;
[TransferrableKeys.target]: TransferredNode;
[TransferrableKeys.data]: Object; // This will be an OffscreenCanvas
}
export type MessageToWorker = EventToWorker | ValueSyncToWorker | BoundingClientRectToWorker | LongTaskStartToWorker | LongTaskEndToWorker | OffscreenCanvasToWorker;
Loading

0 comments on commit ca5b033

Please sign in to comment.