alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(lint): Update eslint rules

Browse Source 
* Remove semi
This commit is contained in:
Braks
2021-10-20 22:39:54 +02:00
parent 5ed1094dfe
commit 77eac0c12a
74 changed files with 2007 additions and 1827 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Nodes/DefaultNode.tsx
+5 -5
View File
@@ -1,6 +1,6 @@
import { defineComponent, PropType } from 'vue';
import Handle from '../../components/Handle';
import { NodeProps, NodeType, Position } from '../../types';
import { defineComponent, PropType } from 'vue'
import Handle from '../../components/Handle'
import { NodeProps, NodeType, Position } from '../../types'
export default defineComponent({
name: 'DefaultNode',
@@ -35,6 +35,6 @@ export default defineComponent({
{props.data?.label}
<Handle type="source" position={props.sourcePosition} isConnectable={props.isConnectable} />
</>
);
)
}
}) as NodeType;
}) as NodeType
src/components/Nodes/InputNode.tsx
+5 -5
View File
@@ -1,6 +1,6 @@
import Handle from '../../components/Handle';
import { NodeProps, NodeType, Position } from '../../types';
import { defineComponent, PropType } from 'vue';
import Handle from '../../components/Handle'
import { NodeProps, NodeType, Position } from '../../types'
import { defineComponent, PropType } from 'vue'
export default defineComponent({
name: 'InputNode',
@@ -29,6 +29,6 @@ export default defineComponent({
{props.data?.label}
<Handle type="source" position={props.sourcePosition} isConnectable={props.isConnectable} />
</>
);
)
}
}) as NodeType;
}) as NodeType
src/components/Nodes/Node.tsx
+61 -61
View File
@@ -1,14 +1,14 @@
import { computed, defineComponent, h, inject, onMounted, PropType, provide } from 'vue';
import { templateRef, useResizeObserver } from '@vueuse/core';
import { DraggableCore, DraggableEventListener } from '@braks/revue-draggable';
import { Node, NodeDimensionUpdate, NodeType, RevueFlowStore } from '../../types';
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
import { computed, defineComponent, h, inject, onMounted, PropType, provide } from 'vue'
import { templateRef, useResizeObserver } from '@vueuse/core'
import { DraggableCore, DraggableEventListener } from '@braks/revue-draggable'
import { Node, NodeDimensionUpdate, NodeType, RevueFlowStore } from '../../types'
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks'
interface NodeProps {
nodeTypes: Record<string, NodeType>;
snapToGrid: boolean;
snapGrid: [number, number];
selectNodesOnDrag: boolean;
nodeTypes: Record<string, NodeType>
snapToGrid: boolean
snapGrid: [number, number]
selectNodesOnDrag: boolean
}
export default defineComponent({
@@ -39,22 +39,22 @@ export default defineComponent({
}
},
setup(props) {
const store = inject<RevueFlowStore>('store')!;
const hooks = inject<RevueFlowHooks>('hooks')!;
provide('NodeIdContext', props.node.id);
const store = inject<RevueFlowStore>('store')!
const hooks = inject<RevueFlowHooks>('hooks')!
provide('NodeIdContext', props.node.id)
const nodeElement = templateRef<HTMLDivElement>('nodeElement', null);
const nodeElement = templateRef<HTMLDivElement>('nodeElement', null)
const selected = computed(() => store.selectedElements?.some(({ id }) => id === props.node.id) || false);
const selected = computed(() => store.selectedElements?.some(({ id }) => id === props.node.id) || false)
const isDraggable = computed(
() => props.node.draggable || (store.nodesDraggable && typeof props.node.draggable === 'undefined')
);
)
const isSelectable = computed(
() => props.node.selectable || (store.elementsSelectable && typeof props.node.selectable === 'undefined')
);
)
const isConnectable = computed(
() => props.node.connectable || (store.nodesConnectable && typeof props.node.connectable === 'undefined')
);
)
const node = () =>
({
@@ -62,72 +62,72 @@ export default defineComponent({
type: props.node.type,
position: { x: props.node.__rf.position.x, y: props.node.__rf.position.y },
data: props.node.data
} as Node);
} as Node)
const onMouseEnterHandler = () => {
if (props.node.__rf.isDragging) {
return;
return
}
return (event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: node() });
};
return (event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: node() })
}
const onMouseMoveHandler = () => {
if (props.node.__rf.isDragging) {
return;
return
}
return (event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: node() });
};
return (event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: node() })
}
const onMouseLeaveHandler = () => {
if (props.node.__rf.isDragging) {
return;
return
}
return (event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: node() });
};
return (event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: node() })
}
const onContextMenuHandler = () => {
return (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: node() });
};
return (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: node() })
}
const onSelectNodeHandler = (event: MouseEvent) => {
if (!isDraggable.value) {
const n = node();
const n = node()
if (isSelectable.value) {
store.unsetNodesSelection();
store.unsetNodesSelection()
if (!selected.value) {
store.addSelectedElements([n]);
store.addSelectedElements([n])
}
}
hooks.nodeClick.trigger({ event, node: n });
hooks.nodeClick.trigger({ event, node: n })
}
};
}
const onDragStart: DraggableEventListener = ({ event }) => {
const n = node();
hooks.nodeDragStart.trigger({ event, node: n });
const n = node()
hooks.nodeDragStart.trigger({ event, node: n })
if (props.selectNodesOnDrag && isSelectable.value) {
store.unsetNodesSelection();
store.unsetNodesSelection()
if (!selected.value) {
store.addSelectedElements([n]);
store.addSelectedElements([n])
}
} else if (!props.selectNodesOnDrag && !selected.value && isSelectable.value) {
store.unsetNodesSelection();
store.addSelectedElements([]);
store.unsetNodesSelection()
store.addSelectedElements([])
}
};
}
const onDrag: DraggableEventListener = ({ event, data }) => {
const n = node();
n.position.x += data.deltaX;
n.position.y += data.deltaY;
hooks.nodeDrag.trigger({ event, node: n });
const n = node()
n.position.x += data.deltaX
n.position.y += data.deltaY
hooks.nodeDrag.trigger({ event, node: n })
store?.updateNodePosDiff({
id: props.node.id as string,
@@ -136,39 +136,39 @@ export default defineComponent({
y: data.deltaY
},
isDragging: true
});
};
})
}
const onDragStop: DraggableEventListener = ({ event }) => {
const n = node();
const n = node()
// onDragStop also gets called when user just clicks on a node.
// Because of that we set dragging to true inside the onDrag handler and handle the click here
if (!props.node.__rf.isDragging) {
if (isSelectable.value && !props.selectNodesOnDrag && !selected.value) {
store.addSelectedElements([n]);
store.addSelectedElements([n])
}
hooks.nodeClick.trigger({ event, node: n });
hooks.nodeClick.trigger({ event, node: n })
return;
return
}
store.updateNodePosDiff({
id: n.id || '',
isDragging: false
});
})
hooks.nodeDragStop.trigger({ event, node: n });
};
hooks.nodeDragStop.trigger({ event, node: n })
}
useResizeObserver(nodeElement, (entries) => {
const updates: NodeDimensionUpdate[] = entries.map((entry) => ({
id: entry.target.getAttribute('data-id') || '',
nodeElement: entry.target as HTMLDivElement
}));
}))
store.updateNodeDimensions(updates);
});
store.updateNodeDimensions(updates)
})
onMounted(() => {
store.updateNodeDimensions([
@@ -177,8 +177,8 @@ export default defineComponent({
nodeElement: nodeElement.value,
forceUpdate: true
}
]);
});
])
})
return () =>
props.node.isHidden ? (
@@ -231,6 +231,6 @@ export default defineComponent({
})}
</div>
</DraggableCore>
);
)
}
});
})
src/components/Nodes/OutputNode.tsx
+5 -5
View File
@@ -1,6 +1,6 @@
import Handle from '../../components/Handle';
import { NodeProps, NodeType, Position } from '../../types';
import { defineComponent, PropType } from 'vue';
import Handle from '../../components/Handle'
import { NodeProps, NodeType, Position } from '../../types'
import { defineComponent, PropType } from 'vue'
export default defineComponent({
name: 'OutputNode',
@@ -29,6 +29,6 @@ export default defineComponent({
{props.data?.label}
<Handle type="source" position={props.targetPosition} isConnectable={props.isConnectable} />
</>
);
)
}
}) as NodeType;
}) as NodeType
src/components/Nodes/utils.ts
+15 -15
View File
@@ -1,14 +1,14 @@
import { HandleElement, Position } from '../../types';
import { getDimensions } from '../../utils';
import { HandleElement, Position } from '../../types'
import { getDimensions } from '../../utils'
export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number) => {
const bounds = nodeElement.getBoundingClientRect();
const bounds = nodeElement.getBoundingClientRect()
return {
source: getHandleBoundsByHandleType('.source', nodeElement, bounds, scale),
target: getHandleBoundsByHandleType('.target', nodeElement, bounds, scale)
};
};
}
}
export const getHandleBoundsByHandleType = (
selector: string,
@@ -16,19 +16,19 @@ export const getHandleBoundsByHandleType = (
parentBounds: ClientRect | DOMRect,
k: number
): HandleElement[] | null => {
const handles = nodeElement.querySelectorAll(selector);
const handles = nodeElement.querySelectorAll(selector)
if (!handles || !handles.length) {
return null;
return null
}
const handlesArray = Array.from(handles) as HTMLDivElement[];
const handlesArray = Array.from(handles) as HTMLDivElement[]
return handlesArray.map((handle): HandleElement => {
const bounds = handle.getBoundingClientRect();
const dimensions = getDimensions(handle);
const handleId = handle.getAttribute('data-handleid');
const handlePosition = handle.getAttribute('data-handlepos') as unknown as Position;
const bounds = handle.getBoundingClientRect()
const dimensions = getDimensions(handle)
const handleId = handle.getAttribute('data-handleid')
const handlePosition = handle.getAttribute('data-handlepos') as unknown as Position
return {
id: handleId,
@@ -36,6 +36,6 @@ export const getHandleBoundsByHandleType = (
x: (bounds.left - parentBounds.left) / k,
y: (bounds.top - parentBounds.top) / k,
...dimensions
};
});
};
}
})
}