@cratis/components 0.1.18 → 0.1.19

package/dist/cjs/EventModeling/engine/connectorGraphics.js

@@ -0,0 +1,173 @@
+'use strict';
+
+var PIXI = require('pixi.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);
+
+const CONNECTOR_COLOR = 0x64748b;
+const CONNECTOR_HOVER_COLOR = 0x3b82f6;
+const CONNECTOR_WIDTH = 2;
+const CONNECTOR_HOVER_WIDTH = 3;
+function createConnectorGraphics(connector, getElements, onClick) {
+    const graphics = new PIXI__namespace.Graphics();
+    graphics.eventMode = 'static';
+    graphics.cursor = 'pointer';
+    graphics.hitArea = new PIXI__namespace.Rectangle(0, 0, 0, 0);
+    const connectorGraphics = {
+        id: connector.id,
+        graphics,
+        connector,
+        getElements,
+        isHovered: false,
+    };
+    drawConnector(graphics, connector, getElements(), false);
+    graphics.on('click', () => {
+        onClick(connector.id);
+    });
+    graphics.on('pointerover', () => {
+        connectorGraphics.isHovered = true;
+        drawConnector(graphics, connector, connectorGraphics.getElements(), true);
+    });
+    graphics.on('pointerout', () => {
+        connectorGraphics.isHovered = false;
+        drawConnector(graphics, connector, connectorGraphics.getElements(), false);
+    });
+    return connectorGraphics;
+}
+function drawConnector(graphics, connector, elements, isHovered) {
+    const fromElement = elements.get(connector.from.elementId);
+    const toElement = elements.get(connector.to.elementId);
+    if (!fromElement || !toElement) {
+        graphics.clear();
+        return;
+    }
+    const fromPoint = getEdgePosition(fromElement, connector.from.side);
+    const toPoint = getEdgePosition(toElement, connector.to.side);
+    graphics.clear();
+    const controlPointOffset = Math.abs(toPoint.x - fromPoint.x) / 3;
+    let cp1x, cp1y, cp2x, cp2y;
+    if (connector.from.side === 'right' && connector.to.side === 'left') {
+        cp1x = fromPoint.x + controlPointOffset;
+        cp1y = fromPoint.y;
+        cp2x = toPoint.x - controlPointOffset;
+        cp2y = toPoint.y;
+    }
+    else if (connector.from.side === 'bottom' && connector.to.side === 'top') {
+        cp1x = fromPoint.x;
+        cp1y = fromPoint.y + controlPointOffset;
+        cp2x = toPoint.x;
+        cp2y = toPoint.y - controlPointOffset;
+    }
+    else {
+        switch (connector.from.side) {
+            case 'right':
+                cp1x = fromPoint.x + controlPointOffset;
+                cp1y = fromPoint.y;
+                break;
+            case 'left':
+                cp1x = fromPoint.x - controlPointOffset;
+                cp1y = fromPoint.y;
+                break;
+            case 'bottom':
+                cp1x = fromPoint.x;
+                cp1y = fromPoint.y + controlPointOffset;
+                break;
+            case 'top':
+            default:
+                cp1x = fromPoint.x;
+                cp1y = fromPoint.y - controlPointOffset;
+                break;
+        }
+        switch (connector.to.side) {
+            case 'left':
+                cp2x = toPoint.x - controlPointOffset;
+                cp2y = toPoint.y;
+                break;
+            case 'right':
+                cp2x = toPoint.x + controlPointOffset;
+                cp2y = toPoint.y;
+                break;
+            case 'top':
+                cp2x = toPoint.x;
+                cp2y = toPoint.y - controlPointOffset;
+                break;
+            case 'bottom':
+            default:
+                cp2x = toPoint.x;
+                cp2y = toPoint.y + controlPointOffset;
+                break;
+        }
+    }
+    graphics.moveTo(fromPoint.x, fromPoint.y);
+    graphics.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, toPoint.x, toPoint.y);
+    graphics.stroke({
+        color: isHovered ? CONNECTOR_HOVER_COLOR : CONNECTOR_COLOR,
+        width: isHovered ? CONNECTOR_HOVER_WIDTH : CONNECTOR_WIDTH,
+    });
+    drawArrowhead(graphics, fromPoint.x, fromPoint.y, cp1x, cp1y, cp2x, cp2y, toPoint.x, toPoint.y, isHovered);
+    const minX = Math.min(fromPoint.x, toPoint.x) - 10;
+    const minY = Math.min(fromPoint.y, toPoint.y) - 10;
+    const maxX = Math.max(fromPoint.x, toPoint.x) + 10;
+    const maxY = Math.max(fromPoint.y, toPoint.y) + 10;
+    graphics.hitArea = new PIXI__namespace.Rectangle(minX, minY, maxX - minX, maxY - minY);
+}
+function drawArrowhead(graphics, startX, startY, cp1x, cp1y, cp2x, cp2y, endX, endY, isHovered) {
+    const arrowSize = 10;
+    const dx = 3 * (endX - cp2x);
+    const dy = 3 * (endY - cp2y);
+    const length = Math.sqrt(dx * dx + dy * dy);
+    if (length === 0)
+        return;
+    const unitX = dx / length;
+    const unitY = dy / length;
+    const perpX = -unitY;
+    const perpY = unitX;
+    const backX = endX - unitX * arrowSize;
+    const backY = endY - unitY * arrowSize;
+    const left = { x: backX + perpX * (arrowSize / 2), y: backY + perpY * (arrowSize / 2) };
+    const right = { x: backX - perpX * (arrowSize / 2), y: backY - perpY * (arrowSize / 2) };
+    graphics.poly([
+        endX, endY,
+        left.x, left.y,
+        right.x, right.y,
+        endX, endY
+    ]);
+    graphics.fill({ color: isHovered ? CONNECTOR_HOVER_COLOR : CONNECTOR_COLOR });
+}
+function getEdgePosition(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 };
+    }
+}
+function updateConnectorGraphics(connectorGraphics, elements) {
+    drawConnector(connectorGraphics.graphics, connectorGraphics.connector, elements, connectorGraphics.isHovered);
+}
+
+exports.createConnectorGraphics = createConnectorGraphics;
+exports.updateConnectorGraphics = updateConnectorGraphics;
+//# sourceMappingURL=connectorGraphics.js.map

