@grafloria/element 0.3.18 → 0.3.20

package/src/libs/engine/src/types/event.types.d.ts

@@ -0,0 +1,142 @@
+export interface DiagramEvent<T = any> {
+    type: string;
+    timestamp: number;
+    data: T;
+    source?: string;
+    preventDefault?: () => void;
+    stopPropagation?: () => void;
+}
+export type EventHandler<T = any> = (event: DiagramEvent<T>) => void;
+export interface EventSubscription {
+    unsubscribe: () => void;
+}
+export declare const DiagramEventTypes: {
+    readonly NODE_ADDED: "node:added";
+    readonly NODE_REMOVED: "node:removed";
+    readonly NODE_MOVED: "node:moved";
+    readonly NODE_RESIZED: "node:resized";
+    readonly NODE_SELECTED: "node:selected";
+    readonly NODE_DESELECTED: "node:deselected";
+    readonly NODE_UPDATED: "node:updated";
+    readonly NODE_PARENT_CHANGED: "node:parent-changed";
+    readonly LINK_ADDED: "link:added";
+    readonly LINK_REMOVED: "link:removed";
+    readonly LINK_UPDATED: "link:updated";
+    readonly LINK_SELECTED: "link:selected";
+    readonly LINK_DESELECTED: "link:deselected";
+    readonly LINK_POINT_ADDED: "link:point-added";
+    readonly LINK_PATH_CHANGED: "link:path-changed";
+    readonly LINK_LABEL_ADDED: "link:label-added";
+    readonly LINK_LABEL_REMOVED: "link:label-removed";
+    readonly LINK_LABEL_UPDATED: "link:label-updated";
+    readonly LINK_STATE_CHANGED: "link:state-changed";
+    readonly LINK_STYLE_CHANGED: "link:style-changed";
+    readonly PORT_ADDED: "port:added";
+    readonly PORT_REMOVED: "port:removed";
+    readonly PORT_CONNECTED: "port:connected";
+    readonly PORT_DISCONNECTED: "port:disconnected";
+    readonly CONNECTION_START: "connection:start";
+    readonly CONNECTION_CREATED: "connection:created";
+    readonly CONNECTION_CANCELLED: "connection:cancelled";
+    readonly GROUP_ADDED: "group:added";
+    readonly GROUP_REMOVED: "group:removed";
+    readonly GROUP_EXPANDED: "group:expanded";
+    readonly GROUP_COLLAPSED: "group:collapsed";
+    readonly MEMBER_ADDED: "member:added";
+    readonly MEMBER_REMOVED: "member:removed";
+    readonly TRANSFORM_PROPAGATED: "transform:propagated";
+    readonly LAYOUT_CHANGED: "layout:changed";
+    readonly LAYOUT_CLEARED: "layout:cleared";
+    readonly FLEX_ITEM_CHANGED: "flex-item:changed";
+    readonly FLEX_ITEM_CLEARED: "flex-item:cleared";
+    readonly GRID_ITEM_CHANGED: "grid-item:changed";
+    readonly GRID_ITEM_CLEARED: "grid-item:cleared";
+    readonly CLIPBOARD_COPIED: "clipboard:copied";
+    readonly CLIPBOARD_PASTED: "clipboard:pasted";
+    readonly CLIPBOARD_DUPLICATED: "clipboard:duplicated";
+    readonly DIAGRAM_UPDATED: "diagram:updated";
+    readonly DIAGRAM_LOADED: "diagram:loaded";
+    readonly DIAGRAM_CLEARED: "diagram:cleared";
+    readonly DIAGRAM_CHANGED: "diagram:changed";
+    readonly DIAGRAM_CREATED: "diagram:created";
+    readonly NODES_CLEARED: "nodes:cleared";
+    readonly LINKS_CLEARED: "links:cleared";
+    readonly GROUPS_CLEARED: "groups:cleared";
+    readonly SELECTION_CHANGED: "selection:changed";
+    readonly SELECTION_CLEARED: "selection:cleared";
+    readonly VIEWPORT_CHANGED: "viewport:changed";
+    readonly VIEWPORT_ZOOMED: "viewport:zoomed";
+    readonly VIEWPORT_SETTINGS_CHANGED: "viewport-settings-changed";
+    readonly MODE_CHANGED: "mode:changed";
+    readonly MODE_GUARD_BLOCKED: "mode:guard-blocked";
+    readonly STATE_CHANGED: "state:changed";
+    readonly COMMAND_EXECUTED: "command:executed";
+    readonly COMMAND_UNDONE: "command:undone";
+    readonly COMMAND_REDONE: "command:redone";
+    readonly COMMAND_FAILED: "command:failed";
+    readonly COMMAND_MERGED: "command:merged";
+    readonly COMMAND_HISTORY_CLEARED: "command:history:cleared";
+    readonly VALIDATION_STARTED: "validation:started";
+    readonly VALIDATION_COMPLETED: "validation:completed";
+    readonly VALIDATION_FAILED: "validation:failed";
+    readonly VALIDATION_ERROR: "validation:error";
+    readonly VALIDATION_WARNING: "validation:warning";
+    readonly ENGINE_INITIALIZED: "engine:initialized";
+    readonly ENGINE_DESTROYED: "engine:destroyed";
+};
+export type DiagramEventType = typeof DiagramEventTypes[keyof typeof DiagramEventTypes];
+export interface NodeEvent {
+    nodeId: string;
+    node?: any;
+}
+export interface LinkEvent {
+    linkId: string;
+    link?: any;
+}
+export interface GroupEvent {
+    groupId: string;
+    group?: any;
+}
+export interface SelectionEvent {
+    nodes?: string[];
+    links?: string[];
+    groups?: string[];
+    source?: 'user' | 'api' | 'pattern';
+    pattern?: string;
+}
+export interface LayoutEvent {
+    groupId: string;
+    type: 'flexbox' | 'grid' | 'none';
+    config?: any;
+}
+export interface ClipboardEvent {
+    nodeCount: number;
+    linkCount: number;
+    groupCount: number;
+    operation: 'copy' | 'paste' | 'duplicate';
+}
+export interface ModeEvent {
+    mode: 'design' | 'runtime' | 'readonly';
+    previousMode?: 'design' | 'runtime' | 'readonly';
+    reason?: string;
+}
+export interface CommandEvent {
+    commandName: string;
+    commandId: string;
+    success?: boolean;
+    error?: string;
+}
+export interface ViewportEvent {
+    zoom?: number;
+    position?: {
+        x: number;
+        y: number;
+    };
+    settings?: any;
+}
+export interface ValidationEvent {
+    type: 'diagram' | 'node' | 'link' | 'port' | 'group';
+    entityId?: string;
+    result?: any;
+    timestamp?: number;
+}

