@grafloria/element 0.3.18 → 0.3.20

package/src/libs/engine/src/dsl/sync/BidirectionalSync.d.ts

@@ -0,0 +1,154 @@
+/**
+ * Bidirectional Sync - Manages real-time text ↔ visual synchronization
+ *
+ * Implements debounced bidirectional editing with conflict resolution:
+ * - 300ms debounce for both directions
+ * - Prevents infinite sync loops
+ * - Tracks edit sources (text vs visual)
+ * - Provides sync state and statistics
+ */
+import { DiagramModel } from '../../models/DiagramModel';
+import { GeneratorOptions } from '../generator/DSLGenerator';
+import { TransformOptions } from '../transformer/ASTTransformer';
+export type SyncDirection = 'text-to-visual' | 'visual-to-text' | 'none';
+export type EditSource = 'text' | 'visual' | 'none';
+export interface SyncOptions {
+    /**
+     * Debounce delay in milliseconds (default: 300)
+     */
+    debounceMs?: number;
+    /**
+     * Enable debug logging
+     */
+    debug?: boolean;
+    /**
+     * Auto-apply layout after text changes
+     */
+    autoLayout?: boolean;
+    /**
+     * Generator options for visual→text sync
+     */
+    generatorOptions?: GeneratorOptions;
+    /**
+     * Transformer options for text→visual sync
+     */
+    transformerOptions?: TransformOptions;
+}
+export interface SyncState {
+    /**
+     * Is sync currently active
+     */
+    active: boolean;
+    /**
+     * Last edit source
+     */
+    lastEditSource: EditSource;
+    /**
+     * Last sync direction
+     */
+    lastSyncDirection: SyncDirection;
+    /**
+     * Sync in progress
+     */
+    syncing: boolean;
+    /**
+     * Number of pending syncs
+     */
+    pendingCount: number;
+    /**
+     * Statistics
+     */
+    stats: {
+        textToVisualCount: number;
+        visualToTextCount: number;
+        conflictsResolved: number;
+        lastSyncTime: number;
+    };
+}
+export type SyncCallback = (direction: SyncDirection, success: boolean) => void;
+export declare class BidirectionalSync {
+    private dsl;
+    private diagram?;
+    private currentText;
+    private options;
+    private textDebounceTimer?;
+    private visualDebounceTimer?;
+    private state;
+    private syncLock;
+    private unsubscribeFunctions;
+    private callbacks;
+    private diagramChangeListener?;
+    constructor(options?: SyncOptions);
+    /**
+     * Initialize sync with diagram and initial text
+     */
+    initialize(diagram: DiagramModel, initialText?: string): void;
+    /**
+     * Update text (called when user edits text)
+     */
+    onTextChange(newText: string): void;
+    /**
+     * Sync text to visual (text → diagram)
+     */
+    private syncTextToVisual;
+    /**
+     * Sync visual to text (diagram → text)
+     */
+    private syncVisualToText;
+    /**
+     * Update diagram with new content
+     */
+    private updateDiagram;
+    /**
+     * Setup diagram change listeners
+     */
+    private setupDiagramListeners;
+    /**
+     * Handle visual changes (called when diagram is modified)
+     */
+    private onVisualChange;
+    /**
+     * Mark next changes as from visual editor
+     */
+    markVisualEdit(): void;
+    /**
+     * Mark next changes as from text editor
+     */
+    markTextEdit(): void;
+    /**
+     * Get current text
+     */
+    getCurrentText(): string;
+    /**
+     * Get current diagram
+     */
+    getDiagram(): DiagramModel | undefined;
+    /**
+     * Get sync state
+     */
+    getState(): Readonly<SyncState>;
+    /**
+     * Add sync callback
+     */
+    onSync(callback: SyncCallback): () => void;
+    /**
+     * Notify callbacks
+     */
+    private notifyCallbacks;
+    /**
+     * Pause sync
+     */
+    pause(): void;
+    /**
+     * Resume sync
+     */
+    resume(): void;
+    /**
+     * Force sync in specific direction
+     */
+    forceSync(direction: 'text-to-visual' | 'visual-to-text'): void;
+    /**
+     * Dispose and cleanup
+     */
+    dispose(): void;
+}

package/src/libs/engine/src/dsl/sync/BidirectionalSync.js