package/dist/cjs/EventModeling/engine/connectorGraphics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connectorGraphics.js","sources":["../../../../EventModeling/engine/connectorGraphics.ts"],"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 * as PIXI from 'pixi.js';\nimport { Connector, ElementData, EdgeSide } from '../types';\n\nexport interface ConnectorGraphics {\n    id: string;\n    graphics: PIXI.Graphics;\n    connector: Connector;\n    getElements: () => Map<string, ElementData>;\n    isHovered: boolean;\n}\n\nconst CONNECTOR_COLOR = 0x64748b;\nconst CONNECTOR_HOVER_COLOR = 0x3b82f6;\nconst CONNECTOR_WIDTH = 2;\nconst CONNECTOR_HOVER_WIDTH = 3;\n\nexport function createConnectorGraphics(\n    connector: Connector,\n    getElements: () => Map<string, ElementData>,\n    onClick: (id: string) => void\n): ConnectorGraphics {\n    const graphics = new PIXI.Graphics();\n    graphics.eventMode = 'static';\n    graphics.cursor = 'pointer';\n    graphics.hitArea = new PIXI.Rectangle(0, 0, 0, 0); // Will be updated\n\n    const connectorGraphics: ConnectorGraphics = {\n        id: connector.id,\n        graphics,\n        connector,\n        getElements,\n        isHovered: false,\n    };\n\n    drawConnector(graphics, connector, getElements(), false);\n\n    graphics.on('click', () => {\n        onClick(connector.id);\n    });\n\n    graphics.on('pointerover', () => {\n        connectorGraphics.isHovered = true;\n        // Use fresh element data from getter\n        drawConnector(graphics, connector, connectorGraphics.getElements(), true);\n    });\n\n    graphics.on('pointerout', () => {\n        connectorGraphics.isHovered = false;\n        // Use fresh element data from getter\n        drawConnector(graphics, connector, connectorGraphics.getElements(), false);\n    });\n\n    return connectorGraphics;\n}\n\nfunction drawConnector(\n    graphics: PIXI.Graphics,\n    connector: Connector,\n    elements: Map<string, ElementData>,\n    isHovered: boolean\n): void {\n    const fromElement = elements.get(connector.from.elementId);\n    const toElement = elements.get(connector.to.elementId);\n\n    if (!fromElement || !toElement) {\n        graphics.clear();\n        return;\n    }\n\n    const fromPoint = getEdgePosition(fromElement, connector.from.side);\n    const toPoint = getEdgePosition(toElement, connector.to.side);\n\n    graphics.clear();\n\n    // Create a curved path using cubic Bezier\n    const controlPointOffset = Math.abs(toPoint.x - fromPoint.x) / 3;\n    \n    let cp1x: number, cp1y: number, cp2x: number, cp2y: number;\n\n    // Adjust control points based on connection direction\n    if (connector.from.side === 'right' && connector.to.side === 'left') {\n        // Horizontal connection\n        cp1x = fromPoint.x + controlPointOffset;\n        cp1y = fromPoint.y;\n        cp2x = toPoint.x - controlPointOffset;\n        cp2y = toPoint.y;\n    } else if (connector.from.side === 'bottom' && connector.to.side === 'top') {\n        // Vertical connection\n        cp1x = fromPoint.x;\n        cp1y = fromPoint.y + controlPointOffset;\n        cp2x = toPoint.x;\n        cp2y = toPoint.y - controlPointOffset;\n    } else {\n        // Mixed or diagonal connections\n        switch (connector.from.side) {\n            case 'right':\n                cp1x = fromPoint.x + controlPointOffset;\n                cp1y = fromPoint.y;\n                break;\n            case 'left':\n                cp1x = fromPoint.x - controlPointOffset;\n                cp1y = fromPoint.y;\n                break;\n            case 'bottom':\n                cp1x = fromPoint.x;\n                cp1y = fromPoint.y + controlPointOffset;\n                break;\n            case 'top':\n            default:\n                cp1x = fromPoint.x;\n                cp1y = fromPoint.y - controlPointOffset;\n                break;\n        }\n\n        switch (connector.to.side) {\n            case 'left':\n                cp2x = toPoint.x - controlPointOffset;\n                cp2y = toPoint.y;\n                break;\n            case 'right':\n                cp2x = toPoint.x + controlPointOffset;\n                cp2y = toPoint.y;\n                break;\n            case 'top':\n                cp2x = toPoint.x;\n                cp2y = toPoint.y - controlPointOffset;\n                break;\n            case 'bottom':\n            default:\n                cp2x = toPoint.x;\n                cp2y = toPoint.y + controlPointOffset;\n                break;\n        }\n    }\n\n    // Draw the curved line\n    graphics.moveTo(fromPoint.x, fromPoint.y);\n    graphics.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, toPoint.x, toPoint.y);\n    graphics.stroke({\n        color: isHovered ? CONNECTOR_HOVER_COLOR : CONNECTOR_COLOR,\n        width: isHovered ? CONNECTOR_HOVER_WIDTH : CONNECTOR_WIDTH,\n    });\n\n    // Draw arrowhead at the end - pass all curve points for accurate tangent calculation\n    drawArrowhead(graphics, fromPoint.x, fromPoint.y, cp1x, cp1y, cp2x, cp2y, toPoint.x, toPoint.y, isHovered);\n\n    // Update hit area for better click detection\n    const minX = Math.min(fromPoint.x, toPoint.x) - 10;\n    const minY = Math.min(fromPoint.y, toPoint.y) - 10;\n    const maxX = Math.max(fromPoint.x, toPoint.x) + 10;\n    const maxY = Math.max(fromPoint.y, toPoint.y) + 10;\n    graphics.hitArea = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY);\n}\n\nfunction drawArrowhead(\n    graphics: PIXI.Graphics,\n    startX: number,\n    startY: number,\n    cp1x: number,\n    cp1y: number,\n    cp2x: number,\n    cp2y: number,\n    endX: number,\n    endY: number,\n    isHovered: boolean\n): void {\n    const arrowSize = 10;\n    \n    // Calculate the tangent at the end of the Bezier curve (t = 1)\n    // For cubic Bezier: B'(t) = 3(1-t)²(P1-P0) + 6(1-t)t(P2-P1) + 3t²(P3-P2)\n    // At t = 1: B'(1) = 3(P3 - P2)\n    // This gives us the direction the curve is heading at the endpoint\n    const dx = 3 * (endX - cp2x);\n    const dy = 3 * (endY - cp2y);\n    const length = Math.sqrt(dx * dx + dy * dy);\n    \n    if (length === 0) return;\n\n    const unitX = dx / length;\n    const unitY = dy / length;\n\n    // Calculate perpendicular\n    const perpX = -unitY;\n    const perpY = unitX;\n\n    // Calculate arrowhead points\n    const backX = endX - unitX * arrowSize;\n    const backY = endY - unitY * arrowSize;\n    const left = { x: backX + perpX * (arrowSize / 2), y: backY + perpY * (arrowSize / 2) };\n    const right = { x: backX - perpX * (arrowSize / 2), y: backY - perpY * (arrowSize / 2) };\n\n    // Draw filled arrowhead\n    graphics.poly([\n        endX, endY,\n        left.x, left.y,\n        right.x, right.y,\n        endX, endY\n    ]);\n    graphics.fill({ color: isHovered ? CONNECTOR_HOVER_COLOR : CONNECTOR_COLOR });\n}\n\nfunction getEdgePosition(element: ElementData, side: EdgeSide): { x: number; y: number } {\n    const { position, size } = element;\n    \n    switch (side) {\n        case 'top':\n            return { x: position.x + size.width / 2, y: position.y };\n        case 'right':\n            return { x: position.x + size.width, y: position.y + size.height / 2 };\n        case 'bottom':\n            return { x: position.x + size.width / 2, y: position.y + size.height };\n        case 'left':\n            return { x: position.x, y: position.y + size.height / 2 };\n    }\n}\n\nexport function updateConnectorGraphics(\n    connectorGraphics: ConnectorGraphics,\n    elements: Map<string, ElementData>\n): void {\n    // Preserve hover state when updating\n    drawConnector(connectorGraphics.graphics, connectorGraphics.connector, elements, connectorGraphics.isHovered);\n}\n"],"names":["PIXI"],"mappings":"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"}

package/dist/cjs/EventModeling/engine/elementSprites.js

@@ -0,0 +1,301 @@
+'use strict';
+
+var PIXI = require('pixi.js');
+var types = require('../types.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);
+
+const EDGE_POINT_RADIUS = 6;
+const BORDER_RADIUS = 8;
+const PADDING = 16;
+function createElementSprite(data, onElementClick, onElementDragStart, onElementDragMove, onElementDragEnd, onEdgeClick) {
+    const container = new PIXI__namespace.Container();
+    container.position.set(data.position.x, data.position.y);
+    container.eventMode = 'static';
+    container.cursor = 'move';
+    container.hitArea = new PIXI__namespace.Rectangle(0, 0, data.size.width, data.size.height);
+    const shadowGraphics = new PIXI__namespace.Graphics();
+    shadowGraphics.alpha = 0.15;
+    container.addChild(shadowGraphics);
+    const graphics = new PIXI__namespace.Graphics();
+    const edgePoints = new Map();
+    const selectionBorder = new PIXI__namespace.Graphics();
+    selectionBorder.alpha = 0;
+    container.addChild(selectionBorder);
+    const elementColors = types.ELEMENT_COLORS[data.type];
+    const backgroundColor = 'background' in elementColors ? elementColors.background : elementColors.fill;
+    if (data.type === 'process') {
+        const centerX = data.size.width / 2;
+        const centerY = data.size.height / 2;
+        const radius = Math.min(data.size.width, data.size.height) / 2;
+        for (let i = 0; i < 3; i++) {
+            shadowGraphics.circle(centerX, centerY + 2 + i, radius + i);
+            shadowGraphics.fill({ color: 0x000000, alpha: 0.06 });
+        }
+    }
+    else {
+        for (let i = 0; i < 4; i++) {
+            shadowGraphics.roundRect(i, 2 + i, data.size.width, data.size.height, BORDER_RADIUS);
+            shadowGraphics.fill({ color: 0x000000, alpha: 0.06 });
+        }
+    }
+    if (data.type === 'process') {
+        const centerX = data.size.width / 2;
+        const centerY = data.size.height / 2;
+        const radius = Math.min(data.size.width, data.size.height) / 2;
+        graphics.circle(centerX, centerY, radius);
+        graphics.fill({ color: backgroundColor });
+        if ('stroke' in elementColors) {
+            graphics.stroke({ color: elementColors.stroke, width: 2 });
+        }
+    }
+    else {
+        graphics.roundRect(0, 0, data.size.width, data.size.height, BORDER_RADIUS);
+        graphics.fill({ color: backgroundColor });
+    }
+    container.addChild(graphics);
+    const textColor = 'text' in elementColors ? elementColors.text : 0xffffff;
+    const labelText = new PIXI__namespace.Text({
+        text: data.label,
+        style: {
+            fontSize: 14,
+            fill: textColor,
+            fontWeight: '600',
+            wordWrap: true,
+            wordWrapWidth: data.size.width - PADDING * 2,
+        },
+    });
+    labelText.position.set(PADDING, PADDING);
+    container.addChild(labelText);
+    let descriptionText;
+    if (data.description && data.type !== 'process') {
+        descriptionText = new PIXI__namespace.Text({
+            text: data.description,
+            style: new PIXI__namespace.TextStyle({
+                fontSize: 12,
+                fill: textColor,
+                fontWeight: '400',
+                wordWrap: true,
+                wordWrapWidth: data.size.width - PADDING * 2,
+            }),
+        });
+        descriptionText.alpha = 0.9;
+        descriptionText.position.set(PADDING, PADDING + 24);
+        container.addChild(descriptionText);
+    }
+    if (data.type !== 'process') {
+        const sides = ['top', 'right', 'bottom', 'left'];
+        sides.forEach(side => {
+            const edgePoint = createEdgePoint(data, side, () => onEdgeClick(data.id, side));
+            edgePoints.set(side, edgePoint);
+            container.addChild(edgePoint);
+        });
+    }
+    container.on('pointerdown', (event) => {
+        if (!container.parent)
+            return;
+        const localPos = event.getLocalPosition(container.parent);
+        onElementDragStart(data.id, localPos.x - data.position.x, localPos.y - data.position.y);
+    });
+    container.on('click', () => {
+        onElementClick(data.id);
+    });
+    return {
+        id: data.id,
+        container,
+        graphics,
+        selectionBorder,
+        labelText,
+        descriptionText,
+        edgePoints,
+        data,
+        isDragging: false,
+    };
+}
+function drawBoxElement(graphics, data) {
+    const colors = types.ELEMENT_COLORS[data.type];
+    if (!('background' in colors)) {
+        return;
+    }
+    graphics.clear();
+    graphics.roundRect(0, 0, data.size.width, data.size.height, BORDER_RADIUS);
+    graphics.fill({ color: colors.background });
+    graphics.visible = true;
+    graphics.alpha = 1;
+}
+function drawProcessElement(graphics, data) {
+    const colors = types.ELEMENT_COLORS.process;
+    const centerX = data.size.width / 2;
+    const centerY = data.size.height / 2;
+    const radius = Math.min(data.size.width, data.size.height) / 2;
+    graphics.clear();
+    graphics.circle(centerX, centerY, radius);
+    graphics.fill({ color: colors.fill });
+    graphics.stroke({ color: colors.stroke, width: 2 });
+    const teeth = 8;
+    const toothLength = radius * 0.2;
+    const innerRadius = radius * 0.6;
+    for (let i = 0; i < teeth; i++) {
+        const angle = (i / teeth) * Math.PI * 2;
+        const nextAngle = ((i + 0.4) / teeth) * Math.PI * 2;
+        const x1 = centerX + Math.cos(angle) * radius;
+        const y1 = centerY + Math.sin(angle) * radius;
+        const x2 = centerX + Math.cos(angle) * (radius + toothLength);
+        const y2 = centerY + Math.sin(angle) * (radius + toothLength);
+        const x3 = centerX + Math.cos(nextAngle) * (radius + toothLength);
+        const y3 = centerY + Math.sin(nextAngle) * (radius + toothLength);
+        const x4 = centerX + Math.cos(nextAngle) * radius;
+        const y4 = centerY + Math.sin(nextAngle) * radius;
+        graphics.moveTo(x1, y1);
+        graphics.lineTo(x2, y2);
+        graphics.lineTo(x3, y3);
+        graphics.lineTo(x4, y4);
+        graphics.fill({ color: colors.fill });
+    }
+    graphics.circle(centerX, centerY, innerRadius);
+    graphics.fill({ color: 0xffffff });
+    graphics.stroke({ color: colors.stroke, width: 2 });
+}
+function createEdgePoint(data, side, onClick) {
+    const edgePoint = new PIXI__namespace.Graphics();
+    edgePoint.eventMode = 'static';
+    edgePoint.cursor = 'crosshair';
+    const hitSize = EDGE_POINT_RADIUS * 2;
+    edgePoint.hitArea = new PIXI__namespace.Circle(0, 0, hitSize);
+    let x = 0, y = 0;
+    switch (side) {
+        case 'top':
+            x = data.size.width / 2;
+            y = 0;
+            break;
+        case 'right':
+            x = data.size.width;
+            y = data.size.height / 2;
+            break;
+        case 'bottom':
+            x = data.size.width / 2;
+            y = data.size.height;
+            break;
+        case 'left':
+            x = 0;
+            y = data.size.height / 2;
+            break;
+    }
+    edgePoint.position.set(x, y);
+    const colors = types.ELEMENT_COLORS[data.type];
+    edgePoint.circle(0, 0, EDGE_POINT_RADIUS);
+    edgePoint.fill({ color: 0xffffff });
+    edgePoint.stroke({ color: 'background' in colors ? colors.background : 0x6b7280, width: 2 });
+    edgePoint.alpha = 0;
+    edgePoint.on('click', (e) => {
+        e.stopPropagation();
+        onClick();
+    });
+    return edgePoint;
+}
+function updateElementSprite(sprite, data) {
+    sprite.data = data;
+    sprite.container.position.set(data.position.x, data.position.y);
+    if (data.type === 'process') {
+        drawProcessElement(sprite.graphics, data);
+    }
+    else {
+        drawBoxElement(sprite.graphics, data);
+    }
+    sprite.labelText.text = data.label;
+    if (sprite.descriptionText && data.description) {
+        sprite.descriptionText.text = data.description;
+    }
+    sprite.edgePoints.forEach((edgePoint, side) => {
+        let x = 0, y = 0;
+        switch (side) {
+            case 'top':
+                x = data.size.width / 2;
+                y = 0;
+                break;
+            case 'right':
+                x = data.size.width;
+                y = data.size.height / 2;
+                break;
+            case 'bottom':
+                x = data.size.width / 2;
+                y = data.size.height;
+                break;
+            case 'left':
+                x = 0;
+                y = data.size.height / 2;
+                break;
+        }
+        edgePoint.position.set(x, y);
+    });
+}
+function showEdgePoints(sprite) {
+    sprite.edgePoints.forEach(edgePoint => {
+        edgePoint.alpha = 1;
+    });
+}
+function hideEdgePoints(sprite) {
+    sprite.edgePoints.forEach(edgePoint => {
+        edgePoint.alpha = 0;
+    });
+}
+function setElementSelected(sprite, selected) {
+    if (!sprite.selectionBorder)
+        return;
+    if (selected) {
+        updateSelectionBorder(sprite);
+        sprite.selectionBorder.alpha = 1;
+    }
+    else {
+        sprite.selectionBorder.alpha = 0;
+    }
+}
+function updateSelectionBorder(sprite) {
+    if (!sprite.selectionBorder)
+        return;
+    const selectionBorder = sprite.selectionBorder;
+    selectionBorder.clear();
+    const borderWidth = 3;
+    const offset = -borderWidth;
+    const primaryColor = getComputedPrimaryColor();
+    if (sprite.data.type === 'process') {
+        const centerX = sprite.data.size.width / 2;
+        const centerY = sprite.data.size.height / 2;
+        const radius = Math.min(sprite.data.size.width, sprite.data.size.height) / 2 + borderWidth;
+        selectionBorder.circle(centerX, centerY, radius);
+        selectionBorder.stroke({ color: primaryColor, width: borderWidth });
+    }
+    else {
+        selectionBorder.roundRect(offset, offset, sprite.data.size.width + borderWidth * 2, sprite.data.size.height + borderWidth * 2, BORDER_RADIUS + borderWidth);
+        selectionBorder.stroke({ color: primaryColor, width: borderWidth });
+    }
+}
+function getComputedPrimaryColor() {
+    const style = getComputedStyle(document.documentElement);
+    const primaryColorStr = style.getPropertyValue('--primary-color').trim() || '#3B82F6';
+    return parseInt(primaryColorStr.replace('#', ''), 16);
+}
+
+exports.createElementSprite = createElementSprite;
+exports.hideEdgePoints = hideEdgePoints;
+exports.setElementSelected = setElementSelected;
+exports.showEdgePoints = showEdgePoints;
+exports.updateElementSprite = updateElementSprite;
+//# sourceMappingURL=elementSprites.js.map

package/dist/cjs/EventModeling/engine/elementSprites.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementSprites.js","sources":["../../../../EventModeling/engine/elementSprites.ts"],"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 * as PIXI from 'pixi.js';\nimport { ElementData, ELEMENT_COLORS, EdgeSide } from '../types';\n\nexport interface ElementSprite {\n    id: string;\n    container: PIXI.Container;\n    graphics: PIXI.Graphics;\n    selectionBorder?: PIXI.Graphics;\n    labelText: PIXI.Text;\n    descriptionText?: PIXI.Text;\n    edgePoints: Map<EdgeSide, PIXI.Graphics>;\n    data: ElementData;\n    isDragging: boolean;\n    dragOffset?: { x: number; y: number };\n}\n\nconst EDGE_POINT_RADIUS = 6;\nconst BORDER_RADIUS = 8;\nconst PADDING = 16;\n\nexport function createElementSprite(\n    data: ElementData,\n    onElementClick: (id: string) => void,\n    onElementDragStart: (id: string, x: number, y: number) => void,\n    onElementDragMove: (id: string, x: number, y: number) => void,\n    onElementDragEnd: (id: string) => void,\n    onEdgeClick: (elementId: string, side: EdgeSide) => void\n): ElementSprite {\n    const container = new PIXI.Container();\n    container.position.set(data.position.x, data.position.y);\n    container.eventMode = 'static';\n    container.cursor = 'move';\n    // Set explicit hit area for interaction\n    container.hitArea = new PIXI.Rectangle(0, 0, data.size.width, data.size.height);\n\n    // Create shadow layer\n    const shadowGraphics = new PIXI.Graphics();\n    shadowGraphics.alpha = 0.15;\n    container.addChild(shadowGraphics);\n\n    const graphics = new PIXI.Graphics();\n    const edgePoints = new Map<EdgeSide, PIXI.Graphics>();\n\n    // Create selection border (initially hidden)\n    const selectionBorder = new PIXI.Graphics();\n    selectionBorder.alpha = 0;\n    container.addChild(selectionBorder);\n\n    // Get colors based on element type\n    const elementColors = ELEMENT_COLORS[data.type];\n    const backgroundColor = 'background' in elementColors ? elementColors.background : elementColors.fill;\n    \n    // Draw shadow\n    if (data.type === 'process') {\n        const centerX = data.size.width / 2;\n        const centerY = data.size.height / 2;\n        const radius = Math.min(data.size.width, data.size.height) / 2;\n        for (let i = 0; i < 3; i++) {\n            shadowGraphics.circle(centerX, centerY + 2 + i, radius + i);\n            shadowGraphics.fill({ color: 0x000000, alpha: 0.06 });\n        }\n    } else {\n        for (let i = 0; i < 4; i++) {\n            shadowGraphics.roundRect(i, 2 + i, data.size.width, data.size.height, BORDER_RADIUS);\n            shadowGraphics.fill({ color: 0x000000, alpha: 0.06 });\n        }\n    }\n    \n    // Draw with proper shapes (PIXI v8 requires fill with object format)\n    if (data.type === 'process') {\n        const centerX = data.size.width / 2;\n        const centerY = data.size.height / 2;\n        const radius = Math.min(data.size.width, data.size.height) / 2;\n        graphics.circle(centerX, centerY, radius);\n        graphics.fill({ color: backgroundColor });\n        if ('stroke' in elementColors) {\n            graphics.stroke({ color: elementColors.stroke, width: 2 });\n        }\n    } else {\n        // Use roundRect for proper appearance\n        graphics.roundRect(0, 0, data.size.width, data.size.height, BORDER_RADIUS);\n        graphics.fill({ color: backgroundColor });\n    }\n\n    container.addChild(graphics);\n\n    // Create label text\n    const textColor = 'text' in elementColors ? elementColors.text : 0xffffff;\n    const labelText = new PIXI.Text({\n        text: data.label,\n        style: {\n            fontSize: 14,\n            fill: textColor,\n            fontWeight: '600',\n            wordWrap: true,\n            wordWrapWidth: data.size.width - PADDING * 2,\n        } as PIXI.TextStyle,\n    });\n    labelText.position.set(PADDING, PADDING);\n    container.addChild(labelText);\n\n    // Create description text if exists\n    let descriptionText: PIXI.Text | undefined;\n    if (data.description && data.type !== 'process') {\n        descriptionText = new PIXI.Text({\n            text: data.description,\n            style: new PIXI.TextStyle({\n                fontSize: 12,\n                fill: textColor,\n                fontWeight: '400',\n                wordWrap: true,\n                wordWrapWidth: data.size.width - PADDING * 2,\n            }),\n        });\n        descriptionText.alpha = 0.9;\n        descriptionText.position.set(PADDING, PADDING + 24);\n        container.addChild(descriptionText);\n    }\n\n    // Create edge points for connections\n    if (data.type !== 'process') {\n        const sides: EdgeSide[] = ['top', 'right', 'bottom', 'left'];\n        sides.forEach(side => {\n            const edgePoint = createEdgePoint(data, side, () => onEdgeClick(data.id, side));\n            edgePoints.set(side, edgePoint);\n            container.addChild(edgePoint);\n        });\n    }\n\n    // Set up interaction\n    container.on('pointerdown', (event: PIXI.FederatedPointerEvent) => {\n        if (!container.parent) return;\n        const localPos = event.getLocalPosition(container.parent);\n        onElementDragStart(data.id, localPos.x - data.position.x, localPos.y - data.position.y);\n    });\n\n    container.on('click', () => {\n        onElementClick(data.id);\n    });\n\n    return {\n        id: data.id,\n        container,\n        graphics,\n        selectionBorder,\n        labelText,\n        descriptionText,\n        edgePoints,\n        data,\n        isDragging: false,\n    };\n}\n\nfunction drawBoxElement(graphics: PIXI.Graphics, data: ElementData): void {\n    const colors = ELEMENT_COLORS[data.type];\n    if (!('background' in colors)) {\n        return;\n    }\n    \n    graphics.clear();\n    \n    // Draw the rounded rectangle with solid fill (PIXI v8 - use object format)\n    graphics.roundRect(0, 0, data.size.width, data.size.height, BORDER_RADIUS);\n    graphics.fill({ color: colors.background });\n    \n    // Force visibility\n    graphics.visible = true;\n    graphics.alpha = 1;\n}\n\nfunction drawProcessElement(graphics: PIXI.Graphics, data: ElementData): void {\n    const colors = ELEMENT_COLORS.process;\n    const centerX = data.size.width / 2;\n    const centerY = data.size.height / 2;\n    const radius = Math.min(data.size.width, data.size.height) / 2;\n\n    graphics.clear();\n    \n    // Draw outer circle\n    graphics.circle(centerX, centerY, radius);\n    graphics.fill({ color: colors.fill });\n    graphics.stroke({ color: colors.stroke, width: 2 });\n\n    // Draw cogwheel teeth\n    const teeth = 8;\n    const toothLength = radius * 0.2;\n    const innerRadius = radius * 0.6;\n    \n    for (let i = 0; i < teeth; i++) {\n        const angle = (i / teeth) * Math.PI * 2;\n        const nextAngle = ((i + 0.4) / teeth) * Math.PI * 2;\n        \n        const x1 = centerX + Math.cos(angle) * radius;\n        const y1 = centerY + Math.sin(angle) * radius;\n        const x2 = centerX + Math.cos(angle) * (radius + toothLength);\n        const y2 = centerY + Math.sin(angle) * (radius + toothLength);\n        const x3 = centerX + Math.cos(nextAngle) * (radius + toothLength);\n        const y3 = centerY + Math.sin(nextAngle) * (radius + toothLength);\n        const x4 = centerX + Math.cos(nextAngle) * radius;\n        const y4 = centerY + Math.sin(nextAngle) * radius;\n        \n        graphics.moveTo(x1, y1);\n        graphics.lineTo(x2, y2);\n        graphics.lineTo(x3, y3);\n        graphics.lineTo(x4, y4);\n        graphics.fill({ color: colors.fill });\n    }\n\n    // Draw inner circle\n    graphics.circle(centerX, centerY, innerRadius);\n    graphics.fill({ color: 0xffffff });\n    graphics.stroke({ color: colors.stroke, width: 2 });\n}\n\nfunction createEdgePoint(data: ElementData, side: EdgeSide, onClick: () => void): PIXI.Graphics {\n    const edgePoint = new PIXI.Graphics();\n    edgePoint.eventMode = 'static';\n    edgePoint.cursor = 'crosshair';\n    \n    // Set explicit hit area for better interaction\n    const hitSize = EDGE_POINT_RADIUS * 2;\n    edgePoint.hitArea = new PIXI.Circle(0, 0, hitSize);\n    \n    // Position based on side\n    let x = 0, y = 0;\n    switch (side) {\n        case 'top':\n            x = data.size.width / 2;\n            y = 0;\n            break;\n        case 'right':\n            x = data.size.width;\n            y = data.size.height / 2;\n            break;\n        case 'bottom':\n            x = data.size.width / 2;\n            y = data.size.height;\n            break;\n        case 'left':\n            x = 0;\n            y = data.size.height / 2;\n            break;\n    }\n\n    edgePoint.position.set(x, y);\n    \n    // Draw edge point (initially hidden)\n    const colors = ELEMENT_COLORS[data.type];\n    edgePoint.circle(0, 0, EDGE_POINT_RADIUS);\n    edgePoint.fill({ color: 0xffffff });\n    edgePoint.stroke({ color: 'background' in colors ? colors.background : 0x6b7280, width: 2 });\n    edgePoint.alpha = 0;\n\n    edgePoint.on('click', (e: PIXI.FederatedPointerEvent) => {\n        e.stopPropagation();\n        onClick();\n    });\n\n    return edgePoint;\n}\n\nexport function updateElementSprite(sprite: ElementSprite, data: ElementData): void {\n    sprite.data = data;\n    sprite.container.position.set(data.position.x, data.position.y);\n    \n    // Update graphics\n    if (data.type === 'process') {\n        drawProcessElement(sprite.graphics, data);\n    } else {\n        drawBoxElement(sprite.graphics, data);\n    }\n\n    // Update text\n    sprite.labelText.text = data.label;\n    if (sprite.descriptionText && data.description) {\n        sprite.descriptionText.text = data.description;\n    }\n\n    // Update edge points positions\n    sprite.edgePoints.forEach((edgePoint, side) => {\n        let x = 0, y = 0;\n        switch (side) {\n            case 'top':\n                x = data.size.width / 2;\n                y = 0;\n                break;\n            case 'right':\n                x = data.size.width;\n                y = data.size.height / 2;\n                break;\n            case 'bottom':\n                x = data.size.width / 2;\n                y = data.size.height;\n                break;\n            case 'left':\n                x = 0;\n                y = data.size.height / 2;\n                break;\n        }\n        edgePoint.position.set(x, y);\n    });\n}\n\nexport function showEdgePoints(sprite: ElementSprite): void {\n    sprite.edgePoints.forEach(edgePoint => {\n        edgePoint.alpha = 1;\n    });\n}\n\nexport function hideEdgePoints(sprite: ElementSprite): void {\n    sprite.edgePoints.forEach(edgePoint => {\n        edgePoint.alpha = 0;\n    });\n}\n\nexport function setElementSelected(sprite: ElementSprite, selected: boolean): void {\n    if (!sprite.selectionBorder) return;\n    \n    if (selected) {\n        updateSelectionBorder(sprite);\n        sprite.selectionBorder.alpha = 1;\n    } else {\n        sprite.selectionBorder.alpha = 0;\n    }\n}\n\nfunction updateSelectionBorder(sprite: ElementSprite): void {\n    if (!sprite.selectionBorder) return;\n    \n    const selectionBorder = sprite.selectionBorder;\n    selectionBorder.clear();\n    \n    const borderWidth = 3;\n    const offset = -borderWidth;\n    \n    // Get primary color from CSS variable with fallback\n    const primaryColor = getComputedPrimaryColor();\n    \n    if (sprite.data.type === 'process') {\n        const centerX = sprite.data.size.width / 2;\n        const centerY = sprite.data.size.height / 2;\n        const radius = Math.min(sprite.data.size.width, sprite.data.size.height) / 2 + borderWidth;\n        \n        selectionBorder.circle(centerX, centerY, radius);\n        selectionBorder.stroke({ color: primaryColor, width: borderWidth });\n    } else {\n        selectionBorder.roundRect(\n            offset, \n            offset, \n            sprite.data.size.width + borderWidth * 2, \n            sprite.data.size.height + borderWidth * 2, \n            BORDER_RADIUS + borderWidth\n        );\n        selectionBorder.stroke({ color: primaryColor, width: borderWidth });\n    }\n}\n\nfunction getComputedPrimaryColor(): number {\n    // Get the primary color from CSS custom properties\n    const style = getComputedStyle(document.documentElement);\n    const primaryColorStr = style.getPropertyValue('--primary-color').trim() || '#3B82F6';\n    \n    // Convert hex color string to number\n    return parseInt(primaryColorStr.replace('#', ''), 16);\n}\n"],"names":["PIXI","ELEMENT_COLORS"],"mappings":"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"}

package/dist/cjs/EventModeling/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var EventModeling = require('./EventModeling.js');
+var types = require('./types.js');
+
+
+
+exports.EventModeling = EventModeling.EventModeling;
+exports.DEFAULT_ELEMENT_SIZE = types.DEFAULT_ELEMENT_SIZE;
+exports.ELEMENT_COLORS = types.ELEMENT_COLORS;
+exports.calculateOptimalEdges = types.calculateOptimalEdges;
+//# sourceMappingURL=index.js.map

package/dist/cjs/EventModeling/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/cjs/EventModeling/types.js

@@ -0,0 +1,60 @@
+'use strict';
+
+const ELEMENT_COLORS = {
+    command: {
+        background: 0x3b82f6,
+        text: 0xffffff,
+    },
+    event: {
+        background: 0xf59e0b,
+        text: 0xffffff,
+    },
+    readmodel: {
+        background: 0x10b981,
+        text: 0xffffff,
+    },
+    process: {
+        fill: 0x6b7280,
+        stroke: 0x374151,
+    },
+};
+const DEFAULT_ELEMENT_SIZE = {
+    command: { width: 200, height: 100 },
+    event: { width: 200, height: 100 },
+    readmodel: { width: 200, height: 100 },
+    process: { width: 80, height: 80 },
+};
+function calculateOptimalEdges(fromElement, toElement) {
+    const fromCenter = {
+        x: fromElement.position.x + fromElement.size.width / 2,
+        y: fromElement.position.y + fromElement.size.height / 2,
+    };
+    const toCenter = {
+        x: toElement.position.x + toElement.size.width / 2,
+        y: toElement.position.y + toElement.size.height / 2,
+    };
+    const dx = toCenter.x - fromCenter.x;
+    const dy = toCenter.y - fromCenter.y;
+    const isHorizontal = Math.abs(dx) > Math.abs(dy);
+    if (isHorizontal) {
+        if (dx > 0) {
+            return { fromSide: 'right', toSide: 'left' };
+        }
+        else {
+            return { fromSide: 'left', toSide: 'right' };
+        }
+    }
+    else {
+        if (dy > 0) {
+            return { fromSide: 'bottom', toSide: 'top' };
+        }
+        else {
+            return { fromSide: 'top', toSide: 'bottom' };
+        }
+    }
+}
+
+exports.DEFAULT_ELEMENT_SIZE = DEFAULT_ELEMENT_SIZE;
+exports.ELEMENT_COLORS = ELEMENT_COLORS;
+exports.calculateOptimalEdges = calculateOptimalEdges;
+//# sourceMappingURL=types.js.map

package/dist/cjs/EventModeling/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../EventModeling/types.ts"],"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\nexport type ElementType = 'command' | 'event' | 'readmodel' | 'process';\n\nexport interface Position {\n    x: number;\n    y: number;\n}\n\nexport interface Size {\n    width: number;\n    height: number;\n}\n\nexport interface ElementData {\n    id: string;\n    type: ElementType;\n    position: Position;\n    size: Size;\n    label: string;\n    description?: string;\n}\n\nexport type EdgeSide = 'top' | 'right' | 'bottom' | 'left';\n\nexport interface EdgePoint {\n    elementId: string;\n    side: EdgeSide;\n}\n\nexport interface Connector {\n    id: string;\n    from: EdgePoint;\n    to: EdgePoint;\n}\n\nexport interface EventModelingState {\n    elements: ElementData[];\n    connectors: Connector[];\n    selectedElementId?: string;\n    selectedConnectorId?: string;\n}\n\nexport interface CanvasTransform {\n    x: number;\n    y: number;\n    scale: number;\n}\n\nexport const ELEMENT_COLORS = {\n    command: {\n        background: 0x3b82f6,\n        text: 0xffffff,\n    },\n    event: {\n        background: 0xf59e0b,\n        text: 0xffffff,\n    },\n    readmodel: {\n        background: 0x10b981,\n        text: 0xffffff,\n    },\n    process: {\n        fill: 0x6b7280,\n        stroke: 0x374151,\n    },\n} as const;\n\nexport const DEFAULT_ELEMENT_SIZE = {\n    command: { width: 200, height: 100 },\n    event: { width: 200, height: 100 },\n    readmodel: { width: 200, height: 100 },\n    process: { width: 80, height: 80 },\n} as const;\n\n/**\n * Calculate the optimal edge pair for a connector based on element positions.\n * Returns the best matching edges for visual clarity.\n */\nexport function calculateOptimalEdges(\n    fromElement: ElementData,\n    toElement: ElementData\n): { fromSide: EdgeSide; toSide: EdgeSide } {\n    // Calculate center points\n    const fromCenter = {\n        x: fromElement.position.x + fromElement.size.width / 2,\n        y: fromElement.position.y + fromElement.size.height / 2,\n    };\n    const toCenter = {\n        x: toElement.position.x + toElement.size.width / 2,\n        y: toElement.position.y + toElement.size.height / 2,\n    };\n\n    // Calculate differences\n    const dx = toCenter.x - fromCenter.x;\n    const dy = toCenter.y - fromCenter.y;\n\n    // Determine primary direction based on which delta is larger\n    const isHorizontal = Math.abs(dx) > Math.abs(dy);\n\n    if (isHorizontal) {\n        // Horizontal connection is primary\n        if (dx > 0) {\n            // Target is to the right\n            return { fromSide: 'right', toSide: 'left' };\n        } else {\n            // Target is to the left\n            return { fromSide: 'left', toSide: 'right' };\n        }\n    } else {\n        // Vertical connection is primary\n        if (dy > 0) {\n            // Target is below\n            return { fromSide: 'bottom', toSide: 'top' };\n        } else {\n            // Target is above\n            return { fromSide: 'top', toSide: 'bottom' };\n        }\n    }\n}\n"],"names":[],"mappings":";;AAkDO,MAAM,cAAc,GAAG;AAC1B,IAAA,OAAO,EAAE;AACL,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,IAAI,EAAE,QAAQ;AACjB,KAAA;AACD,IAAA,KAAK,EAAE;AACH,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,IAAI,EAAE,QAAQ;AACjB,KAAA;AACD,IAAA,SAAS,EAAE;AACP,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,IAAI,EAAE,QAAQ;AACjB,KAAA;AACD,IAAA,OAAO,EAAE;AACL,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,MAAM,EAAE,QAAQ;AACnB,KAAA;;AAGE,MAAM,oBAAoB,GAAG;IAChC,OAAO,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;IACpC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;IAClC,SAAS,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;IACtC,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;;AAOhC,SAAU,qBAAqB,CACjC,WAAwB,EACxB,SAAsB,EAAA;AAGtB,IAAA,MAAM,UAAU,GAAG;AACf,QAAA,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC;AACtD,QAAA,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;KAC1D;AACD,IAAA,MAAM,QAAQ,GAAG;AACb,QAAA,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC;AAClD,QAAA,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,SAAS,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;KACtD;IAGD,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;IACpC,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;AAGpC,IAAA,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;IAEhD,IAAI,YAAY,EAAE;AAEd,QAAA,IAAI,EAAE,GAAG,CAAC,EAAE;YAER,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE;QAChD;aAAO;YAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE;QAChD;IACJ;SAAO;AAEH,QAAA,IAAI,EAAE,GAAG,CAAC,EAAE;YAER,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE;QAChD;aAAO;YAEH,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE;QAChD;IACJ;AACJ;;;;;;"}