@cratis/components 0.1.18 → 0.1.19

package/dist/esm/EventModeling/EventModeling.stories.js

@@ -0,0 +1,252 @@
+import { EventModeling } from './EventModeling';
+const meta = {
+    title: 'EventModeling',
+    component: EventModeling,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+export const Empty = {
+    args: {
+        width: '100%',
+        height: '800px',
+    },
+};
+export const SimpleFlow = {
+    args: {
+        width: '100%',
+        height: '800px',
+        initialState: {
+            elements: [
+                {
+                    id: 'cmd-1',
+                    type: 'command',
+                    position: { x: 100, y: 200 },
+                    size: { width: 200, height: 100 },
+                    label: 'Register User',
+                    description: 'userId, email, name',
+                },
+                {
+                    id: 'evt-1',
+                    type: 'event',
+                    position: { x: 400, y: 200 },
+                    size: { width: 200, height: 100 },
+                    label: 'User Registered',
+                    description: 'userId, email, name, timestamp',
+                },
+                {
+                    id: 'view-1',
+                    type: 'readmodel',
+                    position: { x: 700, y: 200 },
+                    size: { width: 200, height: 100 },
+                    label: 'User Profile',
+                    description: 'userId, email, name, status',
+                },
+            ],
+            connectors: [
+                {
+                    id: 'conn-1',
+                    from: { elementId: 'cmd-1', side: 'right' },
+                    to: { elementId: 'evt-1', side: 'left' },
+                },
+                {
+                    id: 'conn-2',
+                    from: { elementId: 'evt-1', side: 'right' },
+                    to: { elementId: 'view-1', side: 'left' },
+                },
+            ],
+        },
+    },
+};
+export const ComplexEventModel = {
+    args: {
+        width: '100%',
+        height: '800px',
+        initialState: {
+            elements: [
+                {
+                    id: 'cmd-1',
+                    type: 'command',
+                    position: { x: 100, y: 100 },
+                    size: { width: 200, height: 100 },
+                    label: 'Register User',
+                    description: 'email, name, password',
+                },
+                {
+                    id: 'evt-1',
+                    type: 'event',
+                    position: { x: 400, y: 100 },
+                    size: { width: 200, height: 100 },
+                    label: 'User Registered',
+                    description: 'userId, email, name',
+                },
+                {
+                    id: 'view-1',
+                    type: 'readmodel',
+                    position: { x: 700, y: 100 },
+                    size: { width: 200, height: 100 },
+                    label: 'User List',
+                    description: 'All active users',
+                },
+                {
+                    id: 'proc-1',
+                    type: 'process',
+                    position: { x: 420, y: 260 },
+                    size: { width: 80, height: 80 },
+                    label: 'Send Email',
+                },
+                {
+                    id: 'cmd-2',
+                    type: 'command',
+                    position: { x: 560, y: 250 },
+                    size: { width: 200, height: 100 },
+                    label: 'Send Verification',
+                    description: 'userId, email, token',
+                },
+                {
+                    id: 'evt-2',
+                    type: 'event',
+                    position: { x: 860, y: 250 },
+                    size: { width: 200, height: 100 },
+                    label: 'Verification Sent',
+                    description: 'userId, sentAt',
+                },
+                {
+                    id: 'cmd-3',
+                    type: 'command',
+                    position: { x: 100, y: 400 },
+                    size: { width: 200, height: 100 },
+                    label: 'Verify Email',
+                    description: 'token',
+                },
+                {
+                    id: 'evt-3',
+                    type: 'event',
+                    position: { x: 400, y: 400 },
+                    size: { width: 200, height: 100 },
+                    label: 'Email Verified',
+                    description: 'userId, verifiedAt',
+                },
+                {
+                    id: 'view-2',
+                    type: 'readmodel',
+                    position: { x: 700, y: 400 },
+                    size: { width: 200, height: 100 },
+                    label: 'User Profile',
+                    description: 'userId, verified: true',
+                },
+            ],
+            connectors: [
+                {
+                    id: 'conn-1',
+                    from: { elementId: 'cmd-1', side: 'right' },
+                    to: { elementId: 'evt-1', side: 'left' },
+                },
+                {
+                    id: 'conn-2',
+                    from: { elementId: 'evt-1', side: 'right' },
+                    to: { elementId: 'view-1', side: 'left' },
+                },
+                {
+                    id: 'conn-3',
+                    from: { elementId: 'evt-1', side: 'bottom' },
+                    to: { elementId: 'proc-1', side: 'top' },
+                },
+                {
+                    id: 'conn-4',
+                    from: { elementId: 'proc-1', side: 'right' },
+                    to: { elementId: 'cmd-2', side: 'left' },
+                },
+                {
+                    id: 'conn-5',
+                    from: { elementId: 'cmd-2', side: 'right' },
+                    to: { elementId: 'evt-2', side: 'left' },
+                },
+                {
+                    id: 'conn-6',
+                    from: { elementId: 'cmd-3', side: 'right' },
+                    to: { elementId: 'evt-3', side: 'left' },
+                },
+                {
+                    id: 'conn-7',
+                    from: { elementId: 'evt-3', side: 'right' },
+                    to: { elementId: 'view-2', side: 'left' },
+                },
+            ],
+        },
+    },
+};
+export const WithProcessAutomation = {
+    args: {
+        width: '100%',
+        height: '800px',
+        initialState: {
+            elements: [
+                {
+                    id: 'evt-1',
+                    type: 'event',
+                    position: { x: 100, y: 150 },
+                    size: { width: 200, height: 100 },
+                    label: 'Order Placed',
+                    description: 'orderId, amount, items',
+                },
+                {
+                    id: 'view-1',
+                    type: 'readmodel',
+                    position: { x: 400, y: 150 },
+                    size: { width: 200, height: 100 },
+                    label: 'Pending Orders',
+                    description: 'Orders awaiting processing',
+                },
+                {
+                    id: 'proc-1',
+                    type: 'process',
+                    position: { x: 660, y: 160 },
+                    size: { width: 80, height: 80 },
+                    label: 'Process',
+                },
+                {
+                    id: 'cmd-1',
+                    type: 'command',
+                    position: { x: 800, y: 150 },
+                    size: { width: 200, height: 100 },
+                    label: 'Process Payment',
+                    description: 'orderId, amount',
+                },
+                {
+                    id: 'evt-2',
+                    type: 'event',
+                    position: { x: 1100, y: 150 },
+                    size: { width: 200, height: 100 },
+                    label: 'Payment Processed',
+                    description: 'orderId, transactionId',
+                },
+            ],
+            connectors: [
+                {
+                    id: 'conn-1',
+                    from: { elementId: 'evt-1', side: 'right' },
+                    to: { elementId: 'view-1', side: 'left' },
+                },
+                {
+                    id: 'conn-2',
+                    from: { elementId: 'view-1', side: 'right' },
+                    to: { elementId: 'proc-1', side: 'left' },
+                },
+                {
+                    id: 'conn-3',
+                    from: { elementId: 'proc-1', side: 'right' },
+                    to: { elementId: 'cmd-1', side: 'left' },
+                },
+                {
+                    id: 'conn-4',
+                    from: { elementId: 'cmd-1', side: 'right' },
+                    to: { elementId: 'evt-2', side: 'left' },
+                },
+            ],
+        },
+    },
+};
+//# sourceMappingURL=EventModeling.stories.js.map

package/dist/esm/EventModeling/EventModeling.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventModeling.stories.js","sourceRoot":"","sources":["../../../EventModeling/EventModeling.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/EventModeling/components/Canvas.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { EventModelingState, ElementType, ElementData, Connector } from '../types';
+export interface CanvasProps {
+    state: EventModelingState;
+    selectedTool: ElementType | 'select';
+    zoom: number;
+    pan: {
+        x: number;
+        y: number;
+    };
+    onZoomChange: (zoom: number) => void;
+    onPanChange: (pan: {
+        x: number;
+        y: number;
+    }) => void;
+    onAddElement: (type: ElementType, x: number, y: number) => void;
+    onUpdateElement: (id: string, updates: Partial<ElementData>) => void;
+    onAddConnector: (connector: Connector) => void;
+    onSelectElement: (id: string | undefined) => void;
+    onSelectConnector: (id: string | undefined) => void;
+}
+export declare const Canvas: React.FC<CanvasProps>;
+//# sourceMappingURL=Canvas.d.ts.map

package/dist/esm/EventModeling/components/Canvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../../EventModeling/components/Canvas.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAY,MAAM,UAAU,CAAC;AAI7F,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,kBAAkB,CAAC;IAC1B,YAAY,EAAE,WAAW,GAAG,QAAQ,CAAC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,CAAC,GAAG,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrD,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACrE,cAAc,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAC/C,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,iBAAiB,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACvD;AAWD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAufxC,CAAC"}

package/dist/esm/EventModeling/components/Canvas.js

@@ -0,0 +1,382 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import * as PIXI from 'pixi.js';
+import { updateElementSprite, createElementSprite, showEdgePoints, hideEdgePoints, setElementSelected } from '../engine/elementSprites.js';
+import { updateConnectorGraphics, createConnectorGraphics } from '../engine/connectorGraphics.js';
+
+function getComputedBackgroundColor() {
+    const style = getComputedStyle(document.documentElement);
+    const bgColorStr = style.getPropertyValue('--surface-ground').trim() || '#18181b';
+    return parseInt(bgColorStr.replace('#', ''), 16);
+}
+const Canvas = ({ state, selectedTool, zoom, pan, onZoomChange, onPanChange, onAddElement, onUpdateElement, onAddConnector, onSelectElement, onSelectConnector, }) => {
+    const containerRef = useRef(null);
+    const canvasRef = useRef(null);
+    const appRef = useRef(null);
+    const worldRef = useRef(null);
+    const elementsLayerRef = useRef(null);
+    const connectorsLayerRef = useRef(null);
+    const spritesRef = useRef(new Map());
+    const connectorsRef = useRef(new Map());
+    const [pixiReady, setPixiReady] = useState(false);
+    const draggingElementRef = useRef(null);
+    const connectingFromRef = useRef(null);
+    const tempConnectorLineRef = useRef(null);
+    const zoomRef = useRef(zoom);
+    const panRef = useRef(pan);
+    const selectedToolRef = useRef(selectedTool);
+    const stateRef = useRef(state);
+    const onZoomChangeRef = useRef(onZoomChange);
+    const onPanChangeRef = useRef(onPanChange);
+    const onAddElementRef = useRef(onAddElement);
+    const onUpdateElementRef = useRef(onUpdateElement);
+    const onAddConnectorRef = useRef(onAddConnector);
+    const onSelectElementRef = useRef(onSelectElement);
+    useEffect(() => { zoomRef.current = zoom; }, [zoom]);
+    useEffect(() => { panRef.current = pan; }, [pan]);
+    useEffect(() => { selectedToolRef.current = selectedTool; }, [selectedTool]);
+    useEffect(() => { stateRef.current = state; }, [state]);
+    useEffect(() => { onZoomChangeRef.current = onZoomChange; }, [onZoomChange]);
+    useEffect(() => { onPanChangeRef.current = onPanChange; }, [onPanChange]);
+    useEffect(() => { onAddElementRef.current = onAddElement; }, [onAddElement]);
+    useEffect(() => { onUpdateElementRef.current = onUpdateElement; }, [onUpdateElement]);
+    useEffect(() => { onAddConnectorRef.current = onAddConnector; }, [onAddConnector]);
+    useEffect(() => { onSelectElementRef.current = onSelectElement; }, [onSelectElement]);
+    const screenToWorld = useCallback((screenX, screenY) => {
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (!rect)
+            return { x: 0, y: 0 };
+        const x = (screenX - rect.left - panRef.current.x) / zoomRef.current;
+        const y = (screenY - rect.top - panRef.current.y) / zoomRef.current;
+        return { x, y };
+    }, []);
+    const getEdgePosition = useCallback((element, side) => {
+        const { position, size } = element;
+        switch (side) {
+            case 'top': return { x: position.x + size.width / 2, y: position.y };
+            case 'right': return { x: position.x + size.width, y: position.y + size.height / 2 };
+            case 'bottom': return { x: position.x + size.width / 2, y: position.y + size.height };
+            case 'left': return { x: position.x, y: position.y + size.height / 2 };
+        }
+    }, []);
+    const handleWheel = useCallback((e) => {
+        e.preventDefault();
+        if (!containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        const currentZoom = zoomRef.current;
+        const currentPan = panRef.current;
+        if (e.ctrlKey) {
+            const zoomIntensity = 0.008;
+            const delta = Math.exp(-e.deltaY * zoomIntensity);
+            const newZoom = Math.max(0.1, Math.min(5, currentZoom * delta));
+            const worldX = (mouseX - currentPan.x) / currentZoom;
+            const worldY = (mouseY - currentPan.y) / currentZoom;
+            const newPanX = mouseX - worldX * newZoom;
+            const newPanY = mouseY - worldY * newZoom;
+            onZoomChangeRef.current(newZoom);
+            onPanChangeRef.current({ x: newPanX, y: newPanY });
+        }
+        else {
+            const newPan = {
+                x: currentPan.x - e.deltaX,
+                y: currentPan.y - e.deltaY,
+            };
+            onPanChangeRef.current(newPan);
+        }
+    }, []);
+    const handleCanvasPointerDown = useCallback((e) => {
+        if (!containerRef.current)
+            return;
+        const tool = selectedToolRef.current;
+        if (tool !== 'select') {
+            const worldPos = screenToWorld(e.clientX, e.clientY);
+            onAddElementRef.current(tool, worldPos.x, worldPos.y);
+        }
+    }, [screenToWorld]);
+    const handlePointerMove = useCallback((e) => {
+        if (draggingElementRef.current) {
+            const { id, startX, startY, elementStartX, elementStartY } = draggingElementRef.current;
+            const dx = (e.clientX - startX) / zoomRef.current;
+            const dy = (e.clientY - startY) / zoomRef.current;
+            onUpdateElementRef.current(id, {
+                position: { x: elementStartX + dx, y: elementStartY + dy }
+            });
+        }
+        if (connectingFromRef.current && tempConnectorLineRef.current) {
+            const worldPos = screenToWorld(e.clientX, e.clientY);
+            const line = tempConnectorLineRef.current;
+            line.clear();
+            line.moveTo(connectingFromRef.current.startX, connectingFromRef.current.startY);
+            line.lineTo(worldPos.x, worldPos.y);
+            line.stroke({ color: 0x6b7280, width: 2 });
+        }
+    }, [screenToWorld]);
+    const handlePointerUp = useCallback(() => {
+        draggingElementRef.current = null;
+        if (tempConnectorLineRef.current) {
+            tempConnectorLineRef.current.destroy();
+            tempConnectorLineRef.current = null;
+        }
+        connectingFromRef.current = null;
+    }, []);
+    const handleDragOver = useCallback((e) => {
+        if (e.dataTransfer?.types.includes('application/x-event-modeling-tool')) {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+        }
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        const tool = e.dataTransfer?.getData('application/x-event-modeling-tool');
+        if (tool && containerRef.current) {
+            const worldPos = screenToWorld(e.clientX, e.clientY);
+            onAddElementRef.current(tool, worldPos.x, worldPos.y);
+        }
+    }, [screenToWorld]);
+    const handleElementPointerDown = useCallback((id, e) => {
+        e.stopPropagation();
+        const element = stateRef.current.elements.find(el => el.id === id);
+        if (!element)
+            return;
+        draggingElementRef.current = {
+            id,
+            startX: e.globalX,
+            startY: e.globalY,
+            elementStartX: element.position.x,
+            elementStartY: element.position.y,
+        };
+        onSelectElementRef.current(id);
+    }, []);
+    const handleEdgePointerDown = useCallback((elementId, side, e) => {
+        e.stopPropagation();
+        const element = stateRef.current.elements.find(el => el.id === elementId);
+        if (!element)
+            return;
+        const edgePos = getEdgePosition(element, side);
+        connectingFromRef.current = {
+            elementId,
+            side,
+            startX: edgePos.x,
+            startY: edgePos.y,
+        };
+        if (worldRef.current) {
+            const line = new PIXI.Graphics();
+            worldRef.current.addChild(line);
+            tempConnectorLineRef.current = line;
+        }
+    }, [getEdgePosition]);
+    const handleEdgePointerUp = useCallback((elementId, side, e) => {
+        e.stopPropagation();
+        if (connectingFromRef.current && connectingFromRef.current.elementId !== elementId) {
+            const connector = {
+                id: `conn-${Date.now()}`,
+                from: { elementId: connectingFromRef.current.elementId, side: connectingFromRef.current.side },
+                to: { elementId, side },
+            };
+            onAddConnectorRef.current(connector);
+        }
+        if (tempConnectorLineRef.current) {
+            tempConnectorLineRef.current.destroy();
+            tempConnectorLineRef.current = null;
+        }
+        connectingFromRef.current = null;
+    }, []);
+    const handleConnectorClick = useCallback((id) => {
+        onSelectConnector(id);
+        onSelectElement(undefined);
+    }, [onSelectConnector, onSelectElement]);
+    useEffect(() => {
+        if (!containerRef.current || appRef.current)
+            return;
+        let isMounted = true;
+        const initPixi = async () => {
+            const container = containerRef.current;
+            if (!container)
+                return;
+            const rect = container.getBoundingClientRect();
+            const width = rect.width > 0 ? rect.width : container.clientWidth || 800;
+            const height = rect.height > 0 ? rect.height : container.clientHeight || 600;
+            const app = new PIXI.Application();
+            const bgColor = getComputedBackgroundColor();
+            try {
+                await app.init({
+                    background: bgColor,
+                    antialias: true,
+                    autoDensity: true,
+                    resolution: window.devicePixelRatio || 1,
+                    width,
+                    height,
+                    autoStart: true,
+                });
+                app.ticker.add(() => {
+                    app.renderer.render(app.stage);
+                });
+            }
+            catch (e) {
+                console.error('PIXI init failed:', e);
+                return;
+            }
+            if (!isMounted || !containerRef.current) {
+                app.destroy(true, { children: true });
+                return;
+            }
+            appRef.current = app;
+            const world = new PIXI.Container();
+            worldRef.current = world;
+            app.stage.addChild(world);
+            const connectorsLayer = new PIXI.Container();
+            connectorsLayerRef.current = connectorsLayer;
+            world.addChild(connectorsLayer);
+            const elementsLayer = new PIXI.Container();
+            elementsLayerRef.current = elementsLayer;
+            world.addChild(elementsLayer);
+            const canvasEl = app.canvas;
+            if (canvasEl && containerRef.current) {
+                canvasEl.classList.add('event-modeling-canvas');
+                canvasEl.style.touchAction = 'none';
+                containerRef.current.appendChild(canvasEl);
+                canvasRef.current = canvasEl;
+                canvasEl.addEventListener('wheel', handleWheel, { passive: false });
+                canvasEl.addEventListener('pointerdown', handleCanvasPointerDown);
+                canvasEl.addEventListener('pointermove', handlePointerMove);
+                canvasEl.addEventListener('pointerup', handlePointerUp);
+                canvasEl.addEventListener('pointerleave', handlePointerUp);
+                containerRef.current.addEventListener('dragover', handleDragOver);
+                containerRef.current.addEventListener('drop', handleDrop);
+            }
+            setPixiReady(true);
+        };
+        initPixi();
+        return () => {
+            isMounted = false;
+            if (canvasRef.current) {
+                canvasRef.current.removeEventListener('wheel', handleWheel);
+                canvasRef.current.removeEventListener('pointerdown', handleCanvasPointerDown);
+                canvasRef.current.removeEventListener('pointermove', handlePointerMove);
+                canvasRef.current.removeEventListener('pointerup', handlePointerUp);
+                canvasRef.current.removeEventListener('pointerleave', handlePointerUp);
+            }
+            if (containerRef.current) {
+                containerRef.current.removeEventListener('dragover', handleDragOver);
+                containerRef.current.removeEventListener('drop', handleDrop);
+            }
+            if (appRef.current) {
+                appRef.current.destroy(true, { children: true });
+                appRef.current = null;
+            }
+        };
+    }, [handleWheel, handleCanvasPointerDown, handlePointerMove, handlePointerUp, handleDragOver, handleDrop]);
+    useEffect(() => {
+        if (!pixiReady || !worldRef.current)
+            return;
+        worldRef.current.position.set(pan.x, pan.y);
+        worldRef.current.scale.set(zoom);
+    }, [pixiReady, zoom, pan]);
+    useEffect(() => {
+        console.log('Sync useEffect running', { pixiReady, hasElementsLayer: !!elementsLayerRef.current, elementCount: state.elements.length });
+        if (!pixiReady || !elementsLayerRef.current) {
+            console.log('Sync useEffect early return', { pixiReady, hasElementsLayer: !!elementsLayerRef.current });
+            return;
+        }
+        const elementsMap = new Map(state.elements.map(el => [el.id, el]));
+        spritesRef.current.forEach((sprite, id) => {
+            if (!elementsMap.has(id)) {
+                elementsLayerRef.current.removeChild(sprite.container);
+                sprite.container.destroy({ children: true });
+                spritesRef.current.delete(id);
+            }
+        });
+        state.elements.forEach(elementData => {
+            const existing = spritesRef.current.get(elementData.id);
+            if (existing) {
+                updateElementSprite(existing, elementData);
+            }
+            else {
+                console.log('Creating sprite for', elementData.id, 'at', elementData.position.x, elementData.position.y);
+                const sprite = createElementSprite(elementData, Function.prototype, Function.prototype, Function.prototype, Function.prototype, Function.prototype);
+                spritesRef.current.set(elementData.id, sprite);
+                elementsLayerRef.current.addChild(sprite.container);
+                console.log('Sprite added to layer', {
+                    spritePos: { x: sprite.container.position.x, y: sprite.container.position.y },
+                    layerChildren: elementsLayerRef.current.children.length,
+                    visible: sprite.container.visible,
+                    alpha: sprite.container.alpha
+                });
+                sprite.container.eventMode = 'static';
+                sprite.container.cursor = 'grab';
+                sprite.container.on('pointerdown', (e) => {
+                    handleElementPointerDown(elementData.id, e);
+                });
+                sprite.edgePoints.forEach((edgePoint, side) => {
+                    edgePoint.eventMode = 'static';
+                    edgePoint.cursor = 'crosshair';
+                    edgePoint.on('pointerdown', (e) => {
+                        handleEdgePointerDown(elementData.id, side, e);
+                    });
+                    edgePoint.on('pointerup', (e) => {
+                        handleEdgePointerUp(elementData.id, side, e);
+                    });
+                    edgePoint.on('pointerover', () => {
+                        if (connectingFromRef.current && connectingFromRef.current.elementId !== elementData.id) {
+                            edgePoint.alpha = 1;
+                            edgePoint.scale.set(1.5);
+                        }
+                    });
+                    edgePoint.on('pointerout', () => {
+                        edgePoint.scale.set(1);
+                    });
+                });
+                sprite.container.on('pointerover', () => showEdgePoints(sprite));
+                sprite.container.on('pointerout', () => {
+                    if (!connectingFromRef.current || connectingFromRef.current.elementId !== elementData.id) {
+                        hideEdgePoints(sprite);
+                    }
+                });
+            }
+        });
+    }, [pixiReady, state.elements, handleElementPointerDown, handleEdgePointerDown, handleEdgePointerUp]);
+    const getElementsMapRef = useRef(() => new Map());
+    useEffect(() => {
+        getElementsMapRef.current = () => new Map(stateRef.current.elements.map(el => [el.id, el]));
+    }, []);
+    useEffect(() => {
+        if (!pixiReady || !connectorsLayerRef.current)
+            return;
+        const connectorsMap = new Map(state.connectors.map(conn => [conn.id, conn]));
+        const elementsMap = new Map(state.elements.map(el => [el.id, el]));
+        connectorsRef.current.forEach((connGraphics, id) => {
+            if (!connectorsMap.has(id)) {
+                connectorsLayerRef.current.removeChild(connGraphics.graphics);
+                connGraphics.graphics.destroy();
+                connectorsRef.current.delete(id);
+            }
+        });
+        state.connectors.forEach(connector => {
+            const existing = connectorsRef.current.get(connector.id);
+            if (existing) {
+                existing.connector = connector;
+                existing.getElements = getElementsMapRef.current;
+                updateConnectorGraphics(existing, elementsMap);
+            }
+            else {
+                const connGraphics = createConnectorGraphics(connector, getElementsMapRef.current, handleConnectorClick);
+                connectorsRef.current.set(connector.id, connGraphics);
+                connectorsLayerRef.current.addChild(connGraphics.graphics);
+            }
+        });
+    }, [pixiReady, state.connectors, state.elements, handleConnectorClick]);
+    useEffect(() => {
+        if (!pixiReady)
+            return;
+        spritesRef.current.forEach((sprite, id) => {
+            setElementSelected(sprite, id === state.selectedElementId);
+        });
+    }, [pixiReady, state.selectedElementId]);
+    return jsx("div", { ref: containerRef, className: "event-modeling-canvas-container" });
+};
+
+export { Canvas };
+//# sourceMappingURL=Canvas.js.map