@cratis/components 0.1.18 → 0.1.19

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

@@ -0,0 +1,403 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var PIXI = require('pixi.js');
+var elementSprites = require('../engine/elementSprites.js');
+var connectorGraphics = require('../engine/connectorGraphics.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var PIXI__namespace = /*#__PURE__*/_interopNamespaceDefault(PIXI);
+
+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 = React.useRef(null);
+    const canvasRef = React.useRef(null);
+    const appRef = React.useRef(null);
+    const worldRef = React.useRef(null);
+    const elementsLayerRef = React.useRef(null);
+    const connectorsLayerRef = React.useRef(null);
+    const spritesRef = React.useRef(new Map());
+    const connectorsRef = React.useRef(new Map());
+    const [pixiReady, setPixiReady] = React.useState(false);
+    const draggingElementRef = React.useRef(null);
+    const connectingFromRef = React.useRef(null);
+    const tempConnectorLineRef = React.useRef(null);
+    const zoomRef = React.useRef(zoom);
+    const panRef = React.useRef(pan);
+    const selectedToolRef = React.useRef(selectedTool);
+    const stateRef = React.useRef(state);
+    const onZoomChangeRef = React.useRef(onZoomChange);
+    const onPanChangeRef = React.useRef(onPanChange);
+    const onAddElementRef = React.useRef(onAddElement);
+    const onUpdateElementRef = React.useRef(onUpdateElement);
+    const onAddConnectorRef = React.useRef(onAddConnector);
+    const onSelectElementRef = React.useRef(onSelectElement);
+    React.useEffect(() => { zoomRef.current = zoom; }, [zoom]);
+    React.useEffect(() => { panRef.current = pan; }, [pan]);
+    React.useEffect(() => { selectedToolRef.current = selectedTool; }, [selectedTool]);
+    React.useEffect(() => { stateRef.current = state; }, [state]);
+    React.useEffect(() => { onZoomChangeRef.current = onZoomChange; }, [onZoomChange]);
+    React.useEffect(() => { onPanChangeRef.current = onPanChange; }, [onPanChange]);
+    React.useEffect(() => { onAddElementRef.current = onAddElement; }, [onAddElement]);
+    React.useEffect(() => { onUpdateElementRef.current = onUpdateElement; }, [onUpdateElement]);
+    React.useEffect(() => { onAddConnectorRef.current = onAddConnector; }, [onAddConnector]);
+    React.useEffect(() => { onSelectElementRef.current = onSelectElement; }, [onSelectElement]);
+    const screenToWorld = React.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 = React.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 = React.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 = React.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 = React.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 = React.useCallback(() => {
+        draggingElementRef.current = null;
+        if (tempConnectorLineRef.current) {
+            tempConnectorLineRef.current.destroy();
+            tempConnectorLineRef.current = null;
+        }
+        connectingFromRef.current = null;
+    }, []);
+    const handleDragOver = React.useCallback((e) => {
+        if (e.dataTransfer?.types.includes('application/x-event-modeling-tool')) {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+        }
+    }, []);
+    const handleDrop = React.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 = React.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 = React.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__namespace.Graphics();
+            worldRef.current.addChild(line);
+            tempConnectorLineRef.current = line;
+        }
+    }, [getEdgePosition]);
+    const handleEdgePointerUp = React.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 = React.useCallback((id) => {
+        onSelectConnector(id);
+        onSelectElement(undefined);
+    }, [onSelectConnector, onSelectElement]);
+    React.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__namespace.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__namespace.Container();
+            worldRef.current = world;
+            app.stage.addChild(world);
+            const connectorsLayer = new PIXI__namespace.Container();
+            connectorsLayerRef.current = connectorsLayer;
+            world.addChild(connectorsLayer);
+            const elementsLayer = new PIXI__namespace.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]);
+    React.useEffect(() => {
+        if (!pixiReady || !worldRef.current)
+            return;
+        worldRef.current.position.set(pan.x, pan.y);
+        worldRef.current.scale.set(zoom);
+    }, [pixiReady, zoom, pan]);
+    React.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) {
+                elementSprites.updateElementSprite(existing, elementData);
+            }
+            else {
+                console.log('Creating sprite for', elementData.id, 'at', elementData.position.x, elementData.position.y);
+                const sprite = elementSprites.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', () => elementSprites.showEdgePoints(sprite));
+                sprite.container.on('pointerout', () => {
+                    if (!connectingFromRef.current || connectingFromRef.current.elementId !== elementData.id) {
+                        elementSprites.hideEdgePoints(sprite);
+                    }
+                });
+            }
+        });
+    }, [pixiReady, state.elements, handleElementPointerDown, handleEdgePointerDown, handleEdgePointerUp]);
+    const getElementsMapRef = React.useRef(() => new Map());
+    React.useEffect(() => {
+        getElementsMapRef.current = () => new Map(stateRef.current.elements.map(el => [el.id, el]));
+    }, []);
+    React.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;
+                connectorGraphics.updateConnectorGraphics(existing, elementsMap);
+            }
+            else {
+                const connGraphics = connectorGraphics.createConnectorGraphics(connector, getElementsMapRef.current, handleConnectorClick);
+                connectorsRef.current.set(connector.id, connGraphics);
+                connectorsLayerRef.current.addChild(connGraphics.graphics);
+            }
+        });
+    }, [pixiReady, state.connectors, state.elements, handleConnectorClick]);
+    React.useEffect(() => {
+        if (!pixiReady)
+            return;
+        spritesRef.current.forEach((sprite, id) => {
+            elementSprites.setElementSelected(sprite, id === state.selectedElementId);
+        });
+    }, [pixiReady, state.selectedElementId]);
+    return jsxRuntime.jsx("div", { ref: containerRef, className: "event-modeling-canvas-container" });
+};
+
+exports.Canvas = Canvas;
+//# sourceMappingURL=Canvas.js.map

