@zoneflow/renderer-dom 0.0.1

package/dist/engines/graphLayoutEngine.js

@@ -0,0 +1,255 @@
+export const DEFAULT_PATH_NODE_WIDTH = 120;
+export const DEFAULT_PATH_NODE_HEIGHT = 32;
+export const DEFAULT_PATH_NODE_OFFSET_X = 32;
+export const DEFAULT_PATH_NODE_GAP_Y = 40;
+function typedEntries(record) {
+    return Object.entries(record);
+}
+function typedValues(record) {
+    return Object.values(record);
+}
+function rectFromLayout(layout) {
+    return {
+        x: layout.x,
+        y: layout.y,
+        width: layout.width ?? 0,
+        height: layout.height ?? 0,
+    };
+}
+function centerOfRect(rect) {
+    return {
+        x: rect.x + rect.width / 2,
+        y: rect.y + rect.height / 2,
+    };
+}
+function resolveAnchorRect(worldPos, rect) {
+    if (!rect)
+        return undefined;
+    return {
+        ...rect,
+        x: worldPos.x + rect.x,
+        y: worldPos.y + rect.y,
+    };
+}
+/**
+ * relative layout -> absolute layout
+ */
+function resolveLayout(model, layoutModel) {
+    const resolvedZoneLayouts = {};
+    const resolvedPathLayouts = {};
+    const zoneCache = new Map();
+    function resolveZonePosition(zoneId) {
+        if (zoneCache.has(zoneId)) {
+            return zoneCache.get(zoneId);
+        }
+        const zone = model.zonesById[zoneId];
+        const layout = layoutModel.zoneLayoutsById[zoneId];
+        if (!zone || !layout) {
+            const fallback = { x: 0, y: 0 };
+            zoneCache.set(zoneId, fallback);
+            return fallback;
+        }
+        if (!zone.parentZoneId) {
+            const rootPos = { x: layout.x, y: layout.y };
+            zoneCache.set(zoneId, rootPos);
+            return rootPos;
+        }
+        const parentPos = resolveZonePosition(zone.parentZoneId);
+        const worldPos = {
+            x: parentPos.x + layout.x,
+            y: parentPos.y + layout.y,
+        };
+        zoneCache.set(zoneId, worldPos);
+        return worldPos;
+    }
+    for (const [typedZoneId, layout] of typedEntries(layoutModel.zoneLayoutsById)) {
+        const worldPos = resolveZonePosition(typedZoneId);
+        const anchors = layout.anchors;
+        const resolvedAnchors = {
+            inlet: {
+                point: {
+                    x: worldPos.x + anchors.inlet.point.x,
+                    y: worldPos.y + anchors.inlet.point.y,
+                },
+                rect: resolveAnchorRect(worldPos, anchors.inlet.rect),
+            },
+            outlet: {
+                point: {
+                    x: worldPos.x + anchors.outlet.point.x,
+                    y: worldPos.y + anchors.outlet.point.y,
+                },
+                rect: resolveAnchorRect(worldPos, anchors.outlet.rect),
+            },
+        };
+        resolvedZoneLayouts[typedZoneId] = {
+            ...layout,
+            x: worldPos.x,
+            y: worldPos.y,
+            anchors: resolvedAnchors,
+        };
+    }
+    for (const [pathId, pathLayout] of typedEntries(layoutModel.pathLayoutsById)) {
+        resolvedPathLayouts[pathId] = {
+            ...pathLayout,
+        };
+    }
+    return {
+        ...layoutModel,
+        zoneLayoutsById: resolvedZoneLayouts,
+        pathLayoutsById: resolvedPathLayouts,
+    };
+}
+function resolvePathNodeRect(params) {
+    const { layoutModel, pathId, sourceOutlet, fallbackIndex } = params;
+    const pathLayout = layoutModel.pathLayoutsById[pathId];
+    const preferredComponentLayout = pathLayout?.componentLayoutsById?.body ??
+        pathLayout?.componentLayoutsById?.label;
+    if (preferredComponentLayout) {
+        return rectFromLayout(preferredComponentLayout);
+    }
+    const routeOffset = pathLayout?.routeOffset;
+    return {
+        x: sourceOutlet.x + DEFAULT_PATH_NODE_OFFSET_X + (routeOffset?.x ?? 0),
+        y: sourceOutlet.y -
+            DEFAULT_PATH_NODE_HEIGHT / 2 +
+            fallbackIndex * DEFAULT_PATH_NODE_GAP_Y +
+            (routeOffset?.y ?? 0),
+        width: DEFAULT_PATH_NODE_WIDTH,
+        height: DEFAULT_PATH_NODE_HEIGHT,
+    };
+}
+function resolvePathNodeAnchors(rect) {
+    return {
+        inlet: {
+            x: rect.x,
+            y: rect.y + rect.height / 2,
+        },
+        outlet: {
+            x: rect.x + rect.width,
+            y: rect.y + rect.height / 2,
+        },
+    };
+}
+function createZoneVisualNodes(params) {
+    const { model, layoutModel } = params;
+    const result = {};
+    for (const [typedZoneId, zone] of typedEntries(model.zonesById)) {
+        const zoneLayout = layoutModel.zoneLayoutsById[typedZoneId];
+        if (!zoneLayout)
+            continue;
+        result[typedZoneId] = {
+            universeId: model.universeId,
+            zoneId: typedZoneId,
+            zone,
+            rect: rectFromLayout(zoneLayout),
+            anchors: zoneLayout.anchors,
+        };
+    }
+    return result;
+}
+function createPathVisualNodes(params) {
+    const { model, layoutModel, zonesById } = params;
+    const result = {};
+    for (const zone of typedValues(model.zonesById)) {
+        const sourceZoneVisual = zonesById[zone.id];
+        if (!sourceZoneVisual)
+            continue;
+        zone.pathIds.forEach((pathId, index) => {
+            const path = zone.pathsById[pathId];
+            if (!path)
+                return;
+            const targetZoneId = path.target?.universeId === model.universeId
+                ? path.target.zoneId
+                : null;
+            const sourceOutlet = sourceZoneVisual.anchors.outlet?.point ??
+                centerOfRect(sourceZoneVisual.rect);
+            const rect = resolvePathNodeRect({
+                layoutModel,
+                pathId,
+                sourceOutlet,
+                fallbackIndex: index,
+            });
+            const anchors = resolvePathNodeAnchors(rect);
+            result[pathId] = {
+                universeId: model.universeId,
+                pathId,
+                sourceZoneId: zone.id,
+                targetZoneId,
+                path,
+                rect,
+                inlet: anchors.inlet,
+                outlet: anchors.outlet,
+            };
+        });
+    }
+    return result;
+}
+function createEdgeVisuals(params) {
+    const { model, zonesById, pathsById } = params;
+    const result = {};
+    for (const zone of typedValues(model.zonesById)) {
+        const sourceZoneVisual = zonesById[zone.id];
+        if (!sourceZoneVisual)
+            continue;
+        zone.pathIds.forEach((pathId) => {
+            const pathVisual = pathsById[pathId];
+            if (!pathVisual)
+                return;
+            const targetZoneVisual = pathVisual.targetZoneId
+                ? zonesById[pathVisual.targetZoneId]
+                : undefined;
+            const zoneOutlet = sourceZoneVisual.anchors.outlet?.point ??
+                centerOfRect(sourceZoneVisual.rect);
+            const pathInlet = pathVisual.inlet ??
+                (pathVisual.rect ? centerOfRect(pathVisual.rect) : zoneOutlet);
+            const pathOutlet = pathVisual.outlet ??
+                (pathVisual.rect ? centerOfRect(pathVisual.rect) : zoneOutlet);
+            const targetInlet = targetZoneVisual
+                ? (targetZoneVisual.anchors.inlet?.point ??
+                    centerOfRect(targetZoneVisual.rect))
+                : pathOutlet;
+            result[pathId] = [
+                {
+                    id: `${pathId}:z2p`,
+                    pathId,
+                    kind: "zone-to-path",
+                    source: zoneOutlet,
+                    target: pathInlet,
+                },
+                {
+                    id: `${pathId}:p2z`,
+                    pathId,
+                    kind: "path-to-zone",
+                    source: pathOutlet,
+                    target: targetInlet,
+                },
+            ];
+        });
+    }
+    return result;
+}
+export const defaultGraphLayoutEngine = {
+    compute(input) {
+        const { model, layoutModel } = input;
+        const resolvedLayout = resolveLayout(model, layoutModel);
+        const zonesById = createZoneVisualNodes({
+            model,
+            layoutModel: resolvedLayout,
+        });
+        const pathsById = createPathVisualNodes({
+            model,
+            layoutModel: resolvedLayout,
+            zonesById,
+        });
+        const edgesByPathId = createEdgeVisuals({
+            model,
+            zonesById,
+            pathsById,
+        });
+        return {
+            zonesById,
+            pathsById,
+            edgesByPathId,
+        };
+    },
+};

