github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

chore(nc-gui): update to latest vue flow pkg

pull/4066/head
braks 2 years ago
parent
e7982022c7
commit
8c5673a117
6 changed files with 212 additions and 227 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      packages/nc-gui/assets/style.scss
  2. 11
      packages/nc-gui/components/erd/Flow.vue
  3. 99
      packages/nc-gui/components/erd/RelationEdge.vue
  4. 4
      packages/nc-gui/components/erd/TableNode.vue
  5. 318
      packages/nc-gui/package-lock.json
  6. 3
      packages/nc-gui/package.json

4
packages/nc-gui/assets/style.scss
Unescape View File

@ -1,6 +1,6 @@
@import 'ant-design-vue/dist/antd.variable.min.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';
:root {
--header-height: 42px;

11
packages/nc-gui/components/erd/Flow.vue
Unescape View File

@ -1,10 +1,11 @@
<script setup lang="ts">
import type { Edge, Node } from '@braks/vue-flow'
import { Background, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
import { Background, Controls } from '@vue-flow/additional-components'
import type { Edge, Node } from '@vue-flow/core'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
import { UITypes } from 'nocodb-sdk'
import dagre from 'dagre'
import { onScopeDispose, watch } from '#imports'
import { onScopeDispose, ref, useMetas, watch } from '#imports'
interface Props {
tables: any[]
@ -21,7 +22,7 @@ const { tables, config } = defineProps<Props>()
const { metasWithIdAsKey } = useMetas()
const { $destroy, fitView } = useVueFlow()
const { $destroy, fitView } = useVueFlow({ minZoom: 0.1, maxZoom: 2 })
const nodes = ref<Node[]>([])
const edges = ref<Edge[]>([])
@ -129,7 +130,7 @@ const populateEdges = () => {
isSelfRelation: source === target && sourceColumnId === targetColumnId,
label: edgeLabel,
},
}
} as Edge
})
}

99
packages/nc-gui/components/erd/RelationEdge.vue
Unescape View File

