@operato/flow 9.0.0-beta.55 → 9.0.0-beta.61

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

@@ -1,249 +0,0 @@
-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' },
-                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

@@ -1 +0,0 @@
-{"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' },\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"]}