package/dist/engines/visibilityEngine.d.ts

@@ -0,0 +1,2 @@
+import type { VisibilityEngine } from "../types";
+export declare const defaultVisibilityEngine: VisibilityEngine;

package/dist/engines/visibilityEngine.js

@@ -0,0 +1,76 @@
+function intersects(a, b) {
+    return !(a.x + a.width <= b.x ||
+        b.x + b.width <= a.x ||
+        a.y + a.height <= b.y ||
+        b.y + b.height <= a.y);
+}
+function containsFully(outer, inner) {
+    return (inner.x >= outer.x &&
+        inner.y >= outer.y &&
+        inner.x + inner.width <= outer.x + outer.width &&
+        inner.y + inner.height <= outer.y + outer.height);
+}
+function resolveZoneEmphasis(isVisible, isPartial) {
+    if (!isVisible)
+        return "hidden";
+    if (isPartial)
+        return "dim";
+    return "strong";
+}
+function resolvePathEmphasis(isVisible, isPartial) {
+    if (!isVisible)
+        return "hidden";
+    if (isPartial)
+        return "dim";
+    return "normal";
+}
+export const defaultVisibilityEngine = {
+    compute(input) {
+        const { base, graphLayout, density } = input;
+        const worldViewport = base.viewportInfo.world;
+        const zoneVisibilityById = {};
+        const pathVisibilityById = {};
+        Object.values(graphLayout.zonesById).forEach((zone) => {
+            const isVisible = intersects(worldViewport, zone.rect);
+            const isPartial = isVisible && !containsFully(worldViewport, zone.rect);
+            const emphasis = resolveZoneEmphasis(isVisible, isPartial);
+            zoneVisibilityById[zone.zoneId] = {
+                isVisible,
+                isPartial,
+                shouldRenderBody: isVisible,
+                shouldRenderContent: isVisible && zone.rect.width > 0 && zone.rect.height > 0,
+                emphasis,
+            };
+        });
+        Object.values(graphLayout.pathsById).forEach((path) => {
+            const rect = path.rect;
+            if (!rect) {
+                pathVisibilityById[path.pathId] = {
+                    isVisible: false,
+                    isPartial: false,
+                    shouldRenderNode: false,
+                    shouldRenderEdge: true,
+                    shouldRenderLabel: false,
+                    emphasis: "hidden",
+                };
+                return;
+            }
+            const isVisible = intersects(worldViewport, rect);
+            const isPartial = isVisible && !containsFully(worldViewport, rect);
+            const emphasis = resolvePathEmphasis(isVisible, isPartial);
+            const densityMode = density.pathDensityById[path.pathId];
+            pathVisibilityById[path.pathId] = {
+                isVisible,
+                isPartial,
+                shouldRenderNode: isVisible && densityMode !== "edge-only",
+                shouldRenderEdge: true,
+                shouldRenderLabel: isVisible && densityMode !== "edge-only",
+                emphasis,
+            };
+        });
+        return {
+            zoneVisibilityById,
+            pathVisibilityById,
+        };
+    },
+};

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./theme";
+export * from "./types";
+export * from "./anchors";
+export * from "./pipeline";
+export * from "./renderer";
+export * from "./engines/graphLayoutEngine";
+export * from "./engines/densityEngine";
+export * from "./engines/visibilityEngine";
+export * from "./engines/componentLayoutEngine";
+export * from "./engines/drawEngine";
+export * from "./engines/debugDrawEngine";