package/dist/cjs/EventModeling/components/Canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Canvas.js","sources":["../../../../EventModeling/components/Canvas.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport * as PIXI from 'pixi.js';\nimport { EventModelingState, ElementType, ElementData, Connector, EdgeSide } from '../types';\nimport { createElementSprite, updateElementSprite, showEdgePoints, hideEdgePoints, setElementSelected, ElementSprite } from '../engine/elementSprites';\nimport { createConnectorGraphics, updateConnectorGraphics, ConnectorGraphics } from '../engine/connectorGraphics';\n\nexport interface CanvasProps {\n    state: EventModelingState;\n    selectedTool: ElementType | 'select';\n    zoom: number;\n    pan: { x: number; y: number };\n    onZoomChange: (zoom: number) => void;\n    onPanChange: (pan: { x: number; y: number }) => void;\n    onAddElement: (type: ElementType, x: number, y: number) => void;\n    onUpdateElement: (id: string, updates: Partial<ElementData>) => void;\n    onAddConnector: (connector: Connector) => void;\n    onSelectElement: (id: string | undefined) => void;\n    onSelectConnector: (id: string | undefined) => void;\n}\n\n// Helper to get background color from CSS custom properties\nfunction getComputedBackgroundColor(): number {\n    const style = getComputedStyle(document.documentElement);\n    const bgColorStr = style.getPropertyValue('--surface-ground').trim() || '#18181b'; // zinc-900 as fallback\n    \n    // Convert hex color string to number\n    return parseInt(bgColorStr.replace('#', ''), 16);\n}\n\nexport const Canvas: React.FC<CanvasProps> = ({\n    state,\n    selectedTool,\n    zoom,\n    pan,\n    onZoomChange,\n    onPanChange,\n    onAddElement,\n    onUpdateElement,\n    onAddConnector,\n    onSelectElement,\n    onSelectConnector,\n}) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const canvasRef = useRef<HTMLCanvasElement | null>(null);\n    const appRef = useRef<PIXI.Application | null>(null);\n    const worldRef = useRef<PIXI.Container | null>(null);\n    const elementsLayerRef = useRef<PIXI.Container | null>(null);\n    const connectorsLayerRef = useRef<PIXI.Container | null>(null);\n    \n    const spritesRef = useRef<Map<string, ElementSprite>>(new Map());\n    const connectorsRef = useRef<Map<string, ConnectorGraphics>>(new Map());\n    const [pixiReady, setPixiReady] = useState(false);\n    \n    // Interaction state\n    const draggingElementRef = useRef<{ id: string; startX: number; startY: number; elementStartX: number; elementStartY: number } | null>(null);\n    const connectingFromRef = useRef<{ elementId: string; side: EdgeSide; startX: number; startY: number } | null>(null);\n    const tempConnectorLineRef = useRef<PIXI.Graphics | null>(null);\n    \n    // Refs to hold current values for event handlers (avoiding stale closures)\n    const zoomRef = useRef(zoom);\n    const panRef = useRef(pan);\n    const selectedToolRef = useRef(selectedTool);\n    const stateRef = useRef(state);\n    const onZoomChangeRef = useRef(onZoomChange);\n    const onPanChangeRef = useRef(onPanChange);\n    const onAddElementRef = useRef(onAddElement);\n    const onUpdateElementRef = useRef(onUpdateElement);\n    const onAddConnectorRef = useRef(onAddConnector);\n    const onSelectElementRef = useRef(onSelectElement);\n    \n    // Keep refs in sync with props\n    useEffect(() => { zoomRef.current = zoom; }, [zoom]);\n    useEffect(() => { panRef.current = pan; }, [pan]);\n    useEffect(() => { selectedToolRef.current = selectedTool; }, [selectedTool]);\n    useEffect(() => { stateRef.current = state; }, [state]);\n    useEffect(() => { onZoomChangeRef.current = onZoomChange; }, [onZoomChange]);\n    useEffect(() => { onPanChangeRef.current = onPanChange; }, [onPanChange]);\n    useEffect(() => { onAddElementRef.current = onAddElement; }, [onAddElement]);\n    useEffect(() => { onUpdateElementRef.current = onUpdateElement; }, [onUpdateElement]);\n    useEffect(() => { onAddConnectorRef.current = onAddConnector; }, [onAddConnector]);\n    useEffect(() => { onSelectElementRef.current = onSelectElement; }, [onSelectElement]);\n\n    // Convert screen coordinates to world coordinates\n    const screenToWorld = useCallback((screenX: number, screenY: number) => {\n        const rect = containerRef.current?.getBoundingClientRect();\n        if (!rect) return { x: 0, y: 0 };\n        const x = (screenX - rect.left - panRef.current.x) / zoomRef.current;\n        const y = (screenY - rect.top - panRef.current.y) / zoomRef.current;\n        return { x, y };\n    }, []);\n\n    // Helper to get edge position in world coordinates\n    const getEdgePosition = useCallback((element: ElementData, side: EdgeSide) => {\n        const { position, size } = element;\n        switch (side) {\n            case 'top': return { x: position.x + size.width / 2, y: position.y };\n            case 'right': return { x: position.x + size.width, y: position.y + size.height / 2 };\n            case 'bottom': return { x: position.x + size.width / 2, y: position.y + size.height };\n            case 'left': return { x: position.x, y: position.y + size.height / 2 };\n        }\n    }, []);\n\n    // Handle wheel events - trackpad natural scrolling for pan, pinch for zoom\n    const handleWheel = useCallback((e: WheelEvent) => {\n        e.preventDefault();\n        if (!containerRef.current) return;\n        \n        const rect = containerRef.current.getBoundingClientRect();\n        const mouseX = e.clientX - rect.left;\n        const mouseY = e.clientY - rect.top;\n        \n        const currentZoom = zoomRef.current;\n        const currentPan = panRef.current;\n        \n        // Pinch-to-zoom (ctrlKey is true for pinch gestures on trackpad)\n        if (e.ctrlKey) {\n            // Use smoother zoom calculation based on actual deltaY\n            // Trackpad pinch typically gives small deltaY values (-2 to 2)\n            // This creates a more proportional zoom response\n            const zoomIntensity = 0.008; // Adjust for smoother/faster zoom\n            const delta = Math.exp(-e.deltaY * zoomIntensity);\n            const newZoom = Math.max(0.1, Math.min(5, currentZoom * delta));\n            \n            // Keep the point under cursor stationary\n            const worldX = (mouseX - currentPan.x) / currentZoom;\n            const worldY = (mouseY - currentPan.y) / currentZoom;\n            const newPanX = mouseX - worldX * newZoom;\n            const newPanY = mouseY - worldY * newZoom;\n            \n            onZoomChangeRef.current(newZoom);\n            onPanChangeRef.current({ x: newPanX, y: newPanY });\n        } else {\n            // Two-finger scroll = pan (natural scrolling direction)\n            const newPan = {\n                x: currentPan.x - e.deltaX,\n                y: currentPan.y - e.deltaY,\n            };\n            onPanChangeRef.current(newPan);\n        }\n    }, []);\n\n    // Handle pointer down on canvas background - add element if tool selected\n    const handleCanvasPointerDown = useCallback((e: PointerEvent) => {\n        if (!containerRef.current) return;\n        \n        const tool = selectedToolRef.current;\n        \n        // If using a creation tool, add element at click position\n        if (tool !== 'select') {\n            const worldPos = screenToWorld(e.clientX, e.clientY);\n            onAddElementRef.current(tool, worldPos.x, worldPos.y);\n        }\n    }, [screenToWorld]);\n\n    // Handle pointer move for dragging elements or drawing connectors\n    const handlePointerMove = useCallback((e: PointerEvent) => {\n        // Handle element dragging\n        if (draggingElementRef.current) {\n            const { id, startX, startY, elementStartX, elementStartY } = draggingElementRef.current;\n            const dx = (e.clientX - startX) / zoomRef.current;\n            const dy = (e.clientY - startY) / zoomRef.current;\n            onUpdateElementRef.current(id, {\n                position: { x: elementStartX + dx, y: elementStartY + dy }\n            });\n        }\n        \n        // Handle connector drawing preview line\n        if (connectingFromRef.current && tempConnectorLineRef.current) {\n            const worldPos = screenToWorld(e.clientX, e.clientY);\n            const line = tempConnectorLineRef.current;\n            line.clear();\n            line.moveTo(connectingFromRef.current.startX, connectingFromRef.current.startY);\n            line.lineTo(worldPos.x, worldPos.y);\n            line.stroke({ color: 0x6b7280, width: 2 });\n        }\n    }, [screenToWorld]);\n\n    // Handle pointer up - finish dragging or cancel connecting\n    const handlePointerUp = useCallback(() => {\n        draggingElementRef.current = null;\n        \n        // Clean up temp connector line if connection wasn't completed\n        if (tempConnectorLineRef.current) {\n            tempConnectorLineRef.current.destroy();\n            tempConnectorLineRef.current = null;\n        }\n        connectingFromRef.current = null;\n    }, []);\n\n    // Handle drag over for toolbox drag-and-drop\n    const handleDragOver = useCallback((e: DragEvent) => {\n        if (e.dataTransfer?.types.includes('application/x-event-modeling-tool')) {\n            e.preventDefault();\n            e.dataTransfer.dropEffect = 'copy';\n        }\n    }, []);\n\n    // Handle drop for toolbox drag-and-drop\n    const handleDrop = useCallback((e: DragEvent) => {\n        e.preventDefault();\n        const tool = e.dataTransfer?.getData('application/x-event-modeling-tool') as ElementType;\n        if (tool && containerRef.current) {\n            const worldPos = screenToWorld(e.clientX, e.clientY);\n            onAddElementRef.current(tool, worldPos.x, worldPos.y);\n        }\n    }, [screenToWorld]);\n\n    // Element pointer down - start dragging\n    const handleElementPointerDown = useCallback((id: string, e: PIXI.FederatedPointerEvent) => {\n        e.stopPropagation();\n        \n        const element = stateRef.current.elements.find(el => el.id === id);\n        if (!element) return;\n        \n        // Start dragging\n        draggingElementRef.current = {\n            id,\n            startX: e.globalX,\n            startY: e.globalY,\n            elementStartX: element.position.x,\n            elementStartY: element.position.y,\n        };\n        \n        // Select element\n        onSelectElementRef.current(id);\n    }, []);\n\n    // Edge point pointer down - start connecting\n    const handleEdgePointerDown = useCallback((elementId: string, side: EdgeSide, e: PIXI.FederatedPointerEvent) => {\n        e.stopPropagation();\n        \n        const element = stateRef.current.elements.find(el => el.id === elementId);\n        if (!element) return;\n        \n        // Calculate edge position in world coordinates\n        const edgePos = getEdgePosition(element, side);\n        \n        // Start connecting - create temp line\n        connectingFromRef.current = {\n            elementId,\n            side,\n            startX: edgePos.x,\n            startY: edgePos.y,\n        };\n        \n        // Create temporary connector line\n        if (worldRef.current) {\n            const line = new PIXI.Graphics();\n            worldRef.current.addChild(line);\n            tempConnectorLineRef.current = line;\n        }\n    }, [getEdgePosition]);\n\n    // Edge point pointer up - complete connection\n    const handleEdgePointerUp = useCallback((elementId: string, side: EdgeSide, e: PIXI.FederatedPointerEvent) => {\n        e.stopPropagation();\n        \n        if (connectingFromRef.current && connectingFromRef.current.elementId !== elementId) {\n            // Complete the connection\n            const connector: Connector = {\n                id: `conn-${Date.now()}`,\n                from: { elementId: connectingFromRef.current.elementId, side: connectingFromRef.current.side },\n                to: { elementId, side },\n            };\n            onAddConnectorRef.current(connector);\n        }\n        \n        // Clean up\n        if (tempConnectorLineRef.current) {\n            tempConnectorLineRef.current.destroy();\n            tempConnectorLineRef.current = null;\n        }\n        connectingFromRef.current = null;\n    }, []);\n\n    const handleConnectorClick = useCallback((id: string) => {\n        onSelectConnector(id);\n        onSelectElement(undefined);\n    }, [onSelectConnector, onSelectElement]);\n\n    // Initialize PIXI\n    useEffect(() => {\n        if (!containerRef.current || appRef.current) return;\n\n        let isMounted = true;\n\n        const initPixi = async () => {\n            const container = containerRef.current;\n            if (!container) return;\n            \n            const rect = container.getBoundingClientRect();\n            const width = rect.width > 0 ? rect.width : container.clientWidth || 800;\n            const height = rect.height > 0 ? rect.height : container.clientHeight || 600;\n            \n            const app = new PIXI.Application();\n            \n            // Get background color from CSS variable (dark mode)\n            const bgColor = getComputedBackgroundColor();\n            \n            try {\n                await app.init({\n                    background: bgColor,\n                    antialias: true,\n                    autoDensity: true,\n                    resolution: window.devicePixelRatio || 1,\n                    width,\n                    height,\n                    autoStart: true,\n                });\n                \n                // Ensure ticker is running and rendering (required for PIXI v8)\n                app.ticker.add(() => {\n                    app.renderer.render(app.stage);\n                });\n            } catch (e) {\n                console.error('PIXI init failed:', e);\n                return;\n            }\n\n            if (!isMounted || !containerRef.current) {\n                app.destroy(true, { children: true });\n                return;\n            }\n\n            appRef.current = app;\n\n            const world = new PIXI.Container();\n            worldRef.current = world;\n            app.stage.addChild(world);\n\n            // Connectors layer (below elements)\n            const connectorsLayer = new PIXI.Container();\n            connectorsLayerRef.current = connectorsLayer;\n            world.addChild(connectorsLayer);\n\n            // Elements layer (above connectors)\n            const elementsLayer = new PIXI.Container();\n            elementsLayerRef.current = elementsLayer;\n            world.addChild(elementsLayer);\n\n            const canvasEl = app.canvas as HTMLCanvasElement;\n            \n            if (canvasEl && containerRef.current) {\n                canvasEl.classList.add('event-modeling-canvas');\n                canvasEl.style.touchAction = 'none'; // Prevent browser handling of touch\n                containerRef.current.appendChild(canvasEl);\n                canvasRef.current = canvasEl;\n\n                // Set up event listeners\n                canvasEl.addEventListener('wheel', handleWheel, { passive: false });\n                canvasEl.addEventListener('pointerdown', handleCanvasPointerDown);\n                canvasEl.addEventListener('pointermove', handlePointerMove);\n                canvasEl.addEventListener('pointerup', handlePointerUp);\n                canvasEl.addEventListener('pointerleave', handlePointerUp);\n                \n                // Set up drag-and-drop listeners on the container for toolbox support\n                containerRef.current.addEventListener('dragover', handleDragOver);\n                containerRef.current.addEventListener('drop', handleDrop);\n            }\n\n            setPixiReady(true);\n        };\n\n        initPixi();\n\n        return () => {\n            isMounted = false;\n            if (canvasRef.current) {\n                canvasRef.current.removeEventListener('wheel', handleWheel);\n                canvasRef.current.removeEventListener('pointerdown', handleCanvasPointerDown);\n                canvasRef.current.removeEventListener('pointermove', handlePointerMove);\n                canvasRef.current.removeEventListener('pointerup', handlePointerUp);\n                canvasRef.current.removeEventListener('pointerleave', handlePointerUp);\n            }\n            if (containerRef.current) {\n                containerRef.current.removeEventListener('dragover', handleDragOver);\n                containerRef.current.removeEventListener('drop', handleDrop);\n            }\n            if (appRef.current) {\n                appRef.current.destroy(true, { children: true });\n                appRef.current = null;\n            }\n        };\n    }, [handleWheel, handleCanvasPointerDown, handlePointerMove, handlePointerUp, handleDragOver, handleDrop]);\n\n    // Update world transform when zoom/pan changes\n    useEffect(() => {\n        if (!pixiReady || !worldRef.current) return;\n        worldRef.current.position.set(pan.x, pan.y);\n        worldRef.current.scale.set(zoom);\n    }, [pixiReady, zoom, pan]);\n\n    // Sync elements to PIXI\n    useEffect(() => {\n        console.log('Sync useEffect running', { pixiReady, hasElementsLayer: !!elementsLayerRef.current, elementCount: state.elements.length });\n        if (!pixiReady || !elementsLayerRef.current) {\n            console.log('Sync useEffect early return', { pixiReady, hasElementsLayer: !!elementsLayerRef.current });\n            return;\n        }\n        \n        const elementsMap = new Map(state.elements.map(el => [el.id, el]));\n\n        // Remove deleted elements\n        spritesRef.current.forEach((sprite, id) => {\n            if (!elementsMap.has(id)) {\n                elementsLayerRef.current!.removeChild(sprite.container);\n                sprite.container.destroy({ children: true });\n                spritesRef.current.delete(id);\n            }\n        });\n\n        // Add or update elements\n        state.elements.forEach(elementData => {\n            const existing = spritesRef.current.get(elementData.id);\n            if (existing) {\n                updateElementSprite(existing, elementData);\n            } else {\n                console.log('Creating sprite for', elementData.id, 'at', elementData.position.x, elementData.position.y);\n                const sprite = createElementSprite(\n                    elementData,\n                    // These handlers are no-ops - we handle events globally via the container\n                    Function.prototype as () => void,\n                    Function.prototype as () => void,\n                    Function.prototype as () => void,\n                    Function.prototype as () => void,\n                    Function.prototype as () => void\n                );\n                \n                spritesRef.current.set(elementData.id, sprite);\n                elementsLayerRef.current!.addChild(sprite.container);\n                console.log('Sprite added to layer', { \n                    spritePos: { x: sprite.container.position.x, y: sprite.container.position.y },\n                    layerChildren: elementsLayerRef.current!.children.length,\n                    visible: sprite.container.visible,\n                    alpha: sprite.container.alpha\n                });\n                \n                // Set up proper pointer events on the element\n                sprite.container.eventMode = 'static';\n                sprite.container.cursor = 'grab';\n                \n                sprite.container.on('pointerdown', (e: PIXI.FederatedPointerEvent) => {\n                    handleElementPointerDown(elementData.id, e);\n                });\n                \n                // Set up edge point events for drag-to-connect\n                sprite.edgePoints.forEach((edgePoint, side) => {\n                    edgePoint.eventMode = 'static';\n                    edgePoint.cursor = 'crosshair';\n                    edgePoint.on('pointerdown', (e: PIXI.FederatedPointerEvent) => {\n                        handleEdgePointerDown(elementData.id, side, e);\n                    });\n                    edgePoint.on('pointerup', (e: PIXI.FederatedPointerEvent) => {\n                        handleEdgePointerUp(elementData.id, side, e);\n                    });\n                    // Also listen for global pointer up on edge points to complete connection\n                    edgePoint.on('pointerover', () => {\n                        // Show edge is a valid drop target while connecting\n                        if (connectingFromRef.current && connectingFromRef.current.elementId !== elementData.id) {\n                            edgePoint.alpha = 1;\n                            edgePoint.scale.set(1.5);\n                        }\n                    });\n                    edgePoint.on('pointerout', () => {\n                        edgePoint.scale.set(1);\n                    });\n                });\n\n                // Show edge points on hover\n                sprite.container.on('pointerover', () => showEdgePoints(sprite));\n                sprite.container.on('pointerout', () => {\n                    // Only hide if not actively connecting from this element\n                    if (!connectingFromRef.current || connectingFromRef.current.elementId !== elementData.id) {\n                        hideEdgePoints(sprite);\n                    }\n                });\n            }\n        });\n    }, [pixiReady, state.elements, handleElementPointerDown, handleEdgePointerDown, handleEdgePointerUp]);\n\n    // Create a stable getter function for elements that always returns fresh data\n    const getElementsMapRef = useRef<() => Map<string, ElementData>>(() => new Map());\n    useEffect(() => {\n        getElementsMapRef.current = () => new Map(stateRef.current.elements.map(el => [el.id, el]));\n    }, []);\n\n    // Sync connectors to PIXI\n    useEffect(() => {\n        if (!pixiReady || !connectorsLayerRef.current) return;\n\n        const connectorsMap = new Map(state.connectors.map(conn => [conn.id, conn]));\n        const elementsMap = new Map(state.elements.map(el => [el.id, el]));\n\n        // Remove deleted connectors\n        connectorsRef.current.forEach((connGraphics, id) => {\n            if (!connectorsMap.has(id)) {\n                connectorsLayerRef.current!.removeChild(connGraphics.graphics);\n                connGraphics.graphics.destroy();\n                connectorsRef.current.delete(id);\n            }\n        });\n\n        // Add or update connectors\n        state.connectors.forEach(connector => {\n            const existing = connectorsRef.current.get(connector.id);\n            if (existing) {\n                // Update the connector data and getElements function to always return fresh data\n                existing.connector = connector; // Update to latest connector data with potentially new edge sides\n                existing.getElements = getElementsMapRef.current;\n                updateConnectorGraphics(existing, elementsMap);\n            } else {\n                const connGraphics = createConnectorGraphics(\n                    connector,\n                    getElementsMapRef.current,\n                    handleConnectorClick\n                );\n                connectorsRef.current.set(connector.id, connGraphics);\n                connectorsLayerRef.current!.addChild(connGraphics.graphics);\n            }\n        });\n    }, [pixiReady, state.connectors, state.elements, handleConnectorClick]);\n\n    // Update selection highlight\n    useEffect(() => {\n        if (!pixiReady) return;\n        \n        spritesRef.current.forEach((sprite, id) => {\n            setElementSelected(sprite, id === state.selectedElementId);\n        });\n    }, [pixiReady, state.selectedElementId]);\n\n    return <div ref={containerRef} className=\"event-modeling-canvas-container\" />;\n};\n"],"names":["useRef","useState","useEffect","useCallback","PIXI","updateElementSprite","createElementSprite","showEdgePoints","hideEdgePoints","updateConnectorGraphics","createConnectorGraphics","setElementSelected","_jsx"],"mappings":"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"}

