@grafloria/element 0.3.18 → 0.3.20

package/src/libs/element/src/lib/stencil-kit/styles.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ensureStencilKitStyles = ensureStencilKitStyles;
+/**
+ * Stencil-palette styles, injected once per document (same discipline as the
+ * dashboard kit: the kit owns its chrome so a host gets a working palette
+ * without copying CSS, and every colour is a themable custom property).
+ */
+const STENCIL_KIT_STYLE_ID = 'grafloria-stencil-kit-styles';
+const CSS = `
+.gf-stencil {
+  --gf-st-bg: #fff; --gf-st-ink: #1e2436; --gf-st-mut: #6b7280;
+  --gf-st-line: #e5e7eb; --gf-st-accent: #3B52D9; --gf-st-hover: #f5f7ff;
+  display: flex; flex-direction: column; min-height: 0; height: 100%;
+  background: var(--gf-st-bg); color: var(--gf-st-ink);
+  font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif;
+  border-right: 1px solid var(--gf-st-line); box-sizing: border-box;
+}
+@media (prefers-color-scheme: dark) {
+  .gf-stencil {
+    --gf-st-bg: #161a24; --gf-st-ink: #e8ecfb; --gf-st-mut: #9aa4bf;
+    --gf-st-line: #2a3040; --gf-st-accent: #8fa2ff; --gf-st-hover: #1e2536;
+  }
+}
+.gf-stencil-search { padding: 10px; border-bottom: 1px solid var(--gf-st-line); }
+.gf-stencil-search input {
+  width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 8px;
+  border: 1px solid var(--gf-st-line); background: var(--gf-st-bg);
+  color: var(--gf-st-ink); font: inherit; outline: none;
+}
+.gf-stencil-search input:focus { border-color: var(--gf-st-accent); }
+.gf-stencil-body { overflow: auto; flex: 1; min-height: 0; padding-bottom: 8px; }
+.gf-stencil-group > summary {
+  cursor: pointer; padding: 8px 10px; font-weight: 600; font-size: 12px;
+  letter-spacing: .02em; text-transform: uppercase; color: var(--gf-st-mut);
+  list-style: none; user-select: none; display: flex; align-items: center; gap: 6px;
+}
+.gf-stencil-group > summary::-webkit-details-marker { display: none; }
+.gf-stencil-group > summary::before { content: '▸'; font-size: 10px; transition: transform .15s; }
+.gf-stencil-group[open] > summary::before { transform: rotate(90deg); }
+.gf-stencil-group > summary:hover { color: var(--gf-st-ink); }
+.gf-stencil-count { margin-left: auto; font-weight: 500; opacity: .7; text-transform: none; }
+.gf-stencil-items {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
+  gap: 4px; padding: 2px 8px 10px;
+}
+.gf-stencil-item {
+  display: flex; flex-direction: column; align-items: center; gap: 4px;
+  padding: 8px 4px; border-radius: 8px; cursor: grab; border: 1px solid transparent;
+  text-align: center; background: none;
+}
+.gf-stencil-item:hover { background: var(--gf-st-hover); border-color: var(--gf-st-line); }
+.gf-stencil-item:active { cursor: grabbing; }
+.gf-stencil-item svg { display: block; overflow: visible; }
+.gf-stencil-label {
+  font-size: 10.5px; color: var(--gf-st-mut); line-height: 1.25;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  overflow: hidden; word-break: break-word;
+}
+.gf-stencil-item:hover .gf-stencil-label { color: var(--gf-st-ink); }
+.gf-stencil-empty { padding: 18px 12px; color: var(--gf-st-mut); font-size: 12px; text-align: center; }
+.gf-shapedata {
+  --gf-st-bg: #fff; --gf-st-ink: #1e2436; --gf-st-mut: #6b7280;
+  --gf-st-line: #e5e7eb; --gf-st-accent: #3B52D9;
+  display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
+  background: var(--gf-st-bg); color: var(--gf-st-ink); overflow: auto;
+  font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif;
+  border-left: 1px solid var(--gf-st-line);
+}
+@media (prefers-color-scheme: dark) {
+  .gf-shapedata { --gf-st-bg: #161a24; --gf-st-ink: #e8ecfb; --gf-st-mut: #9aa4bf; --gf-st-line: #2a3040; --gf-st-accent: #8fa2ff; }
+}
+.gf-sd-title {
+  padding: 10px 12px; font-weight: 600; font-size: 12px; text-transform: uppercase;
+  letter-spacing: .02em; color: var(--gf-st-mut); border-bottom: 1px solid var(--gf-st-line);
+}
+.gf-sd-empty { padding: 16px 12px; color: var(--gf-st-mut); font-size: 12px; }
+.gf-sd-fields { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
+.gf-sd-row { display: flex; flex-direction: column; gap: 3px; }
+.gf-sd-label { font-size: 11px; color: var(--gf-st-mut); }
+.gf-sd-input {
+  padding: 6px 8px; border: 1px solid var(--gf-st-line); border-radius: 7px;
+  background: var(--gf-st-bg); color: var(--gf-st-ink); font: inherit; outline: none; width: 100%; box-sizing: border-box;
+}
+.gf-sd-input:focus { border-color: var(--gf-st-accent); }
+.gf-sd-check { width: 16px; height: 16px; accent-color: var(--gf-st-accent); }
+.gf-sd-section {
+  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
+  color: var(--gf-st-mut); margin: 10px 0 2px; padding-top: 8px; border-top: 1px solid var(--gf-st-line);
+}
+.gf-sd-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
+.gf-sd-danger {
+  margin-top: 8px; padding: 6px 10px; border-radius: 7px; cursor: pointer;
+  border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c;
+  font: 600 12px ui-sans-serif, system-ui, sans-serif;
+}
+.gf-sd-danger:hover { background: #fee2e2; }
+@media (prefers-color-scheme: dark) {
+  .gf-sd-danger { background: #2a1414; border-color: #7f1d1d; color: #fca5a5; }
+}
+
+/* The canvas while a stencil is held over it. */
+.gf-stencil-target { outline: 2px dashed var(--gf-st-accent); outline-offset: -3px; }
+
+/* The drag GHOST — the master's silhouette + name following the cursor during a
+   palette drag, so the drop point is legible. A DOM element on purpose: the
+   browser's native drag image lives outside the DOM, does not screenshot, and
+   several platforms simply never paint it. */
+.gf-stencil-ghost {
+  position: fixed; z-index: 1000; pointer-events: none;
+  transform: translate(-50%, -50%); opacity: .6;
+  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
+  background: var(--gf-st-bg, #fff); color: var(--gf-st-ink, #1e2436);
+  border: 1px solid var(--gf-st-accent, #3B52D9); border-radius: 8px;
+  box-shadow: 0 6px 20px rgba(0,0,0,.18);
+  font: 12px ui-sans-serif, system-ui, sans-serif;
+}
+.gf-stencil-ghost svg { display: block; }
+`;
+/** Inject the palette stylesheet once per document. */
+function ensureStencilKitStyles(doc = document) {
+    if (doc.getElementById(STENCIL_KIT_STYLE_ID))
+        return;
+    const style = doc.createElement('style');
+    style.id = STENCIL_KIT_STYLE_ID;
+    style.textContent = CSS;
+    doc.head.appendChild(style);
+}
+//# sourceMappingURL=styles.js.map