package/dist/index.js

@@ -0,0 +1,11 @@
+export * from "./theme";
+export * from "./types";
+export * from "./anchors";
+export * from "./pipeline";
+export * from "./renderer";
+export * from "./engines/graphLayoutEngine";
+export * from "./engines/densityEngine";
+export * from "./engines/visibilityEngine";
+export * from "./engines/componentLayoutEngine";
+export * from "./engines/drawEngine";
+export * from "./engines/debugDrawEngine";

package/dist/pipeline.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentLayoutEngine, DensityEngine, GraphLayoutEngine, RenderPipelineInput, RenderPipelineResult, VisibilityEngine } from "./types";
+export type RenderPipelineEngines = {
+    graphLayoutEngine: GraphLayoutEngine;
+    densityEngine: DensityEngine;
+    visibilityEngine: VisibilityEngine;
+    componentLayoutEngine: ComponentLayoutEngine;
+};
+export declare function runRenderPipeline(input: RenderPipelineInput, engines: RenderPipelineEngines): RenderPipelineResult;

package/dist/pipeline.js

@@ -0,0 +1,25 @@
+export function runRenderPipeline(input, engines) {
+    const graphLayout = engines.graphLayoutEngine.compute(input);
+    const density = engines.densityEngine.compute({
+        base: input,
+        graphLayout,
+    });
+    const visibility = engines.visibilityEngine.compute({
+        base: input,
+        graphLayout,
+        density,
+    });
+    const componentLayout = engines.componentLayoutEngine.compute({
+        base: input,
+        graphLayout,
+        density,
+        visibility,
+    });
+    return {
+        viewportInfo: input.viewportInfo,
+        graphLayout,
+        density,
+        visibility,
+        componentLayout,
+    };
+}

