improved label positioning and added color arg for connections in san…

…key diagram
ishubin · Jan 25, 2025 · b12fa10 · b12fa10
1 parent b36693d
commit b12fa10
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git a/assets/templates/diagrams/sankey.json b/assets/templates/diagrams/sankey.json
diff --git a/assets/templates/diagrams/sankey.yaml b/assets/templates/diagrams/sankey.yaml
@@ -6,7 +6,10 @@ args:
     diagramCode: {type: "string", value: "Wages [2000] Budget\nOther [120] Budget\nBudget [1000] Housing\nBudget [450] Taxes\n", name: "Diagram", textarea: true, rows: 15}
     font: {type: font, value: Arial, name: Font}
     colorTheme: {type: "choice", value: "default", options: ["default", "light", "dark"], name: "Color theme"}
+    connectorColorType: {type: choice, value: gradient, options: ['gradient', 'source', 'destination', 'custom'], name: 'Connection color type'}
+    connectorColor: {type: color, value: '#aaaaaa', name: 'Connection color', depends: {connectorColorType: 'custom'}}
     fontSize: {type: number, value: 14, name: "Font size", min: 1}
+    labelColor: {type: color, value: '#222222', name: 'Label color'}
     magnify: {type: number, value: 0, name: "Magnify value", min: -50, max: 50}
 
 preview: "/assets/templates/previews/mind-map.svg"

diff --git a/assets/templates/diagrams/src/sankey.sch b/assets/templates/diagrams/src/sankey.sch
@@ -395,7 +395,15 @@ func buildSingleConnectorItem(connector, srcNode, dstNode) {
     item.w = dx
     item.h = dy
 
-    item.shapeProps.set('fill', Fill.linearGradient(90, 0, srcNode.color, 100, dstNode.color))
+    if (connectorColorType == 'gradient') {
+        item.shapeProps.set('fill', Fill.linearGradient(90, 0, srcNode.color, 100, dstNode.color))
+    } else if (connectorColorType == 'source') {
+        item.shapeProps.set('fill', Fill.solid(srcNode.color))
+    } else if (connectorColorType == 'destination') {
+        item.shapeProps.set('fill', Fill.solid(dstNode.color))
+    } else {
+        item.shapeProps.set('fill', Fill.solid(connectorColor))
+    }
     item.shapeProps.set('strokeSize', 0)
     item.shapeProps.set('paths', List(Map(
         'id', 'p-' + connector.id,
@@ -406,15 +414,16 @@ func buildSingleConnectorItem(connector, srcNode, dstNode) {
     item
 }
 
-func buildLabel(id, text, font, fontSize, halign) {
+func buildLabel(id, text, font, fontSize, halign, valign) {
     local item = Item(id, text, 'none')
     item.args.set('templateForceText', true)
     item.textSlots.set('body', Map(
         'text', text,
         'font', font,
+        'color', labelColor,
         'fontSize', fontSize,
         'halign', halign,
-        'valign', 'middle',
+        'valign', valign,
         'paddingLeft', 0,
         'paddingRight', 0,
         'paddingTop', 0,
@@ -427,26 +436,27 @@ func buildLabel(id, text, font, fontSize, halign) {
 func buildNodeLabels(nodes) {
     local labelItems = List()
     nodes.forEach(node => {
+        local textSize = calculateTextSize(node.name, font, labelFontSize)
+        local valueTextSize = calculateTextSize('' + node.value, font, valueFontSize)
+        local totalHeight = (textSize.h + valueTextSize.h)*1.8 + 8
         local isLeft = node.dstNodes.size == 0
         local halign = 'left'
         if (!isLeft) {
             halign = 'right'
         }
-        local item = buildLabel('ln-' + node.id, node.name, font, labelFontSize, halign)
-        local textSize = calculateTextSize(node.name, font, labelFontSize)
+        local item = buildLabel('ln-' + node.id, node.name, font, labelFontSize, halign, 'bottom')
         item.w = textSize.w + 4
         item.h = textSize.h * 1.8 + 4
         if (isLeft) {
             item.x = node.position - item.w - labelPadding
         } else {
             item.x = node.position + node.width + labelPadding
         }
-        item.y = node.offset + node.height / 2  - item.h / 2
+        item.y = node.offset + node.height / 2  - totalHeight / 2
 
         labelItems.add(item)
 
-        local valueTextSize = calculateTextSize('' + node.value, font, valueFontSize)
-        local valueLabel = buildLabel('lv-' + node.id, '' + node.value, font, valueFontSize, halign)
+        local valueLabel = buildLabel('lv-' + node.id, '' + node.value, font, valueFontSize, halign, 'top')
         valueLabel.w = valueTextSize.w + 4
         valueLabel.h = valueTextSize.h * 1.8 + 4
         if (isLeft) {

diff --git a/src/ui/components/editor/properties/TemplateProperties.vue b/src/ui/components/editor/properties/TemplateProperties.vue
@@ -90,7 +90,7 @@ export default {
             template: null,
             editorPanels: [],
             lastChangedArgName: null,
-            updateDelayer: createDelayer(200, () => {
+            updateDelayer: createDelayer(100, () => {
                 this.$emit('updated', this.item.id, this.template, this.args, this.lastChangedArgName);
             }),
             args: this.item.args && this.item.args.templateArgs ? this.item.args.templateArgs : {}