package/src/libs/engine/src/adapters/component-adapter.interface.d.ts

@@ -0,0 +1,302 @@
+/**
+ * Component Adapter Interface
+ *
+ * Framework-agnostic interface for rendering framework components in diagram nodes.
+ * This abstraction allows the core engine to work with any UI framework
+ * (Angular, React, Vue, etc.) through a unified API.
+ *
+ * Pattern: Adapter Pattern
+ * Purpose: Decouple engine from framework-specific component systems
+ *
+ * Implementation Guide:
+ * - Interface lives in @grafloria/engine (framework-agnostic)
+ * - Implementations live in framework packages (@grafloria/angular, @grafloria/adapter-react)
+ * - Each adapter wraps its framework's component system
+ *
+ * @example
+ * ```typescript
+ * // Angular Implementation
+ * class AngularComponentAdapter implements ComponentAdapter {
+ *   readonly framework = 'angular';
+ *
+ *   registerComponent(nodeType: string, component: Type<any>): void {
+ *     this.componentRenderer.registerComponent(nodeType, component);
+ *   }
+ *
+ *   createComponentInstance(node: NodeModel, container: ViewContainerRef): ComponentRef<any> {
+ *     return this.componentRenderer.renderComponent(node, container, {
+ *       inputs: { ...node.data, positionX: node.position.x, positionY: node.position.y }
+ *     });
+ *   }
+ *
+ *   // ... other methods
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // React Implementation
+ * class ReactComponentAdapter implements ComponentAdapter {
+ *   readonly framework = 'react';
+ *
+ *   registerComponent(nodeType: string, component: React.ComponentType): void {
+ *     this.registry.set(nodeType, component);
+ *   }
+ *
+ *   createComponentInstance(node: NodeModel, container: HTMLElement): ReactInstance {
+ *     const Component = this.registry.get(node.type);
+ *     const root = ReactDOM.createRoot(container);
+ *     root.render(<Component {...node.data} x={node.position.x} y={node.position.y} />);
+ *     return { root, node };
+ *   }
+ *
+ *   // ... other methods
+ * }
+ * ```
+ */
+import type { NodeModel } from '../models/NodeModel';
+/**
+ * Framework-agnostic component adapter interface
+ *
+ * Provides unified API for framework component systems
+ */
+export interface ComponentAdapter {
+    /**
+     * Framework identifier (e.g., 'angular', 'react', 'vue')
+     * Used for debugging and framework detection
+     *
+     * @readonly
+     */
+    readonly framework: string;
+    /**
+     * Register a framework component for a specific node type
+     *
+     * Associates a component class/function with a node type string.
+     * When nodes of this type are rendered, this component will be instantiated.
+     *
+     * @param nodeType - Node type identifier (e.g., 'erd.table', 'bpmn.task')
+     * @param component - Framework component (Angular: Type<any>, React: ComponentType, etc.)
+     *
+     * @example
+     * ```typescript
+     * // Angular
+     * adapter.registerComponent('erd.table', ErdTableComponent);
+     *
+     * // React
+     * adapter.registerComponent('erd.table', ErdTableComponent);
+     * ```
+     */
+    registerComponent(nodeType: string, component: any): void;
+    /**
+     * Check if a component is registered for a node type
+     *
+     * @param nodeType - Node type identifier
+     * @returns True if component is registered
+     *
+     * @example
+     * ```typescript
+     * if (adapter.hasComponent('erd.table')) {
+     *   console.log('ERD table component is registered');
+     * }
+     * ```
+     */
+    hasComponent(nodeType: string): boolean;
+    /**
+     * Get registered component class for a node type
+     *
+     * @param nodeType - Node type identifier
+     * @returns Component class or undefined if not registered
+     *
+     * @example
+     * ```typescript
+     * const component = adapter.getComponent('erd.table');
+     * if (component) {
+     *   console.log('Found component:', component.name);
+     * }
+     * ```
+     */
+    getComponent(nodeType: string): any | undefined;
+    /**
+     * Create component instance for a diagram node
+     *
+     * Instantiates the registered component for the node's type and passes:
+     * - Node data as inputs/props
+     * - Node position (x, y)
+     * - Node size (width, height) if available
+     * - Any other node metadata
+     *
+     * @param node - NodeModel to render
+     * @param container - Framework-specific container (ViewContainerRef, HTMLElement, etc.)
+     * @returns Framework-specific component instance
+     * @throws Error if component not registered for node type
+     *
+     * @example
+     * ```typescript
+     * const node = new NodeModel({
+     *   id: 'node-1',
+     *   type: 'erd.table',
+     *   position: { x: 100, y: 200 },
+     *   data: { tableName: 'users', columns: [...] }
+     * });
+     *
+     * // Angular
+     * const componentRef = adapter.createComponentInstance(node, viewContainerRef);
+     *
+     * // React
+     * const reactInstance = adapter.createComponentInstance(node, divElement);
+     * ```
+     */
+    createComponentInstance(node: NodeModel, container: any): any;
+    /**
+     * Update component instance with new node data
+     *
+     * Efficiently updates component inputs/props without recreating instance.
+     * Should trigger framework change detection/re-render.
+     *
+     * @param instance - Framework-specific component instance
+     * @param node - Updated NodeModel with new data
+     *
+     * @example
+     * ```typescript
+     * // Update node data
+     * node.data = { tableName: 'products', columns: [...] };
+     * node.setPosition(300, 400);
+     *
+     * // Update component to reflect changes
+     * adapter.updateComponentInstance(componentInstance, node);
+     * ```
+     */
+    updateComponentInstance(instance: any, node: NodeModel): void;
+    /**
+     * Destroy component instance and clean up resources
+     *
+     * Calls framework lifecycle hooks (ngOnDestroy, componentWillUnmount, etc.),
+     * unsubscribes from events, and removes from DOM.
+     *
+     * Should be idempotent - safe to call multiple times.
+     *
+     * @param instance - Framework-specific component instance
+     *
+     * @example
+     * ```typescript
+     * adapter.destroyComponentInstance(componentInstance);
+     * // Instance is cleaned up, memory released
+     * ```
+     */
+    destroyComponentInstance(instance: any): void;
+    /**
+     * Get list of all registered node type identifiers
+     *
+     * Useful for:
+     * - Component palette UI (show available components)
+     * - Validation (check if node type has component)
+     * - Debugging (inspect registered components)
+     *
+     * @returns Array of registered node type strings
+     *
+     * @example
+     * ```typescript
+     * const types = adapter.getRegisteredTypes();
+     * console.log('Available components:', types);
+     * // ['erd.table', 'bpmn.task', 'bpmn.gateway', ...]
+     * ```
+     */
+    getRegisteredTypes(): string[];
+    /**
+     * Destroy all component instances (optional)
+     *
+     * Convenience method to clean up all managed components at once.
+     * Useful when clearing diagram or unmounting renderer.
+     *
+     * @example
+     * ```typescript
+     * // Clean up on diagram clear
+     * adapter.destroyAll?.();
+     * ```
+     */
+    destroyAll?(): void;
+    /**
+     * Get count of active component instances (optional)
+     *
+     * Useful for:
+     * - Debugging
+     * - Performance monitoring
+     * - Memory leak detection
+     *
+     * @returns Number of active component instances
+     *
+     * @example
+     * ```typescript
+     * console.log('Active components:', adapter.getActiveCount?.() ?? 0);
+     * ```
+     */
+    getActiveCount?(): number;
+}
+/**
+ * Type guard to check if an object implements ComponentAdapter
+ *
+ * @param obj - Object to check
+ * @returns True if object implements ComponentAdapter interface
+ *
+ * @example
+ * ```typescript
+ * if (isComponentAdapter(obj)) {
+ *   obj.registerComponent('test', TestComponent);
+ * }
+ * ```
+ */
+export declare function isComponentAdapter(obj: any): obj is ComponentAdapter;
+/**
+ * Metadata for component registration
+ *
+ * Optional metadata that can be associated with registered components
+ */
+export interface ComponentMetadata {
+    /** Display name for component palette */
+    displayName?: string;
+    /** Category for grouping in palette (e.g., 'ERD', 'BPMN', 'Flowchart') */
+    category?: string;
+    /** Icon identifier for palette */
+    icon?: string;
+    /** Brief description of component */
+    description?: string;
+    /** Tags for search/filtering */
+    tags?: string[];
+    /** Default size for new nodes */
+    defaultSize?: {
+        width: number;
+        height: number;
+    };
+    /** Whether component can be resized */
+    resizable?: boolean;
+    /** Whether component supports ports */
+    supportsPorts?: boolean;
+}
+/**
+ * Extended adapter interface with metadata support
+ *
+ * Optional extension for adapters that support component metadata
+ */
+export interface ComponentAdapterWithMetadata extends ComponentAdapter {
+    /**
+     * Register component with metadata
+     *
+     * @param nodeType - Node type identifier
+     * @param component - Framework component
+     * @param metadata - Component metadata
+     */
+    registerComponentWithMetadata(nodeType: string, component: any, metadata: ComponentMetadata): void;
+    /**
+     * Get metadata for registered component
+     *
+     * @param nodeType - Node type identifier
+     * @returns Component metadata or undefined
+     */
+    getComponentMetadata(nodeType: string): ComponentMetadata | undefined;
+    /**
+     * Get all components with their metadata
+     *
+     * @returns Map of node type to metadata
+     */
+    getAllComponentMetadata(): Map<string, ComponentMetadata>;
+}

