@dforge-core/diagram 0.0.1

package/dist/local-storage-sync.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Creates a debounced localStorage sync helper.
+ * Accepts a key getter (function) or static string for reactivity with Svelte 5 props.
+ */
+export declare function createLocalStorageSync<T>(key: string | (() => string | undefined) | undefined, debounceMs?: number): {
+    load: () => T | null;
+    save: (value: T) => void;
+    clear: () => void;
+};
+//# sourceMappingURL=local-storage-sync.d.ts.map

package/dist/local-storage-sync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"local-storage-sync.d.ts","sourceRoot":"","sources":["../src/lib/local-storage-sync.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,SAAS,EAAE,UAAU,SAAM;gBAQ9F,CAAC,GAAG,IAAI;kBAYJ,CAAC;;EAgBtB"}

package/dist/local-storage-sync.js

@@ -0,0 +1,39 @@
+/**
+ * Creates a debounced localStorage sync helper.
+ * Accepts a key getter (function) or static string for reactivity with Svelte 5 props.
+ */
+export function createLocalStorageSync(key, debounceMs = 500) {
+    let timer;
+    const resolveKey = () => typeof key === 'function' ? key() : key;
+    const hasStorage = typeof localStorage !== 'undefined';
+    const load = () => {
+        const k = resolveKey();
+        if (!k || !hasStorage)
+            return null;
+        try {
+            const raw = localStorage.getItem(k);
+            if (!raw)
+                return null;
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    };
+    const save = (value) => {
+        const k = resolveKey();
+        if (!k || !hasStorage)
+            return;
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            try {
+                localStorage.setItem(k, JSON.stringify(value));
+            }
+            catch { /* quota exceeded — ignore */ }
+        }, debounceMs);
+    };
+    const clear = () => {
+        clearTimeout(timer);
+    };
+    return { load, save, clear };
+}

package/dist/model-graph.d.ts

@@ -0,0 +1,20 @@
+import type { DiagramNode, DiagramEdge } from './diagram-types';
+import type { ModelGetResponse, ModelModule } from './model-types';
+export declare const MODULE_COLORS: string[];
+export declare function getModuleColor(index: number): string;
+/**
+ * Build a diagram graph from the given modules.
+ * Nodes start at position {0,0} — call simpleLayout() to compute positions.
+ */
+export declare function buildGraph(modules: ModelModule[], entityMap: Map<number, string>, options?: {
+    intraModuleEdgesOnly?: boolean;
+    colorOffset?: number;
+}): {
+    nodes: DiagramNode[];
+    edges: DiagramEdge[];
+};
+/**
+ * Build the full entityId → label map from a ModelGetResponse.
+ */
+export declare function buildEntityMap(response: ModelGetResponse): Map<number, string>;
+//# sourceMappingURL=model-graph.d.ts.map

package/dist/model-graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-graph.d.ts","sourceRoot":"","sources":["../src/lib/model-graph.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEnE,eAAO,MAAM,aAAa,UASzB,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEpD;AAMD;;;GAGG;AACH,wBAAgB,UAAU,CACzB,OAAO,EAAE,WAAW,EAAE,EACtB,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,OAAO,CAAC,EAAE;IAAE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,GAChE;IAAE,KAAK,EAAE,WAAW,EAAE,CAAC;IAAC,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,CA6EhD;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,gBAAgB,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAQ9E"}

package/dist/model-graph.js

