update: Remove wrapEdge and wrapNode files

* implement Edge.tsx and Node.vue to wrap the components accordingly refactor!: Removing callbacks from props in favor of events chore: upgrade vue and vite vue plugin
2021-08-08 19:28:45 +02:00
parent ffd41fb679
commit 25c92ecd84
40 changed files with 1224 additions and 3349 deletions
@@ -5,6 +5,7 @@ import { defineComponent, PropType } from 'vue';
 const DefaultNode = defineComponent({
  name: 'DefaultNode',
  components: { Handle },
+  inheritAttrs: false,
  props: {
    data: {
      type: Object as PropType<NodeProps['data']>,
@@ -29,11 +30,11 @@ const DefaultNode = defineComponent({
  },
  setup(props) {
    return () => (
-      <div>
+      <>
        <Handle type="target" position={props.targetPosition} isConnectable={props.isConnectable} />
        {props.data?.label}
        <Handle type="source" position={props.sourcePosition} isConnectable={props.isConnectable} />
-      </div>
+      </>
    );
  }
 });
@@ -5,6 +5,7 @@ import { defineComponent, PropType } from 'vue';
 const InputNode = defineComponent({
  name: 'InputNode',
  components: { Handle },
+  inheritAttrs: false,
  props: {
    data: {
      type: Object as PropType<NodeProps['data']>,
@@ -24,10 +25,10 @@ const InputNode = defineComponent({
  },
  setup(props) {
    return () => (
-      <div>
+      <>
        {props.data?.label}
        <Handle type="source" position={props.sourcePosition} isConnectable={props.isConnectable} />
-      </div>
+      </>
    );
  }
 });
@@ -0,0 +1,258 @@
+<template>
+  <DraggableCore
+    cancel=".nodrag"
+    :scale="transform[2]"
+    :disabled="!isDraggable"
+    :grid="grid"
+    :enableUserSelectHack="false"
+    @start="onDragStart"
+    @move="onDrag"
+    @stop="onDragStop"
+  >
+    <div
+      ref="nodeElement"
+      :class="nodeClasses"
+      :style="nodeStyle"
+      :data-id="node.id"
+      @mouseenter="onMouseEnterHandler"
+      @mousemove="onMouseMoveHandler"
+      @mouseleave="onMouseLeaveHandler"
+      @contextmenu="onContextMenuHandler"
+      @click="onSelectNodeHandler"
+    >
+      <component
+        :is="type"
+        :data="node.data"
+        :type="node.type"
+        :x-pos="node.__rf.position.x"
+        :y-pos="node.__rf.position.y"
+        :selected="selected"
+        :is-connectable="isConnectable"
+        :source-position="node.sourcePosition"
+        :target-position="node.targetPosition"
+        :is-dragging="node.__rf.isDragging"
+      />
+    </div>
+  </DraggableCore>
+</template>
+<script lang="ts">
+import { computed, CSSProperties, defineComponent, inject, PropType, provide } from 'vue';
+import { templateRef, tryOnMounted, useResizeObserver } from '@vueuse/core';
+import { DraggableCore, DraggableEventListener } from '@braks/revue-draggable';
+import { Node, NodeDimensionUpdate, NodeTypesType, RevueFlowStore } from '../../types';
+import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
+
+interface NodeProps {
+  nodeTypes: NodeTypesType;
+  snapToGrid: boolean;
+  snapGrid: [number, number];
+  selectNodesOnDrag: boolean;
+}
+
+export default defineComponent({
+  components: { DraggableCore },
+  props: {
+    node: {
+      type: Object as PropType<Node>,
+      required: true
+    },
+    type: {
+      type: Object,
+      required: true
+    },
+    snapToGrid: {
+      type: Boolean as PropType<NodeProps['snapToGrid']>,
+      required: false,
+      default: undefined
+    },
+    snapGrid: {
+      type: Array as unknown as PropType<NodeProps['snapGrid']>,
+      required: false,
+      default: undefined
+    },
+    selectNodesOnDrag: {
+      type: Boolean as PropType<NodeProps['selectNodesOnDrag']>,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const store = inject<RevueFlowStore>('store')!;
+    const hooks = inject<RevueFlowHooks>('hooks')!;
+    provide('NodeIdContext', props.node.id);
+
+    const nodeElement = templateRef<HTMLDivElement>('nodeElement', null);
+
+    const selected = computed(() => store.selectedElements?.some(({ id }) => id === props.node.id) || false);
+    const transform = computed(() => store.transform);
+    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 = computed(
+      () =>
+        ({
+          id: props.node.id,
+          type: props.node.type,
+          position: { x: props.node.__rf.position.x, y: props.node.__rf.position.y },
+          data: props.node.data
+        } as Node)
+    );
+    const grid = computed(() => (props.snapToGrid ? props.snapGrid : [1, 1])! as [number, number]);
+    const initialized = computed(() => props.node.__rf.width !== null && props.node.__rf.height !== null);
+
+    const nodeStyle = computed<CSSProperties>(() => ({
+      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: initialized.value ? 1 : 0,
+      ...props.node.style
+    }));
+    const onMouseEnterHandler = () => {
+      if (props.node.__rf.isDragging) {
+        return;
+      }
+
+      return (event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: node.value });
+    };
+
+    const onMouseMoveHandler = () => {
+      if (props.node.__rf.isDragging) {
+        return;
+      }
+
+      return (event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: node.value });
+    };
+
+    const onMouseLeaveHandler = () => {
+      if (props.node.__rf.isDragging) {
+        return;
+      }
+
+      return (event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: node.value });
+    };
+
+    const onContextMenuHandler = () => {
+      return (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: node.value });
+    };
+
+    const onSelectNodeHandler = (event: MouseEvent) => {
+      if (!isDraggable.value) {
+        if (isSelectable.value) {
+          store.unsetNodesSelection();
+
+          if (!selected.value) {
+            store.addSelectedElements([node.value]);
+          }
+        }
+
+        hooks.nodeClick.trigger({ event, node: node.value });
+      }
+    };
+
+    const onDragStart: DraggableEventListener = ({ event }) => {
+      hooks.nodeDragStart.trigger({ event, node: node.value });
+
+      if (props.selectNodesOnDrag && isSelectable.value) {
+        store.unsetNodesSelection();
+
+        if (!selected.value) {
+          store.addSelectedElements([node.value]);
+        }
+      } else if (!props.selectNodesOnDrag && !selected.value && isSelectable.value) {
+        store.unsetNodesSelection();
+        store.addSelectedElements([]);
+      }
+    };
+
+    const onDrag: DraggableEventListener = ({ event, data }) => {
+      node.value.position.x += data.deltaX;
+      node.value.position.y += data.deltaY;
+      hooks.nodeDrag.trigger({ event, node: node.value });
+
+      store?.updateNodePosDiff({
+        id: props.node.id as string,
+        diff: {
+          x: data.deltaX,
+          y: data.deltaY
+        },
+        isDragging: true
+      });
+    };
+
+    const onDragStop: DraggableEventListener = ({ event }) => {
+      // 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([node.value]);
+        }
+
+        hooks.nodeClick.trigger({ event, node: node.value });
+
+        return;
+      }
+
+      store.updateNodePosDiff({
+        id: node.value.id || '',
+        isDragging: false
+      });
+
+      hooks.nodeDragStop.trigger({ event, node: node.value });
+    };
+
+    useResizeObserver(nodeElement, (entries) => {
+      const updates: NodeDimensionUpdate[] = entries.map((entry) => ({
+        id: entry.target.getAttribute('data-id') || '',
+        nodeElement: entry.target as HTMLDivElement
+      }));
+
+      store.updateNodeDimensions(updates);
+    });
+
+    tryOnMounted(() => {
+      store.updateNodeDimensions([
+        {
+          id: props.node.id || '',
+          nodeElement: nodeElement.value,
+          forceUpdate: true
+        }
+      ]);
+    });
+
+    const nodeClasses = computed(() => [
+      'revue-flow__node',
+      `revue-flow__node-${props.node.type}`,
+      {
+        selected: selected.value,
+        selectable: isSelectable.value
+      }
+    ]);
+
+    return {
+      nodeClasses,
+      grid,
+      nodeStyle,
+      nodeElement,
+      onDragStart,
+      onDrag,
+      onDragStop,
+      onContextMenuHandler,
+      onMouseEnterHandler,
+      onMouseLeaveHandler,
+      onMouseMoveHandler,
+      onSelectNodeHandler,
+      transform,
+      isConnectable,
+      isDraggable,
+      selected
+    };
+  }
+});
+</script>
@@ -5,6 +5,7 @@ import { defineComponent, PropType } from 'vue';
 const OutputNode = defineComponent({
  name: 'OutputNode',
  components: { Handle },
+  inheritAttrs: false,
  props: {
    data: {
      type: Object as PropType<NodeProps['data']>,
@@ -24,10 +25,10 @@ const OutputNode = defineComponent({
  },
  setup(props) {
    return () => (
-      <div>
+      <>
        {props.data?.label}
        <Handle type="source" position={props.targetPosition} isConnectable={props.isConnectable} />
-      </div>
+      </>
    );
  }
 });
@@ -1,204 +0,0 @@
-import { Node, RevueFlowStore, WrapNodeProps } from '../../types';
-import { computed, CSSProperties, DefineComponent, defineComponent, inject, onMounted, onUpdated, provide, ref } from 'vue';
-import { DraggableEventHandler, DraggableCore } from '@braks/revue-draggable';
-
-export default (NodeComponent: DefineComponent<WrapNodeProps>) => {
-  return defineComponent({
-    props: WrapNodeProps,
-    setup(props) {
-      const store = inject<RevueFlowStore>('store')!;
-      provide('NodeIdContext', props.id);
-
-      const nodeElement = ref<HTMLDivElement | undefined>();
-
-      const node = computed(() => ({
-        id: props.id,
-        type: props.type,
-        position: { x: props.xPos, y: props.yPos },
-        data: props.data
-      }));
-      const grid = computed(() => (props.snapToGrid ? props.snapGrid : [1, 1])! as [number, number]);
-
-      const nodeStyle = computed<CSSProperties>(() => ({
-        zIndex: props.selected ? 10 : 3,
-        transform: `translate(${props.xPos}px,${props.yPos}px)`,
-        pointerEvents:
-          props.isSelectable ||
-          props.isDraggable ||
-          props.onClick ||
-          props.onMouseEnter ||
-          props.onMouseMove ||
-          props.onMouseLeave
-            ? 'all'
-            : 'none',
-        // prevents jumping of nodes on start
-        opacity: props.isInitialized ? 1 : 0,
-        ...props.style
-      }));
-      const onMouseEnterHandler = () => {
-        if (!props.onMouseEnter || props.isDragging) {
-          return;
-        }
-
-        return (event: MouseEvent) => props.onMouseEnter && props.onMouseEnter(event, node.value as Node);
-      };
-
-      const onMouseMoveHandler = () => {
-        if (!props.onMouseMove || props.isDragging) {
-          return;
-        }
-
-        return (event: MouseEvent) => props.onMouseMove && props.onMouseMove(event, node.value as Node);
-      };
-
-      const onMouseLeaveHandler = () => {
-        if (!props.onMouseLeave || props.isDragging) {
-          return;
-        }
-
-        return (event: MouseEvent) => props.onMouseLeave && props.onMouseLeave(event, node.value as Node);
-      };
-
-      const onContextMenuHandler = () => {
-        if (!props.onContextMenu) {
-          return;
-        }
-
-        return (event: MouseEvent) => props.onContextMenu && props.onContextMenu(event, node.value as Node);
-      };
-
-      const onSelectNodeHandler = (event: MouseEvent) => {
-        if (!props.isDraggable) {
-          if (props.isSelectable) {
-            store?.unsetNodesSelection();
-
-            if (!props.selected) {
-              store?.addSelectedElements([node.value as Node]);
-            }
-          }
-
-          props.onClick?.(event, node.value as Node);
-        }
-      };
-
-      const onDragStart: DraggableEventHandler = (event) => {
-        props.onNodeDragStart?.(event as MouseEvent, node.value as Node);
-
-        if (props.selectNodesOnDrag && props.isSelectable) {
-          store?.unsetNodesSelection();
-
-          if (!props.selected) {
-            store?.addSelectedElements([node.value as Node]);
-          }
-        } else if (!props.selectNodesOnDrag && !props.selected && props.isSelectable) {
-          store?.unsetNodesSelection();
-          store?.addSelectedElements([]);
-        }
-      };
-
-      const onDrag: DraggableEventHandler = (event, draggableData) => {
-        if (props.onNodeDrag) {
-          node.value.position.x += draggableData.deltaX;
-          node.value.position.y += draggableData.deltaY;
-          props.onNodeDrag(event as MouseEvent, node.value as Node);
-        }
-
-        store?.updateNodePosDiff({
-          id: props.id as string,
-          diff: {
-            x: draggableData.deltaX,
-            y: draggableData.deltaY
-          },
-          isDragging: true
-        });
-      };
-
-      const onDragStop: DraggableEventHandler = (event) => {
-        // 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.isDragging) {
-          if (props.isSelectable && !props.selectNodesOnDrag && !props.selected) {
-            store?.addSelectedElements([node.value as Node]);
-          }
-
-          props.onClick?.(event, node.value as Node);
-
-          return;
-        }
-
-        store?.updateNodePosDiff({
-          id: node.value.id as string,
-          isDragging: false
-        });
-
-        props.onNodeDragStop?.(event as MouseEvent, node.value as Node);
-      };
-
-      onUpdated(() => {
-        if (nodeElement.value && !props.isHidden) {
-          store?.updateNodeDimensions([{ id: props.id || '', nodeElement: nodeElement.value, forceUpdate: true }]);
-        }
-      });
-
-      onMounted(() => {
-        if (nodeElement.value && typeof props.resizeObserver?.observe === 'function') {
-          const currNode = nodeElement.value;
-          props.resizeObserver?.observe(currNode);
-
-          return () => props.resizeObserver?.unobserve(currNode);
-        }
-      });
-
-      if (props.isHidden) {
-        return null;
-      }
-
-      const nodeClasses = computed(() => [
-        'revue-flow__node',
-        `revue-flow__node-${props.type}`,
-        {
-          selected: props.selected,
-          selectable: props.isSelectable
-        }
-      ]);
-
-      return () => (
-        <DraggableCore
-          start={onDragStart}
-          move={onDrag}
-          stop={onDragStop}
-          scale={store.transform[2]}
-          disabled={!props.isDraggable}
-          cancel=".nodrag"
-          grid={grid.value}
-          enableUserSelectHack={false}
-        >
-          <div
-            class={nodeClasses.value}
-            ref={nodeElement}
-            style={nodeStyle.value}
-            onMouseenter={onMouseEnterHandler}
-            onMousemove={onMouseMoveHandler}
-            onMouseleave={onMouseLeaveHandler}
-            onContextmenu={onContextMenuHandler}
-            onClick={onSelectNodeHandler}
-            data-id={props.id}
-          >
-            <NodeComponent
-              id={props.id}
-              data={props.data}
-              type={props.type}
-              xPos={props.xPos}
-              yPos={props.yPos}
-              selected={props.selected}
-              isConnectable={props.isConnectable}
-              sourcePosition={props.sourcePosition}
-              targetPosition={props.targetPosition}
-              isDragging={props.isDragging}
-            />
-          </div>
-        </DraggableCore>
-      );
-    }
-  });
-};