@@ -0,0 +1,389 @@
+"use strict";
+/**
+ * Bidirectional Sync - Manages real-time text ↔ visual synchronization
+ *
+ * Implements debounced bidirectional editing with conflict resolution:
+ * - 300ms debounce for both directions
+ * - Prevents infinite sync loops
+ * - Tracks edit sources (text vs visual)
+ * - Provides sync state and statistics
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BidirectionalSync = void 0;
+const tslib_1 = require("tslib");
+const DSL_1 = require("../DSL");
+class BidirectionalSync {
+    constructor(options = {}) {
+        var _a, _b, _c, _d, _e;
+        this.currentText = '';
+        // Sync state
+        this.state = {
+            active: false,
+            lastEditSource: 'none',
+            lastSyncDirection: 'none',
+            syncing: false,
+            pendingCount: 0,
+            stats: {
+                textToVisualCount: 0,
+                visualToTextCount: 0,
+                conflictsResolved: 0,
+                lastSyncTime: 0,
+            },
+        };
+        // Sync lock to prevent loops
+        this.syncLock = false;
+        // Event unsubscribe functions
+        this.unsubscribeFunctions = [];
+        // Callbacks
+        this.callbacks = [];
+        this.options = {
+            debounceMs: (_a = options.debounceMs) !== null && _a !== void 0 ? _a : 300,
+            debug: (_b = options.debug) !== null && _b !== void 0 ? _b : false,
+            autoLayout: (_c = options.autoLayout) !== null && _c !== void 0 ? _c : true,
+            generatorOptions: (_d = options.generatorOptions) !== null && _d !== void 0 ? _d : {},
+            transformerOptions: (_e = options.transformerOptions) !== null && _e !== void 0 ? _e : {},
+        };
+        this.dsl = new DSL_1.DSL({
+            autoLayout: this.options.autoLayout,
+            debug: this.options.debug,
+            transformOptions: this.options.transformerOptions,
+        });
+    }
+    /**
+     * Initialize sync with diagram and initial text
+     */
+    initialize(diagram, initialText) {
+        this.diagram = diagram;
+        if (initialText) {
+            this.currentText = initialText;
+        }
+        else {
+            // Generate initial text from diagram
+            this.currentText = this.dsl.generate(diagram, this.options.generatorOptions);
+        }
+        // Listen to diagram changes
+        this.setupDiagramListeners();
+        this.state.active = true;
+        if (this.options.debug) {
+            console.log('[BidirectionalSync] Initialized');
+        }
+    }
+    /**
+     * Update text (called when user edits text)
+     */
+    onTextChange(newText) {
+        if (!this.state.active || this.syncLock) {
+            return;
+        }
+        // Clear existing timer
+        if (this.textDebounceTimer) {
+            clearTimeout(this.textDebounceTimer);
+        }
+        // Update state
+        this.state.lastEditSource = 'text';
+        this.state.pendingCount++;
+        if (this.options.debug) {
+            console.log(`[BidirectionalSync] Text changed, debouncing (${this.options.debounceMs}ms)...`);
+        }
+        // Debounce
+        this.textDebounceTimer = setTimeout(() => {
+            this.syncTextToVisual(newText);
+            this.state.pendingCount--;
+        }, this.options.debounceMs);
+    }
+    /**
+     * Sync text to visual (text → diagram)
+     */
+    syncTextToVisual(text) {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            if (!this.diagram || this.syncLock) {
+                return;
+            }
+            this.state.syncing = true;
+            this.state.lastSyncDirection = 'text-to-visual';
+            // Set lock to prevent visual → text sync
+            this.syncLock = true;
+            try {
+                if (this.options.debug) {
+                    console.log('[BidirectionalSync] Syncing text → visual...');
+                }
+                const startTime = performance.now();
+                // Parse new text
+                const newDiagram = this.dsl.parse(text);
+                // Update current diagram
+                this.updateDiagram(newDiagram);
+                // Update stored text
+                this.currentText = text;
+                // Update stats
+                this.state.stats.textToVisualCount++;
+                this.state.stats.lastSyncTime = performance.now() - startTime;
+                if (this.options.debug) {
+                    console.log(`[BidirectionalSync] Text → Visual complete (${this.state.stats.lastSyncTime.toFixed(2)}ms)`);
+                }
+                // Notify callbacks
+                this.notifyCallbacks('text-to-visual', true);
+            }
+            catch (error) {
+                console.error('[BidirectionalSync] Text → Visual sync failed:', error);
+                this.notifyCallbacks('text-to-visual', false);
+            }
+            finally {
+                this.syncLock = false;
+                this.state.syncing = false;
+            }
+        });
+    }
+    /**
+     * Sync visual to text (diagram → text)
+     */
+    syncVisualToText() {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            if (!this.diagram || this.syncLock) {
+                return;
+            }
+            this.state.syncing = true;
+            this.state.lastSyncDirection = 'visual-to-text';
+            // Set lock to prevent text → visual sync
+            this.syncLock = true;
+            try {
+                if (this.options.debug) {
+                    console.log('[BidirectionalSync] Syncing visual → text...');
+                }
+                const startTime = performance.now();
+                // Generate text from diagram
+                const newText = this.dsl.generate(this.diagram, this.options.generatorOptions);
+                // Update stored text
+                this.currentText = newText;
+                // Update stats
+                this.state.stats.visualToTextCount++;
+                this.state.stats.lastSyncTime = performance.now() - startTime;
+                if (this.options.debug) {
+                    console.log(`[BidirectionalSync] Visual → Text complete (${this.state.stats.lastSyncTime.toFixed(2)}ms)`);
+                }
+                // Notify callbacks
+                this.notifyCallbacks('visual-to-text', true);
+            }
+            catch (error) {
+                console.error('[BidirectionalSync] Visual → Text sync failed:', error);
+                this.notifyCallbacks('visual-to-text', false);
+            }
+            finally {
+                this.syncLock = false;
+                this.state.syncing = false;
+            }
+        });
+    }
+    /**
+     * Update diagram with new content
+     */
+    updateDiagram(newDiagram) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (!this.diagram)
+            return;
+        // BATCH UPDATE: Suspend events during clear+rebuild to prevent flickering
+        // This prevents the UI from seeing intermediate states (5→4→3→2→1→0 nodes during clear)
+        const batchMethod = this.diagram.beginBatch;
+        console.log('[BidirectionalSync] Beginning batch update on OLD diagram, batchMethod exists:', !!batchMethod);
+        if (batchMethod && typeof batchMethod === 'function') {
+            this.diagram.beginBatch();
+            console.log('[BidirectionalSync] OLD diagram batch mode active:', (_b = (_a = this.diagram).isBatching) === null || _b === void 0 ? void 0 : _b.call(_a));
+        }
+        // IMPORTANT: Also put the NEW diagram in batch mode to prevent events during node iteration
+        const newBatchMethod = newDiagram.beginBatch;
+        console.log('[BidirectionalSync] Beginning batch update on NEW diagram, batchMethod exists:', !!newBatchMethod);
+        if (newBatchMethod && typeof newBatchMethod === 'function') {
+            newDiagram.beginBatch();
+            console.log('[BidirectionalSync] NEW diagram batch mode active:', (_d = (_c = newDiagram).isBatching) === null || _d === void 0 ? void 0 : _d.call(_c));
+        }
+        try {
+            // Clear existing content
+            console.log('[BidirectionalSync] Clearing diagram...');
+            this.diagram.clear();
+            // Copy nodes
+            for (const node of newDiagram.getNodes()) {
+                this.diagram.addNode(node);
+            }
+            // Copy links
+            for (const link of newDiagram.getLinks()) {
+                this.diagram.addLink(link);
+            }
+            // Copy metadata
+            const metadata = newDiagram.getMetadata('diagramType');
+            if (metadata) {
+                this.diagram.setMetadata('diagramType', metadata);
+            }
+            // Copy all metadata keys
+            const allMetadata = newDiagram.metadata;
+            if (allMetadata && typeof allMetadata === 'object') {
+                for (const [key, value] of Object.entries(allMetadata)) {
+                    this.diagram.setMetadata(key, value);
+                }
+            }
+        }
+        finally {
+            // END BATCH on NEW diagram first (before ending old diagram batch)
+            console.log('[BidirectionalSync] Ending batch update on NEW diagram...');
+            const newEndBatchMethod = newDiagram.endBatch;
+            if (newEndBatchMethod && typeof newEndBatchMethod === 'function') {
+                newDiagram.endBatch();
+                console.log('[BidirectionalSync] NEW diagram batch mode ended, still batching:', (_f = (_e = newDiagram).isBatching) === null || _f === void 0 ? void 0 : _f.call(_e));
+            }
+            // END BATCH: Resume events and fire single update on OLD diagram
+            console.log('[BidirectionalSync] Ending batch update on OLD diagram...');
+            const endBatchMethod = this.diagram.endBatch;
+            if (endBatchMethod && typeof endBatchMethod === 'function') {
+                this.diagram.endBatch();
+                console.log('[BidirectionalSync] OLD diagram batch mode ended, still batching:', (_h = (_g = this.diagram).isBatching) === null || _h === void 0 ? void 0 : _h.call(_g));
+            }
+        }
+    }
+    /**
+     * Setup diagram change listeners
+     */
+    setupDiagramListeners() {
+        if (!this.diagram)
+            return;
+        // Listen to all diagram changes
+        this.diagramChangeListener = () => {
+            if (this.state.lastEditSource === 'visual') {
+                this.onVisualChange();
+            }
+        };
+        // Store unsubscribe functions returned by .on()
+        this.unsubscribeFunctions.push(this.diagram.on('node:added', this.diagramChangeListener));
+        this.unsubscribeFunctions.push(this.diagram.on('node:removed', this.diagramChangeListener));
+        this.unsubscribeFunctions.push(this.diagram.on('node:changed', this.diagramChangeListener));
+        this.unsubscribeFunctions.push(this.diagram.on('link:added', this.diagramChangeListener));
+        this.unsubscribeFunctions.push(this.diagram.on('link:removed', this.diagramChangeListener));
+        this.unsubscribeFunctions.push(this.diagram.on('link:changed', this.diagramChangeListener));
+    }
+    /**
+     * Handle visual changes (called when diagram is modified)
+     */
+    onVisualChange() {
+        if (!this.state.active || this.syncLock) {
+            return;
+        }
+        // Clear existing timer
+        if (this.visualDebounceTimer) {
+            clearTimeout(this.visualDebounceTimer);
+        }
+        // Update state
+        this.state.pendingCount++;
+        if (this.options.debug) {
+            console.log(`[BidirectionalSync] Visual changed, debouncing (${this.options.debounceMs}ms)...`);
+        }
+        // Debounce
+        this.visualDebounceTimer = setTimeout(() => {
+            this.syncVisualToText();
+            this.state.pendingCount--;
+        }, this.options.debounceMs);
+    }
+    /**
+     * Mark next changes as from visual editor
+     */
+    markVisualEdit() {
+        this.state.lastEditSource = 'visual';
+    }
+    /**
+     * Mark next changes as from text editor
+     */
+    markTextEdit() {
+        this.state.lastEditSource = 'text';
+    }
+    /**
+     * Get current text
+     */
+    getCurrentText() {
+        return this.currentText;
+    }
+    /**
+     * Get current diagram
+     */
+    getDiagram() {
+        return this.diagram;
+    }
+    /**
+     * Get sync state
+     */
+    getState() {
+        return Object.assign({}, this.state);
+    }
+    /**
+     * Add sync callback
+     */
+    onSync(callback) {
+        this.callbacks.push(callback);
+        // Return unsubscribe function
+        return () => {
+            const index = this.callbacks.indexOf(callback);
+            if (index > -1) {
+                this.callbacks.splice(index, 1);
+            }
+        };
+    }
+    /**
+     * Notify callbacks
+     */
+    notifyCallbacks(direction, success) {
+        for (const callback of this.callbacks) {
+            try {
+                callback(direction, success);
+            }
+            catch (error) {
+                console.error('[BidirectionalSync] Callback error:', error);
+            }
+        }
+    }
+    /**
+     * Pause sync
+     */
+    pause() {
+        this.state.active = false;
+        if (this.options.debug) {
+            console.log('[BidirectionalSync] Paused');
+        }
+    }
+    /**
+     * Resume sync
+     */
+    resume() {
+        this.state.active = true;
+        if (this.options.debug) {
+            console.log('[BidirectionalSync] Resumed');
+        }
+    }
+    /**
+     * Force sync in specific direction
+     */
+    forceSync(direction) {
+        if (direction === 'text-to-visual') {
+            this.syncTextToVisual(this.currentText);
+        }
+        else {
+            this.syncVisualToText();
+        }
+    }
+    /**
+     * Dispose and cleanup
+     */
+    dispose() {
+        // Clear timers
+        if (this.textDebounceTimer) {
+            clearTimeout(this.textDebounceTimer);
+        }
+        if (this.visualDebounceTimer) {
+            clearTimeout(this.visualDebounceTimer);
+        }
+        // Call all unsubscribe functions to remove listeners
+        this.unsubscribeFunctions.forEach(unsubscribe => unsubscribe());
+        this.unsubscribeFunctions = [];
+        this.state.active = false;
+        this.callbacks = [];
+        if (this.options.debug) {
+            console.log('[BidirectionalSync] Disposed');
+        }
+    }
+}
+exports.BidirectionalSync = BidirectionalSync;
+//# sourceMappingURL=BidirectionalSync.js.map

