@stonecrop/node-editor 0.2.63 → 0.2.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +2 -2
- package/dist/node-editor.d.ts +49 -10
- package/dist/node-editor.js +2780 -2753
- package/dist/node-editor.js.map +1 -1
- package/dist/node-editor.umd.cjs +7 -2
- package/dist/node-editor.umd.cjs.map +1 -1
- package/dist/node_editor.tsbuildinfo +1 -1
- package/dist/src/index.d.ts +3 -3
- package/dist/{node_editor/src → src}/tsdoc-metadata.json +1 -1
- package/dist/src/types/index.d.ts +17 -1
- package/dist/src/types/index.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +7 -7
- package/src/components/NodeEditor.vue +1 -1
- package/src/index.ts +3 -3
- package/src/types/index.ts +17 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"5.
|
|
1
|
+
{"version":"5.7.2"}
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { App } from 'vue';
|
|
2
|
-
import NodeEditor from '
|
|
3
|
-
import StateEditor from '
|
|
4
|
-
export type { EditorStates, FlowElement, FlowElements, Layout } from '
|
|
2
|
+
import NodeEditor from './components/NodeEditor.vue';
|
|
3
|
+
import StateEditor from './components/StateEditor.vue';
|
|
4
|
+
export type { EditorStates, FlowElement, FlowElements, Layout } from './types';
|
|
5
5
|
/**
|
|
6
6
|
* Install all Node Editor components
|
|
7
7
|
* @param app - Vue app instance
|
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
import { type Elements, type Element, type XYPosition, Position } from '@vue-flow/core';
|
|
2
2
|
import type { AnyStateMachine, AnyStateNodeDefinition, StatesConfig } from 'xstate';
|
|
3
|
+
/**
|
|
4
|
+
* Editor states
|
|
5
|
+
* @public
|
|
6
|
+
*/
|
|
3
7
|
export type EditorStates = {
|
|
4
|
-
[key: string]:
|
|
8
|
+
[key: string]: AnyStateMachine | AnyStateNodeDefinition | StatesConfig<any, any, any>;
|
|
5
9
|
};
|
|
10
|
+
/**
|
|
11
|
+
* Flow elements
|
|
12
|
+
* @public
|
|
13
|
+
*/
|
|
6
14
|
export type FlowElements = Elements<{
|
|
7
15
|
hasInput?: boolean;
|
|
8
16
|
hasOutput?: boolean;
|
|
@@ -10,6 +18,10 @@ export type FlowElements = Elements<{
|
|
|
10
18
|
hasInput?: boolean;
|
|
11
19
|
hasOutput?: boolean;
|
|
12
20
|
}>;
|
|
21
|
+
/**
|
|
22
|
+
* Flow element
|
|
23
|
+
* @public
|
|
24
|
+
*/
|
|
13
25
|
export type FlowElement = Element<{
|
|
14
26
|
hasInput?: boolean;
|
|
15
27
|
hasOutput?: boolean;
|
|
@@ -17,6 +29,10 @@ export type FlowElement = Element<{
|
|
|
17
29
|
hasInput?: boolean;
|
|
18
30
|
hasOutput?: boolean;
|
|
19
31
|
}>;
|
|
32
|
+
/**
|
|
33
|
+
* Node layout
|
|
34
|
+
* @public
|
|
35
|
+
*/
|
|
20
36
|
export type Layout = {
|
|
21
37
|
[key: string]: {
|
|
22
38
|
position?: XYPosition;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,KAAK,UAAU,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACvF,OAAO,KAAK,EAAE,eAAe,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAA;AAEnF,MAAM,MAAM,YAAY,GAAG;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,KAAK,UAAU,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACvF,OAAO,KAAK,EAAE,eAAe,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAA;AAEnF;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,eAAe,GAAG,sBAAsB,GAAG,YAAY,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;CACrF,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,CAClC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,EAC3C;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAC3C,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,CAChC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,EAC3C;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAC3C,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG;QACd,QAAQ,CAAC,EAAE,UAAU,CAAA;QACrB,cAAc,CAAC,EAAE,QAAQ,CAAA;QACzB,cAAc,CAAC,EAAE,QAAQ,CAAA;KACzB,CAAA;CACD,CAAA"}
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.editable-edge-label{background-color:#fff;position:relative;font-size:12px}.label-input{text-align:center;width:40ch}.label-input-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center}.label-input{text-align:center}.vue-flow{position:relative;width:100%;height:100%;overflow:hidden;z-index:0;direction:ltr}.vue-flow__container{position:absolute;height:100%;width:100%;left:0;top:0}.vue-flow__pane{z-index:1}.vue-flow__pane.draggable{cursor:grab}.vue-flow__pane.
|
|
1
|
+
.editable-edge-label{background-color:#fff;position:relative;font-size:12px}.label-input{text-align:center;width:40ch}.label-input-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center}.label-input{text-align:center}.vue-flow{position:relative;width:100%;height:100%;overflow:hidden;z-index:0;direction:ltr}.vue-flow__container{position:absolute;height:100%;width:100%;left:0;top:0}.vue-flow__pane{z-index:1}.vue-flow__pane.draggable{cursor:grab}.vue-flow__pane.selection{cursor:pointer}.vue-flow__pane.dragging{cursor:grabbing}.vue-flow__transformationpane{transform-origin:0 0;z-index:2;pointer-events:none}.vue-flow__viewport{z-index:4;overflow:clip}.vue-flow__selection{z-index:6}.vue-flow__edge-labels{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vue-flow__nodesselection-rect:focus,.vue-flow__nodesselection-rect:focus-visible{outline:none}.vue-flow .vue-flow__edges{pointer-events:none;overflow:visible}.vue-flow__edge-path,.vue-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.vue-flow__edge{pointer-events:visibleStroke;cursor:pointer}.vue-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.vue-flow__edge.animated path.vue-flow__edge-interaction{stroke-dasharray:none;animation:none}.vue-flow__edge.inactive{pointer-events:none}.vue-flow__edge.selected,.vue-flow__edge:focus,.vue-flow__edge:focus-visible{outline:none}.vue-flow__edge.selected .vue-flow__edge-path,.vue-flow__edge:focus .vue-flow__edge-path,.vue-flow__edge:focus-visible .vue-flow__edge-path{stroke:#555}.vue-flow__edge-textwrapper{pointer-events:all}.vue-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vue-flow__connection{pointer-events:none}.vue-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.vue-flow__connectionline{z-index:1001}.vue-flow__nodes{pointer-events:none;transform-origin:0 0}.vue-flow__node-default,.vue-flow__node-input,.vue-flow__node-output{border-width:1px;border-style:solid;border-color:#bbb}.vue-flow__node-default.selected,.vue-flow__node-default:focus,.vue-flow__node-default:focus-visible,.vue-flow__node-input.selected,.vue-flow__node-input:focus,.vue-flow__node-input:focus-visible,.vue-flow__node-output.selected,.vue-flow__node-output:focus,.vue-flow__node-output:focus-visible{outline:none;border:1px solid #555}.vue-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.vue-flow__node.draggable{cursor:grab;pointer-events:all}.vue-flow__node.draggable.dragging{cursor:grabbing}.vue-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.vue-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.vue-flow__nodesselection-rect.dragging{cursor:grabbing}.vue-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px}.vue-flow__handle.connectable{pointer-events:all;cursor:crosshair}.vue-flow__handle-bottom{left:50%;bottom:0;transform:translate(-50%,50%)}.vue-flow__handle-top{left:50%;top:0;transform:translate(-50%,-50%)}.vue-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.vue-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.vue-flow__edgeupdater{cursor:move;pointer-events:all}.vue-flow__panel{position:absolute;z-index:5;margin:15px}.vue-flow__panel.top{top:0}.vue-flow__panel.bottom{bottom:0}.vue-flow__panel.left{left:0}.vue-flow__panel.right{right:0}.vue-flow__panel.center{left:50%;transform:translate(-50%)}@keyframes dashdraw{0%{stroke-dashoffset:10}}:root{--vf-node-bg: #fff;--vf-node-text: #222;--vf-connection-path: #b1b1b7;--vf-handle: #555}.vue-flow__edge.updating .vue-flow__edge-path{stroke:#777}.vue-flow__edge-text{font-size:10px}.vue-flow__edge-textbg{fill:#fff}.vue-flow__connection-path{stroke:var(--vf-connection-path)}.vue-flow__node{cursor:grab}.vue-flow__node.selectable:focus,.vue-flow__node.selectable:focus-visible{outline:none}.vue-flow__node-default,.vue-flow__node-input,.vue-flow__node-output{padding:10px;border-radius:3px;width:150px;font-size:12px;text-align:center;border-width:1px;border-style:solid;color:var(--vf-node-text);background-color:var(--vf-node-bg);border-color:var(--vf-node-color)}.vue-flow__node-default.selected,.vue-flow__node-default.selected:hover,.vue-flow__node-input.selected,.vue-flow__node-input.selected:hover,.vue-flow__node-output.selected,.vue-flow__node-output.selected:hover{box-shadow:0 0 0 .5px var(--vf-box-shadow)}.vue-flow__node-default .vue-flow__handle,.vue-flow__node-input .vue-flow__handle,.vue-flow__node-output .vue-flow__handle{background:var(--vf-handle)}.vue-flow__node-default.selectable:hover,.vue-flow__node-input.selectable:hover,.vue-flow__node-output.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.vue-flow__node-input{--vf-node-color: var(--vf-node-color, #0041d0);--vf-handle: var(--vf-node-color, #0041d0);--vf-box-shadow: var(--vf-node-color, #0041d0);background:var(--vf-node-bg);border-color:var(--vf-node-color, #0041d0)}.vue-flow__node-input.selected,.vue-flow__node-input:focus,.vue-flow__node-input:focus-visible{outline:none;border:1px solid var(--vf-node-color, #0041d0)}.vue-flow__node-default{--vf-handle: var(--vf-node-color, #1a192b);--vf-box-shadow: var(--vf-node-color, #1a192b);background:var(--vf-node-bg);border-color:var(--vf-node-color, #1a192b)}.vue-flow__node-default.selected,.vue-flow__node-default:focus,.vue-flow__node-default:focus-visible{outline:none;border:1px solid var(--vf-node-color, #1a192b)}.vue-flow__node-output{--vf-handle: var(--vf-node-color, #ff0072);--vf-box-shadow: var(--vf-node-color, #ff0072);background:var(--vf-node-bg);border-color:var(--vf-node-color, #ff0072)}.vue-flow__node-output.selected,.vue-flow__node-output:focus,.vue-flow__node-output:focus-visible{outline:none;border:1px solid var(--vf-node-color, #ff0072)}.vue-flow__nodesselection-rect,.vue-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.vue-flow__nodesselection-rect:focus,.vue-flow__nodesselection-rect:focus-visible,.vue-flow__selection:focus,.vue-flow__selection:focus-visible{outline:none}.vue-flow__handle{width:6px;height:6px;background:var(--vf-handle);border:1px solid #fff;border-radius:100%}.chart-controls-left,.chart-controls-right{height:1.8em;display:flex;flex-direction:row;align-items:center;padding-top:.2em}.chart-controls-right div{margin-left:5px}.chart-controls{padding-left:20px;padding-right:20px;height:1.8em;border-bottom:1px solid #ccc;display:flex;flex-direction:row;justify-content:space-between}.chart-controls div{margin-bottom:5px}.defaultContainerClass{height:90vh;width:100%;border:1px solid #ccc}.default-input-node.vue-flow__node-input,.default-output-node.vue-flow__node-output{border-color:#000}.default-input-node.vue-flow__node-input .vue-flow__handle,.default-output-node.vue-flow__node-output .vue-flow__handle{background-color:#000}.default-input-node.vue-flow__node-input.selected,.default-output-node.vue-flow__node-output.selected{box-shadow:0 0 0 .5px #000}button.button-default{background-color:#fff;padding:1px 12px;border-radius:3px;border:1px solid #ccc;cursor:pointer;white-space:nowrap}button.button-default:hover{background-color:#f2f2f2}.vue-flow{background-size:40px 40px;background-image:linear-gradient(to right,#ccc 1px,transparent 1px),linear-gradient(to bottom,#ccc 1px,transparent 1px)}input.label-editor{position:absolute}.node-editor-wrapper{position:relative}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stonecrop/node-editor",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.65",
|
|
4
4
|
"description": "Node editor UI for Stonecrop",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -19,34 +19,34 @@
|
|
|
19
19
|
"exports": {
|
|
20
20
|
".": {
|
|
21
21
|
"import": {
|
|
22
|
-
"types": "./dist/
|
|
22
|
+
"types": "./dist/src/index.d.ts",
|
|
23
23
|
"default": "./dist/node-editor.js"
|
|
24
24
|
},
|
|
25
25
|
"require": "./dist/node-editor.umd.cjs"
|
|
26
26
|
},
|
|
27
27
|
"./styles": "./dist/style.css"
|
|
28
28
|
},
|
|
29
|
-
"typings": "./dist/
|
|
29
|
+
"typings": "./dist/src/index.d.ts",
|
|
30
30
|
"files": [
|
|
31
31
|
"dist/*",
|
|
32
32
|
"src/*"
|
|
33
33
|
],
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@vue-flow/core": "^1.37.1",
|
|
36
|
-
"vue": "^3.5.
|
|
36
|
+
"vue": "^3.5.11",
|
|
37
37
|
"vue-router": "^4.4.0",
|
|
38
38
|
"xstate": "^4.38.3"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@microsoft/api-documenter": "^7.
|
|
42
|
-
"@rushstack/heft": "^0.
|
|
41
|
+
"@microsoft/api-documenter": "^7.26.2",
|
|
42
|
+
"@rushstack/heft": "^0.68.6",
|
|
43
43
|
"@typescript-eslint/eslint-plugin": "^7.14.1",
|
|
44
44
|
"@typescript-eslint/parser": "^7.14.1",
|
|
45
45
|
"@vitejs/plugin-vue": "^5.1.3",
|
|
46
46
|
"eslint": "^8.40.0",
|
|
47
47
|
"eslint-config-prettier": "^8.8.0",
|
|
48
48
|
"eslint-plugin-vue": "^9.11.1",
|
|
49
|
-
"typescript": "^5.
|
|
49
|
+
"typescript": "^5.6.3",
|
|
50
50
|
"vite": "^5.4.5",
|
|
51
51
|
"stonecrop-rig": "0.2.22"
|
|
52
52
|
},
|
|
@@ -54,7 +54,7 @@ const emit = defineEmits(['update:modelValue'])
|
|
|
54
54
|
|
|
55
55
|
const hover = ref(false)
|
|
56
56
|
const vueFlowElements = ref<FlowElements>([])
|
|
57
|
-
const vueFlowInstance = ref<
|
|
57
|
+
const vueFlowInstance = ref<VueFlowStore>()
|
|
58
58
|
|
|
59
59
|
const activeElementKey = ref('')
|
|
60
60
|
const activeElementIndex = computed(() => {
|
package/src/index.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { App } from 'vue'
|
|
2
2
|
|
|
3
|
-
import NodeEditor from '
|
|
4
|
-
import StateEditor from '
|
|
5
|
-
export type { EditorStates, FlowElement, FlowElements, Layout } from '
|
|
3
|
+
import NodeEditor from './components/NodeEditor.vue'
|
|
4
|
+
import StateEditor from './components/StateEditor.vue'
|
|
5
|
+
export type { EditorStates, FlowElement, FlowElements, Layout } from './types'
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Install all Node Editor components
|
package/src/types/index.ts
CHANGED
|
@@ -1,20 +1,36 @@
|
|
|
1
1
|
import { type Elements, type Element, type XYPosition, Position } from '@vue-flow/core'
|
|
2
2
|
import type { AnyStateMachine, AnyStateNodeDefinition, StatesConfig } from 'xstate'
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* Editor states
|
|
6
|
+
* @public
|
|
7
|
+
*/
|
|
4
8
|
export type EditorStates = {
|
|
5
|
-
[key: string]:
|
|
9
|
+
[key: string]: AnyStateMachine | AnyStateNodeDefinition | StatesConfig<any, any, any>
|
|
6
10
|
}
|
|
7
11
|
|
|
12
|
+
/**
|
|
13
|
+
* Flow elements
|
|
14
|
+
* @public
|
|
15
|
+
*/
|
|
8
16
|
export type FlowElements = Elements<
|
|
9
17
|
{ hasInput?: boolean; hasOutput?: boolean },
|
|
10
18
|
{ hasInput?: boolean; hasOutput?: boolean }
|
|
11
19
|
>
|
|
12
20
|
|
|
21
|
+
/**
|
|
22
|
+
* Flow element
|
|
23
|
+
* @public
|
|
24
|
+
*/
|
|
13
25
|
export type FlowElement = Element<
|
|
14
26
|
{ hasInput?: boolean; hasOutput?: boolean },
|
|
15
27
|
{ hasInput?: boolean; hasOutput?: boolean }
|
|
16
28
|
>
|
|
17
29
|
|
|
30
|
+
/**
|
|
31
|
+
* Node layout
|
|
32
|
+
* @public
|
|
33
|
+
*/
|
|
18
34
|
export type Layout = {
|
|
19
35
|
[key: string]: {
|
|
20
36
|
position?: XYPosition
|