refactor: back to jsx 🥇

src/container/EdgeRenderer/index.tsx

@@ -0,0 +1,104 @@
+import { computed, CSSProperties, defineComponent, inject, PropType } from 'vue';
+import { ConnectionLineType, ConnectionLineComponent, ConnectionMode, RevueFlowStore } from '../../types';
+import ConnectionLine from '../../components/ConnectionLine';
+import MarkerDefinitions from './MarkerDefinitions';
+import Edge from '../../components/Edges/Edge';
+
+interface EdgeRendererProps {
+  edgeTypes: any;
+  connectionLineType: ConnectionLineType;
+  connectionLineStyle?: CSSProperties;
+  connectionLineComponent?: ConnectionLineComponent;
+  connectionMode?: ConnectionMode;
+  arrowHeadColor: string;
+  markerEndId?: string;
+  onlyRenderVisibleElements: boolean;
+  edgeUpdaterRadius?: number;
+}
+
+export default defineComponent({
+  name: 'EdgeRenderer',
+  components: {
+    Edge,
+    ConnectionLine,
+    MarkerDefinitions
+  },
+  props: {
+    edgeTypes: {
+      type: Object,
+      required: true
+    },
+    connectionLineType: {
+      type: String as PropType<EdgeRendererProps['connectionLineType']>,
+      required: false,
+      default: undefined
+    },
+    connectionLineStyle: {
+      type: Object as PropType<EdgeRendererProps['connectionLineStyle']>,
+      required: false,
+      default: undefined
+    },
+    connectionLineComponent: {
+      type: Object as PropType<EdgeRendererProps['connectionLineComponent']>,
+      required: false,
+      default: undefined
+    },
+    connectionMode: {
+      type: String as PropType<EdgeRendererProps['connectionMode']>,
+      required: false,
+      default: undefined
+    },
+    arrowHeadColor: {
+      type: String as PropType<EdgeRendererProps['arrowHeadColor']>,
+      required: false,
+      default: undefined
+    },
+    markerEndId: {
+      type: String as PropType<EdgeRendererProps['markerEndId']>,
+      required: false,
+      default: undefined
+    },
+    onlyRenderVisibleElements: {
+      type: Boolean as PropType<EdgeRendererProps['onlyRenderVisibleElements']>,
+      required: false,
+      default: undefined
+    },
+    edgeUpdaterRadius: {
+      type: Number as PropType<EdgeRendererProps['edgeUpdaterRadius']>,
+      required: false,
+      default: undefined
+    }
+  },
+  setup(props) {
+    const store = inject<RevueFlowStore>('store');
+    const transform = computed(() => store?.transform);
+    const transformStyle = computed(() => {
+      return `translate(${transform.value?.[0]},${transform.value?.[1]}) scale(${transform.value?.[2]})`;
+    });
+    const renderConnectionLine = computed(() => store?.connectionNodeId && store?.connectionHandleType);
+
+    return () => (
+      <svg width={store?.width} height={store?.height} class="revue-flow__edges">
+        <MarkerDefinitions color={props.arrowHeadColor as string} />
+        <g transform={transformStyle.value}>
+          {store?.edges.map((edge) => (
+            <Edge
+              key={edge.id}
+              edge={edge}
+              type={props.edgeTypes[edge.type || 'default']}
+              onlyRenderVisibleElements={props.onlyRenderVisibleElements}
+              markerEndId={props.markerEndId}
+            />
+          ))}
+          {renderConnectionLine.value && (
+            <ConnectionLine
+              connectionLineStyle={props.connectionLineStyle}
+              connectionLineType={props.connectionLineType}
+              customConnectionLine={props.connectionLineComponent}
+            />
+          )}
+        </g>
+      </svg>
+    );
+  }
+});