feat(graphUtil): text wrapping

src/G6/nodeConfig.ts

@@ -125,7 +125,7 @@ export const breakdownNode: ShapeOptions = {
     });
     group.addShape("text", {
       attrs: {
-        text: textWrapping(cfg.label as string, 300),
+        text: textWrapping(cfg.label as string, 200),
         fill: "#000",
         fontSize: 12,
         x: 2 * r,
@@ -175,7 +175,7 @@ export const workflowNode: ShapeOptions = {
     });
     group.addShape("text", {
       attrs: {
-        text: textWrapping(cfg.toolId as string, 300),
+        text: cfg.toolName,
         fill: "#000",
         x: size * 1.5,
         y: size / 2,

src/components/BreakdownChart.vue

@@ -36,7 +36,7 @@ onMounted(() => {
 
   tree.data(dataStore.getTreeData);
   tree.render();
-  tree.fitView();
+  tree.fitView(50);
 });
 </script>
 

src/components/WorkflowChart.vue

@@ -22,7 +22,8 @@ onMounted(() => {
   console.log("workflow");
   const graph = new G6.Graph({
     container: getGraphNum(),
-    fitCenter: true,
+    fitView: true,
+    fitViewPadding: 100,
     layout: {
       type: "dagre",
       ranksep: 12,

src/components/nodeConfig/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import {Close} from "@element-plus/icons-vue";
-import {useNodeStore} from "@/store/node.ts";
-import {storeToRefs} from "pinia";
+import { Close } from "@element-plus/icons-vue";
+import { useNodeStore } from "@/store/node.ts";
+import { storeToRefs } from "pinia";
 
 const nodeStore = useNodeStore();
 const { activateNode } = storeToRefs(nodeStore);
@@ -10,7 +10,7 @@ const onSave = () => {
   alert("save!");
 };
 const onCancel = () => {
-  alert("cancel!");
+  nodeStore.setConfigDisplay();
 };
 const onExecute = () => {
   alert("execute!");
@@ -50,9 +50,8 @@ const onExecute = () => {
           style="position: absolute; right: 0"
           type="primary"
           @click="onExecute"
-        >Execute
-        </el-button
-        >
+          >Execute
+        </el-button>
       </el-form-item>
     </el-form>
   </el-card>

src/constant/index.ts

@@ -55,5 +55,5 @@ export const TOOL_EXAMPLE = {
     },
   ],
 };
-export const MOCK_JOB = `{"task":"Extract water body from Landsat-8 images","subtasks":[{"task":"Import Landsat-8 imagery into QGIS","toolId":"gdal:translate","subtasks":[],"toolName":""},{"task":"Assign projection to the imported raster if it does not already have one","toolId":"gdal:assignprojection","subtasks":[],"toolName":""},{"task":"Select an appropriate spectral band combination for water body extraction","toolId":"gdal:rearrange_bands","subtasks":[],"toolName":""},{"task":"Apply threshold to identify water bodies","toolId":"gdal:rastercalculator","subtasks":[],"toolName":""},{"task":"Convert the raster of threshold values to vector format for precise delineation","toolId":"gdal:polygonize","subtasks":[],"toolName":""},{"task":"Refine the resultant vector layer by removing small erroneous polygons","toolId":"native:deleteholes","subtasks":[],"toolName":""}],"toolId":"","toolName":""}`;
+export const MOCK_JOB = `{"task":"Extract water body from Landsat-8 images","subtasks":[{"task":"Import Landsat-8 imagery into QGIS","toolId":"gdal:translate","subtasks":[],"toolName":"gdal:translate"},{"task":"Assign projection to the imported raster if it does not already have one","toolId":"gdal:assignprojection","subtasks":[],"toolName":"gdal:assignprojection"},{"task":"Select an appropriate spectral band combination for water body extraction","toolId":"gdal:rearrange_bands","subtasks":[],"toolName":"gdal:rearrange_bands"},{"task":"Apply threshold to identify water bodies","toolId":"gdal:rastercalculator","subtasks":[],"toolName":"gdal:rastercalculator"},{"task":"Convert the raster of threshold values to vector format for precise delineation","toolId":"gdal:polygonize","subtasks":[],"toolName":"gdal:polygonize"},{"task":"Refine the resultant vector layer by removing small erroneous polygons","toolId":"native:deleteholes","subtasks":[],"toolName":"native:deleteholes"}],"toolId":"","toolName":""}`;
 export const MOCK_TOOL = `{"id":"qgis:basicstatisticsforfields","name":"Basic_statistics_for_fields","description":"Generates basic statistics for a field of the attribute table of a vector layer.","args":[{"name":"INPUT_LAYER","type":"[vector: any]","description":"Vector layer to calculate the statistics on.","required":true},{"name":"FIELD_NAME","type":"[tablefield: any]","description":"The name of the field that will be added to the input table.","required":true},{"name":"OUTPUT_HTML_FILE","type":"[html]","description":"Specification of the file for the calculated statistics. One of: Skip Output,Save to a Temporary File,Save to File.","required":false}]}`;

src/utils/graphUtil.ts

@@ -114,31 +114,39 @@ export function textWrapping(
   maxWidth: number = 300,
   fontSize: number = 12,
 ) {
-  // const ellipsis = "...";
-  // const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
-  let currentWidth = 0;
+  let newLineWidth = 0;
+  let newSpaceIndex = 0;
+  let newLineStartIndex = 0;
+  let newSpaceIndexLineWidth = 0;
   let res = "";
-  // let spaceIndex = 0;
-  const pattern = new RegExp("[\u4E00-\u9FA5]+"); // distinguish the Chinese characters and letters
-  let lastIndex = 0;
-  str.split("").forEach((letter, i) => {
-    if (currentWidth > maxWidth) return;
+  const pattern = new RegExp("[\u4E00-\u9FA5]+"); // Chinese characters
 
+  str.split("").forEach((letter, i) => {
     if (pattern.test(letter)) {
-      // Chinese characters
-      currentWidth += fontSize;
+      // Chinese character
+      newLineWidth += fontSize;
     } else {
-      // get the width of single letter according to the fontSize
-      currentWidth += G6.Util.getLetterWidth(letter, fontSize);
+      // non-Chinese character
+      newLineWidth += G6.Util.getLetterWidth(letter, fontSize);
+      // mark the space between characters (could break line here)
+      if (letter == " ") {
+        newSpaceIndex = i;
+        newSpaceIndexLineWidth = newLineWidth;
+      }
     }
-    if (currentWidth > maxWidth) {
-      res += `${str.slice(lastIndex, i)}\n`;
-      currentWidth -= maxWidth;
-      lastIndex = i;
+
+    if (newLineWidth >= maxWidth) {
+      if (newSpaceIndex > newLineStartIndex) {
+        res += str.slice(newLineStartIndex, newSpaceIndex) + "\n";
+        newLineWidth -= newSpaceIndexLineWidth;
+        newLineStartIndex = newSpaceIndex + 1;
+      }
     }
+
     if (i == str.length - 1) {
-      res += `${str.slice(lastIndex)}`;
+      res += str.slice(newLineStartIndex);
     }
   });
   return res;
 }
+// calculation of flo|od affected area