File size: 3,477 Bytes
b82e8b8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
export class LayeredCanvas {
constructor(c) {
console.log("initializeLayeredCanvas");
this.canvas = c;
this.context = canvas.getContext('2d');
this.canvas.addEventListener('mousedown', this.handleMouseDown.bind(this));
this.canvas.addEventListener('mousemove', this.handleMouseMove.bind(this));
this.canvas.addEventListener('mouseup', this.handleMouseUp.bind(this));
this.canvas.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
this.layers = [];
}
cleanup() {
this.canvas.removeEventListener('mousedown', this.handleMouseDown.bind(this));
this.canvas.removeEventListener('mousemove', this.handleMouseMove.bind(this));
this.canvas.removeEventListener('mouseup', this.handleMouseUp.bind(this));
this.canvas.removeEventListener('mouseleave', this.handleMouseLeave.bind(this));
}
getCanvasSize() {
return [this.canvas.width, this.canvas.height];
}
getCanvasPosition(event) {
const rect = this.canvas.getBoundingClientRect();
const x = Math.floor(event.clientX - rect.left);
const y = Math.floor(event.clientY - rect.top);
return [x, y];
}
handleMouseDown(event) {
const p = this.getCanvasPosition(event);
for (let i = this.layers.length - 1; i >= 0; i--) {
const layer = this.layers[i];
if (layer.accepts(p)) {
layer.mouseDown(p);
this.draggingLayer = layer;
this.dragStart = p;
break;
}
}
}
handleMouseMove(event) {
this.mouseCursor = this.getCanvasPosition(event);
if (this.draggingLayer) {
this.draggingLayer.mouseMove(this.getCanvasPosition(event)); // 念のため別の実体
}
this.render();
}
handleMouseUp(event) {
if (this.draggingLayer) {
this.draggingLayer.mouseUp(this.getCanvasPosition(event));
this.draggingLayer = null;
}
}
handleMouseLeave(event) {
this.mouseCursor = [-1,-1];
if (this.draggingLayer) {
this.handleMouseUp(event);
}
}
render() {
for (let i = 0; i < this.layers.length; i++) {
const layer = this.layers[i];
layer.render(this.canvas, this.context);
}
}
redraw() {
this.render();
}
addLayer(layer) {
this.layers.push(layer);
}
}
let mouseSequence = { // mixin
mouseDown(p) {
this.mouseHandler = this.mouse(p);
},
mouseMove(p) {
if (this.mouseHandler) {
this.mouseHandler.next(p);
}
},
mouseUp(p) {
if (this.mouseHandler) {
this.mouseHandler.next(null);
this.mouseHandler = null;
}
},
/*
sample mouse handler
*mouse(p) {
while (p = yield) {
console.log("mouse", p);
}
}
*/
};
export function sequentializeMouse(layerClass) {
layerClass.mouseDown = mouseSequence.mouseDown;
layerClass.mouseMove = mouseSequence.mouseMove;
layerClass.mouseUp = mouseSequence.mouseUp;
}
export class Layer {
constructor() {}
reserveRender() { renderReserved = true; }
accepts(point) { return false; }
mouseDown(point) {}
mouseMove(point) {}
mouseUp(point) {}
render(canvas, ctx) {}
} |