package/src/libs/engine/src/adapters/component-adapter.interface.js

@@ -0,0 +1,84 @@
+"use strict";
+/**
+ * Component Adapter Interface
+ *
+ * Framework-agnostic interface for rendering framework components in diagram nodes.
+ * This abstraction allows the core engine to work with any UI framework
+ * (Angular, React, Vue, etc.) through a unified API.
+ *
+ * Pattern: Adapter Pattern
+ * Purpose: Decouple engine from framework-specific component systems
+ *
+ * Implementation Guide:
+ * - Interface lives in @grafloria/engine (framework-agnostic)
+ * - Implementations live in framework packages (@grafloria/angular, @grafloria/adapter-react)
+ * - Each adapter wraps its framework's component system
+ *
+ * @example
+ * ```typescript
+ * // Angular Implementation
+ * class AngularComponentAdapter implements ComponentAdapter {
+ *   readonly framework = 'angular';
+ *
+ *   registerComponent(nodeType: string, component: Type<any>): void {
+ *     this.componentRenderer.registerComponent(nodeType, component);
+ *   }
+ *
+ *   createComponentInstance(node: NodeModel, container: ViewContainerRef): ComponentRef<any> {
+ *     return this.componentRenderer.renderComponent(node, container, {
+ *       inputs: { ...node.data, positionX: node.position.x, positionY: node.position.y }
+ *     });
+ *   }
+ *
+ *   // ... other methods
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // React Implementation
+ * class ReactComponentAdapter implements ComponentAdapter {
+ *   readonly framework = 'react';
+ *
+ *   registerComponent(nodeType: string, component: React.ComponentType): void {
+ *     this.registry.set(nodeType, component);
+ *   }
+ *
+ *   createComponentInstance(node: NodeModel, container: HTMLElement): ReactInstance {
+ *     const Component = this.registry.get(node.type);
+ *     const root = ReactDOM.createRoot(container);
+ *     root.render(<Component {...node.data} x={node.position.x} y={node.position.y} />);
+ *     return { root, node };
+ *   }
+ *
+ *   // ... other methods
+ * }
+ * ```
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isComponentAdapter = isComponentAdapter;
+/**
+ * Type guard to check if an object implements ComponentAdapter
+ *
+ * @param obj - Object to check
+ * @returns True if object implements ComponentAdapter interface
+ *
+ * @example
+ * ```typescript
+ * if (isComponentAdapter(obj)) {
+ *   obj.registerComponent('test', TestComponent);
+ * }
+ * ```
+ */
+function isComponentAdapter(obj) {
+    return (obj &&
+        typeof obj.framework === 'string' &&
+        typeof obj.registerComponent === 'function' &&
+        typeof obj.hasComponent === 'function' &&
+        typeof obj.getComponent === 'function' &&
+        typeof obj.createComponentInstance === 'function' &&
+        typeof obj.updateComponentInstance === 'function' &&
+        typeof obj.destroyComponentInstance === 'function' &&
+        typeof obj.getRegisteredTypes === 'function');
+}
+//# sourceMappingURL=component-adapter.interface.js.map

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

