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

Merge pull request #4289 from nocodb/fix/overlapping-edge-labels 

fix(nc-gui): overlapping edge labels
pull/4299/head
Muhammed Mustafa 2 years ago committed by GitHub
parent
0bbf93e78a 08b5defd42
commit
2bbd5bd6b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 100 additions and 38 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/components/erd/Flow.vue
  2. 33
      packages/nc-gui/components/erd/RelationEdge.vue
  3. 95
      packages/nc-gui/package-lock.json
  4. 4
      packages/nc-gui/package.json
  5. 2
      scripts/playwright/pages/Dashboard/commonBase/Erd.ts

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

@ -94,10 +94,6 @@ onScopeDispose($destroy)
</template>
<style>
.vue-flow__edges {
z-index: 1000 !important;
}
.vue-flow__controls-zoomin {
@apply rounded-t;
}

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

@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { EdgeProps, Position } from '@vue-flow/core'
import { EdgeText, getBezierPath } from '@vue-flow/core'
import { EdgeLabelRenderer, getBezierPath } from '@vue-flow/core'
import type { CSSProperties } from '@vue/runtime-dom'
import type { EdgeData } from './utils'
import { computed, toRef } from '#imports'
@ -92,26 +92,27 @@ export default {
<path class="opacity-0" :stroke-width="showSkeleton ? baseStroke * 12 : baseStroke * 8" fill="none" :d="edgePath[0]" />
<Transition name="layout">
<EdgeText
v-if="data.label?.length && data.label.length > 0"
:key="`edge-text-${id}.${showSkeleton}`"
class="color-transition"
<EdgeLabelRenderer>
<div
:style="{
position: 'absolute',
transform: `translate(-50%, -50%) translate(${edgePath[1]}px,${edgePath[2]}px)`,
color: 'white',
fontSize: `${showSkeleton ? baseStroke * 2 : baseStroke / 2}rem`,
backgroundColor: data.color,
borderRadius: '0.25rem',
padding: '0.25rem 0.5rem',
}"
class="nodrag nopan color-transition z-1000"
:class="[
selected || isHovering ? 'opacity-100' : 'opacity-0 !pointer-events-none',
showSkeleton ? '!text-6xl' : '!text-xs',
`nc-erd-table-label-${data.label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`,
]"
:x="edgePath[1]"
:y="edgePath[2]"
:label="showSkeleton ? data.simpleLabel : data.label"
:label-style="{ fill: 'white', fontSize: `${showSkeleton ? baseStroke * 2 : baseStroke / 2}rem` }"
:label-show-bg="true"
:label-bg-style="{ fill: data.color }"
:label-bg-padding="[8, 6]"
:label-bg-border-radius="2"
/>
</Transition>
>
{{ showSkeleton ? data.simpleLabel : data.label }}
</div>
</EdgeLabelRenderer>
<template v-if="!showSkeleton">
<rect

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