@@ -0,0 +1,100 @@
+export const MODULE_COLORS = [
+    '#0d6efd', // blue
+    '#198754', // green
+    '#dc3545', // red
+    '#fd7e14', // orange
+    '#6f42c1', // purple
+    '#20c997', // teal
+    '#d63384', // pink
+    '#0dcaf0', // cyan
+];
+export function getModuleColor(index) {
+    return MODULE_COLORS[index % MODULE_COLORS.length];
+}
+const NODE_WIDTH = 260;
+const NODE_HEIGHT_BASE = 60;
+const ROW_HEIGHT = 22;
+/**
+ * Build a diagram graph from the given modules.
+ * Nodes start at position {0,0} — call simpleLayout() to compute positions.
+ */
+export function buildGraph(modules, entityMap, options) {
+    const graphNodes = [];
+    const graphEdges = [];
+    const entityNodeMap = new Map();
+    // Collect all entity IDs in the filtered modules (for edge filtering)
+    const moduleEntityIds = new Set();
+    for (const mod of modules) {
+        for (const ent of mod.entities) {
+            moduleEntityIds.add(ent.entityId);
+        }
+    }
+    const offset = options?.colorOffset ?? 0;
+    for (let mi = 0; mi < modules.length; mi++) {
+        const mod = modules[mi];
+        const color = getModuleColor(mi + offset);
+        for (const ent of mod.entities) {
+            const nodeId = `entity-${ent.entityId}`;
+            entityNodeMap.set(ent.entityId, nodeId);
+            const nodeHeight = NODE_HEIGHT_BASE + ent.columns.length * ROW_HEIGHT;
+            graphNodes.push({
+                id: nodeId,
+                x: 0,
+                y: 0,
+                width: NODE_WIDTH,
+                height: nodeHeight,
+                data: {
+                    entityCd: ent.entityCd,
+                    resLabel: ent.resLabel,
+                    resIcon: ent.resIcon,
+                    moduleCd: mod.moduleCd,
+                    moduleColor: color,
+                    columns: ent.columns,
+                    entityMap,
+                },
+            });
+        }
+    }
+    // Build edges for FK columns (type 'R')
+    for (let mi = 0; mi < modules.length; mi++) {
+        const mod = modules[mi];
+        const color = getModuleColor(mi + offset);
+        for (const ent of mod.entities) {
+            const sourceNodeId = entityNodeMap.get(ent.entityId);
+            if (!sourceNodeId)
+                continue;
+            for (const col of ent.columns) {
+                if (col.columnType === 'R' && col.refEntityId) {
+                    const targetNodeId = entityNodeMap.get(col.refEntityId);
+                    if (!targetNodeId)
+                        continue;
+                    if (options?.intraModuleEdgesOnly && !moduleEntityIds.has(col.refEntityId)) {
+                        continue;
+                    }
+                    graphEdges.push({
+                        id: `edge-${ent.entityId}-${col.columnCd}`,
+                        source: sourceNodeId,
+                        sourceHandle: col.columnCd,
+                        target: targetNodeId,
+                        color,
+                        label: col.resLabel || col.columnCd,
+                        isNullable: col.isNullable ?? false,
+                    });
+                }
+            }
+        }
+    }
+    return { nodes: graphNodes, edges: graphEdges };
+}
+/**
+ * Build the full entityId → label map from a ModelGetResponse.
+ */
+export function buildEntityMap(response) {
+    const entityMap = new Map();
+    for (const mod of response.modules) {
+        for (const ent of mod.entities) {
+            entityMap.set(ent.entityId, ent.resLabel || ent.entityCd);
+        }
+    }
+    return entityMap;
+}

package/dist/model-types.d.ts

@@ -0,0 +1,55 @@
+export interface ModelGetResponse {
+    modules: ModelModule[];
+}
+export interface ModelModule {
+    moduleId: number;
+    moduleCd: string;
+    moduleGuid: string;
+    description?: string;
+    isSystem: boolean;
+    version?: string;
+    displayName?: string;
+    icon?: string;
+    category?: string;
+    license?: string;
+    authorName?: string;
+    tags?: string;
+    entities: ModelEntity[];
+}
+export interface ModelEntity {
+    entityId: number;
+    entityCd: string;
+    description?: string;
+    schemaName?: string;
+    dbObject?: string;
+    toString?: string;
+    resLabel?: string;
+    resIcon?: string;
+    columns: ModelColumn[];
+    constraints: ModelConstraint[];
+}
+export interface ModelConstraint {
+    constraintName: string;
+    type?: string;
+    expression?: string;
+    fields?: string[];
+    message?: string;
+}
+export interface ModelColumn {
+    columnCd: string;
+    description?: string;
+    columnType?: string;
+    isPk: boolean;
+    isNullable?: boolean;
+    fieldTypeCd?: string;
+    baseDatatypeCd: string;
+    maxLen?: number;
+    precision?: number;
+    flags?: string;
+    formula?: string;
+    refEntityId?: number;
+    thisKey?: string;
+    otherKey?: string;
+    resLabel?: string;
+}
+//# sourceMappingURL=model-types.d.ts.map

