@operato/flow 9.0.1 → 9.0.2

package/dist/src/property-editors/ox-input-anchors.js

@@ -0,0 +1,163 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { OxFormField } from '@operato/input';
+let OxInputAnchors = class OxInputAnchors extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.value = [];
+    }
+    render() {
+        const anchors = this.value || [];
+        return html `
+      <fieldset>
+        <ul>
+          ${anchors.map(({ id, angle, type }) => html `
+              <li>
+                <div data-id=${id}>${id}</div>
+                <div @click=${this.onClick.bind(this)} data-angle=${angle} data-type=${type}>
+                  ${type == 'in'
+            ? html `
+                        <md-icon ?selected=${angle == 180} data-angle="180">step_into</md-icon>
+                        <md-icon ?selected=${angle == 90} data-angle="90">step_into</md-icon>
+                        <md-icon ?selected=${angle == 270} data-angle="270">step_into</md-icon>
+                        <md-icon ?selected=${angle == 0} data-angle="0">step_into</md-icon>
+                      `
+            : html `
+                        <md-icon ?selected=${angle == 180} data-angle="180">step_out</md-icon>
+                        <md-icon ?selected=${angle == 90} data-angle="90">step_out</md-icon>
+                        <md-icon ?selected=${angle == 270} data-angle="270">step_out</md-icon>
+                        <md-icon ?selected=${angle == 0} data-angle="0">step_out</md-icon>
+                      `}
+                </div>
+              </li>
+            `)}
+        </ul>
+      </fieldset>
+    `;
+    }
+    onClick(e) {
+        e.stopPropagation();
+        const target = e.target;
+        const currentTarget = e.currentTarget;
+        if (target === currentTarget || !target.hasAttribute('data-angle')) {
+            return;
+        }
+        const value = target.getAttribute('data-angle');
+        currentTarget.setAttribute('data-angle', value);
+        const lis = this.renderRoot.querySelectorAll('li');
+        this.value = Array.from(lis).map(li => {
+            var _a, _b;
+            const id = (_a = li.querySelector('[data-id]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-id');
+            const angle = (_b = li.querySelector('div[data-angle]')) === null || _b === void 0 ? void 0 : _b.getAttribute('data-angle');
+            const origin = this.value.find(anchor => anchor.id == id);
+            return { ...origin, angle: Number(angle) };
+        });
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: this.value
+        }));
+    }
+};
+OxInputAnchors.styles = [
+    css `
+      :host {
+        display: flex;
+        --md-icon-size: 1.4em;
+      }
+
+      fieldset {
+        flex: 1;
+        font-size: 0.8em;
+        border: 0;
+        border-bottom: 1px solid;
+        background-color: var(--md-sys-color-surface-variant);
+        padding: var(--spacing-medium);
+      }
+
+      ul {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small);
+
+        padding: 0;
+        margin: 0;
+      }
+
+      li {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--spacing-large);
+      }
+
+      li > * {
+        flex: 1;
+      }
+
+      div[data-id] {
+        text-align: right;
+      }
+
+      div[data-angle] {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      md-icon {
+        color: var(--md-sys-color-on-background);
+        background-color: var(--md-sys-color-background);
+      }
+
+      md-icon[selected] {
+        color: var(--md-sys-color-on-primary);
+        background-color: var(--md-sys-color-primary);
+      }
+
+      /* 아이콘 회전 */
+      div[data-type='in'] md-icon[data-angle='270'] {
+        transform: rotate(0deg);
+      }
+
+      div[data-type='in'] md-icon[data-angle='0'] {
+        transform: rotate(90deg);
+      }
+
+      div[data-type='in'] md-icon[data-angle='180'] {
+        transform: rotate(-90deg);
+      }
+
+      div[data-type='in'] md-icon[data-angle='90'] {
+        transform: rotate(180deg);
+      }
+
+      div[data-type='out'] md-icon[data-angle='270'] {
+        transform: rotate(0deg);
+      }
+
+      div[data-type='out'] md-icon[data-angle='0'] {
+        transform: rotate(90deg);
+      }
+
+      div[data-type='out'] md-icon[data-angle='180'] {
+        transform: rotate(-90deg);
+      }
+
+      div[data-type='out'] md-icon[data-angle='90'] {
+        transform: rotate(180deg);
+      }
+    `
+];
+__decorate([
+    property({ attribute: false })
+], OxInputAnchors.prototype, "value", void 0);
+OxInputAnchors = __decorate([
+    customElement('ox-input-anchors')
+], OxInputAnchors);
+export { OxInputAnchors };
+//# sourceMappingURL=ox-input-anchors.js.map