@ -1,57 +1,33 @@
<script setup>
import { EdgeText, getBezierPath, getEdgeCenter } from '@braks/vue-flow'
import { computed } from 'vue'
<script lang="ts" setup>
import type { EdgeProps, Position } from '@vue-flow/core'
import { EdgeText, getBezierPath } from '@vue-flow/core'
import type { CSSProperties } from '@vue/runtime-dom'
import type { ColumnType } from 'nocodb-sdk'
import { computed, toRef } from '#imports'
const props = defineProps({
id: {
type: String,
required: true,
},
sourceX: {
type: Number,
required: true,
},
sourceY: {
type: Number,
required: true,
},
targetX: {
type: Number,
required: true,
},
targetY: {
type: Number,
required: true,
},
sourcePosition: {
type: String,
required: true,
},
targetPosition: {
type: String,
required: true,
},
interface RelationEdgeProps extends EdgeProps {
id: string
sourceX: number
sourceY: number
targetX: number
targetY: number
sourcePosition: Position
targetPosition: Position
data: {
type: Object,
required: false,
},
markerEnd: {
type: String,
required: false,
},
style: {
type: Object,
required: false,
},
sourceHandleId: {
type: String,
required: false,
},
targetHandleId: {
type: String,
required: false,
},
})
column: ColumnType & {
colOptions?: {
type: string
}
}
isSelfRelation: boolean
label: string
}
markerEnd: string
style: CSSProperties
targetHandleId: string
}
const props = defineProps<RelationEdgeProps>()
const data = toRef(props, 'data')
@ -74,18 +50,9 @@ const edgePath = computed(() => {
targetPosition: props.targetPosition,
})
})
const center = computed(() =>
getEdgeCenter({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
}),
)
</script>
<script>
<script lang="ts">
export default {
inheritAttrs: false,
}
@ -98,7 +65,7 @@ export default {
class="path-wrapper p-4 hover:cursor-pointer"
:stroke-width="8"
fill="none"
:d="edgePath"
:d="edgePath[0]"
:marker-end="markerEnd"
/>
@ -108,15 +75,15 @@ export default {
class="path stroke-gray-500 hover:stroke-green-500 hover:cursor-pointer"
:stroke-width="1.5"
fill="none"
:d="edgePath"
:d="edgePath[0]"
:marker-end="markerEnd"
/>
<EdgeText
v-if="data.label?.length > 0"
:class="`nc-erd-table-label-${data.label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`"
:x="center[0]"
:y="center[1]"
:x="edgePath[1]"
:y="edgePath[2]"
:label="data.label"
:label-style="{ fill: 'white' }"
:label-show-bg="true"

4
packages/nc-gui/components/erd/TableNode.vue
Unescape 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'
import type { ColumnType, TableType } from 'nocodb-sdk'
import { UITypes, isVirtualCol } from 'nocodb-sdk'
import type { Ref } from 'vue'

318
packages/nc-gui/package-lock.json generated
Unescape View File

@ -6,8 +6,9 @@
"": {
"hasInstallScript": true,
"dependencies": {
"@braks/vue-flow": "^0.4.39",
"@ckpack/vue-color": "^1.2.0",
"@vue-flow/additional-components": "^1.1.0",
"@vue-flow/core": "^1.1.0",
"@vuelidate/core": "^2.0.0-alpha.44",
"@vuelidate/validators": "^2.0.0-alpha.31",
"@vueuse/core": "^9.0.2",
@ -891,103 +892,6 @@
"node": ">=6.9.0"
}
},
"node_modules/@braks/vue-flow": {
"version": "0.4.39",
"resolved": "https://registry.npmjs.org/@braks/vue-flow/-/vue-flow-0.4.39.tgz",
"integrity": "sha512-ZWKEwvEDKZe0Yw2sS8RxmxLs1k3O9DGFF0rk5xj+zWlExm15uBBhHAf8rWIRVULEbkjOmDwJEJ4bQrqwHn4pdA==",
"dependencies": {
"@vueuse/core": "^9.1.0",
"d3-drag": "^3.0.0",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0"
},
"peerDependencies": {
"vue": "^3.2.25"
}
},
"node_modules/@braks/vue-flow/node_modules/@vueuse/core": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.2.0.tgz",
"integrity": "sha512-/MZ6qpz6uSyaXrtoeBWQzAKRG3N7CvfVWvQxiM3ei3Xe5ydOjjtVbo7lGl9p8dECV93j7W8s63A8H0kFLpLyxg==",
"dependencies": {
"@types/web-bluetooth": "^0.0.15",
"@vueuse/metadata": "9.2.0",
"@vueuse/shared": "9.2.0",
"vue-demi": "*"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@braks/vue-flow/node_modules/@vueuse/core/node_modules/vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@braks/vue-flow/node_modules/@vueuse/metadata": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.2.0.tgz",
"integrity": "sha512-exN4KE6iquxDCdt72BgEhb3tlOpECtD61AUdXnUqBTIUCl70x1Ar/QXo3bYcvxmdMS2/peQyfeTzBjRTpvL5xw==",
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@braks/vue-flow/node_modules/@vueuse/shared": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.2.0.tgz",
"integrity": "sha512-NnRp/noSWuXW0dKhZK5D0YLrDi0nmZ18UeEgwXQq7Ul5TTP93lcNnKjrHtd68j2xFB/l59yPGFlCryL692bnrA==",
"dependencies": {
"vue-demi": "*"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@braks/vue-flow/node_modules/@vueuse/shared/node_modules/vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@ckpack/vue-color": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ckpack/vue-color/-/vue-color-1.2.0.tgz",
@ -3375,6 +3279,112 @@
"sirv": "^2.0.2"
}
},
"node_modules/@vue-flow/additional-components": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@vue-flow/additional-components/-/additional-components-1.1.0.tgz",
"integrity": "sha512-uWz/xieBI80UwcIolnFkGojgKZwr46nspLMpz1oZuzCN09kqd7ZK2VgZSS04r7j8aWNNanioun2AvDXr+vg8vg==",
"peerDependencies": {
"@vue-flow/core": "^1.0.0",
"vue": "^3.2.37"
}
},
"node_modules/@vue-flow/core": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@vue-flow/core/-/core-1.1.0.tgz",
"integrity": "sha512-9aaXDHYQAZ0DO+c2xtQrtF6rkc/suWqimUCyGSvnfn8/FWNjzs7aEr0h3/rvuylObVaqmuDQh73UOXKYURADkg==",
"dependencies": {
"@vueuse/core": "^9.3.0",
"d3-drag": "^3.0.0",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0"
},
"peerDependencies": {
"vue": "^3.2.25"
}
},
"node_modules/@vue-flow/core/node_modules/@vueuse/core": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.3.0.tgz",
"integrity": "sha512-64Rna8IQDWpdrJxgitDg7yv1yTp41ZmvV8zlLEylK4QQLWAhz1OFGZDPZ8bU4lwcGgbEJ2sGi2jrdNh4LttUSQ==",
"dependencies": {
"@types/web-bluetooth": "^0.0.15",
"@vueuse/metadata": "9.3.0",
"@vueuse/shared": "9.3.0",
"vue-demi": "*"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vue-flow/core/node_modules/@vueuse/core/node_modules/vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vue-flow/core/node_modules/@vueuse/metadata": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.3.0.tgz",
"integrity": "sha512-GnnfjbzIPJIh9ngL9s9oGU1+Hx/h5/KFqTfJykzh/1xjaHkedV9g0MASpdmPZIP+ynNhKAcEfA6g5i8KXwtoMA==",
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vue-flow/core/node_modules/@vueuse/shared": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.3.0.tgz",
"integrity": "sha512-caGUWLY0DpPC6l31KxeUy6vPVNA0yKxx81jFYLoMpyP6cF84FG5Dkf69DfSUqL57wX8JcUkJDMnQaQIZPWFEQQ==",
"dependencies": {
"vue-demi": "*"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vue-flow/core/node_modules/@vueuse/shared/node_modules/vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vue/babel-helper-vue-transform-on": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz",
@ -17182,59 +17192,6 @@
"to-fast-properties": "^2.0.0"
}
},
"@braks/vue-flow": {
"version": "0.4.39",
"resolved": "https://registry.npmjs.org/@braks/vue-flow/-/vue-flow-0.4.39.tgz",
"integrity": "sha512-ZWKEwvEDKZe0Yw2sS8RxmxLs1k3O9DGFF0rk5xj+zWlExm15uBBhHAf8rWIRVULEbkjOmDwJEJ4bQrqwHn4pdA==",
"requires": {
"@vueuse/core": "^9.1.0",
"d3-drag": "^3.0.0",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0"
},
"dependencies": {
"@vueuse/core": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.2.0.tgz",
"integrity": "sha512-/MZ6qpz6uSyaXrtoeBWQzAKRG3N7CvfVWvQxiM3ei3Xe5ydOjjtVbo7lGl9p8dECV93j7W8s63A8H0kFLpLyxg==",
"requires": {
"@types/web-bluetooth": "^0.0.15",
"@vueuse/metadata": "9.2.0",
"@vueuse/shared": "9.2.0",
"vue-demi": "*"
},
"dependencies": {
"vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"requires": {}
}
}
},
"@vueuse/metadata": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.2.0.tgz",
"integrity": "sha512-exN4KE6iquxDCdt72BgEhb3tlOpECtD61AUdXnUqBTIUCl70x1Ar/QXo3bYcvxmdMS2/peQyfeTzBjRTpvL5xw=="
},
"@vueuse/shared": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.2.0.tgz",
"integrity": "sha512-NnRp/noSWuXW0dKhZK5D0YLrDi0nmZ18UeEgwXQq7Ul5TTP93lcNnKjrHtd68j2xFB/l59yPGFlCryL692bnrA==",
"requires": {
"vue-demi": "*"
},
"dependencies": {
"vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"requires": {}
}
}
}
}
},
"@ckpack/vue-color": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ckpack/vue-color/-/vue-color-1.2.0.tgz",
@ -19003,6 +18960,65 @@
"sirv": "^2.0.2"
}
},
"@vue-flow/additional-components": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@vue-flow/additional-components/-/additional-components-1.1.0.tgz",
"integrity": "sha512-uWz/xieBI80UwcIolnFkGojgKZwr46nspLMpz1oZuzCN09kqd7ZK2VgZSS04r7j8aWNNanioun2AvDXr+vg8vg==",
"requires": {}
},
"@vue-flow/core": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@vue-flow/core/-/core-1.1.0.tgz",
"integrity": "sha512-9aaXDHYQAZ0DO+c2xtQrtF6rkc/suWqimUCyGSvnfn8/FWNjzs7aEr0h3/rvuylObVaqmuDQh73UOXKYURADkg==",
"requires": {
"@vueuse/core": "^9.3.0",
"d3-drag": "^3.0.0",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0"
},
"dependencies": {
"@vueuse/core": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.3.0.tgz",
"integrity": "sha512-64Rna8IQDWpdrJxgitDg7yv1yTp41ZmvV8zlLEylK4QQLWAhz1OFGZDPZ8bU4lwcGgbEJ2sGi2jrdNh4LttUSQ==",
"requires": {
"@types/web-bluetooth": "^0.0.15",
"@vueuse/metadata": "9.3.0",
"@vueuse/shared": "9.3.0",
"vue-demi": "*"
},
"dependencies": {
"vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"requires": {}
}
}
},
"@vueuse/metadata": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.3.0.tgz",
"integrity": "sha512-GnnfjbzIPJIh9ngL9s9oGU1+Hx/h5/KFqTfJykzh/1xjaHkedV9g0MASpdmPZIP+ynNhKAcEfA6g5i8KXwtoMA=="
},
"@vueuse/shared": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.3.0.tgz",
"integrity": "sha512-caGUWLY0DpPC6l31KxeUy6vPVNA0yKxx81jFYLoMpyP6cF84FG5Dkf69DfSUqL57wX8JcUkJDMnQaQIZPWFEQQ==",
"requires": {
"vue-demi": "*"
},
"dependencies": {
"vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"requires": {}
}
}
}
}
},
"@vue/babel-helper-vue-transform-on": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz",

3
packages/nc-gui/package.json
Unescape View File

@ -15,7 +15,8 @@
"postinstall": "node scripts/updateNuxtRouting.js"
},
"dependencies": {
"@braks/vue-flow": "^0.4.39",
"@vue-flow/additional-components": "^1.1.0",
"@vue-flow/core": "^1.1.0",
"@ckpack/vue-color": "^1.2.0",
"@vuelidate/core": "^2.0.0-alpha.44",
"@vuelidate/validators": "^2.0.0-alpha.31",

Write Preview
Loading…
Cancel
Save