Braks
25c92ecd84
* 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
119 lines
3.5 KiB
Vue
119 lines
3.5 KiB
Vue
<template>
|
|
<svg :width="width" :height="height" class="revue-flow__edges">
|
|
<MarkerDefinitions :color="arrowHeadColor" />
|
|
<g :transform="transformStyle">
|
|
<template v-for="edge of edges" :key="edge.id">
|
|
<Edge
|
|
:edge="edge"
|
|
:marker-end-id="markerEndId"
|
|
:onlyRenderVisibleElements="onlyRenderVisibleElements"
|
|
:type="edgeTypes[edge.type]"
|
|
/>
|
|
<ConnectionLine
|
|
v-if="renderConnectionLine"
|
|
:connectionLineStyle="connectionLineStyle"
|
|
:connectionLineType="connectionLineType"
|
|
:CustomConnectionLineComponent="connectionLineComponent"
|
|
/>
|
|
</template>
|
|
</g>
|
|
</svg>
|
|
</template>
|
|
<script lang="ts">
|
|
import { computed, CSSProperties, defineComponent, inject, PropType } from 'vue';
|
|
import Edge from '../../components/Edges/Edge.vue';
|
|
import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue';
|
|
import { ConnectionLineType, ConnectionLineComponent, ConnectionMode, RevueFlowStore } from '../../types';
|
|
import MarkerDefinitions from './MarkerDefinitions.vue';
|
|
|
|
interface EdgeRendererProps {
|
|
edgeTypes: any;
|
|
connectionLineType: ConnectionLineType;
|
|
connectionLineStyle?: CSSProperties;
|
|
connectionLineComponent?: ConnectionLineComponent;
|
|
connectionMode?: ConnectionMode;
|
|
arrowHeadColor: string;
|
|
markerEndId?: string;
|
|
onlyRenderVisibleElements: boolean;
|
|
edgeUpdaterRadius?: number;
|
|
}
|
|
|
|
const EdgeRenderer = defineComponent({
|
|
name: 'EdgeRenderer',
|
|
components: {
|
|
Edge,
|
|
ConnectionLine,
|
|
MarkerDefinitions
|
|
},
|
|
props: {
|
|
edgeTypes: {
|
|
type: Object,
|
|
required: false,
|
|
default: undefined
|
|
},
|
|
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() {
|
|
const store = inject<RevueFlowStore>('store')!;
|
|
const edges = computed(() => store.edges);
|
|
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);
|
|
const width = computed(() => store.width);
|
|
const height = computed(() => store.height);
|
|
|
|
return {
|
|
transform,
|
|
transformStyle,
|
|
renderConnectionLine,
|
|
edges,
|
|
width,
|
|
height
|
|
};
|
|
}
|
|
});
|
|
|
|
export default EdgeRenderer;
|
|
</script>
|