refactor: change pkg scope to vue-flow

This commit is contained in:
braks
2022-10-08 23:25:34 +02:00
committed by Braks
parent eb507c8e76
commit 8567e3733b
163 changed files with 288 additions and 288 deletions
+2 -2
View File
@@ -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' },
+2 -2
View File
@@ -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',
+2 -2
View File
@@ -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: {
+2 -2
View File
@@ -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>([])
+2 -2
View File
@@ -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) => {
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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'
+2 -2
View File
@@ -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 -1
View File
@@ -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 }
+2 -2
View File
@@ -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' },
+2 -2
View File
@@ -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 -1
View File
@@ -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 = [
{
+2 -2
View File
@@ -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 -1
View File
@@ -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 = () => {
+2 -2
View File
@@ -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'
+2 -2
View File
@@ -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: {
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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[] = []
+2 -2
View File
@@ -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 } },
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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'