@@ -0,0 +1,7 @@
+/**
+ * Component Adapter Exports
+ *
+ * Framework-agnostic interfaces for component rendering adapters
+ */
+export type { ComponentAdapter, ComponentMetadata, ComponentAdapterWithMetadata, } from './component-adapter.interface';
+export { isComponentAdapter } from './component-adapter.interface';

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

@@ -0,0 +1,11 @@
+"use strict";
+/**
+ * Component Adapter Exports
+ *
+ * Framework-agnostic interfaces for component rendering adapters
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isComponentAdapter = void 0;
+var component_adapter_interface_1 = require("./component-adapter.interface");
+Object.defineProperty(exports, "isComponentAdapter", { enumerable: true, get: function () { return component_adapter_interface_1.isComponentAdapter; } });
+//# sourceMappingURL=index.js.map

package/src/libs/engine/src/clipboard/ClipboardManager.d.ts

@@ -0,0 +1,81 @@
+import type { NodeModel } from '../models/NodeModel';
+import type { LinkModel } from '../models/LinkModel';
+import type { GroupModel } from '../models/GroupModel';
+import type { SerializedNode } from '../models/NodeModel';
+import type { SerializedLink } from '../models/LinkModel';
+import type { SerializedGroup } from '../models/GroupModel';
+/**
+ * Clipboard data format for diagram entities
+ */
+export interface ClipboardData {
+    nodes: SerializedNode[];
+    links: SerializedLink[];
+    groups: SerializedGroup[];
+    timestamp: number;
+    sourceDiagramId?: string;
+    /** @deprecated misspelling kept for payload back-compat — use sourceDiagramId */
+    sourceDigramId?: string;
+}
+/**
+ * ClipboardManager handles copy/paste operations for diagram entities
+ *
+ * Features:
+ * - Serializes selected entities to clipboard format
+ * - Handles relationship preservation (links between copied nodes)
+ * - Supports cross-diagram paste (ID remapping)
+ * - Maintains clipboard history
+ */
+export declare class ClipboardManager {
+    private clipboard;
+    private history;
+    private readonly maxHistorySize;
+    private pasteSerial;
+    /**
+     * Copy entities to clipboard
+     */
+    copy(data: {
+        nodes: NodeModel[];
+        links: LinkModel[];
+        groups: GroupModel[];
+        sourceDiagramId?: string;
+    }): void;
+    /**
+     * Get clipboard data
+     */
+    get(): ClipboardData | null;
+    /**
+     * Claim the next paste slot for the CURRENT clipboard payload (1-based).
+     *
+     * Repeat-pasting the same copy must cascade — the clipboard's serialized
+     * positions are frozen at copy time, so a constant default offset lands
+     * every paste on the exact same pixels and "paste" appears to work only
+     * once (live report). Each PasteCommand claims its slot once (stable
+     * across redo); a new copy() resets the cascade.
+     */
+    claimPasteSlot(): number;
+    /**
+     * Check if clipboard has data
+     */
+    hasData(): boolean;
+    /**
+     * Clear clipboard
+     */
+    clear(): void;
+    /**
+     * Get clipboard history
+     */
+    getHistory(): ClipboardData[];
+    /**
+     * Check if clipboard contains nodes from a specific diagram
+     */
+    isFromDiagram(diagramId: string): boolean;
+    /**
+     * Get clipboard statistics
+     */
+    getStats(): {
+        nodeCount: number;
+        linkCount: number;
+        groupCount: number;
+        timestamp: number | null;
+    };
+}