@grafloria/element 0.3.20 → 0.3.21

package/src/libs/engine/src/templates/NodeFactory.js

@@ -1,436 +0,0 @@
-"use strict";
-/**
- * NodeFactory - Creates nodes from templates
- *
- * Handles:
- * - Template-based node creation
- * - Port configuration
- * - Hierarchical structures (parent/child)
- * - Data binding
- * - Metadata management
- *
- * Follows existing NodeModel patterns:
- * - Uses node.setMetadata() for configuration
- * - Uses node.setData() for user data
- * - Adds nodes to diagram
- * - Creates ports following port configuration
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NodeFactory = void 0;
-// Wave 6 (Card 3): named port groups.
-const port_groups_1 = require("../ports/port-groups");
-const NodeModel_1 = require("../models/NodeModel");
-const PortModel_1 = require("../models/PortModel");
-class NodeFactory {
-    constructor(templateRegistry, diagram) {
-        this.templateRegistry = templateRegistry;
-        this.diagram = diagram;
-    }
-    /**
-     * Create node(s) from template
-     *
-     * @param templateId Template identifier
-     * @param data User data to bind to template
-     * @param position Node position in diagram
-     * @returns Root node created from template
-     * @throws Error if template not found or invalid
-     */
-    createFromTemplate(templateId, data, position) {
-        // Get template
-        const template = this.templateRegistry.get(templateId);
-        if (!template) {
-            throw new Error(`Template not found: ${templateId}`);
-        }
-        // Merge user data with default data
-        const fullData = Object.assign(Object.assign({}, template.defaultData), data);
-        // Build node tree from structure
-        const rootNode = this.buildNodeTree(template.structure, fullData, position, null, template);
-        // Store template reference in metadata
-        rootNode.setMetadata('templateId', template.id);
-        rootNode.setMetadata('templateVersion', template.version);
-        return rootNode;
-    }
-    /**
-     * Build node tree recursively from structure definition
-     *
-     * @param structure Node structure definition
-     * @param data Data to bind
-     * @param position Position (for root only)
-     * @param parent Parent node (null for root)
-     * @param template Root template reference
-     * @returns Created node
-     */
-    buildNodeTree(structure, data, position, parent, template) {
-        var _a;
-        // Create node
-        const node = new NodeModel_1.NodeModel({
-            type: structure.type,
-            position: parent ? { x: 0, y: 0 } : position,
-            size: this.parseSize(structure.size),
-        });
-        // Store user data
-        Object.entries(data).forEach(([key, value]) => {
-            node.setData(key, value);
-        });
-        // Set layout configuration if present
-        if (structure.layout) {
-            // Store layout config in metadata
-            node.setMetadata('layout', structure.layout);
-            node.setMetadata('autoLayout', true);
-        }
-        // Set behavior
-        if (structure.behavior) {
-            node.behavior = Object.assign(Object.assign({}, node.behavior), structure.behavior);
-        }
-        // Set connection group
-        if (structure.connectionGroup) {
-            node.connectionGroup = structure.connectionGroup;
-        }
-        // Phase 3.1: Set shape configuration
-        if (structure.shape) {
-            node.setMetadata('shape', structure.shape);
-        }
-        // Visio-master fidelity: a glyph-sized master declares its caption paints
-        // BELOW the silhouette. The renderer reads `metadata.labelPlacement`.
-        if (structure.labelPlacement && structure.labelPlacement !== 'inside') {
-            node.setMetadata('labelPlacement', structure.labelPlacement);
-        }
-        // Apply property bindings (data-driven properties)
-        // This allows conditional properties based on item data
-        if (structure.propertyBindings) {
-            this.applyPropertyBindings(node, structure.propertyBindings, data);
-        }
-        // Handle HTML configuration.
-        //
-        // NOTE — `useHTMLLayer` is deliberately NOT set here any more. It made every
-        // html-bearing master render as NOTHING: the SVG renderer answers that flag
-        // by returning an EMPTY <g> (svg-renderer `renderNode`), on the assumption
-        // that some HTML layer paints the body instead — and nothing does, because
-        // the only html body the renderer actually paints is `metadata.html`, a
-        // STRUCTURED, sanitized content tree (see svg/html-node.ts, which never uses
-        // innerHTML), not the raw handlebars string stashed below. All 80 generated
-        // masters declare html, so all 80 were invisible whenever they were built
-        // through this factory.
-        //
-        // Without the flag a template node paints its real silhouette + label, which
-        // is correct and visible. The html config is still recorded on `data._html`
-        // for callers that want to render it themselves; a kit that wants a rich
-        // card sets `metadata.html` with a content tree (see diagram-kit/er.ts).
-        if (structure.html) {
-            node.data['_html'] = {
-                mode: structure.html.mode,
-                template: structure.html.template,
-                component: structure.html.component,
-                className: structure.html.className,
-                style: structure.html.style,
-                bindings: structure.html.bindings,
-                events: structure.html.events,
-            };
-        }
-        // Apply data bindings
-        if ((_a = structure.dataBind) === null || _a === void 0 ? void 0 : _a.bindings) {
-            this.applyDataBindings(node, structure.dataBind.bindings, data);
-        }
-        // Handle ports
-        this.createPorts(node, structure);
-        // Add to diagram
-        this.diagram.addNode(node);
-        // Link to parent
-        if (parent) {
-            node.setParent(parent.id);
-            parent.addChild(node.id);
-        }
-        // Create children
-        if (structure.children) {
-            structure.children.forEach(childStructure => {
-                this.buildNodeTree(childStructure, data, position, node, template);
-            });
-        }
-        // Create dynamic children from repeater configuration
-        if (structure.repeater) {
-            this.createRepeaterChildren(structure, data, position, node, template);
-        }
-        // Apply layout after all children (static + repeater) are created
-        if ((structure.children || structure.repeater) && structure.layout && node.getMetadata('layout')) {
-            this.applyFlexboxLayout(node);
-        }
-        return node;
-    }
-    /**
-     * Create ports based on template configuration
-     */
-    createPorts(node, structure) {
-        var _a;
-        // Store ports configuration in metadata for HTML layer rendering
-        if (structure.ports) {
-            node.setMetadata('portsConfig', structure.ports);
-        }
-        // If no port configuration, keep default 4 ports
-        if (!structure.ports) {
-            return;
-        }
-        // If ports explicitly disabled, clear all
-        if (structure.ports.enabled === false) {
-            node.ports.clear();
-            return;
-        }
-        // Wave 6 (Card 3): NAMED GROUPS. The four-side model below can express
-        // "a port on the left" and nothing else — not "eight typed, labelled inputs
-        // down the left edge", which is what a real node editor is made of. A
-        // template that declares `groups` gets the full port vocabulary; one that
-        // doesn't falls through to the legacy sides, unchanged.
-        if ((_a = structure.ports.groups) === null || _a === void 0 ? void 0 : _a.length) {
-            this.createGroupedPorts(node, structure.ports.groups, structure.ports.rendering);
-            return;
-        }
-        // If custom port configuration provided, clear defaults first
-        const hasCustomConfig = structure.ports.top ||
-            structure.ports.right ||
-            structure.ports.bottom ||
-            structure.ports.left;
-        if (hasCustomConfig) {
-            node.ports.clear();
-            // Create ports for each enabled side, in the order the template
-            // declares them (declaration order also drives same-side port ranking)
-            const allSides = ['top', 'right', 'bottom', 'left'];
-            const sides = Object.keys(structure.ports)
-                .filter((key) => allSides.includes(key));
-            sides.forEach(side => {
-                var _a, _b;
-                const sideConfig = structure.ports[side];
-                if (sideConfig === null || sideConfig === void 0 ? void 0 : sideConfig.enabled) {
-                    const port = new PortModel_1.PortModel({
-                        type: sideConfig.type || 'bi',
-                        side: side,
-                    });
-                    // Store rendering configuration
-                    if ((_a = structure.ports) === null || _a === void 0 ? void 0 : _a.rendering) {
-                        port.renderingConfig = structure.ports.rendering;
-                    }
-                    // Store port visibility for HTML layer rendering
-                    const visibility = sideConfig.visibility || ((_b = structure.ports) === null || _b === void 0 ? void 0 : _b.defaultVisibility) || 'always';
-                    port.setMetadata('visibility', visibility);
-                    node.addPort(port);
-                }
-            });
-        }
-    }
-    /**
-     * Wave 6 (Card 3): build a node's ports from NAMED GROUPS.
-     *
-     * The group definitions are stashed on the node (so they serialize with the
-     * diagram and `resolvePortConfig` can find them), and each member is created
-     * declaring only what it OVERRIDES — side, shape, label config, gating and
-     * data type all flow down from the group.
-     */
-    createGroupedPorts(node, groups, rendering) {
-        var _a;
-        node.ports.clear();
-        const definitions = {};
-        for (const group of groups) {
-            definitions[group.id] = group;
-        }
-        (0, port_groups_1.setNodePortGroups)(node, definitions);
-        for (const group of groups) {
-            const members = (_a = group.ports) !== null && _a !== void 0 ? _a : [];
-            members.forEach((member, index) => {
-                var _a, _b, _c;
-                const port = new PortModel_1.PortModel(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ id: member.id, 
-                    // The group's `type` is the default; a member may still override it.
-                    type: (_b = (_a = member.type) !== null && _a !== void 0 ? _a : group.type) !== null && _b !== void 0 ? _b : 'bi', index: (_c = member.index) !== null && _c !== void 0 ? _c : index, group: group.id }, (member.side ? { side: member.side } : {})), (member.label ? { label: member.label } : {})), (member.shape ? { shape: member.shape } : {})), (member.dataType ? { dataType: member.dataType } : {})), (member.style ? { style: member.style } : {})));
-                if (rendering) {
-                    port.renderingConfig = rendering;
-                }
-                node.addPort(port);
-            });
-        }
-    }
-    /**
-     * Parse size configuration
-     */
-    parseSize(size) {
-        if (!size) {
-            return { width: 200, height: 100, depth: 0 };
-        }
-        return {
-            width: typeof size.width === 'number' ? size.width : 200,
-            height: typeof size.height === 'number' ? size.height : 100,
-            depth: 0,
-        };
-    }
-    /**
-     * Apply data bindings to node
-     */
-    applyDataBindings(node, bindings, data) {
-        Object.entries(bindings).forEach(([sourcePath, targetProp]) => {
-            const value = this.getNestedValue(data, sourcePath);
-            node.setData(targetProp, value);
-        });
-    }
-    /**
-     * Create dynamic children from repeater configuration
-     * Iterates over an array in the data and creates a child node for each item
-     *
-     * @param structure Node structure with repeater config
-     * @param data Parent node data
-     * @param position Position (passed to children)
-     * @param parent Parent node
-     * @param template Root template reference
-     */
-    createRepeaterChildren(structure, data, position, parent, template) {
-        if (!structure.repeater) {
-            return;
-        }
-        const { dataSource, itemTemplate, keyField } = structure.repeater;
-        // Get the array data from the specified path
-        const dataArray = this.getNestedValue(data, dataSource);
-        // Validate that we got an array
-        if (!Array.isArray(dataArray)) {
-            console.warn(`[NodeFactory] Repeater dataSource "${dataSource}" did not resolve to an array. ` +
-                `Got: ${typeof dataArray}. Skipping repeater children.`);
-            return;
-        }
-        // If array is empty, nothing to do
-        if (dataArray.length === 0) {
-            return;
-        }
-        const keyFieldName = keyField || 'id';
-        // Create a child node for each item in the array
-        dataArray.forEach((itemData, index) => {
-            // Create a unique data context for this item
-            // Merge parent data with item data, giving precedence to item data
-            const itemContext = Object.assign(Object.assign(Object.assign({}, data), itemData), { 
-                // Add helper properties for templates
-                _index: index, _isFirst: index === 0, _isLast: index === dataArray.length - 1, _key: itemData[keyFieldName] !== undefined ? itemData[keyFieldName] : index, _total: dataArray.length });
-            // Create child node from item template
-            const childNode = this.buildNodeTree(itemTemplate, itemContext, position, parent, template);
-            // Store repeater metadata on the child for potential updates/tracking
-            childNode.setMetadata('_repeaterSource', dataSource);
-            childNode.setMetadata('_repeaterItemIndex', index);
-            childNode.setMetadata('_repeaterItemKey', itemContext._key);
-            childNode.setMetadata('_isRepeaterItem', true);
-        });
-    }
-    /**
-     * Apply flexbox layout to position children
-     * Extracted from inline code to support both static and repeater children
-     *
-     * @param node Parent node with children to layout
-     */
-    applyFlexboxLayout(node) {
-        var _a, _b, _c, _d, _e;
-        const layoutConfig = node.getMetadata('layout');
-        if (!layoutConfig || !layoutConfig.direction) {
-            return;
-        }
-        // Cast to FlexboxLayoutConfig type
-        const flexLayout = layoutConfig;
-        // Position children based on flex direction
-        let offset = ((_a = flexLayout.padding) === null || _a === void 0 ? void 0 : _a.top) || 0;
-        const gap = flexLayout.gap || 0;
-        // Calculate available space for stretch alignment
-        const paddingLeft = ((_b = flexLayout.padding) === null || _b === void 0 ? void 0 : _b.left) || 0;
-        const paddingRight = ((_c = flexLayout.padding) === null || _c === void 0 ? void 0 : _c.right) || 0;
-        const paddingTop = ((_d = flexLayout.padding) === null || _d === void 0 ? void 0 : _d.top) || 0;
-        const paddingBottom = ((_e = flexLayout.padding) === null || _e === void 0 ? void 0 : _e.bottom) || 0;
-        const availableWidth = node.size.width - paddingLeft - paddingRight;
-        const availableHeight = node.size.height - paddingTop - paddingBottom;
-        node.children.forEach((childId) => {
-            const child = this.diagram.getNode(childId);
-            if (child) {
-                // Children are layout-managed: their position is parent-relative and
-                // owned by this layout pass, not by the user
-                child.positionMode = 'layout';
-                if (flexLayout.direction === 'column') {
-                    // Stack vertically
-                    child.position.x = paddingLeft;
-                    child.position.y = offset;
-                    // Apply alignItems stretch - child should fill parent width
-                    if (flexLayout.alignItems === 'stretch') {
-                        child.size.width = availableWidth;
-                    }
-                    offset += child.size.height + gap;
-                }
-                else if (flexLayout.direction === 'row') {
-                    // Stack horizontally
-                    child.position.x = offset;
-                    child.position.y = paddingTop;
-                    // Apply alignItems stretch - child should fill parent height
-                    if (flexLayout.alignItems === 'stretch') {
-                        child.size.height = availableHeight;
-                    }
-                    offset += child.size.width + gap;
-                }
-            }
-        });
-    }
-    /**
-     * Get nested value from object path (e.g., 'data.user.name')
-     */
-    getNestedValue(obj, path) {
-        if (path.startsWith('data.')) {
-            path = path.substring(5);
-        }
-        return path.split('.').reduce((acc, part) => acc === null || acc === void 0 ? void 0 : acc[part], obj);
-    }
-    /**
-     * Apply property bindings to node for data-driven properties
-     * Allows conditional properties based on item data
-     *
-     * Example:
-     * propertyBindings: {
-     *   shape: {
-     *     fill: {
-     *       source: 'data.isPrimaryKey',
-     *       map: { 'true': '#e3f2fd', 'false': '#ffffff' }
-     *     }
-     *   }
-     * }
-     *
-     * @param node Node to apply bindings to
-     * @param bindings Property bindings configuration
-     * @param data Data to evaluate bindings against
-     */
-    applyPropertyBindings(node, bindings, data) {
-        // Apply shape property bindings
-        if (bindings.shape) {
-            const currentShape = node.getMetadata('shape') || {};
-            const newShape = Object.assign({}, currentShape);
-            for (const [prop, resolver] of Object.entries(bindings.shape)) {
-                newShape[prop] = this.resolvePropertyValue(resolver, data);
-            }
-            node.setMetadata('shape', newShape);
-        }
-        // Apply behavior property bindings
-        if (bindings.behavior) {
-            const currentBehavior = Object.assign({}, node.behavior);
-            for (const [prop, resolver] of Object.entries(bindings.behavior)) {
-                currentBehavior[prop] = this.resolvePropertyValue(resolver, data);
-            }
-            node.behavior = currentBehavior;
-        }
-        // Note: Port bindings would require more complex logic (regenerating ports)
-        // For now, ports should be configured statically or conditionally via multiple templates
-    }
-    /**
-     * Resolve property value from binding configuration
-     *
-     * @param resolver Property resolver with source path and value map
-     * @param data Data to evaluate against
-     * @returns Resolved property value
-     */
-    resolvePropertyValue(resolver, data) {
-        // Get value from data path
-        const value = this.getNestedValue(data, resolver.source);
-        // Convert to string for map lookup
-        const key = String(value);
-        // Look up in map
-        if (key in resolver.map) {
-            return resolver.map[key];
-        }
-        // Return default or original value
-        return resolver.default !== undefined ? resolver.default : value;
-    }
-}
-exports.NodeFactory = NodeFactory;
-//# sourceMappingURL=NodeFactory.js.map