package/src/libs/engine/src/types/event.types.js

@@ -0,0 +1,96 @@
+"use strict";
+// Event type definitions
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DiagramEventTypes = void 0;
+// Event names as constants
+exports.DiagramEventTypes = {
+    // Node events
+    NODE_ADDED: 'node:added',
+    NODE_REMOVED: 'node:removed',
+    NODE_MOVED: 'node:moved',
+    NODE_RESIZED: 'node:resized',
+    NODE_SELECTED: 'node:selected',
+    NODE_DESELECTED: 'node:deselected',
+    NODE_UPDATED: 'node:updated',
+    NODE_PARENT_CHANGED: 'node:parent-changed', // Phase 1.6
+    // Link events
+    LINK_ADDED: 'link:added',
+    LINK_REMOVED: 'link:removed',
+    LINK_UPDATED: 'link:updated',
+    LINK_SELECTED: 'link:selected',
+    LINK_DESELECTED: 'link:deselected',
+    LINK_POINT_ADDED: 'link:point-added',
+    LINK_PATH_CHANGED: 'link:path-changed',
+    LINK_LABEL_ADDED: 'link:label-added',
+    LINK_LABEL_REMOVED: 'link:label-removed',
+    LINK_LABEL_UPDATED: 'link:label-updated',
+    LINK_STATE_CHANGED: 'link:state-changed',
+    LINK_STYLE_CHANGED: 'link:style-changed',
+    // Port events
+    PORT_ADDED: 'port:added',
+    PORT_REMOVED: 'port:removed',
+    PORT_CONNECTED: 'port:connected',
+    PORT_DISCONNECTED: 'port:disconnected',
+    // Connection events
+    CONNECTION_START: 'connection:start',
+    CONNECTION_CREATED: 'connection:created',
+    CONNECTION_CANCELLED: 'connection:cancelled',
+    // Group events (Phase 1.6c)
+    GROUP_ADDED: 'group:added',
+    GROUP_REMOVED: 'group:removed',
+    GROUP_EXPANDED: 'group:expanded',
+    GROUP_COLLAPSED: 'group:collapsed',
+    MEMBER_ADDED: 'member:added',
+    MEMBER_REMOVED: 'member:removed',
+    // Hierarchy events (Phase 1.6)
+    TRANSFORM_PROPAGATED: 'transform:propagated',
+    // Layout events (Phase 1.7)
+    LAYOUT_CHANGED: 'layout:changed',
+    LAYOUT_CLEARED: 'layout:cleared',
+    FLEX_ITEM_CHANGED: 'flex-item:changed',
+    FLEX_ITEM_CLEARED: 'flex-item:cleared',
+    GRID_ITEM_CHANGED: 'grid-item:changed',
+    GRID_ITEM_CLEARED: 'grid-item:cleared',
+    // Clipboard events (Phase 1.8)
+    CLIPBOARD_COPIED: 'clipboard:copied',
+    CLIPBOARD_PASTED: 'clipboard:pasted',
+    CLIPBOARD_DUPLICATED: 'clipboard:duplicated',
+    // Diagram events
+    DIAGRAM_UPDATED: 'diagram:updated',
+    DIAGRAM_LOADED: 'diagram:loaded',
+    DIAGRAM_CLEARED: 'diagram:cleared',
+    DIAGRAM_CHANGED: 'diagram:changed',
+    DIAGRAM_CREATED: 'diagram:created',
+    NODES_CLEARED: 'nodes:cleared',
+    LINKS_CLEARED: 'links:cleared',
+    GROUPS_CLEARED: 'groups:cleared',
+    // Selection events (Phase 1.8a)
+    SELECTION_CHANGED: 'selection:changed',
+    SELECTION_CLEARED: 'selection:cleared',
+    // Viewport events
+    VIEWPORT_CHANGED: 'viewport:changed',
+    VIEWPORT_ZOOMED: 'viewport:zoomed',
+    VIEWPORT_SETTINGS_CHANGED: 'viewport-settings-changed',
+    // Mode events
+    MODE_CHANGED: 'mode:changed',
+    MODE_GUARD_BLOCKED: 'mode:guard-blocked',
+    // State events
+    STATE_CHANGED: 'state:changed',
+    // Command events
+    COMMAND_EXECUTED: 'command:executed',
+    COMMAND_UNDONE: 'command:undone',
+    COMMAND_REDONE: 'command:redone',
+    COMMAND_FAILED: 'command:failed',
+    COMMAND_MERGED: 'command:merged',
+    COMMAND_HISTORY_CLEARED: 'command:history:cleared',
+    // Validation events (Phase 1.8d)
+    VALIDATION_STARTED: 'validation:started',
+    VALIDATION_COMPLETED: 'validation:completed',
+    VALIDATION_FAILED: 'validation:failed',
+    VALIDATION_ERROR: 'validation:error',
+    VALIDATION_WARNING: 'validation:warning',
+    // Engine events
+    ENGINE_INITIALIZED: 'engine:initialized',
+    ENGINE_DESTROYED: 'engine:destroyed',
+};
+//# sourceMappingURL=event.types.js.map

