refactor: change pkg scope to vue-flow
This commit is contained in:
@@ -3,8 +3,8 @@
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@import '@braks/vue-flow/dist/style.css';
|
||||
@import '@braks/vue-flow/dist/theme-default.css';
|
||||
@import '@vue-flow/core/dist/style.css';
|
||||
@import '@vue-flow/core/dist/theme-default.css';
|
||||
|
||||
html,
|
||||
body,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
|
||||
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
|
||||
import { ref } from 'vue'
|
||||
import { initialElements } from './initial-elements.js'
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { MarkerType } from '@braks/vue-flow'
|
||||
import { MarkerType } from '@vue-flow/core'
|
||||
|
||||
/**
|
||||
* You can pass elements together as a v-model value
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
"dev": "nuxt dev"
|
||||
},
|
||||
"dependencies": {
|
||||
"@braks/vue-flow": "workspace:*"
|
||||
"@vue-flow/core": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nuxt": "3.0.0-rc.11"
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"lint": "eslint --ext .js,.ts,.vue ./"
|
||||
},
|
||||
"dependencies": {
|
||||
"@braks/vue-flow": "workspace:*",
|
||||
"@vue-flow/core": "workspace:*",
|
||||
"@quasar/extras": "^1.15.4",
|
||||
"quasar": "^2.9.2",
|
||||
"vue": "^3.2.37",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
|
||||
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
|
||||
import { ref } from 'vue'
|
||||
import { initialElements } from './initial-elements.js'
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
|
||||
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
|
||||
import { ref } from 'vue'
|
||||
import { initialElements } from './customized-elements.js'
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { MarkerType } from '@braks/vue-flow'
|
||||
import { MarkerType } from '@vue-flow/core'
|
||||
|
||||
/**
|
||||
* You can pass elements together as a v-model value
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { MarkerType } from '@braks/vue-flow'
|
||||
import { MarkerType } from '@vue-flow/core'
|
||||
|
||||
/**
|
||||
* You can pass elements together as a v-model value
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* app global css */
|
||||
@import "@braks/vue-flow/dist/style.css";
|
||||
@import "@braks/vue-flow/dist/theme-default.css";
|
||||
@import "@vue-flow/core/dist/style.css";
|
||||
@import "@vue-flow/core/dist/theme-default.css";
|
||||
|
||||
html,
|
||||
body,
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* import the required styles */
|
||||
@import 'node_modules/@braks/vue-flow/dist/style.css';
|
||||
@import 'node_modules/@vue-flow/core/dist/style.css';
|
||||
|
||||
/* import the default theme (optional) */
|
||||
@import 'node_modules/@braks/vue-flow/dist/theme-default.css';
|
||||
@import 'node_modules/@vue-flow/core/dist/theme-default.css';
|
||||
|
||||
body {
|
||||
color: #111;
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
"lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@braks/vue-flow": "workspace:*"
|
||||
"@vue-flow/core": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/dagre": "^0.7.47",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Elements } from '@braks/vue-flow'
|
||||
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
|
||||
import type { Elements } from '@vue-flow/core'
|
||||
import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
|
||||
|
||||
const elements = ref<Elements>([
|
||||
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import type { Elements, FlowEvents, VueFlowStore } from '@braks/vue-flow'
|
||||
import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@braks/vue-flow'
|
||||
import type { Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
|
||||
import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@vue-flow/core'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BasicOptionsAPI',
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Position, ValidConnectionFunc } from '@braks/vue-flow'
|
||||
import { Handle } from '@braks/vue-flow'
|
||||
import type { Position, ValidConnectionFunc } from '@vue-flow/core'
|
||||
import { Handle } from '@vue-flow/core'
|
||||
|
||||
interface Props {
|
||||
id: string
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Elements } from '@braks/vue-flow'
|
||||
import { Background, BackgroundVariant, VueFlow } from '@braks/vue-flow'
|
||||
import type { Elements } from '@vue-flow/core'
|
||||
import { Background, BackgroundVariant, VueFlow } from '@vue-flow/core'
|
||||
import ConnectionLine from './ConnectionLine.vue'
|
||||
|
||||
const elements = ref<Elements>([
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import type { CSSProperties } from 'vue'
|
||||
import type { Connection, Edge, NodeProps } from '@braks/vue-flow'
|
||||
import { Handle, Position } from '@braks/vue-flow'
|
||||
import type { Connection, Edge, NodeProps } from '@vue-flow/core'
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
|
||||
interface ColorSelectorNodeProps extends NodeProps {
|
||||
data: {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Elements, Node, SnapGrid } from '@braks/vue-flow'
|
||||
import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@braks/vue-flow'
|
||||
import type { Elements, Node, SnapGrid } from '@vue-flow/core'
|
||||
import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
|
||||
import ColorSelectorNode from './ColorSelectorNode.vue'
|
||||
|
||||
const elements = ref<Elements>([])
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Node } from '@braks/vue-flow'
|
||||
import { VueFlow, useVueFlow } from '@braks/vue-flow'
|
||||
import type { Node } from '@vue-flow/core'
|
||||
import { VueFlow, useVueFlow } from '@vue-flow/core'
|
||||
import Sidebar from './Sidebar.vue'
|
||||
|
||||
let id = 0
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VueFlowStore } from '@braks/vue-flow'
|
||||
import { Controls, MiniMap, VueFlow } from '@braks/vue-flow'
|
||||
import type { VueFlowStore } from '@vue-flow/core'
|
||||
import { Controls, MiniMap, VueFlow } from '@vue-flow/core'
|
||||
import { getElements } from './utils'
|
||||
|
||||
const onLoad = (flowInstance: VueFlowStore) => {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { Elements } from '@braks/vue-flow'
|
||||
import { Position } from '@braks/vue-flow'
|
||||
import type { Elements } from '@vue-flow/core'
|
||||
import { Position } from '@vue-flow/core'
|
||||
|
||||
const nodeWidth = 80
|
||||
const nodeGapWidth = nodeWidth * 2
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { EdgeProps, Position } from '@braks/vue-flow'
|
||||
import { getBezierPath, getEdgeCenter, useVueFlow } from '@braks/vue-flow'
|
||||
import type { EdgeProps, Position } from '@vue-flow/core'
|
||||
import { getBezierPath, getEdgeCenter, useVueFlow } from '@vue-flow/core'
|
||||
|
||||
interface CustomEdgeProps<T = any> extends EdgeProps<T> {
|
||||
id: string
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { EdgeProps, Position } from '@braks/vue-flow'
|
||||
import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '@braks/vue-flow'
|
||||
import type { EdgeProps, Position } from '@vue-flow/core'
|
||||
import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '@vue-flow/core'
|
||||
|
||||
interface CustomEdgeProps extends EdgeProps {
|
||||
source: string
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Edge, Node } from '@braks/vue-flow'
|
||||
import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
|
||||
import type { Edge, Node } from '@vue-flow/core'
|
||||
import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
|
||||
import CustomEdge from './CustomEdge.vue'
|
||||
import CustomEdge2 from './CustomEdge2.vue'
|
||||
import CustomLabel from './CustomLabel.vue'
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Node } from '@braks/vue-flow'
|
||||
import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow/src/index'
|
||||
import type { Node } from '@vue-flow/core'
|
||||
import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core/src/index'
|
||||
|
||||
const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { GraphNode, Position } from '@braks/vue-flow'
|
||||
import { getBezierPath } from '@braks/vue-flow'
|
||||
import type { GraphNode, Position } from '@vue-flow/core'
|
||||
import { getBezierPath } from '@vue-flow/core'
|
||||
import { getEdgeParams } from './floating-edge-utils'
|
||||
|
||||
interface FloatingConnectionLineProps {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import type { CSSProperties } from 'vue'
|
||||
import type { EdgeProps, GraphNode, MarkerType } from '@braks/vue-flow'
|
||||
import { getBezierPath } from '@braks/vue-flow'
|
||||
import type { EdgeProps, GraphNode, MarkerType } from '@vue-flow/core'
|
||||
import { getBezierPath } from '@vue-flow/core'
|
||||
import { getEdgeParams } from './floating-edge-utils'
|
||||
|
||||
interface FloatingEdgeProps extends EdgeProps {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import { Background, BackgroundVariant, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
|
||||
import { Background, BackgroundVariant, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
|
||||
import FloatingEdge from './FloatingEdge.vue'
|
||||
import FloatingConnectionLine from './FloatingConnectionLine.vue'
|
||||
import { createElements } from './floating-edge-utils'
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { Edge, GraphNode, XYPosition } from '@braks/vue-flow'
|
||||
import { MarkerType, Position } from '@braks/vue-flow'
|
||||
import type { Edge, GraphNode, XYPosition } from '@vue-flow/core'
|
||||
import { MarkerType, Position } from '@vue-flow/core'
|
||||
|
||||
// this helper function returns the intersection point
|
||||
// of the line between the center of the intersectionNode and the target node
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
|
||||
import { Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
|
||||
|
||||
const isHidden = ref(false)
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
|
||||
import { Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
|
||||
|
||||
const {
|
||||
nodesDraggable,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import dagre from 'dagre'
|
||||
import type { CoordinateExtent, Elements } from '@braks/vue-flow'
|
||||
import { ConnectionMode, Controls, Position, VueFlow, isNode } from '@braks/vue-flow'
|
||||
import type { CoordinateExtent, Elements } from '@vue-flow/core'
|
||||
import { ConnectionMode, Controls, Position, VueFlow, isNode } from '@vue-flow/core'
|
||||
import initialElements from './initial-elements'
|
||||
|
||||
const dagreGraph = new dagre.graphlib.Graph()
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { Elements, XYPosition } from '@braks/vue-flow'
|
||||
import type { Elements, XYPosition } from '@vue-flow/core'
|
||||
|
||||
const position: XYPosition = { x: 0, y: 0 }
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Elements } from '@braks/vue-flow'
|
||||
import { Background, VueFlow } from '@braks/vue-flow'
|
||||
import type { Elements } from '@vue-flow/core'
|
||||
import { Background, VueFlow } from '@vue-flow/core'
|
||||
const initialElements: Elements = [
|
||||
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
|
||||
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { Handle, Position, getNodesInside, useVueFlow } from '@braks/vue-flow'
|
||||
import type { NodeProps } from '@braks/vue-flow'
|
||||
import { Handle, Position, getNodesInside, useVueFlow } from '@vue-flow/core'
|
||||
import type { NodeProps } from '@vue-flow/core'
|
||||
|
||||
const props = defineProps<NodeProps>()
|
||||
const { onNodeDragStop, getNodes, viewport } = useVueFlow()
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
|
||||
import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
|
||||
|
||||
const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
|
||||
fitViewOnInit: true,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Connection, Edge, Elements, VueFlowStore } from '@braks/vue-flow'
|
||||
import { Position, VueFlow, addEdge, isEdge } from '@braks/vue-flow'
|
||||
import type { Connection, Edge, Elements, VueFlowStore } from '@vue-flow/core'
|
||||
import { Position, VueFlow, addEdge, isEdge } from '@vue-flow/core'
|
||||
|
||||
const initialElements: Elements = [
|
||||
{
|
||||
|
||||
@@ -9,8 +9,8 @@ import type {
|
||||
Styles,
|
||||
ViewpaneTransform,
|
||||
VueFlowStore,
|
||||
} from '@braks/vue-flow'
|
||||
import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@braks/vue-flow'
|
||||
} from '@vue-flow/core'
|
||||
import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@vue-flow/core'
|
||||
|
||||
const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
|
||||
const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Elements, VueFlowStore } from '@braks/vue-flow'
|
||||
import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
|
||||
import type { Elements, VueFlowStore } from '@vue-flow/core'
|
||||
import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
|
||||
import Sidebar from './Sidebar.vue'
|
||||
|
||||
const onLoad = (flowInstance: VueFlowStore) => console.log('flow loaded:', flowInstance)
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import { useVueFlow } from '@braks/vue-flow'
|
||||
import { useVueFlow } from '@vue-flow/core'
|
||||
const { nodesSelectionActive, addSelectedNodes, getNodes, viewport } = useVueFlow()
|
||||
|
||||
const selectAll = () => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { templateRef } from '@vueuse/core'
|
||||
import type { Elements, VueFlowStore } from '@braks/vue-flow'
|
||||
import { VueFlow } from '@braks/vue-flow'
|
||||
import type { Elements, VueFlowStore } from '@vue-flow/core'
|
||||
import { VueFlow } from '@vue-flow/core'
|
||||
import RGBNode from './RGBNode.vue'
|
||||
import RGBOutputNode from './RGBOutputNode.vue'
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import type { CSSProperties } from 'vue'
|
||||
import type { NodeProps } from '@braks/vue-flow'
|
||||
import { Handle, Position } from '@braks/vue-flow'
|
||||
import type { NodeProps } from '@vue-flow/core'
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
|
||||
interface RGBNodeProps extends NodeProps {
|
||||
data: {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { NodeProps } from '@braks/vue-flow'
|
||||
import { Handle, Position } from '@braks/vue-flow'
|
||||
import type { NodeProps } from '@vue-flow/core'
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
|
||||
interface RBGOutputNodeProps extends NodeProps {
|
||||
rgb: string
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { FlowExportObject, Node } from '@braks/vue-flow'
|
||||
import { useVueFlow, useZoomPanHelper } from '@braks/vue-flow'
|
||||
import type { FlowExportObject, Node } from '@vue-flow/core'
|
||||
import { useVueFlow, useZoomPanHelper } from '@vue-flow/core'
|
||||
|
||||
const flowKey = 'example-flow'
|
||||
const state = useStorage<FlowExportObject>(flowKey, {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Elements } from '@braks/vue-flow'
|
||||
import { VueFlow } from '@braks/vue-flow'
|
||||
import type { Elements } from '@vue-flow/core'
|
||||
import { VueFlow } from '@vue-flow/core'
|
||||
import Controls from './Controls.vue'
|
||||
|
||||
const initialElements: Elements = [
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import { VueFlow, useVueFlow } from '@braks/vue-flow'
|
||||
import { VueFlow, useVueFlow } from '@vue-flow/core'
|
||||
import { getElements } from './utils'
|
||||
|
||||
const { nodes, edges } = getElements(10, 10)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { Edge, Node } from '@braks/vue-flow'
|
||||
import type { Edge, Node } from '@vue-flow/core'
|
||||
|
||||
export function getElements(xElements = 10, yElements = 10) {
|
||||
const initialNodes: Node[] = []
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Elements } from '@braks/vue-flow'
|
||||
import { VueFlow } from '@braks/vue-flow'
|
||||
import type { Elements } from '@vue-flow/core'
|
||||
import { VueFlow } from '@vue-flow/core'
|
||||
|
||||
const elementsA: Elements = [
|
||||
{ id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { CSSProperties } from 'vue'
|
||||
import { Handle, Position } from '@braks/vue-flow'
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
|
||||
interface Props {
|
||||
id: string
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Elements, Node } from '@braks/vue-flow'
|
||||
import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '@braks/vue-flow'
|
||||
import type { Elements, Node } from '@vue-flow/core'
|
||||
import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '@vue-flow/core'
|
||||
import CustomNode from './CustomNode.vue'
|
||||
|
||||
const initialElements: Elements = [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Connection, Edge, Elements, FlowEvents, VueFlowStore } from '@braks/vue-flow'
|
||||
import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@braks/vue-flow'
|
||||
import type { Connection, Edge, Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
|
||||
import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
|
||||
|
||||
const initialElements: Elements = [
|
||||
{
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Elements } from '@braks/vue-flow'
|
||||
import { VueFlow } from '@braks/vue-flow'
|
||||
import type { Elements } from '@vue-flow/core'
|
||||
import { VueFlow } from '@vue-flow/core'
|
||||
|
||||
const initialElements: Elements = [
|
||||
{ id: '1', label: '-', position: { x: 100, y: 100 } },
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { ValidConnectionFunc } from '@braks/vue-flow'
|
||||
import { Handle, Position } from '@braks/vue-flow'
|
||||
import type { ValidConnectionFunc } from '@vue-flow/core'
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
|
||||
interface CustomInputProps {
|
||||
isValidTargetPos: ValidConnectionFunc
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { NodeProps, ValidConnectionFunc } from '@braks/vue-flow'
|
||||
import { Handle, Position } from '@braks/vue-flow'
|
||||
import type { NodeProps, ValidConnectionFunc } from '@vue-flow/core'
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
|
||||
interface CustomNodeProps extends NodeProps {
|
||||
id: string
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Connection, OnConnectStartParams, VueFlowStore } from '@braks/vue-flow'
|
||||
import { VueFlow, useVueFlow } from '@braks/vue-flow'
|
||||
import type { Connection, OnConnectStartParams, VueFlowStore } from '@vue-flow/core'
|
||||
import { VueFlow, useVueFlow } from '@vue-flow/core'
|
||||
import CustomInput from './CustomInput.vue'
|
||||
import CustomNode from './CustomNode.vue'
|
||||
|
||||
|
||||
@@ -24,6 +24,6 @@ export default defineConfig({
|
||||
}),
|
||||
],
|
||||
optimizeDeps: {
|
||||
exclude: ['@braks/vue-flow'],
|
||||
exclude: ['@vue-flow/core'],
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user