package/dist/cjs/EventModeling/components/CanvasControls.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const CanvasControls = ({ zoom, onZoomIn, onZoomOut, onZoomReset, onFitToView, }) => {
+    return (jsxRuntime.jsxs("div", { className: "event-modeling-controls", children: [jsxRuntime.jsx("button", { className: "event-modeling-control-button", onClick: onZoomIn, title: "Zoom In (+)", children: "+" }), jsxRuntime.jsx("button", { className: "event-modeling-control-button", onClick: onZoomOut, title: "Zoom Out (-)", children: "\u2212" }), jsxRuntime.jsxs("button", { className: "event-modeling-control-button", onClick: onZoomReset, title: "Reset Zoom (0)", children: [Math.round(zoom * 100), "%"] }), jsxRuntime.jsx("button", { className: "event-modeling-control-button", onClick: onFitToView, title: "Fit to View (F)", children: "\u22A1" })] }));
+};
+
+exports.CanvasControls = CanvasControls;
+//# sourceMappingURL=CanvasControls.js.map

package/dist/cjs/EventModeling/components/CanvasControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasControls.js","sources":["../../../../EventModeling/components/CanvasControls.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport React from 'react';\n\nexport interface CanvasControlsProps {\n    zoom: number;\n    onZoomIn: () => void;\n    onZoomOut: () => void;\n    onZoomReset: () => void;\n    onFitToView: () => void;\n}\n\nexport const CanvasControls: React.FC<CanvasControlsProps> = ({\n    zoom,\n    onZoomIn,\n    onZoomOut,\n    onZoomReset,\n    onFitToView,\n}) => {\n    return (\n        <div className=\"event-modeling-controls\">\n            <button\n                className=\"event-modeling-control-button\"\n                onClick={onZoomIn}\n                title=\"Zoom In (+)\"\n            >\n                +\n            </button>\n            <button\n                className=\"event-modeling-control-button\"\n                onClick={onZoomOut}\n                title=\"Zoom Out (-)\"\n            >\n                −\n            </button>\n            <button\n                className=\"event-modeling-control-button\"\n                onClick={onZoomReset}\n                title=\"Reset Zoom (0)\"\n            >\n                {Math.round(zoom * 100)}%\n            </button>\n            <button\n                className=\"event-modeling-control-button\"\n                onClick={onFitToView}\n                title=\"Fit to View (F)\"\n            >\n                ⊡\n            </button>\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAaO,MAAM,cAAc,GAAkC,CAAC,EAC1D,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,WAAW,GACd,KAAI;AACD,IAAA,QACIA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACpCC,cAAA,CAAA,QAAA,EAAA,EACI,SAAS,EAAC,+BAA+B,EACzC,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAC,aAAa,EAAA,QAAA,EAAA,GAAA,EAAA,CAGd,EACTA,cAAA,CAAA,QAAA,EAAA,EACI,SAAS,EAAC,+BAA+B,EACzC,OAAO,EAAE,SAAS,EAClB,KAAK,EAAC,cAAc,EAAA,QAAA,EAAA,QAAA,EAAA,CAGf,EACTD,eAAA,CAAA,QAAA,EAAA,EACI,SAAS,EAAC,+BAA+B,EACzC,OAAO,EAAE,WAAW,EACpB,KAAK,EAAC,gBAAgB,EAAA,QAAA,EAAA,CAErB,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,EAAA,GAAA,CAAA,EAAA,CAClB,EACTC,cAAA,CAAA,QAAA,EAAA,EACI,SAAS,EAAC,+BAA+B,EACzC,OAAO,EAAE,WAAW,EACpB,KAAK,EAAC,iBAAiB,EAAA,QAAA,EAAA,QAAA,EAAA,CAGlB,CAAA,EAAA,CACP;AAEd;;;;"}

package/dist/cjs/EventModeling/components/Toolbox.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const Toolbox = ({ selectedTool, onToolSelect, onDragStart }) => {
+    const handleDragStart = React.useCallback((tool, e) => {
+        e.dataTransfer.setData('application/x-event-modeling-tool', tool);
+        e.dataTransfer.effectAllowed = 'copy';
+        if (onDragStart) {
+            onDragStart(tool, e);
+        }
+    }, [onDragStart]);
+    return (jsxRuntime.jsxs("div", { className: "event-modeling-toolbox", children: [jsxRuntime.jsxs("button", { className: `event-modeling-tool-button select ${selectedTool === 'select' ? 'selected' : ''}`, onClick: () => onToolSelect('select'), title: "Select (V)", children: [jsxRuntime.jsx("div", { className: "event-modeling-tool-icon", children: "\u2B06" }), jsxRuntime.jsx("div", { children: "Select" })] }), jsxRuntime.jsxs("button", { className: `event-modeling-tool-button command ${selectedTool === 'command' ? 'selected' : ''}`, onClick: () => onToolSelect('command'), draggable: true, onDragStart: (e) => handleDragStart('command', e), title: "Command (C) - Click or drag to canvas", children: [jsxRuntime.jsx("div", { className: "event-modeling-tool-icon" }), jsxRuntime.jsx("div", { children: "Command" })] }), jsxRuntime.jsxs("button", { className: `event-modeling-tool-button event ${selectedTool === 'event' ? 'selected' : ''}`, onClick: () => onToolSelect('event'), draggable: true, onDragStart: (e) => handleDragStart('event', e), title: "Event (E) - Click or drag to canvas", children: [jsxRuntime.jsx("div", { className: "event-modeling-tool-icon" }), jsxRuntime.jsx("div", { children: "Event" })] }), jsxRuntime.jsxs("button", { className: `event-modeling-tool-button readmodel ${selectedTool === 'readmodel' ? 'selected' : ''}`, onClick: () => onToolSelect('readmodel'), draggable: true, onDragStart: (e) => handleDragStart('readmodel', e), title: "Read Model (R) - Click or drag to canvas", children: [jsxRuntime.jsx("div", { className: "event-modeling-tool-icon" }), jsxRuntime.jsx("div", { children: "View" })] }), jsxRuntime.jsxs("button", { className: `event-modeling-tool-button process ${selectedTool === 'process' ? 'selected' : ''}`, onClick: () => onToolSelect('process'), draggable: true, onDragStart: (e) => handleDragStart('process', e), title: "Process (P) - Click or drag to canvas", children: [jsxRuntime.jsx("div", { className: "event-modeling-tool-icon", children: jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }), jsxRuntime.jsx("path", { d: "M12 6v6l4 2" })] }) }), jsxRuntime.jsx("div", { children: "Process" })] })] }));
+};
+
+exports.Toolbox = Toolbox;
+//# sourceMappingURL=Toolbox.js.map