package/src/libs/engine/src/dsl/sync/IntegratedSyncManager.d.ts

@@ -0,0 +1,128 @@
+/**
+ * Integrated Sync Manager - Complete synchronization solution
+ *
+ * Combines BidirectionalSync, LayoutApplicator, and SyncStateManager
+ * into a single, easy-to-use interface for text ↔ visual editing.
+ */
+import { DiagramModel } from '../../models/DiagramModel';
+import { SyncOptions } from './BidirectionalSync';
+import { LayoutApplicatorOptions } from './LayoutApplicator';
+import { SyncStatus, SyncMetrics } from './SyncStateManager';
+export interface IntegratedSyncOptions {
+    /**
+     * Bidirectional sync options
+     */
+    syncOptions?: SyncOptions;
+    /**
+     * Layout applicator options
+     */
+    layoutOptions?: LayoutApplicatorOptions;
+    /**
+     * Enable auto-layout on text changes
+     */
+    autoLayoutOnTextChange?: boolean;
+    /**
+     * Enable debug logging
+     */
+    debug?: boolean;
+}
+export type TextChangeCallback = (text: string) => void;
+export type DiagramChangeCallback = (diagram: DiagramModel) => void;
+export type StatusCallback = (status: SyncStatus) => void;
+export declare class IntegratedSyncManager {
+    private bidirectionalSync;
+    private layoutApplicator;
+    private stateManager;
+    private options;
+    private textChangeCallbacks;
+    private diagramChangeCallbacks;
+    constructor(options?: IntegratedSyncOptions);
+    /**
+     * Initialize with diagram and optional initial text
+     */
+    initialize(diagram: DiagramModel, initialText?: string): void;
+    /**
+     * Handle text editor changes
+     */
+    onTextEdit(newText: string): void;
+    /**
+     * Handle visual editor changes
+     */
+    onVisualEdit(): void;
+    /**
+     * Get current text
+     */
+    getText(): string;
+    /**
+     * Get current diagram
+     */
+    getDiagram(): DiagramModel | undefined;
+    /**
+     * Get sync status
+     */
+    getStatus(): SyncStatus;
+    /**
+     * Get sync metrics
+     */
+    getMetrics(): SyncMetrics;
+    /**
+     * Apply layout to current diagram
+     */
+    applyLayout(presetId?: string): Promise<void>;
+    /**
+     * Get layout suggestion
+     */
+    suggestLayout(): import("@grafloria/element").LayoutSuggestion | null;
+    /**
+     * Subscribe to text changes
+     */
+    onTextChange(callback: TextChangeCallback): () => void;
+    /**
+     * Subscribe to diagram changes
+     */
+    onDiagramChange(callback: DiagramChangeCallback): () => void;
+    /**
+     * Subscribe to status changes
+     */
+    onStatusChange(callback: StatusCallback): () => void;
+    /**
+     * Pause sync
+     */
+    pause(): void;
+    /**
+     * Resume sync
+     */
+    resume(): void;
+    /**
+     * Force sync in specific direction
+     */
+    forceSync(direction: 'text-to-visual' | 'visual-to-text'): void;
+    /**
+     * Reset metrics
+     */
+    resetMetrics(): void;
+    /**
+     * Get formatted status string
+     */
+    getFormattedStatus(): string;
+    /**
+     * Get metrics summary
+     */
+    getMetricsSummary(): string;
+    /**
+     * Setup sync callbacks
+     */
+    private setupSyncCallbacks;
+    /**
+     * Emit text change
+     */
+    private emitTextChange;
+    /**
+     * Emit diagram change
+     */
+    private emitDiagramChange;
+    /**
+     * Dispose and cleanup
+     */
+    dispose(): void;
+}