@operato/flow 9.0.0-beta.52

package/dist/src/types.d.ts

@@ -0,0 +1,92 @@
+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;
+    };
+}
+export interface FlowNode extends FlowEntity, FlowNodeModel {
+    anchors?: Anchor[];
+    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}\n\nexport interface FlowNode extends FlowEntity, FlowNodeModel {\n  anchors?: Anchor[]\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/dist/stories/ox-flow-editor.stories.d.ts

@@ -0,0 +1,24 @@
+import '../src/ox-flow-editor.js';
+import '@material/web/icon/icon.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        model: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    model: object;
+}
+export declare const Regular: Story<ArgTypes>;
+export declare const Standard: Story<ArgTypes>;
+export declare const Select: Story<ArgTypes>;

package/dist/stories/ox-flow-editor.stories.js

@@ -0,0 +1,249 @@
+import '../src/ox-flow-editor.js';
+import '@material/web/icon/icon.js';
+import { html } from 'lit';
+import availableNodeTypes from '../src/nodes/index.js';
+export default {
+    title: 'ox-flow-editor',
+    component: 'ox-flow-editor',
+    argTypes: {
+        model: { control: 'object' }
+    }
+};
+const Template = ({ model }) => html `
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
+  <link href="/themes/grist-theme.css" rel="stylesheet" />
+  <link href="/themes/form-theme.css" rel="stylesheet" />
+
+  <style>
+    ox-flow-editor {
+      width: 100%;
+      height: 1200px;
+      display: flex;
+    }
+  </style>
+
+  <ox-flow-editor .availableNodeTypes=${availableNodeTypes} .model=${model}></ox-flow-editor>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    model: {
+        nodes: [],
+        edges: []
+    }
+};
+export const Standard = Template.bind({});
+Standard.args = {
+    model: {
+        nodes: [
+            {
+                id: 'start-1',
+                type: 'start',
+                label: 'Start',
+                pos: { x: 200, y: 100 }
+            },
+            {
+                id: 'task-1',
+                type: 'task',
+                label: 'Task',
+                pos: { x: 200, y: 250 }
+            },
+            {
+                id: 'decision-1',
+                type: 'decision',
+                label: 'Decision',
+                pos: { x: 200, y: 400 }
+            },
+            {
+                id: 'task-2',
+                type: 'task',
+                label: 'Yes Task',
+                pos: { x: 200, y: 550 }
+            },
+            {
+                id: 'task-3',
+                type: 'task',
+                label: 'No Task',
+                pos: { x: 360, y: 550 }
+            },
+            {
+                id: 'end-1',
+                type: 'end',
+                label: 'End',
+                pos: { x: 200, y: 700 }
+            }
+        ],
+        edges: [
+            {
+                id: 'edge1',
+                from: { nodeId: 'start-1', anchorId: 'out' },
+                to: { nodeId: 'task-1', anchorId: 'in' }
+            },
+            {
+                id: 'edge2',
+                from: { nodeId: 'task-1', anchorId: 'out' },
+                to: { nodeId: 'decision-1', anchorId: 'in' }
+            },
+            {
+                id: 'edge3',
+                from: { nodeId: 'decision-1', anchorId: 'yes' },
+                to: { nodeId: 'task-2', anchorId: 'in' },
+                label: 'Yes',
+                weight: 2
+            },
+            {
+                id: 'edge4',
+                from: { nodeId: 'decision-1', anchorId: 'no-2' },
+                to: { nodeId: 'task-3', anchorId: 'in' },
+                label: 'No',
+                weight: 1
+            },
+            {
+                id: 'edge5',
+                from: { nodeId: 'task-2', anchorId: 'out' },
+                to: { nodeId: 'end-1', anchorId: 'in' }
+            },
+            {
+                id: 'edge6',
+                from: { nodeId: 'task-3', anchorId: 'out' },
+                to: { nodeId: 'end-1', anchorId: 'in' }
+            }
+        ]
+    }
+};
+export const Select = Template.bind({});
+Select.args = {
+    model: {
+        nodes: [
+            {
+                id: 'start-1',
+                type: 'start',
+                label: 'Start',
+                pos: { x: 450, y: 100 }
+            },
+            {
+                id: 'task-0',
+                type: 'task',
+                label: 'Task',
+                pos: { x: 450, y: 250 }
+            },
+            {
+                id: 'select-1',
+                type: 'select',
+                label: 'Select',
+                options: {
+                    outputCount: 4
+                },
+                pos: { x: 450, y: 400 }
+            },
+            {
+                id: 'task-1',
+                type: 'task',
+                label: 'Task 1',
+                pos: { x: 220, y: 550 }
+            },
+            {
+                id: 'task-2',
+                type: 'task',
+                label: 'Task 2',
+                pos: { x: 370, y: 550 }
+            },
+            {
+                id: 'task-3',
+                type: 'task',
+                label: 'Task 3',
+                pos: { x: 520, y: 550 }
+            },
+            {
+                id: 'task-4',
+                type: 'task',
+                label: 'Task 4',
+                pos: { x: 670, y: 550 }
+            },
+            {
+                id: 'end-1',
+                type: 'end',
+                label: 'End',
+                pos: { x: 450, y: 700 }
+            }
+        ],
+        edges: [
+            {
+                id: 'edge1',
+                from: { nodeId: 'start-1', anchorId: 'out' },
+                to: { nodeId: 'task-0', anchorId: 'in' }
+            },
+            {
+                id: 'edge2',
+                from: { nodeId: 'task-0', anchorId: 'out' },
+                to: { nodeId: 'select-1', anchorId: 'in' },
+                label: 'case 1',
+                weight: 3
+            },
+            {
+                id: 'edge3',
+                from: { nodeId: 'select-1', anchorId: 'out-1' },
+                to: { nodeId: 'task-1', anchorId: 'in' },
+                label: 'case 1',
+                weight: 4
+            },
+            {
+                id: 'edge4',
+                from: { nodeId: 'select-1', anchorId: 'out-2' },
+                to: { nodeId: 'task-2', anchorId: 'in' },
+                label: 'case 2',
+                weight: 3
+            },
+            {
+                id: 'edge5',
+                from: { nodeId: 'select-1', anchorId: 'out-3' },
+                to: { nodeId: 'task-3', anchorId: 'in' },
+                label: 'case 3',
+                weight: 2
+            },
+            {
+                id: 'edge6',
+                from: { nodeId: 'select-1', anchorId: 'out-4' },
+                to: { nodeId: 'task-4', anchorId: 'in' },
+                label: 'case 4',
+                weight: 1
+            },
+            {
+                id: 'edge7',
+                from: { nodeId: 'task-1', anchorId: 'out' },
+                to: { nodeId: 'end-1', anchorId: 'in' }
+            },
+            {
+                id: 'edge8',
+                from: { nodeId: 'task-2', anchorId: 'out' },
+                to: { nodeId: 'end-1', anchorId: 'in' }
+            },
+            {
+                id: 'edge9',
+                from: { nodeId: 'task-3', anchorId: 'out' },
+                to: { nodeId: 'end-1', anchorId: 'in' }
+            },
+            {
+                id: 'edge10',
+                from: { nodeId: 'task-4', anchorId: 'out' },
+                to: { nodeId: 'end-1', anchorId: 'in' }
+            }
+        ]
+    }
+};
+//# sourceMappingURL=ox-flow-editor.stories.js.map

package/dist/stories/ox-flow-editor.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-flow-editor.stories.js","sourceRoot":"","sources":["../../stories/ox-flow-editor.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/ox-flow-editor.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { FlowModel } from '../src/types.js'\nimport availableNodeTypes from '../src/nodes/index.js'\n\nexport default {\n  title: 'ox-flow-editor',\n  component: 'ox-flow-editor',\n  argTypes: {\n    model: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  model: object\n}\n\nconst Template: Story<ArgTypes> = ({ model }: ArgTypes) => html`\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n  <style>\n    ox-flow-editor {\n      width: 100%;\n      height: 1200px;\n      display: flex;\n    }\n  </style>\n\n  <ox-flow-editor .availableNodeTypes=${availableNodeTypes} .model=${model as FlowModel}></ox-flow-editor>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  model: {\n    nodes: [],\n    edges: []\n  }\n}\n\nexport const Standard = Template.bind({})\nStandard.args = {\n  model: {\n    nodes: [\n      {\n        id: 'start-1',\n        type: 'start',\n        label: 'Start',\n        pos: { x: 200, y: 100 }\n      },\n      {\n        id: 'task-1',\n        type: 'task',\n        label: 'Task',\n        pos: { x: 200, y: 250 }\n      },\n      {\n        id: 'decision-1',\n        type: 'decision',\n        label: 'Decision',\n        pos: { x: 200, y: 400 }\n      },\n      {\n        id: 'task-2',\n        type: 'task',\n        label: 'Yes Task',\n        pos: { x: 200, y: 550 }\n      },\n      {\n        id: 'task-3',\n        type: 'task',\n        label: 'No Task',\n        pos: { x: 360, y: 550 }\n      },\n      {\n        id: 'end-1',\n        type: 'end',\n        label: 'End',\n        pos: { x: 200, y: 700 }\n      }\n    ],\n    edges: [\n      {\n        id: 'edge1',\n        from: { nodeId: 'start-1', anchorId: 'out' },\n        to: { nodeId: 'task-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge2',\n        from: { nodeId: 'task-1', anchorId: 'out' },\n        to: { nodeId: 'decision-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge3',\n        from: { nodeId: 'decision-1', anchorId: 'yes' },\n        to: { nodeId: 'task-2', anchorId: 'in' },\n        label: 'Yes',\n        weight: 2\n      },\n      {\n        id: 'edge4',\n        from: { nodeId: 'decision-1', anchorId: 'no-2' },\n        to: { nodeId: 'task-3', anchorId: 'in' },\n        label: 'No',\n        weight: 1\n      },\n      {\n        id: 'edge5',\n        from: { nodeId: 'task-2', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge6',\n        from: { nodeId: 'task-3', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      }\n    ]\n  }\n}\n\nexport const Select = Template.bind({})\nSelect.args = {\n  model: {\n    nodes: [\n      {\n        id: 'start-1',\n        type: 'start',\n        label: 'Start',\n        pos: { x: 450, y: 100 }\n      },\n      {\n        id: 'task-0',\n        type: 'task',\n        label: 'Task',\n        pos: { x: 450, y: 250 }\n      },\n      {\n        id: 'select-1',\n        type: 'select',\n        label: 'Select',\n        options: {\n          outputCount: 4\n        },\n        pos: { x: 450, y: 400 }\n      },\n      {\n        id: 'task-1',\n        type: 'task',\n        label: 'Task 1',\n        pos: { x: 220, y: 550 }\n      },\n      {\n        id: 'task-2',\n        type: 'task',\n        label: 'Task 2',\n        pos: { x: 370, y: 550 }\n      },\n      {\n        id: 'task-3',\n        type: 'task',\n        label: 'Task 3',\n        pos: { x: 520, y: 550 }\n      },\n      {\n        id: 'task-4',\n        type: 'task',\n        label: 'Task 4',\n        pos: { x: 670, y: 550 }\n      },\n      {\n        id: 'end-1',\n        type: 'end',\n        label: 'End',\n        pos: { x: 450, y: 700 }\n      }\n    ],\n    edges: [\n      {\n        id: 'edge1',\n        from: { nodeId: 'start-1', anchorId: 'out' },\n        to: { nodeId: 'task-0', anchorId: 'in' }\n      },\n      {\n        id: 'edge2',\n        from: { nodeId: 'task-0', anchorId: 'out' },\n        to: { nodeId: 'select-1', anchorId: 'in' },\n        label: 'case 1',\n        weight: 3\n      },\n      {\n        id: 'edge3',\n        from: { nodeId: 'select-1', anchorId: 'out-1' },\n        to: { nodeId: 'task-1', anchorId: 'in' },\n        label: 'case 1',\n        weight: 4\n      },\n      {\n        id: 'edge4',\n        from: { nodeId: 'select-1', anchorId: 'out-2' },\n        to: { nodeId: 'task-2', anchorId: 'in' },\n        label: 'case 2',\n        weight: 3\n      },\n      {\n        id: 'edge5',\n        from: { nodeId: 'select-1', anchorId: 'out-3' },\n        to: { nodeId: 'task-3', anchorId: 'in' },\n        label: 'case 3',\n        weight: 2\n      },\n      {\n        id: 'edge6',\n        from: { nodeId: 'select-1', anchorId: 'out-4' },\n        to: { nodeId: 'task-4', anchorId: 'in' },\n        label: 'case 4',\n        weight: 1\n      },\n      {\n        id: 'edge7',\n        from: { nodeId: 'task-1', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge8',\n        from: { nodeId: 'task-2', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge9',\n        from: { nodeId: 'task-3', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge10',\n        from: { nodeId: 'task-4', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      }\n    ]\n  }\n}\n"]}