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

feat(example): Add hidden example

Browse Source 
* Check if node/edge is hidden before rendering
This commit is contained in:
Braks
2021-08-16 21:41:16 +02:00
parent 489e12a8a7
commit e4a094017d
4 changed files with 107 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
examples/Hidden/index.tsx Normal file
View File

@@ -0,0 +1,51 @@
import RevueFlow, { addEdge, MiniMap, Controls, Connection, Edge, Elements } from '../../src';
import { defineComponent, ref, watchEffect } from 'vue';
const initialElements: Elements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2' },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e3-4', source: '3', target: '4' }
] as Elements;
const HiddenFlow = defineComponent({
setup() {
const elements = ref<Elements>(initialElements);
const isHidden = ref<boolean>(false);
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
watchEffect(() => {
console.log(isHidden.value);
elements.value = elements.value.map((e) => {
e.isHidden = isHidden.value;
return e;
});
});
const toggle = (event) => {
console.log(event.target);
isHidden.value = event.target?.checked;
};
return () => (
<RevueFlow v-model={elements.value} onConnect={onConnect}>
<MiniMap />
<Controls />
<div style={{ position: 'absolute', left: '10px', top: '10px', zIndex: 4 }}>
<div>
<label htmlFor="ishidden">
isHidden
<input id="ishidden" type="checkbox" v-model={isHidden.value} class="revue-flow__ishidden" />
</label>
</div>
</div>
</RevueFlow>
);
}
});
export default HiddenFlow;

4
examples/router.ts
View File

@@ -36,6 +36,10 @@ export const routes: RouterOptions['routes'] = [
{
path: '/empty',
component: () => import('./Empty')
},
{
path: '/hidden',
component: () => import('./Hidden')
}
];

2
src/components/Edges/Edge.tsx
View File

@@ -188,7 +188,7 @@ export default defineComponent({
const onEdgeUpdaterMouseOut = () => (updating.value = false);
return () =>
isVisible.value && edgePositions.value ? (
!props.edge.isHidden && isVisible.value && edgePositions.value ? (
<g
class={[
'revue-flow__edge',

99
src/components/Nodes/Node.tsx
View File

@@ -178,54 +178,57 @@ export default defineComponent({
]);
});
return () => (
<DraggableCore
cancel=".nodrag"
scale={store.transform[2]}
disabled={!isDraggable.value}
grid={props.snapGrid}
enableUserSelectHack={false}
onStart={onDragStart}
onMove={onDrag}
onStop={onDragStop}
>
<div
ref="nodeElement"
class={[
'revue-flow__node',
`revue-flow__node-${props.node.type}`,
{
selected: selected.value,
selectable: isSelectable.value
}
]}
style={{
zIndex: selected.value ? 10 : 3,
transform: `translate(${props.node.__rf.position.x}px,${props.node.__rf.position.y}px)`,
pointerEvents: isSelectable.value || isDraggable.value ? 'all' : 'none',
opacity: props.node.__rf.width !== null && props.node.__rf.height !== null ? 1 : 0,
...props.node.style
}}
data-id={props.node.id}
onMouseenter={onMouseEnterHandler}
onMousemove={onMouseMoveHandler}
onMouseleave={onMouseLeaveHandler}
onContextmenu={onContextMenuHandler}
onClick={onSelectNodeHandler}
return () =>
props.node.isHidden ? (
''
) : (
<DraggableCore
cancel=".nodrag"
scale={store.transform[2]}
disabled={!isDraggable.value}
grid={props.snapGrid}
enableUserSelectHack={false}
onStart={onDragStart}
onMove={onDrag}
onStop={onDragStop}
>
{h(props.type, {
data: props.node.data,
type: props.node.type,
xPos: props.node.__rf.position.x,
yPos: props.node.__rf.position.y,
selected: selected.value,
isConnectable: isConnectable.value,
sourcePosition: props.node.sourcePosition,
targetPosition: props.node.targetPosition,
isDragging: props.node.__rf.isDragging
})}
</div>
</DraggableCore>
);
<div
ref="nodeElement"
class={[
'revue-flow__node',
`revue-flow__node-${props.node.type}`,
{
selected: selected.value,
selectable: isSelectable.value
}
]}
style={{
zIndex: selected.value ? 10 : 3,
transform: `translate(${props.node.__rf.position.x}px,${props.node.__rf.position.y}px)`,
pointerEvents: isSelectable.value || isDraggable.value ? 'all' : 'none',
opacity: props.node.__rf.width !== null && props.node.__rf.height !== null ? 1 : 0,
...props.node.style
}}
data-id={props.node.id}
onMouseenter={onMouseEnterHandler}
onMousemove={onMouseMoveHandler}
onMouseleave={onMouseLeaveHandler}
onContextmenu={onContextMenuHandler}
onClick={onSelectNodeHandler}
>
{h(props.type, {
data: props.node.data,
type: props.node.type,
xPos: props.node.__rf.position.x,
yPos: props.node.__rf.position.y,
selected: selected.value,
isConnectable: isConnectable.value,
sourcePosition: props.node.sourcePosition,
targetPosition: props.node.targetPosition,
isDragging: props.node.__rf.isDragging
})}
</div>
</DraggableCore>
);
}
});