package/src/libs/engine/src/types/geometry.types.d.ts

@@ -0,0 +1,84 @@
+export interface Point {
+    x: number;
+    y: number;
+    z?: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+    depth?: number;
+}
+export interface BoundingBox {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+/**
+ * Rectangle defined by position and size (Phase 5.1)
+ * Used for viewport queries and spatial indexing
+ */
+export interface Rectangle {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface Transform {
+    position: Point;
+    rotation: number;
+    scale: Point;
+    origin: Point;
+}
+/**
+ * 2D Affine Transform Matrix (Phase 1.6a)
+ * Represents: translate, rotate, scale, skew
+ * CSS-compatible format: matrix(a, b, c, d, e, f)
+ *
+ * Matrix structure:
+ * | a  c  e |
+ * | b  d  f |
+ * | 0  0  1 |
+ *
+ * Where:
+ * - a, d: Scale X and Y (also affected by rotation/skew)
+ * - b, c: Rotation and skew components
+ * - e, f: Translation X and Y
+ */
+export interface TransformMatrix {
+    a: number;
+    b: number;
+    c: number;
+    d: number;
+    e: number;
+    f: number;
+}
+/**
+ * Identity matrix (no transformation)
+ */
+export declare const IDENTITY_MATRIX: TransformMatrix;
+export interface Viewport {
+    x: number;
+    y: number;
+    zoom: number;
+    rotation: number;
+    width?: number;
+    height?: number;
+}
+export interface Path {
+    points: Point[];
+    segments: PathSegment[];
+}
+export interface PathSegment {
+    type: 'move' | 'line' | 'curve' | 'arc';
+    from: Point;
+    to: Point;
+    control1?: Point;
+    control2?: Point;
+    radius?: number;
+}
+export type Alignment = 'left' | 'right' | 'top' | 'bottom' | 'center';
+export type Direction = 'horizontal' | 'vertical' | 'both';
+export type RoutingStrategy = 'direct' | 'orthogonal' | 'smooth' | 'smart';

package/src/libs/engine/src/types/geometry.types.js

@@ -0,0 +1,16 @@
+"use strict";
+// Geometry type definitions for the diagram engine
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IDENTITY_MATRIX = void 0;
+/**
+ * Identity matrix (no transformation)
+ */
+exports.IDENTITY_MATRIX = {
+    a: 1,
+    b: 0,
+    c: 0,
+    d: 1,
+    e: 0,
+    f: 0,
+};
+//# sourceMappingURL=geometry.types.js.map

package/src/libs/engine/src/types/index.d.ts

@@ -0,0 +1,7 @@
+export * from './geometry.types';
+export * from './model.types';
+export * from './event.types';
+export * from './plugin.types';
+export * from './domain';
+export * from './layout.types';
+export * from './performance.types';

package/src/libs/engine/src/types/index.js

@@ -0,0 +1,14 @@
+"use strict";
+// Types index - exports all type definitions
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./geometry.types"), exports);
+tslib_1.__exportStar(require("./model.types"), exports);
+tslib_1.__exportStar(require("./event.types"), exports);
+tslib_1.__exportStar(require("./plugin.types"), exports);
+tslib_1.__exportStar(require("./domain"), exports);
+tslib_1.__exportStar(require("./layout.types"), exports);
+// LOD policy types (LODLevel, LODFeature, LODTier, LODConfig, createDefaultLODConfig).
+// Public so apps can register custom Level-of-Detail tiers.
+tslib_1.__exportStar(require("./performance.types"), exports);
+//# sourceMappingURL=index.js.map

package/src/libs/engine/src/types/layout.types.d.ts

@@ -0,0 +1,148 @@
+/**
+ * Layout type for containers
+ */
+export type LayoutType = 'none' | 'flexbox' | 'grid';
+/**
+ * Flexbox container configuration
+ * Maps directly to CSS Flexbox properties
+ */
+export interface FlexboxLayoutConfig {
+    /** Main axis direction */
+    direction: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    /** Whether items wrap to multiple lines */
+    wrap: 'nowrap' | 'wrap' | 'wrap-reverse';
+    /** Main axis alignment */
+    justifyContent: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+    /** Cross axis alignment */
+    alignItems: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /** Multi-line cross axis alignment */
+    alignContent: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'stretch';
+    /** Gap between items (px) */
+    gap: number | {
+        row: number;
+        column: number;
+    };
+    /** Padding inside container (px) */
+    padding?: number | {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /** Column-based layout (like Bootstrap 12-column grid) */
+    columns?: number;
+}
+/**
+ * Grid container configuration
+ * Maps directly to CSS Grid properties
+ */
+export interface GridLayoutConfig {
+    /** Column track definitions (e.g., "repeat(3, 1fr)", "100px 200px auto") */
+    templateColumns: string;
+    /** Row track definitions */
+    templateRows: string;
+    /** Named grid areas */
+    templateAreas?: string[];
+    /** Gap between columns (px) */
+    columnGap: number;
+    /** Gap between rows (px) */
+    rowGap: number;
+    /** Auto-placement algorithm */
+    autoFlow: 'row' | 'column' | 'dense';
+    /** Auto-generated column size */
+    autoColumns?: string;
+    /** Auto-generated row size */
+    autoRows?: string;
+    /** Horizontal alignment of items within cells */
+    justifyItems?: 'start' | 'center' | 'end' | 'stretch';
+    /** Vertical alignment of items within cells */
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    /** Horizontal alignment of grid within container */
+    justifyContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+    /** Vertical alignment of grid within container */
+    alignContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+    /** Padding inside container (px) */
+    padding?: number | {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}
+/**
+ * Flexbox item configuration
+ * Applied to nodes inside a flexbox container
+ */
+export interface FlexItemConfig {
+    /** Display order (default: 0) */
+    order?: number;
+    /** Growth factor (default: 0) */
+    flexGrow?: number;
+    /** Shrink factor (default: 1) */
+    flexShrink?: number;
+    /** Base size before growing/shrinking (default: 'auto') */
+    flexBasis?: number | 'auto';
+    /** Override container's align-items for this item */
+    alignSelf?: 'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+}
+/**
+ * Grid item configuration
+ * Applied to nodes inside a grid container
+ */
+export interface GridItemConfig {
+    /** Starting column line (1-based or 'auto') */
+    columnStart?: number | 'auto';
+    /** Ending column line (1-based or 'auto') */
+    columnEnd?: number | 'auto';
+    /** Starting row line (1-based or 'auto') */
+    rowStart?: number | 'auto';
+    /** Ending row line (1-based or 'auto') */
+    rowEnd?: number | 'auto';
+    /** Named grid area to place item in */
+    gridArea?: string;
+    /** Override container's justify-items for this item */
+    justifySelf?: 'auto' | 'start' | 'center' | 'end' | 'stretch';
+    /** Override container's align-items for this item */
+    alignSelf?: 'auto' | 'start' | 'center' | 'end' | 'stretch';
+}
+/**
+ * Union type for all layout configurations
+ */
+export type LayoutConfig = FlexboxLayoutConfig | GridLayoutConfig;
+/**
+ * Serialized layout configuration
+ */
+export interface SerializedLayoutConfig {
+    type: LayoutType;
+    config?: LayoutConfig;
+}
+/**
+ * Serialized flex item configuration
+ */
+export interface SerializedFlexItemConfig {
+    order?: number;
+    flexGrow?: number;
+    flexShrink?: number;
+    flexBasis?: number | 'auto';
+    alignSelf?: string;
+}
+/**
+ * Serialized grid item configuration
+ */
+export interface SerializedGridItemConfig {
+    columnStart?: number | 'auto';
+    columnEnd?: number | 'auto';
+    rowStart?: number | 'auto';
+    rowEnd?: number | 'auto';
+    gridArea?: string;
+    justifySelf?: string;
+    alignSelf?: string;
+}
+/**
+ * Default flexbox configuration
+ */
+export declare const DEFAULT_FLEXBOX_CONFIG: FlexboxLayoutConfig;
+/**
+ * Default grid configuration
+ */
+export declare const DEFAULT_GRID_CONFIG: GridLayoutConfig;

package/src/libs/engine/src/types/layout.types.js

@@ -0,0 +1,28 @@
+"use strict";
+// Layout configuration type definitions (Phase 1.7)
+// These types define CSS Flexbox/Grid configurations that are stored in the engine
+// and applied by renderers (HTML/SVG use native CSS, Canvas/WebGL use layout libraries)
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_GRID_CONFIG = exports.DEFAULT_FLEXBOX_CONFIG = void 0;
+/**
+ * Default flexbox configuration
+ */
+exports.DEFAULT_FLEXBOX_CONFIG = {
+    direction: 'row',
+    wrap: 'nowrap',
+    justifyContent: 'start',
+    alignItems: 'stretch',
+    alignContent: 'stretch',
+    gap: 0,
+};
+/**
+ * Default grid configuration
+ */
+exports.DEFAULT_GRID_CONFIG = {
+    templateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
+    templateRows: 'auto',
+    columnGap: 0,
+    rowGap: 0,
+    autoFlow: 'row',
+};
+//# sourceMappingURL=layout.types.js.map