feat: add postcss config and deps

bugfix: some unused imports and node-selection component removed for now
update: README.md

src/App.vue

@@ -1,5 +1,8 @@
 <template>
-  <Basic style="height: 100vh" />
+  <div id="app">
+    <h1>Revue Flow</h1>
+    <Basic style="height: 75vh" />
+  </div>
 </template>
 
 <script lang="ts">

src/components/NodesSelection/index.tsx

@@ -1,123 +0,0 @@
-import { isNode } from '../../utils/graph';
-import { Node } from '../../types';
-
-export interface NodesSelectionProps {
-  onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
-  onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
-  onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
-  onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
-}
-
-export default ({ onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu }: NodesSelectionProps) => {
-  const [tX, tY, tScale] = useStoreState((state) => state.transform);
-  const selectedNodesBbox = useStoreState((state) => state.selectedNodesBbox);
-  const selectionActive = useStoreState((state) => state.selectionActive);
-  const selectedElements = useStoreState((state) => state.selectedElements);
-  const snapToGrid = useStoreState((state) => state.snapToGrid);
-  const snapGrid = useStoreState((state) => state.snapGrid);
-  const nodes = useStoreState((state) => state.nodes);
-
-  const updateNodePosDiff = useStoreActions((actions) => actions.updateNodePosDiff);
-
-  const nodeRef = useRef(null);
-
-  const grid = useMemo(() => (snapToGrid ? snapGrid : [1, 1])! as [number, number], [snapToGrid, snapGrid]);
-
-  const selectedNodes = useMemo(
-    () =>
-      selectedElements
-        ? selectedElements.filter(isNode).map((selectedNode) => {
-            const matchingNode = nodes.find((node) => node.id === selectedNode.id);
-
-            return {
-              ...matchingNode,
-              position: matchingNode?.__rf.position
-            } as Node;
-          })
-        : [],
-    [selectedElements, nodes]
-  );
-
-  const style = useMemo(
-    () => ({
-      transform: `translate(${tX}px,${tY}px) scale(${tScale})`
-    }),
-    [tX, tY, tScale]
-  );
-
-  const innerStyle = useMemo(
-    () => ({
-      width: selectedNodesBbox.width,
-      height: selectedNodesBbox.height,
-      top: selectedNodesBbox.y,
-      left: selectedNodesBbox.x
-    }),
-    [selectedNodesBbox]
-  );
-
-  const onStart = useCallback(
-    (event: MouseEvent) => {
-      onSelectionDragStart?.(event, selectedNodes);
-    },
-    [onSelectionDragStart, selectedNodes]
-  );
-
-  const onDrag = useCallback(
-    (event: MouseEvent, data: DraggableData) => {
-      if (onSelectionDrag) {
-        onSelectionDrag(event, selectedNodes);
-      }
-
-      updateNodePosDiff({
-        diff: {
-          x: data.deltaX,
-          y: data.deltaY
-        },
-        isDragging: true
-      });
-    },
-    [onSelectionDrag, selectedNodes, updateNodePosDiff]
-  );
-
-  const onStop = useCallback(
-    (event: MouseEvent) => {
-      updateNodePosDiff({
-        isDragging: false
-      });
-
-      onSelectionDragStop?.(event, selectedNodes);
-    },
-    [selectedNodes, onSelectionDragStop]
-  );
-
-  const onContextMenu = useCallback(
-    (event: MouseEvent) => {
-      const selectedNodes = selectedElements
-        ? selectedElements.filter(isNode).map((selectedNode) => nodes.find((node) => node.id === selectedNode.id)!)
-        : [];
-
-      onSelectionContextMenu?.(event, selectedNodes);
-    },
-    [onSelectionContextMenu]
-  );
-
-  if (!selectedElements || selectionActive) {
-    return null;
-  }
-
-  return (
-    <div className="react-flow__nodesselection" style={style}>
-      <ReactDraggable
-        scale={tScale}
-        grid={grid}
-        onStart={(event) => onStart(event as MouseEvent)}
-        onDrag={(event, data) => onDrag(event as MouseEvent, data)}
-        onStop={(event) => onStop(event as MouseEvent)}
-        nodeRef={nodeRef}
-        enableUserSelectHack={false}
-      >
-        <div ref={nodeRef} className="react-flow__nodesselection-rect" onContextMenu={onContextMenu} style={innerStyle} />
-      </ReactDraggable>
-    </div>
-  );
-};

src/container/EdgeRenderer/index.tsx

@@ -1,6 +1,5 @@
 import ConnectionLine from '../../components/ConnectionLine/index';
 import { isEdge } from '../../utils/graph';
-import MarkerDefinitions from './MarkerDefinitions';
 import { getEdgePositions, getHandle, isEdgeVisible, getSourceTargetNodes } from './utils';
 import {
   Position,
@@ -152,13 +151,14 @@ const EdgeCmp = defineComponent({
 
     const isVisible = computed(() => {
       return props.onlyRenderVisibleElements
-        ? isEdgeVisible({
-            sourcePos: { x: edgePositions.value?.sourceX, y: edgePositions.value?.sourceY },
-            targetPos: { x: edgePositions.value?.targetX, y: edgePositions.value?.targetY },
-            width: props.width || 0,
-            height: props.height || 0,
-            transform: props.transform
-          })
+        ? edgePositions.value &&
+            isEdgeVisible({
+              sourcePos: { x: edgePositions.value?.sourceX, y: edgePositions.value?.sourceY },
+              targetPos: { x: edgePositions.value?.targetX, y: edgePositions.value?.targetY },
+              width: props.width || 0,
+              height: props.height || 0,
+              transform: props.transform
+            })
         : true;
     });
 
@@ -190,10 +190,10 @@ const EdgeCmp = defineComponent({
         target={props.edge.target}
         sourceHandleId={sourceHandleId}
         targetHandleId={targetHandleId}
-        sourceX={edgePositions.value.sourceX}
-        sourceY={edgePositions.value.sourceY}
-        targetX={edgePositions.value.targetX}
-        targetY={edgePositions.value.targetY}
+        sourceX={edgePositions.value?.sourceX}
+        sourceY={edgePositions.value?.sourceY}
+        targetX={edgePositions.value?.targetX}
+        targetY={edgePositions.value?.targetY}
         sourcePosition={sourcePosition}
         targetPosition={targetPosition}
         elementsSelectable={props.elementsSelectable}

src/container/GraphView/index.tsx

@@ -6,18 +6,7 @@ import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/gr
 import { ReactFlowProps } from '../RevueFlow';
 
 import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode } from '../../types';
-import {
-  reactive,
-  computed,
-  CSSProperties,
-  defineComponent,
-  onBeforeMount,
-  onMounted,
-  onUpdated,
-  PropType,
-  ref,
-  watch
-} from 'vue';
+import { CSSProperties, defineComponent, onMounted, PropType, ref } from 'vue';
 import store from '../../store';
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
 

src/container/RevueFlow/index.tsx

@@ -1,4 +1,4 @@
-import { computed, CSSProperties, defineComponent, HTMLAttributes, onBeforeMount, PropType, provide } from 'vue';
+import { computed, CSSProperties, defineComponent, HTMLAttributes, PropType } from 'vue';
 import GraphView from '../GraphView';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';