package/dist/src/property-editors/ox-input-anchors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-anchors.js","sourceRoot":"","sources":["../../../src/property-editors/ox-input-anchors.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from '@operato/input'\nimport { AnchorModel } from '../types'\n\n@customElement('ox-input-anchors')\nexport class OxInputAnchors extends OxFormField<AnchorModel[]> {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        --md-icon-size: 1.4em;\n      }\n\n      fieldset {\n        flex: 1;\n        font-size: 0.8em;\n        border: 0;\n        border-bottom: 1px solid;\n        background-color: var(--md-sys-color-surface-variant);\n        padding: var(--spacing-medium);\n      }\n\n      ul {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-small);\n\n        padding: 0;\n        margin: 0;\n      }\n\n      li {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: var(--spacing-large);\n      }\n\n      li > * {\n        flex: 1;\n      }\n\n      div[data-id] {\n        text-align: right;\n      }\n\n      div[data-angle] {\n        display: flex;\n        justify-content: space-between;\n      }\n\n      md-icon {\n        color: var(--md-sys-color-on-background);\n        background-color: var(--md-sys-color-background);\n      }\n\n      md-icon[selected] {\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-primary);\n      }\n\n      /* 아이콘 회전 */\n      div[data-type='in'] md-icon[data-angle='270'] {\n        transform: rotate(0deg);\n      }\n\n      div[data-type='in'] md-icon[data-angle='0'] {\n        transform: rotate(90deg);\n      }\n\n      div[data-type='in'] md-icon[data-angle='180'] {\n        transform: rotate(-90deg);\n      }\n\n      div[data-type='in'] md-icon[data-angle='90'] {\n        transform: rotate(180deg);\n      }\n\n      div[data-type='out'] md-icon[data-angle='270'] {\n        transform: rotate(0deg);\n      }\n\n      div[data-type='out'] md-icon[data-angle='0'] {\n        transform: rotate(90deg);\n      }\n\n      div[data-type='out'] md-icon[data-angle='180'] {\n        transform: rotate(-90deg);\n      }\n\n      div[data-type='out'] md-icon[data-angle='90'] {\n        transform: rotate(180deg);\n      }\n    `\n  ]\n\n  @property({ attribute: false }) value: AnchorModel[] = []\n\n  render() {\n    const anchors = this.value || []\n\n    return html`\n      <fieldset>\n        <ul>\n          ${anchors.map(\n            ({ id, angle, type }) => html`\n              <li>\n                <div data-id=${id!}>${id}</div>\n                <div @click=${this.onClick.bind(this)} data-angle=${angle!} data-type=${type}>\n                  ${type == 'in'\n                    ? html`\n                        <md-icon ?selected=${angle == 180} data-angle=\"180\">step_into</md-icon>\n                        <md-icon ?selected=${angle == 90} data-angle=\"90\">step_into</md-icon>\n                        <md-icon ?selected=${angle == 270} data-angle=\"270\">step_into</md-icon>\n                        <md-icon ?selected=${angle == 0} data-angle=\"0\">step_into</md-icon>\n                      `\n                    : html`\n                        <md-icon ?selected=${angle == 180} data-angle=\"180\">step_out</md-icon>\n                        <md-icon ?selected=${angle == 90} data-angle=\"90\">step_out</md-icon>\n                        <md-icon ?selected=${angle == 270} data-angle=\"270\">step_out</md-icon>\n                        <md-icon ?selected=${angle == 0} data-angle=\"0\">step_out</md-icon>\n                      `}\n                </div>\n              </li>\n            `\n          )}\n        </ul>\n      </fieldset>\n    `\n  }\n\n  onClick(e: MouseEvent) {\n    e.stopPropagation()\n\n    const target = e.target as Element\n    const currentTarget = e.currentTarget as Element\n\n    if (target === currentTarget || !target.hasAttribute('data-angle')) {\n      return\n    }\n\n    const value = target.getAttribute('data-angle') as string\n\n    currentTarget.setAttribute('data-angle', value)\n\n    const lis = this.renderRoot.querySelectorAll('li')\n    this.value = Array.from(lis).map(li => {\n      const id = li.querySelector('[data-id]')?.getAttribute('data-id')!\n      const angle = li.querySelector('div[data-angle]')?.getAttribute('data-angle')\n      const origin = this.value.find(anchor => anchor.id == id)!\n\n      return { ...origin, angle: Number(angle) }\n    })\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}

package/dist/src/property-editors/ox-property-editor-anchors.d.ts

@@ -0,0 +1,6 @@
+import './ox-input-anchors';
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor';
+import { AnchorModel } from '../types';
+export declare class PropertyEditorAnchors extends OxPropertyEditor {
+    editorTemplate(value: AnchorModel[], spec: PropertySpec): import("lit-html").TemplateResult<1>;
+}

package/dist/src/property-editors/ox-property-editor-anchors.js

@@ -0,0 +1,25 @@
+import { __decorate } from "tslib";
+import './ox-input-anchors';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { OxPropertyEditor } from '@operato/property-editor';
+let PropertyEditorAnchors = class PropertyEditorAnchors extends OxPropertyEditor {
+    editorTemplate(value, spec) {
+        const { defaultValue = [] } = spec;
+        value || (value = []);
+        const anchors = defaultValue
+            .map(({ id, ...others }) => {
+            const anchor = value.find(v => v.id == id);
+            if (anchor) {
+                return { ...others, ...anchor };
+            }
+        })
+            .filter(Boolean);
+        return html ` <ox-input-anchors .value=${anchors} fullwidth></ox-input-anchors> `;
+    }
+};
+PropertyEditorAnchors = __decorate([
+    customElement('ox-property-editor-anchors')
+], PropertyEditorAnchors);
+export { PropertyEditorAnchors };
+//# sourceMappingURL=ox-property-editor-anchors.js.map

package/dist/src/property-editors/ox-property-editor-anchors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-property-editor-anchors.js","sourceRoot":"","sources":["../../../src/property-editors/ox-property-editor-anchors.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAIlE,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,gBAAgB;IACzD,cAAc,CAAC,KAAoB,EAAE,IAAkB;QACrD,MAAM,EAAE,YAAY,GAAG,EAAE,EAAE,GAAG,IAAI,CAAA;QAClC,KAAK,KAAL,KAAK,GAAK,EAAE,EAAA;QAEZ,MAAM,OAAO,GAAI,YAA8B;aAC5C,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,MAAM,EAAE,EAAE,EAAE;YACzB,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAA;YAC1C,IAAI,MAAM,EAAE,CAAC;gBACX,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;YACjC,CAAC;QACH,CAAC,CAAC;aACD,MAAM,CAAC,OAAO,CAAkB,CAAA;QAEnC,OAAO,IAAI,CAAA,6BAA6B,OAAO,iCAAiC,CAAA;IAClF,CAAC;CACF,CAAA;AAhBY,qBAAqB;IADjC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,qBAAqB,CAgBjC","sourcesContent":["import './ox-input-anchors'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\nimport { AnchorModel } from '../types'\n\n@customElement('ox-property-editor-anchors')\nexport class PropertyEditorAnchors extends OxPropertyEditor {\n  editorTemplate(value: AnchorModel[], spec: PropertySpec) {\n    const { defaultValue = [] } = spec\n    value ||= []\n\n    const anchors = (defaultValue as AnchorModel[])\n      .map(({ id, ...others }) => {\n        const anchor = value.find(v => v.id == id)\n        if (anchor) {\n          return { ...others, ...anchor }\n        }\n      })\n      .filter(Boolean) as AnchorModel[]\n\n    return html` <ox-input-anchors .value=${anchors} fullwidth></ox-input-anchors> `\n  }\n}\n"]}

package/dist/src/types.d.ts

@@ -0,0 +1,97 @@
+import { Mapping } from '@operato/data-mapper';
+import { PropertySpec } from '@operato/property-editor';
+import { SVGTemplateResult } from 'lit';
+export interface FlowDataSchema {
+    type: 'object' | 'array' | 'string' | 'number' | 'boolean';
+    properties?: {
+        [key: string]: FlowDataSchema;
+    };
+    required?: string[];
+}
+export interface FlowNodeDataSchema {
+    inputSchema: FlowDataSchema | undefined;
+    outputSchema: FlowDataSchema | undefined;
+    dataSourceSchema: FlowDataSchema | undefined;
+}
+export interface FlowEntityModel {
+    id: string;
+    type: string;
+    subtype?: string;
+    label?: string;
+    options?: {
+        [key: string]: any;
+    };
+}
+export interface FlowEntity extends FlowEntityModel {
+    optionsSpec: PropertySpec[];
+    selected: boolean;
+    update: (model: Partial<FlowEntityModel>) => void;
+    updateOptions: (options: {
+        [key: string]: any;
+    }) => void;
+}
+/** 앵커 타입 */
+export interface AnchorModel extends FlowEntityModel {
+    type: 'in' | 'out';
+    pos: {
+        x: number;
+        y: number;
+    };
+    angle?: number;
+    weight?: number;
+}
+export interface Anchor extends AnchorModel {
+    node: FlowNode;
+    render(): SVGTemplateResult;
+}
+/** 플로우 노드 */
+export interface FlowNodeModel extends FlowEntityModel, FlowNodeDataSchema {
+    pos: {
+        x: number;
+        y: number;
+    };
+    size: {
+        w: number;
+        h: number;
+    };
+    anchorsOption?: {
+        id: string;
+        [key: string]: any;
+    }[];
+}
+export interface FlowNode extends FlowEntity, FlowNodeModel {
+    anchors: Anchor[];
+    anchorModels: AnchorModel[];
+    findAnchor(id: string): Anchor | undefined;
+    render(): SVGTemplateResult;
+    renderNode(): SVGTemplateResult;
+}
+export interface AnchorPointer {
+    nodeId: string;
+    anchorId: string;
+}
+/** 플로우 엣지 */
+export interface FlowEdgeModel extends FlowEntityModel {
+    type: string;
+    from: AnchorPointer;
+    to: AnchorPointer;
+    weight?: number;
+    dataMappings: Mapping[];
+}
+export interface FlowEdge extends FlowEntity, FlowEdgeModel {
+    fromAnchor?: Anchor;
+    toAnchor?: Anchor;
+    render(): SVGTemplateResult;
+}
+export type EditorMode = 'edit' | 'debug';
+export type FlowModel = {
+    nodes: FlowNodeModel[];
+    edges: FlowEdgeModel[];
+};
+export type FlowNodeImplementation = new (...args: any[]) => FlowNode;
+export type TaskType = {
+    name: string;
+    description: string | null;
+    help: string | null;
+    parameterSpec: PropertySpec[];
+};

package/dist/src/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Mapping } from '@operato/data-mapper'\nimport { PropertySpec } from '@operato/property-editor'\nimport { SVGTemplateResult } from 'lit'\n\nexport interface FlowDataSchema {\n  type: 'object' | 'array' | 'string' | 'number' | 'boolean'\n  properties?: { [key: string]: FlowDataSchema }\n  required?: string[]\n}\n\nexport interface FlowNodeDataSchema {\n  inputSchema: FlowDataSchema | undefined\n  outputSchema: FlowDataSchema | undefined\n  dataSourceSchema: FlowDataSchema | undefined\n}\n\n// export interface FlowDataMapping {\n//   toField: string\n//   mappingType: 'direct' | 'expression'\n//   fromFields: { nodeId: string; field: string }[] // ⬅ 명확한 데이터 출처 명시\n//   expression?: string\n// }\n\nexport interface FlowEntityModel {\n  id: string\n  type: string\n  subtype?: string\n  label?: string\n  options?: { [key: string]: any }\n}\n\nexport interface FlowEntity extends FlowEntityModel {\n  optionsSpec: PropertySpec[]\n  selected: boolean\n  update: (model: Partial<FlowEntityModel>) => void\n  updateOptions: (options: { [key: string]: any }) => void\n}\n\n/** 앵커 타입 */\nexport interface AnchorModel extends FlowEntityModel {\n  type: 'in' | 'out'\n  pos: { x: number; y: number }\n  angle?: number\n  weight?: number\n}\n\nexport interface Anchor extends AnchorModel {\n  node: FlowNode\n  render(): SVGTemplateResult\n}\n\n/** 플로우 노드 */\nexport interface FlowNodeModel extends FlowEntityModel, FlowNodeDataSchema {\n  pos: { x: number; y: number }\n  size: { w: number; h: number }\n  anchorsOption?: { id: string; [key: string]: any }[]\n}\n\nexport interface FlowNode extends FlowEntity, FlowNodeModel {\n  anchors: Anchor[]\n  anchorModels: AnchorModel[]\n  findAnchor(id: string): Anchor | undefined\n  render(): SVGTemplateResult\n  renderNode(): SVGTemplateResult\n}\n\nexport interface AnchorPointer {\n  nodeId: string\n  anchorId: string\n}\n\n/** 플로우 엣지 */\nexport interface FlowEdgeModel extends FlowEntityModel {\n  type: string\n  from: AnchorPointer\n  to: AnchorPointer\n  weight?: number\n  dataMappings: Mapping[]\n}\n\nexport interface FlowEdge extends FlowEntity, FlowEdgeModel {\n  fromAnchor?: Anchor\n  toAnchor?: Anchor\n  render(): SVGTemplateResult\n}\n\nexport type EditorMode = 'edit' | 'debug'\n\nexport type FlowModel = { nodes: FlowNodeModel[]; edges: FlowEdgeModel[] }\n\nexport type FlowNodeImplementation = new (...args: any[]) => FlowNode\n\nexport type TaskType = {\n  name: string\n  description: string | null\n  help: string | null\n  parameterSpec: PropertySpec[]\n}\n"]}

package/dist/src/utils/generate-mapping-scheme.d.ts

@@ -0,0 +1,6 @@
+import { TreeNode } from '@operato/data-mapper';
+import { FlowDataSchema, FlowNode } from '../types.js';
+import { PropertySpec } from '@operato/property-editor';
+export declare function convertNodesToTree(nodes: FlowNode[], except: FlowNode[]): TreeNode;
+export declare function convertSchemaToTree(schema: FlowDataSchema, rootLabel: string): TreeNode;
+export declare function convertPropertySpecsToSchema(propertySpecs: PropertySpec[]): FlowDataSchema;

package/dist/src/utils/generate-mapping-scheme.js

@@ -0,0 +1,50 @@
+export function convertNodesToTree(nodes, except) {
+    const schema = {
+        type: 'object',
+        properties: nodes
+            .filter(node => !except.includes(node))
+            .reduce((sum, node) => {
+            const { type, subtype, label, outputSchema } = node;
+            sum[label || subtype || type] = outputSchema;
+            return sum;
+        }, {})
+    };
+    return convertSchemaToTree(schema, 'Context Data');
+}
+export function convertSchemaToTree(schema, rootLabel) {
+    const convert = (schema, idPrefix) => {
+        return {
+            id: idPrefix,
+            label: idPrefix || rootLabel,
+            multiplicity: schema.type === 'array' ? '*' : '1',
+            children: schema.properties
+                ? Object.entries(schema.properties).map(([key, subSchema]) => convert(subSchema, `${key}`))
+                : undefined
+        };
+    };
+    return convert(schema, rootLabel.toLowerCase());
+}
+export function convertPropertySpecsToSchema(propertySpecs) {
+    return {
+        type: 'object',
+        properties: propertySpecs.reduce((sum, propertySpec) => {
+            const { name, type } = propertySpec;
+            let schemaType = 'string';
+            switch (type) {
+                case 'string':
+                case 'number':
+                case 'boolena':
+                    schemaType = type;
+                    break;
+                case 'checkbox':
+                    schemaType = 'boolean';
+                    break;
+                default:
+                    schemaType = 'object';
+            }
+            sum[name] = { type: schemaType };
+            return sum;
+        }, {})
+    };
+}
+//# sourceMappingURL=generate-mapping-scheme.js.map

package/dist/src/utils/generate-mapping-scheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-mapping-scheme.js","sourceRoot":"","sources":["../../../src/utils/generate-mapping-scheme.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,kBAAkB,CAAC,KAAiB,EAAE,MAAkB;IACtE,MAAM,MAAM,GAAmB;QAC7B,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE,KAAK;aACd,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;aACtC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YACpB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,IAAI,CAAA;YACnD,GAAG,CAAC,KAAK,IAAI,OAAO,IAAI,IAAI,CAAC,GAAG,YAAY,CAAA;YAC5C,OAAO,GAAG,CAAA;QACZ,CAAC,EAAE,EAAS,CAAC;KAChB,CAAA;IAED,OAAO,mBAAmB,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;AACpD,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,MAAsB,EAAE,SAAiB;IAC3E,MAAM,OAAO,GAAG,CAAC,MAAsB,EAAE,QAAgB,EAAY,EAAE;QACrE,OAAO;YACL,EAAE,EAAE,QAAQ;YACZ,KAAK,EAAE,QAAQ,IAAI,SAAS;YAC5B,YAAY,EAAE,MAAM,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;YACjD,QAAQ,EAAE,MAAM,CAAC,UAAU;gBACzB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,GAAG,EAAE,CAAC,CAAC;gBAC3F,CAAC,CAAC,SAAS;SACd,CAAA;IACH,CAAC,CAAA;IAED,OAAO,OAAO,CAAC,MAAM,EAAE,SAAS,CAAC,WAAW,EAAE,CAAC,CAAA;AACjD,CAAC;AAED,MAAM,UAAU,4BAA4B,CAAC,aAA6B;IACxE,OAAO;QACL,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE,aAAa,CAAC,MAAM,CAC9B,CAAC,GAAG,EAAE,YAAY,EAAE,EAAE;YACpB,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,YAAY,CAAA;YACnC,IAAI,UAAU,GAAyD,QAAQ,CAAA;YAE/E,QAAQ,IAAI,EAAE,CAAC;gBACb,KAAK,QAAQ,CAAC;gBACd,KAAK,QAAQ,CAAC;gBACd,KAAK,SAAS;oBACZ,UAAU,GAAG,IAAW,CAAA;oBACxB,MAAK;gBACP,KAAK,UAAU;oBACb,UAAU,GAAG,SAAS,CAAA;oBACtB,MAAK;gBACP;oBACE,UAAU,GAAG,QAAQ,CAAA;YACzB,CAAC;YAED,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,CAAA;YAEhC,OAAO,GAAG,CAAA;QACZ,CAAC,EACD,EAAuC,CACxC;KACF,CAAA;AACH,CAAC","sourcesContent":["import { TreeNode } from '@operato/data-mapper'\nimport { FlowDataSchema, FlowNode } from '../types.js'\nimport { PropertySpec } from '@operato/property-editor'\n\nexport function convertNodesToTree(nodes: FlowNode[], except: FlowNode[]): TreeNode {\n  const schema: FlowDataSchema = {\n    type: 'object',\n    properties: nodes\n      .filter(node => !except.includes(node))\n      .reduce((sum, node) => {\n        const { type, subtype, label, outputSchema } = node\n        sum[label || subtype || type] = outputSchema\n        return sum\n      }, {} as any)\n  }\n\n  return convertSchemaToTree(schema, 'Context Data')\n}\n\nexport function convertSchemaToTree(schema: FlowDataSchema, rootLabel: string): TreeNode {\n  const convert = (schema: FlowDataSchema, idPrefix: string): TreeNode => {\n    return {\n      id: idPrefix,\n      label: idPrefix || rootLabel,\n      multiplicity: schema.type === 'array' ? '*' : '1',\n      children: schema.properties\n        ? Object.entries(schema.properties).map(([key, subSchema]) => convert(subSchema, `${key}`))\n        : undefined\n    }\n  }\n\n  return convert(schema, rootLabel.toLowerCase())\n}\n\nexport function convertPropertySpecsToSchema(propertySpecs: PropertySpec[]): FlowDataSchema {\n  return {\n    type: 'object',\n    properties: propertySpecs.reduce(\n      (sum, propertySpec) => {\n        const { name, type } = propertySpec\n        let schemaType: 'string' | 'number' | 'boolean' | 'object' | 'array' = 'string'\n\n        switch (type) {\n          case 'string':\n          case 'number':\n          case 'boolena':\n            schemaType = type as any\n            break\n          case 'checkbox':\n            schemaType = 'boolean'\n            break\n          default:\n            schemaType = 'object'\n        }\n\n        sum[name] = { type: schemaType }\n\n        return sum\n      },\n      {} as { [key: string]: FlowDataSchema }\n    )\n  }\n}\n"]}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@operato/flow",
-  "version": "9.0.1",
+  "version": "9.0.2",
   "description": "Visual Scenario Flow Builder & Viewer",
   "author": "heartyoh",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
   "license": "MIT",
   "operato": true,
   "publishConfig": {
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@lit/context": "1.1.4",
-    "@operato/data-mapper": "^9.0.1",
+    "@operato/data-mapper": "^9.0.2",
     "@operato/popup": "^9.0.1",
     "@operato/property-editor": "^9.0.1",
     "dagre-esm": "^0.8.5",
@@ -86,5 +86,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "28e94ba161590458a69c7d68e93aa9283fd95531"
+  "gitHead": "595a66745b97ab3f364e870aabff7b05c7bf3da8"
 }