package/dist/renderer.d.ts

@@ -0,0 +1,2 @@
+import type { ZoneflowRenderer } from "./types";
+export declare function createRenderer(): ZoneflowRenderer;

package/dist/renderer.js

@@ -0,0 +1,137 @@
+import { resolveTheme } from "./themes/defaultTheme";
+import { runRenderPipeline } from "./pipeline";
+import { defaultGraphLayoutEngine } from "./engines/graphLayoutEngine";
+import { defaultDensityEngine } from "./engines/densityEngine";
+import { defaultVisibilityEngine } from "./engines/visibilityEngine";
+import { defaultComponentLayoutEngine } from "./engines/componentLayoutEngine";
+import { domDrawEngine } from "./engines/drawEngine";
+import { debugDrawEngine } from "./engines/debugDrawEngine";
+const DEFAULT_CAMERA = {
+    x: 0,
+    y: 0,
+    zoom: 1,
+};
+function ensureHostBaseStyle(host) {
+    host.style.position = "relative";
+    host.style.overflow = "hidden";
+}
+function getHostViewport(host) {
+    return {
+        x: 0,
+        y: 0,
+        width: host.clientWidth,
+        height: host.clientHeight,
+    };
+}
+function getEffectiveViewport(hostViewport, viewport) {
+    if (viewport?.enabled) {
+        const offsetX = viewport.offsetX ?? 0;
+        const offsetY = viewport.offsetY ?? 0;
+        return {
+            x: offsetX,
+            y: offsetY,
+            width: viewport.width,
+            height: viewport.height,
+        };
+    }
+    return {
+        x: 0,
+        y: 0,
+        width: hostViewport.width,
+        height: hostViewport.height,
+    };
+}
+function getWorldViewport(camera, effectiveViewport) {
+    return {
+        x: (effectiveViewport.x - camera.x) / camera.zoom,
+        y: (effectiveViewport.y - camera.y) / camera.zoom,
+        width: effectiveViewport.width / camera.zoom,
+        height: effectiveViewport.height / camera.zoom,
+    };
+}
+function resolveViewportInfo(host, camera, input) {
+    const hostViewport = getHostViewport(host);
+    const effectiveViewport = getEffectiveViewport(hostViewport, input.viewport);
+    const worldViewport = getWorldViewport(camera, effectiveViewport);
+    return {
+        host: hostViewport,
+        effective: effectiveViewport,
+        world: worldViewport,
+    };
+}
+export function createRenderer() {
+    let host = null;
+    return {
+        mount(container) {
+            host = container;
+            ensureHostBaseStyle(host);
+        },
+        update(input) {
+            if (!host)
+                return;
+            const { model, layoutModel, theme, textScale = "md", camera = DEFAULT_CAMERA, graphLayoutEngine = defaultGraphLayoutEngine, densityEngine = defaultDensityEngine, visibilityEngine = defaultVisibilityEngine, componentLayoutEngine = defaultComponentLayoutEngine, drawEngine = domDrawEngine, zoneComponentRenderers, pathComponentRenderers, interactionHandlers, exclusionState, debug, } = input;
+            const mergedTheme = resolveTheme(theme);
+            const viewportInfo = resolveViewportInfo(host, camera, input);
+            const pipeline = runRenderPipeline({
+                model,
+                layoutModel,
+                camera,
+                viewportInfo,
+                theme: mergedTheme,
+                textScale,
+            }, {
+                graphLayoutEngine,
+                densityEngine,
+                visibilityEngine,
+                componentLayoutEngine,
+            });
+            if (debug?.enabled) {
+                debugDrawEngine.draw({
+                    host,
+                    model,
+                    layoutModel,
+                    camera,
+                    viewportInfo,
+                    theme: mergedTheme,
+                    textScale,
+                    pipeline,
+                    exclusionState,
+                    layers: debug.layers ?? ["graph-layout", "edges", "anchors"],
+                });
+                return {
+                    viewportInfo,
+                    pipeline,
+                    mounts: {
+                        zones: [],
+                        paths: [],
+                    },
+                };
+            }
+            const mounts = drawEngine.draw({
+                host,
+                model,
+                layoutModel,
+                camera,
+                viewportInfo,
+                theme: mergedTheme,
+                textScale,
+                pipeline,
+                zoneComponentRenderers,
+                pathComponentRenderers,
+                interactionHandlers,
+                exclusionState,
+            });
+            return {
+                viewportInfo,
+                pipeline,
+                mounts,
+            };
+        },
+        destroy() {
+            if (host) {
+                host.innerHTML = "";
+            }
+            host = null;
+        },
+    };
+}