@ -9,8 +9,8 @@
"license": "AGPL-3.0-or-later",
"dependencies": {
"@ckpack/vue-color": "^1.2.0",
"@vue-flow/additional-components": "^1.1.0",
"@vue-flow/core": "^1.1.3",
"@vue-flow/additional-components": "^1.2.0",
"@vue-flow/core": "^1.3.0",
"@vuelidate/core": "^2.0.0-alpha.44",
"@vuelidate/validators": "^2.0.0-alpha.31",
"@vueuse/core": "^9.0.2",
@ -2955,6 +2955,33 @@
"@types/node": "*"
}
},
"node_modules/@types/d3-color": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz",
"integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA=="
},
"node_modules/@types/d3-interpolate": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
"integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==",
"dependencies": {
"@types/d3-color": "*"
}
},
"node_modules/@types/d3-selection": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.3.tgz",
"integrity": "sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA=="
},
"node_modules/@types/d3-zoom": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.1.tgz",
"integrity": "sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==",
"dependencies": {
"@types/d3-interpolate": "*",
"@types/d3-selection": "*"
}
},
"node_modules/@types/dagre": {
"version": "0.7.48",
"resolved": "https://registry.npmjs.org/@types/dagre/-/dagre-0.7.48.tgz",
@ -3322,18 +3349,24 @@
}
},
"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==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@vue-flow/additional-components/-/additional-components-1.2.0.tgz",
"integrity": "sha512-a5F2y0WdPxaxTAcN7mSYVZ6A2kDSxenp+YwMt/2ldFRmCIP4jCbXEsTZfcpUe5zhlehfbyTTYbEw03w3YW24aA==",
"dependencies": {
"@types/d3-selection": "^3.0.3",
"@types/d3-zoom": "^3.0.1",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0"
},
"peerDependencies": {
"@vue-flow/core": "^1.0.0",
"vue": "^3.2.37"
}
},
"node_modules/@vue-flow/core": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@vue-flow/core/-/core-1.1.3.tgz",
"integrity": "sha512-MuJjWLexkZ5RiMY/LmuyRZXiXKo8ttaKSPk02RYP8SoWVj6Kr0XglWh6FJdQE0bQhqpwsXBka+4EQrI4B/ueSw==",
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@vue-flow/core/-/core-1.3.0.tgz",
"integrity": "sha512-hitjBy8RTw8gixcgJ9sjfZWyI6KNyKp4ffxTz/O4ZN/7TMwunEdc3cFHuU7R6J1OEhZ+HnlMRGrXmzXiIfdJow==",
"dependencies": {
"@vueuse/core": "^9.3.0",
"d3-drag": "^3.0.0",
@ -19406,6 +19439,33 @@
"@types/node": "*"
}
},
"@types/d3-color": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz",
"integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA=="
},
"@types/d3-interpolate": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
"integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==",
"requires": {
"@types/d3-color": "*"
}
},
"@types/d3-selection": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.3.tgz",
"integrity": "sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA=="
},
"@types/d3-zoom": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.1.tgz",
"integrity": "sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==",
"requires": {
"@types/d3-interpolate": "*",
"@types/d3-selection": "*"
}
},
"@types/dagre": {
"version": "0.7.48",
"resolved": "https://registry.npmjs.org/@types/dagre/-/dagre-0.7.48.tgz",
@ -19674,15 +19734,20 @@
}
},
"@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": {}
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@vue-flow/additional-components/-/additional-components-1.2.0.tgz",
"integrity": "sha512-a5F2y0WdPxaxTAcN7mSYVZ6A2kDSxenp+YwMt/2ldFRmCIP4jCbXEsTZfcpUe5zhlehfbyTTYbEw03w3YW24aA==",
"requires": {
"@types/d3-selection": "^3.0.3",
"@types/d3-zoom": "^3.0.1",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0"
}
},
"@vue-flow/core": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@vue-flow/core/-/core-1.1.3.tgz",
"integrity": "sha512-MuJjWLexkZ5RiMY/LmuyRZXiXKo8ttaKSPk02RYP8SoWVj6Kr0XglWh6FJdQE0bQhqpwsXBka+4EQrI4B/ueSw==",
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@vue-flow/core/-/core-1.3.0.tgz",
"integrity": "sha512-hitjBy8RTw8gixcgJ9sjfZWyI6KNyKp4ffxTz/O4ZN/7TMwunEdc3cFHuU7R6J1OEhZ+HnlMRGrXmzXiIfdJow==",
"requires": {
"@vueuse/core": "^9.3.0",
"d3-drag": "^3.0.0",

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

@ -31,8 +31,8 @@
},
"dependencies": {
"@ckpack/vue-color": "^1.2.0",
"@vue-flow/additional-components": "^1.1.0",
"@vue-flow/core": "^1.1.3",
"@vue-flow/additional-components": "^1.2.0",
"@vue-flow/core": "^1.3.0",
"@vuelidate/core": "^2.0.0-alpha.44",
"@vuelidate/validators": "^2.0.0-alpha.31",
"@vueuse/core": "^9.0.2",

2
scripts/playwright/pages/Dashboard/commonBase/Erd.ts
Unescape View File

@ -89,7 +89,7 @@ export abstract class ErdBasePage extends BasePage {
}
async verifyJunctionTableLabel({ tableTitle, tableName }: { tableName: string; tableTitle: string }) {
await await this.vueFlow().locator(`.nc-erd-table-label-${tableTitle}-${tableName}`).locator('text').waitFor({
await this.vueFlow().locator(`.nc-erd-table-label-${tableTitle}-${tableName}`).waitFor({
state: 'visible',
});
}

Write Preview
Loading…
Cancel
Save