From e3ef8a8ff00fd505051e4dc9498d9dd89234cf88 Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Tue, 13 Sep 2022 23:55:41 +0530 Subject: [PATCH] feat/Added basic erd support --- packages/nc-gui/assets/style.scss | 7 + .../components/dashboard/settings/Erd.vue | 140 +++++++ .../components/dashboard/settings/Modal.vue | 5 + .../dashboard/settings/erd/RelationEdge.vue | 120 ++++++ .../dashboard/settings/erd/TableNode.vue | 54 +++ packages/nc-gui/composables/useMetas.ts | 6 +- packages/nc-gui/package-lock.json | 359 ++++++++++++++++++ packages/nc-gui/package.json | 3 + 8 files changed, 693 insertions(+), 1 deletion(-) create mode 100644 packages/nc-gui/components/dashboard/settings/Erd.vue create mode 100644 packages/nc-gui/components/dashboard/settings/erd/RelationEdge.vue create mode 100644 packages/nc-gui/components/dashboard/settings/erd/TableNode.vue diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss index 2d937de015..e2aaead0f2 100644 --- a/packages/nc-gui/assets/style.scss +++ b/packages/nc-gui/assets/style.scss @@ -1,4 +1,6 @@ @import 'ant-design-vue/dist/antd.variable.min.css'; +@import 'https://cdn.jsdelivr.net/npm/@braks/vue-flow@0.4.39/dist/style.css'; +@import 'https://cdn.jsdelivr.net/npm/@braks/vue-flow@0.4.39/dist/theme-default.css'; :root { --header-height: 42px; @@ -242,3 +244,8 @@ a { .ant-dropdown-menu-submenu-title{ @apply !pr-2; } + +.vue-flow__minimap { + transform: scale(75%); + transform-origin: bottom right; +} diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue new file mode 100644 index 0000000000..4b7b88156e --- /dev/null +++ b/packages/nc-gui/components/dashboard/settings/Erd.vue @@ -0,0 +1,140 @@ + + + diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue index e9f7546f3f..11ce0d153b 100644 --- a/packages/nc-gui/components/dashboard/settings/Modal.vue +++ b/packages/nc-gui/components/dashboard/settings/Modal.vue @@ -5,6 +5,7 @@ import AppStore from './AppStore.vue' import Metadata from './Metadata.vue' import UIAcl from './UIAcl.vue' import Misc from './Misc.vue' +import Erd from './Erd.vue' import { useNuxtApp } from '#app' import { useI18n, useUIPermission, useVModel, watch } from '#imports' import ApiTokenManagement from '~/components/tabs/auth/ApiTokenManagement.vue' @@ -112,6 +113,10 @@ const tabsInfo: TabGroup = { title: t('general.misc'), body: Misc, }, + erd: { + title: t('title.erd'), + body: Erd, + }, }, onClick: () => { $e('c:settings:proj-metadata') diff --git a/packages/nc-gui/components/dashboard/settings/erd/RelationEdge.vue b/packages/nc-gui/components/dashboard/settings/erd/RelationEdge.vue new file mode 100644 index 0000000000..d4ae481581 --- /dev/null +++ b/packages/nc-gui/components/dashboard/settings/erd/RelationEdge.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/packages/nc-gui/components/dashboard/settings/erd/TableNode.vue b/packages/nc-gui/components/dashboard/settings/erd/TableNode.vue new file mode 100644 index 0000000000..a75e68861f --- /dev/null +++ b/packages/nc-gui/components/dashboard/settings/erd/TableNode.vue @@ -0,0 +1,54 @@ + + + diff --git a/packages/nc-gui/composables/useMetas.ts b/packages/nc-gui/composables/useMetas.ts index 8a780f1793..67c5c719fc 100644 --- a/packages/nc-gui/composables/useMetas.ts +++ b/packages/nc-gui/composables/useMetas.ts @@ -10,6 +10,10 @@ export function useMetas() { const { tables } = useProject() const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({})) + const metasWithId = computed(() => { + const idEntries = Object.entries(metas.value).filter(([k, v]) => k === v.id) + return Object.fromEntries(idEntries) + }) const loadingState = useState>('metas-loading-state', () => ({})) const setMeta = async (model: any) => { @@ -91,5 +95,5 @@ export function useMetas() { } } - return { getMeta, clearAllMeta, metas, removeMeta, setMeta } + return { getMeta, clearAllMeta, metas, metasWithId, removeMeta, setMeta } } diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json index 9d8beb4b4c..87f69a1bba 100644 --- a/packages/nc-gui/package-lock.json +++ b/packages/nc-gui/package-lock.json @@ -6,12 +6,14 @@ "": { "hasInstallScript": true, "dependencies": { + "@braks/vue-flow": "^0.4.39", "@ckpack/vue-color": "^1.2.0", "@vuelidate/core": "^2.0.0-alpha.44", "@vuelidate/validators": "^2.0.0-alpha.31", "@vueuse/core": "^9.0.2", "@vueuse/integrations": "^9.0.2", "ant-design-vue": "^3.2.11", + "dagre": "^0.8.5", "dayjs": "^1.11.3", "file-saver": "^2.0.5", "httpsnippet": "^2.0.0", @@ -28,6 +30,7 @@ "tinycolor2": "^1.4.2", "unique-names-generator": "^4.7.1", "vue-dompurify-html": "^3.0.0", + "vue-flow": "^0.3.0", "vue-github-button": "^3.0.3", "vue-i18n": "^9.2.2", "vuedraggable": "^4.1.0", @@ -878,6 +881,103 @@ "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", @@ -5144,6 +5244,111 @@ "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==", "dev": true }, + "node_modules/d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-dispatch": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz", + "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-drag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz", + "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==", + "dependencies": { + "d3-dispatch": "1 - 3", + "d3-selection": "3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-ease": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz", + "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "dependencies": { + "d3-color": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-selection": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", + "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-timer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz", + "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-transition": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz", + "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==", + "dependencies": { + "d3-color": "1 - 3", + "d3-dispatch": "1 - 3", + "d3-ease": "1 - 3", + "d3-interpolate": "1 - 3", + "d3-timer": "1 - 3" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "d3-selection": "2 - 3" + } + }, + "node_modules/d3-zoom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz", + "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==", + "dependencies": { + "d3-dispatch": "1 - 3", + "d3-drag": "2 - 3", + "d3-interpolate": "1 - 3", + "d3-selection": "2 - 3", + "d3-transition": "2 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/dagre": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz", + "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==", + "dependencies": { + "graphlib": "^2.1.8", + "lodash": "^4.17.15" + } + }, "node_modules/data-uri-to-buffer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz", @@ -7882,6 +8087,14 @@ "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==", "dev": true }, + "node_modules/graphlib": { + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz", + "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==", + "dependencies": { + "lodash": "^4.17.15" + } + }, "node_modules/gzip-size": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz", @@ -14630,6 +14843,11 @@ "node": ">=4.0" } }, + "node_modules/vue-flow": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/vue-flow/-/vue-flow-0.3.0.tgz", + "integrity": "sha512-J/I6z8ErkWiPCEicdZXTUEBt5MfW1GoFNs2/spGSLuzBKAOUF/MlghKAZZ4feDDjmpg/B00EviSG1fJ0PIGwVg==" + }, "node_modules/vue-github-button": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/vue-github-button/-/vue-github-button-3.0.3.tgz", @@ -15831,6 +16049,59 @@ "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", @@ -19096,6 +19367,81 @@ "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==", "dev": true }, + "d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==" + }, + "d3-dispatch": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz", + "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==" + }, + "d3-drag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz", + "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==", + "requires": { + "d3-dispatch": "1 - 3", + "d3-selection": "3" + } + }, + "d3-ease": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz", + "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==" + }, + "d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "requires": { + "d3-color": "1 - 3" + } + }, + "d3-selection": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", + "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==" + }, + "d3-timer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz", + "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==" + }, + "d3-transition": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz", + "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==", + "requires": { + "d3-color": "1 - 3", + "d3-dispatch": "1 - 3", + "d3-ease": "1 - 3", + "d3-interpolate": "1 - 3", + "d3-timer": "1 - 3" + } + }, + "d3-zoom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz", + "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==", + "requires": { + "d3-dispatch": "1 - 3", + "d3-drag": "2 - 3", + "d3-interpolate": "1 - 3", + "d3-selection": "2 - 3", + "d3-transition": "2 - 3" + } + }, + "dagre": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz", + "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==", + "requires": { + "graphlib": "^2.1.8", + "lodash": "^4.17.15" + } + }, "data-uri-to-buffer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz", @@ -21041,6 +21387,14 @@ "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==", "dev": true }, + "graphlib": { + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz", + "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==", + "requires": { + "lodash": "^4.17.15" + } + }, "gzip-size": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz", @@ -26085,6 +26439,11 @@ } } }, + "vue-flow": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/vue-flow/-/vue-flow-0.3.0.tgz", + "integrity": "sha512-J/I6z8ErkWiPCEicdZXTUEBt5MfW1GoFNs2/spGSLuzBKAOUF/MlghKAZZ4feDDjmpg/B00EviSG1fJ0PIGwVg==" + }, "vue-github-button": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/vue-github-button/-/vue-github-button-3.0.3.tgz", diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json index c7156b9491..74c5853cf1 100644 --- a/packages/nc-gui/package.json +++ b/packages/nc-gui/package.json @@ -15,12 +15,14 @@ "postinstall": "node scripts/updateNuxtRouting.js" }, "dependencies": { + "@braks/vue-flow": "^0.4.39", "@ckpack/vue-color": "^1.2.0", "@vuelidate/core": "^2.0.0-alpha.44", "@vuelidate/validators": "^2.0.0-alpha.31", "@vueuse/core": "^9.0.2", "@vueuse/integrations": "^9.0.2", "ant-design-vue": "^3.2.11", + "dagre": "^0.8.5", "dayjs": "^1.11.3", "file-saver": "^2.0.5", "httpsnippet": "^2.0.0", @@ -37,6 +39,7 @@ "tinycolor2": "^1.4.2", "unique-names-generator": "^4.7.1", "vue-dompurify-html": "^3.0.0", + "vue-flow": "^0.3.0", "vue-github-button": "^3.0.3", "vue-i18n": "^9.2.2", "vuedraggable": "^4.1.0",