cbvirtua 1.0.41 → 1.0.43

package/canvas-event-system/build/canvas-event-system/shapes/Rect.js

@@ -0,0 +1,33 @@
+import { idToRgba } from '../helpers';
+import Base from './Base';
+export default class Rect extends Base {
+    props;
+    constructor(props) {
+        super();
+        this.props = props;
+        this.props.fillColor = this.props.fillColor || '#fff';
+        this.props.strokeColor = this.props.strokeColor || '#000';
+        this.props.strokeWidth = this.props.strokeWidth || 1;
+    }
+    draw(ctx, osCtx) {
+        const { x, y, width, height, strokeColor, strokeWidth, fillColor } = this.props;
+        ctx.save();
+        ctx.beginPath();
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = strokeWidth;
+        ctx.fillStyle = fillColor;
+        ctx.rect(x, y, width, height);
+        ctx.fill();
+        ctx.stroke();
+        ctx.restore();
+        const [r, g, b, a] = idToRgba(this.id);
+        osCtx.save();
+        osCtx.beginPath();
+        osCtx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
+        osCtx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
+        osCtx.rect(x, y, width, height);
+        osCtx.fill();
+        osCtx.stroke();
+        osCtx.restore();
+    }
+}

package/canvas-event-system/build/canvas-event-system/shapes/index.d.ts

@@ -0,0 +1,4 @@
+import Rect from './Rect';
+import Circle from './Circle';
+export * from './types';
+export { Rect, Circle };

package/canvas-event-system/build/canvas-event-system/shapes/index.js

@@ -0,0 +1,4 @@
+import Rect from './Rect';
+import Circle from './Circle';
+export * from './types';
+export { Rect, Circle };

package/canvas-event-system/build/canvas-event-system/shapes/types.d.ts

@@ -0,0 +1,19 @@
+export interface Shape {
+    draw(ctx: CanvasRenderingContext2D, osCtx: OffscreenCanvasRenderingContext2D): void;
+    on(name: string, listener: Listener): void;
+    getListeners(): {
+        [name: string]: Listener[];
+    };
+    getId(): string;
+}
+export interface Listener {
+    (evt: MouseEvent): void;
+}
+export declare enum EventNames {
+    click = "click",
+    mousedown = "mousedown",
+    mousemove = "mousemove",
+    mouseup = "mouseup",
+    mouseenter = "mouseenter",
+    mouseleave = "mouseleave"
+}

package/canvas-event-system/build/canvas-event-system/shapes/types.js

@@ -0,0 +1,9 @@
+export var EventNames;
+(function (EventNames) {
+    EventNames["click"] = "click";
+    EventNames["mousedown"] = "mousedown";
+    EventNames["mousemove"] = "mousemove";
+    EventNames["mouseup"] = "mouseup";
+    EventNames["mouseenter"] = "mouseenter";
+    EventNames["mouseleave"] = "mouseleave";
+})(EventNames || (EventNames = {}));

package/canvas-event-system/build/index.d.ts

@@ -0,0 +1 @@
+export {};

package/canvas-event-system/build/index.js

@@ -0,0 +1,24 @@
+import { Stage, Rect, Circle, EventNames } from './canvas-event-system';
+const canvas = document.querySelector('#canvas');
+const stage = new Stage(canvas);
+const rect = new Rect({
+    x: 50,
+    y: 50,
+    width: 250,
+    height: 175,
+    fillColor: 'green',
+});
+const circle = new Circle({
+    x: 200,
+    y: 200,
+    radius: 100,
+    fillColor: 'red',
+});
+rect.on(EventNames.mousedown, () => console.log('rect mousedown'));
+rect.on(EventNames.mouseup, () => console.log('rect mouseup'));
+rect.on(EventNames.mouseenter, () => console.log('rect mouseenter'));
+rect.on(EventNames.click, () => console.log('rect click'));
+circle.on(EventNames.click, () => console.log('circle click!!'));
+circle.on(EventNames.mouseleave, () => console.log('circle mouseleave!'));
+stage.add(rect);
+stage.add(circle);