package/dist/cjs/EventModeling/components/Toolbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbox.js","sources":["../../../../EventModeling/components/Toolbox.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport React, { useCallback } from 'react';\nimport { ElementType } from '../types';\n\nexport interface ToolboxProps {\n    selectedTool: ElementType | 'select';\n    onToolSelect: (tool: ElementType | 'select') => void;\n    onDragStart?: (tool: ElementType, e: React.DragEvent) => void;\n}\n\nexport const Toolbox: React.FC<ToolboxProps> = ({ selectedTool, onToolSelect, onDragStart }) => {\n    const handleDragStart = useCallback((tool: ElementType, e: React.DragEvent) => {\n        e.dataTransfer.setData('application/x-event-modeling-tool', tool);\n        e.dataTransfer.effectAllowed = 'copy';\n        if (onDragStart) {\n            onDragStart(tool, e);\n        }\n    }, [onDragStart]);\n\n    return (\n        <div className=\"event-modeling-toolbox\">\n            <button\n                className={`event-modeling-tool-button select ${selectedTool === 'select' ? 'selected' : ''}`}\n                onClick={() => onToolSelect('select')}\n                title=\"Select (V)\"\n            >\n                <div className=\"event-modeling-tool-icon\">⬆</div>\n                <div>Select</div>\n            </button>\n            <button\n                className={`event-modeling-tool-button command ${selectedTool === 'command' ? 'selected' : ''}`}\n                onClick={() => onToolSelect('command')}\n                draggable\n                onDragStart={(e) => handleDragStart('command', e)}\n                title=\"Command (C) - Click or drag to canvas\"\n            >\n                <div className=\"event-modeling-tool-icon\"></div>\n                <div>Command</div>\n            </button>\n            <button\n                className={`event-modeling-tool-button event ${selectedTool === 'event' ? 'selected' : ''}`}\n                onClick={() => onToolSelect('event')}\n                draggable\n                onDragStart={(e) => handleDragStart('event', e)}\n                title=\"Event (E) - Click or drag to canvas\"\n            >\n                <div className=\"event-modeling-tool-icon\"></div>\n                <div>Event</div>\n            </button>\n            <button\n                className={`event-modeling-tool-button readmodel ${selectedTool === 'readmodel' ? 'selected' : ''}`}\n                onClick={() => onToolSelect('readmodel')}\n                draggable\n                onDragStart={(e) => handleDragStart('readmodel', e)}\n                title=\"Read Model (R) - Click or drag to canvas\"\n            >\n                <div className=\"event-modeling-tool-icon\"></div>\n                <div>View</div>\n            </button>\n            <button\n                className={`event-modeling-tool-button process ${selectedTool === 'process' ? 'selected' : ''}`}\n                onClick={() => onToolSelect('process')}\n                draggable\n                onDragStart={(e) => handleDragStart('process', e)}\n                title=\"Process (P) - Click or drag to canvas\"\n            >\n                <div className=\"event-modeling-tool-icon\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n                        <path d=\"M12 6v6l4 2\"/>\n                    </svg>\n                </div>\n                <div>Process</div>\n            </button>\n        </div>\n    );\n};\n"],"names":["useCallback","_jsxs","_jsx"],"mappings":"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"}