package/dist/theme.d.ts

@@ -0,0 +1,23 @@
+export type ZoneflowTheme = {
+    background: string;
+    zoneTitle: string;
+    zoneSubtext: string;
+    zoneContainerBorder: string;
+    zoneActionBorder: string;
+    zoneBadgeBg: string;
+    pathLabel: string;
+    pathEdge: string;
+    selection: string;
+    density: {
+        zone: {
+            detail: number;
+            near: number;
+            mid: number;
+        };
+        path: {
+            full: number;
+            chip: number;
+        };
+    };
+};
+export type TextScaleLevel = "sm" | "md" | "lg";

package/dist/theme.js

@@ -0,0 +1 @@
+export {};

package/dist/themes/defaultTheme.d.ts

@@ -0,0 +1,9 @@
+import type { ZoneflowTheme } from "../theme";
+/**
+ * 기본 테마 (모든 필수 값 포함)
+ */
+export declare const defaultTheme: ZoneflowTheme;
+/**
+ * Partial theme을 받아서 완전한 theme으로 보정
+ */
+export declare function resolveTheme(theme?: Partial<ZoneflowTheme>): ZoneflowTheme;

package/dist/themes/defaultTheme.js

@@ -0,0 +1,46 @@
+/**
+ * 기본 테마 (모든 필수 값 포함)
+ */
+export const defaultTheme = {
+    background: "#f3f6fb",
+    zoneTitle: "#0f172a",
+    zoneSubtext: "#5f6f86",
+    zoneContainerBorder: "#cbd5e1",
+    zoneActionBorder: "#f59e0b",
+    zoneBadgeBg: "#e0f2fe",
+    pathLabel: "#1e293b",
+    pathEdge: "#7a8aa0",
+    selection: "#2e90fa",
+    density: {
+        zone: {
+            detail: 200,
+            near: 140,
+            mid: 90,
+        },
+        path: {
+            full: 120,
+            chip: 60,
+        },
+    },
+};
+/**
+ * Partial theme을 받아서 완전한 theme으로 보정
+ */
+export function resolveTheme(theme) {
+    if (!theme)
+        return defaultTheme;
+    return {
+        ...defaultTheme,
+        ...theme,
+        density: {
+            zone: {
+                ...defaultTheme.density.zone,
+                ...theme.density?.zone,
+            },
+            path: {
+                ...defaultTheme.density.path,
+                ...theme.density?.path,
+            },
+        },
+    };
+}