package/dist/model-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-types.d.ts","sourceRoot":"","sources":["../src/lib/model-types.ts"],"names":[],"mappings":"AAWA,MAAM,WAAW,gBAAgB;IAChC,OAAO,EAAE,WAAW,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,WAAW;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,WAAW,EAAE,eAAe,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,eAAe;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB"}

package/dist/model-types.js

@@ -0,0 +1,11 @@
+// Metadata model contract consumed by the diagram components.
+//
+// These interfaces mirror the `Model*` types served by the dForge API
+// (`metadata.getModel`). They are duplicated here — rather than imported
+// from `@dforge/sdk` — so this package can be published and consumed
+// standalone (e.g. by editor extensions) without pulling in the SDK.
+//
+// TypeScript is structurally typed, so SDK-produced objects can still be
+// passed directly into these components. Keep the shapes in sync with
+// `clients/packages/sdk/src/types/metadata.ts`.
+export {};

package/dist/pan-zoom.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { ViewTransform } from './diagram-types';
+export interface PanZoomConfig {
+    minZoom?: number;
+    maxZoom?: number;
+    bgClass?: string;
+    getSvgEl: () => SVGSVGElement | undefined;
+    getContainerEl: () => HTMLElement | undefined;
+}
+export interface ContentBounds {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+/**
+ * Creates a pan/zoom controller with reactive Svelte 5 state.
+ * Encapsulates transform, zooming, panning, and coordinate conversion.
+ */
+export declare function createPanZoom(config: PanZoomConfig): {
+    readonly transform: ViewTransform;
+    readonly isPanning: boolean;
+    clientToSvg: (clientX: number, clientY: number) => {
+        x: number;
+        y: number;
+    };
+    handleWheel: (e: WheelEvent) => void;
+    startPan: (e: PointerEvent) => boolean;
+    onPointerMove: (e: PointerEvent) => boolean;
+    endPan: (e: PointerEvent) => void;
+    zoomBy: (factor: number) => void;
+    fitView: (bounds: ContentBounds, padding?: number) => void;
+    setTransform: (t: ViewTransform) => void;
+};
+//# sourceMappingURL=pan-zoom.svelte.d.ts.map

package/dist/pan-zoom.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pan-zoom.svelte.d.ts","sourceRoot":"","sources":["../src/lib/pan-zoom.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,aAAa;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,aAAa,GAAG,SAAS,CAAC;IAC1C,cAAc,EAAE,MAAM,WAAW,GAAG,SAAS,CAAC;CAC9C;AAED,MAAM,WAAW,aAAa;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACb;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,aAAa;;;2BASpB,MAAM,WAAW,MAAM,KAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;qBAWxD,UAAU;kBAmBb,YAAY,KAAG,OAAO;uBAkBjB,YAAY,KAAG,OAAO;gBAW7B,YAAY;qBASP,MAAM;sBAgBL,aAAa;sBAqBb,aAAa;EAgBtC"}

package/dist/pan-zoom.svelte.js

@@ -0,0 +1,130 @@
+/**
+ * Creates a pan/zoom controller with reactive Svelte 5 state.
+ * Encapsulates transform, zooming, panning, and coordinate conversion.
+ */
+export function createPanZoom(config) {
+    let transform = $state({ x: 0, y: 0, k: 1 });
+    let panning = $state(null);
+    function clampZoom(k) {
+        return Math.min(config.maxZoom ?? 2, Math.max(config.minZoom ?? 0.1, k));
+    }
+    /** Convert client (screen) coordinates to SVG content coordinates. */
+    function clientToSvg(clientX, clientY) {
+        const svgEl = config.getSvgEl();
+        if (!svgEl)
+            return { x: 0, y: 0 };
+        const rect = svgEl.getBoundingClientRect();
+        return {
+            x: (clientX - rect.left - transform.x) / transform.k,
+            y: (clientY - rect.top - transform.y) / transform.k,
+        };
+    }
+    /** Zoom toward the cursor position. Attach to wheel event (passive: false). */
+    function handleWheel(e) {
+        e.preventDefault();
+        const svgEl = config.getSvgEl();
+        if (!svgEl)
+            return;
+        const rect = svgEl.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        const factor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+        const newK = clampZoom(transform.k * factor);
+        const ratio = newK / transform.k;
+        transform = {
+            x: mouseX - (mouseX - transform.x) * ratio,
+            y: mouseY - (mouseY - transform.y) * ratio,
+            k: newK,
+        };
+    }
+    /** Start panning on background pointer down. Returns true if pan started. */
+    function startPan(e) {
+        const svgEl = config.getSvgEl();
+        if (!svgEl)
+            return false;
+        const target = e.target;
+        const bgClass = config.bgClass ?? 'diagram-bg';
+        if (target !== svgEl && !target.classList.contains(bgClass))
+            return false;
+        e.preventDefault();
+        panning = {
+            startX: e.clientX,
+            startY: e.clientY,
+            startTx: transform.x,
+            startTy: transform.y,
+        };
+        svgEl.setPointerCapture(e.pointerId);
+        return true;
+    }
+    /** Handle pointer move for panning. Returns true if panning was active. */
+    function onPointerMove(e) {
+        if (!panning)
+            return false;
+        transform = {
+            ...transform,
+            x: panning.startTx + (e.clientX - panning.startX),
+            y: panning.startTy + (e.clientY - panning.startY),
+        };
+        return true;
+    }
+    /** End panning on pointer up. */
+    function endPan(e) {
+        if (panning) {
+            const svgEl = config.getSvgEl();
+            if (svgEl)
+                svgEl.releasePointerCapture(e.pointerId);
+            panning = null;
+        }
+    }
+    /** Zoom by a factor toward the container center. factor > 1 zooms in. */
+    function zoomBy(factor) {
+        const containerEl = config.getContainerEl();
+        if (!containerEl)
+            return;
+        const rect = containerEl.getBoundingClientRect();
+        const cx = rect.width / 2;
+        const cy = rect.height / 2;
+        const newK = clampZoom(transform.k * factor);
+        const ratio = newK / transform.k;
+        transform = {
+            x: cx - (cx - transform.x) * ratio,
+            y: cy - (cy - transform.y) * ratio,
+            k: newK,
+        };
+    }
+    /** Fit the view to show all content within the given bounds. */
+    function fitView(bounds, padding = 40) {
+        const containerEl = config.getContainerEl();
+        if (!containerEl)
+            return;
+        const rect = containerEl.getBoundingClientRect();
+        const contentW = bounds.maxX - bounds.minX;
+        const contentH = bounds.maxY - bounds.minY;
+        if (contentW <= 0 || contentH <= 0)
+            return;
+        const scaleX = (rect.width - padding * 2) / contentW;
+        const scaleY = (rect.height - padding * 2) / contentH;
+        const k = clampZoom(Math.min(scaleX, scaleY));
+        transform = {
+            k,
+            x: (rect.width - contentW * k) / 2 - bounds.minX * k,
+            y: (rect.height - contentH * k) / 2 - bounds.minY * k,
+        };
+    }
+    /** Directly set the transform (e.g. when restoring from storage). */
+    function setTransform(t) {
+        transform = t;
+    }
+    return {
+        get transform() { return transform; },
+        get isPanning() { return panning !== null; },
+        clientToSvg,
+        handleWheel,
+        startPan,
+        onPointerMove,
+        endPan,
+        zoomBy,
+        fitView,
+        setTransform,
+    };
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@dforge-core/diagram",
+  "version": "0.0.1",
+  "description": "Entity-relationship and workspace diagram components for dForge models. Standalone Svelte 5 library with no dForge runtime dependencies.",
+  "license": "MIT",
+  "author": "dForge",
+  "homepage": "https://github.com/iash44/dForge-core/tree/main/clients/packages/diagram#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/iash44/dForge-core.git",
+    "directory": "clients/packages/diagram"
+  },
+  "bugs": {
+    "url": "https://github.com/iash44/dForge-core/issues"
+  },
+  "keywords": [
+    "svelte",
+    "diagram",
+    "erd",
+    "entity-relationship",
+    "dforge",
+    "visualization"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/lib/index.ts",
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "svelte": "^5.55.10",
+    "typescript": "^6.0.2"
+  },
+  "scripts": {
+    "build": "svelte-package",
+    "dev": "svelte-package --watch",
+    "package": "pnpm pack"
+  }
+}