@vanduo-oss/vd3-cbun 1.3.0 → 1.3.2

package/dist/flowchart/index.js

@@ -187,6 +187,51 @@ var LAYOUT_MODES = ["tree", "radial", "grid"];
 
 // src/flowchart/core.js
 var SVG_NS = "http://www.w3.org/2000/svg";
+var TOOLBAR_ICON_PATHS = {
+  "zoom-out": "M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Zm112-8H88a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Z",
+  "zoom-in": "M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Zm112,24H128v24a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h24V96a8,8,0,0,1,16,0v24h24a8,8,0,0,1,0,16Z",
+  "reset-view": "M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16h28.69L187.31,70.63A80,80,0,1,0,208,128a8,8,0,0,1,16,0,96,96,0,1,1-27.22-66.91L224,85.8V56a8,8,0,0,1,16,0Z",
+  "fit-view": "M216,48V88a8,8,0,0,1-16,0V67.31l-42.34,42.35a8,8,0,0,1-11.32-11.32L188.69,56H168a8,8,0,0,1,0-16h40A8,8,0,0,1,216,48ZM98.34,146.34,56,188.69V168a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H88a8,8,0,0,0,0-16H67.31l42.35-42.34a8,8,0,0,0-11.32-11.32Zm11.32-36.68L67.31,56H88a8,8,0,0,0,0-16H48a8,8,0,0,0-8,8V88a8,8,0,0,0,16,0V67.31l42.34,42.35a8,8,0,0,0,11.32-11.32ZM208,160a8,8,0,0,0-8,8v20.69l-42.34-42.35a8,8,0,0,0-11.32,11.32L188.69,200H168a8,8,0,0,0,0,16h40a8,8,0,0,0,8-8V168A8,8,0,0,0,208,160Z",
+  undo: "M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z",
+  redo: "M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64l-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,0,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60L224,85.8V56a8,8,0,1,1,16,0Z",
+  clear: "M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"
+};
+var TOOLBAR_ACTIONS = [
+  { action: "zoom-out", label: "Zoom out", icon: "zoom-out" },
+  { action: "zoom-in", label: "Zoom in", icon: "zoom-in" },
+  { action: "reset-view", label: "Reset view", icon: "reset-view" },
+  { action: "fit-view", label: "Fit view", icon: "fit-view" },
+  { action: "undo", label: "Undo", icon: "undo" },
+  { action: "redo", label: "Redo", icon: "redo" }
+];
+var LAYOUT_OPTIONS = [
+  { value: "tree", label: "Tree" },
+  { value: "radial", label: "Radial" },
+  { value: "grid", label: "Grid" }
+];
+function createToolbarIcon(name) {
+  const svg = svgEl("svg", {
+    class: "vd-flowchart-icon",
+    viewBox: "0 0 256 256",
+    "aria-hidden": "true",
+    focusable: "false"
+  });
+  svg.setAttribute("fill", "currentColor");
+  svg.appendChild(svgEl("path", { d: TOOLBAR_ICON_PATHS[name] || "" }));
+  return svg;
+}
+function createToolbarButton({ action, label, icon, disabled = false }) {
+  const button = createElement("button", {
+    className: "vd-flowchart-btn vd-flowchart-icon-btn",
+    title: label,
+    disabled
+  });
+  button.setAttribute("type", "button");
+  button.setAttribute("data-flowchart-action", action);
+  button.setAttribute("aria-label", label);
+  button.appendChild(createToolbarIcon(icon));
+  return button;
+}
 var DEFAULT_GRID_SIZE = 24;
 var MIN_SCALE = 0.35;
 var MAX_SCALE = 3;
@@ -259,14 +304,14 @@ var DEFAULT_NODE_SPECS = {
   }
 };
 var FLOWCHART_PALETTE_ITEMS = [
-  { kind: "tool", tool: "arrow", label: "arrow" },
-  { kind: "node", type: "rounded-rect", label: "rounded rect" },
-  { kind: "node", type: "rect", label: "rect" },
-  { kind: "node", type: "diamond", label: "diamond" },
-  { kind: "node", type: "circle", label: "circle" },
-  { kind: "node", type: "junction", label: "junction" },
-  { kind: "node", type: "textbox", label: "textbox" },
-  { kind: "node", type: "label", label: "label" }
+  { kind: "tool", tool: "arrow", label: "Arrow" },
+  { kind: "node", type: "rounded-rect", label: "Rounded" },
+  { kind: "node", type: "rect", label: "Rect" },
+  { kind: "node", type: "diamond", label: "Diamond" },
+  { kind: "node", type: "circle", label: "Circle" },
+  { kind: "node", type: "junction", label: "Junction" },
+  { kind: "node", type: "textbox", label: "Textbox" },
+  { kind: "node", type: "label", label: "Label" }
 ];
 var flowchartId = 0;
 function nextId(prefix) {
@@ -1057,6 +1102,7 @@ var VdFlowchart = class {
     this.selection = null;
     this.interaction = null;
     this.activeTool = null;
+    this.layoutMode = "tree";
     this.paletteSerial = 0;
     this.destroyed = false;
     this.lastNodePointer = null;
@@ -1140,76 +1186,45 @@ var VdFlowchart = class {
       className: `vd-flowchart-shell${this.readonly ? " vd-flowchart-readonly" : ""}`
     });
     this.toolbar = createElement("div", { className: "vd-flowchart-toolbar" });
+    this.toolbar.setAttribute("role", "toolbar");
+    this.toolbar.setAttribute("aria-label", "Flowchart tools");
     const toolbarLeft = createElement("div", { className: "vd-flowchart-toolbar-group" });
     const toolbarRight = createElement("div", { className: "vd-flowchart-toolbar-group" });
-    this.zoomOutButton = createElement("button", { className: "vd-flowchart-btn", text: "-" });
-    this.zoomOutButton.setAttribute("data-flowchart-action", "zoom-out");
-    this.zoomOutButton.setAttribute("type", "button");
-    this.zoomInButton = createElement("button", { className: "vd-flowchart-btn", text: "+" });
-    this.zoomInButton.setAttribute("data-flowchart-action", "zoom-in");
-    this.zoomInButton.setAttribute("type", "button");
-    this.resetViewButton = createElement("button", {
-      className: "vd-flowchart-btn",
-      text: "Reset"
-    });
-    this.resetViewButton.setAttribute("data-flowchart-action", "reset-view");
-    this.resetViewButton.setAttribute("type", "button");
-    this.fitViewButton = createElement("button", { className: "vd-flowchart-btn", text: "Fit" });
-    this.fitViewButton.setAttribute("data-flowchart-action", "fit-view");
-    this.fitViewButton.setAttribute("type", "button");
-    this.undoButton = createElement("button", {
-      className: "vd-flowchart-btn",
-      text: "\u21B6",
-      title: "Undo",
-      disabled: true
-    });
-    this.undoButton.setAttribute("data-flowchart-action", "undo");
-    this.undoButton.setAttribute("type", "button");
-    this.undoButton.setAttribute("aria-label", "Undo");
-    this.redoButton = createElement("button", {
-      className: "vd-flowchart-btn",
-      text: "\u21B7",
-      title: "Redo",
-      disabled: true
+    TOOLBAR_ACTIONS.forEach((item) => {
+      const button = createToolbarButton(item);
+      if (item.action === "undo") this.undoButton = button;
+      if (item.action === "redo") this.redoButton = button;
+      if (item.action === "zoom-out") this.zoomOutButton = button;
+      if (item.action === "zoom-in") this.zoomInButton = button;
+      if (item.action === "reset-view") this.resetViewButton = button;
+      if (item.action === "fit-view") this.fitViewButton = button;
+      toolbarLeft.appendChild(button);
     });
-    this.redoButton.setAttribute("data-flowchart-action", "redo");
-    this.redoButton.setAttribute("type", "button");
-    this.redoButton.setAttribute("aria-label", "Redo");
+    this.undoButton.disabled = true;
+    this.redoButton.disabled = true;
     this.arrangeSelect = createElement("select", {
       className: "vd-flowchart-btn vd-flowchart-arrange",
-      disabled: this.readonly
+      disabled: this.readonly,
+      title: "Auto-arrange layout"
     });
-    this.arrangeSelect.setAttribute("aria-label", "Auto-arrange layout");
+    this.arrangeSelect.setAttribute("aria-label", "Layout mode");
     this.arrangeSelect.setAttribute("data-flowchart-arrange", "");
-    [
-      { value: "", label: "Arrange \u25BE" },
-      { value: "tree", label: "Tree" },
-      { value: "radial", label: "Radial" },
-      { value: "grid", label: "Grid" }
-    ].forEach((item, index) => {
+    LAYOUT_OPTIONS.forEach((item) => {
       const option = createElement("option", { value: item.value, text: item.label });
       option.value = item.value;
-      if (index === 0) option.disabled = true;
       this.arrangeSelect.appendChild(option);
     });
-    this.arrangeSelect.selectedIndex = 0;
-    this.clearButton = createElement("button", {
-      className: "vd-flowchart-btn",
-      text: "Clear",
+    this.arrangeSelect.value = this.layoutMode;
+    this.clearButton = createToolbarButton({
+      action: "clear",
+      label: "Clear canvas",
+      icon: "clear",
       disabled: this.readonly
     });
-    this.clearButton.setAttribute("data-flowchart-action", "clear");
-    this.clearButton.setAttribute("type", "button");
     this.zoomLabel = createElement("span", {
       className: "vd-flowchart-toolbar-label",
       text: "100%"
     });
-    toolbarLeft.appendChild(this.zoomOutButton);
-    toolbarLeft.appendChild(this.zoomInButton);
-    toolbarLeft.appendChild(this.resetViewButton);
-    toolbarLeft.appendChild(this.fitViewButton);
-    toolbarLeft.appendChild(this.undoButton);
-    toolbarLeft.appendChild(this.redoButton);
     toolbarLeft.appendChild(this.arrangeSelect);
     toolbarLeft.appendChild(this.clearButton);
     toolbarRight.appendChild(this.zoomLabel);
@@ -1220,17 +1235,23 @@ var VdFlowchart = class {
       className: "vd-flowchart-panel vd-flowchart-panel--palette"
     });
     this.palettePanel.appendChild(
-      createElement("h4", { className: "vd-flowchart-panel-title", text: "Shapes & tools" })
+      createElement("h4", { className: "vd-flowchart-panel-title", text: "Shapes" })
     );
-    this.paletteGrid = createElement("div", { className: "vd-flowchart-palette" });
+    this.paletteGrid = createElement("div", {
+      className: "vd-flowchart-palette",
+      role: "toolbar"
+    });
+    this.paletteGrid.setAttribute("aria-label", "Shapes and tools");
     FLOWCHART_PALETTE_ITEMS.forEach((item) => {
       const button = createElement("button", {
-        className: "vd-flowchart-palette-btn"
+        className: "vd-flowchart-palette-btn",
+        title: item.label
       });
       button.setAttribute("type", "button");
       if (item.kind === "tool") {
         button.setAttribute("data-tool", item.tool);
-        button.setAttribute("aria-label", `Use ${item.label}`);
+        button.setAttribute("aria-label", item.label);
+        button.setAttribute("aria-pressed", "false");
       } else {
         button.setAttribute("data-node-type", item.type);
         button.setAttribute("aria-label", `Add ${item.label}`);
@@ -1384,10 +1405,18 @@ var VdFlowchart = class {
     const arrowArmed = this.activeTool === "arrow";
     this.paletteGrid.querySelectorAll(".vd-flowchart-palette-btn").forEach((button) => {
       const tool = button.getAttribute("data-tool");
-      button.classList.toggle("is-active", Boolean(tool) && tool === this.activeTool);
+      const active = Boolean(tool) && tool === this.activeTool;
+      button.classList.toggle("is-active", active);
+      if (tool) button.setAttribute("aria-pressed", active ? "true" : "false");
     });
     this.canvasEl.classList.toggle("is-arrow-tool", arrowArmed);
   }
+  syncArrangeSelect() {
+    if (!this.arrangeSelect) return;
+    const mode = LAYOUT_OPTIONS.some((item) => item.value === this.layoutMode) ? this.layoutMode : "tree";
+    this.layoutMode = mode;
+    this.arrangeSelect.value = mode;
+  }
   setActiveTool(tool) {
     this.activeTool = tool || null;
     this.updatePaletteState();
@@ -1408,8 +1437,12 @@ var VdFlowchart = class {
   handleArrangeChange(event) {
     if (this.readonly) return;
     const mode = event.target.value;
-    if (mode) this.layout(mode);
-    event.target.selectedIndex = 0;
+    if (!LAYOUT_OPTIONS.some((item) => item.value === mode)) {
+      this.syncArrangeSelect();
+      return;
+    }
+    this.layoutMode = mode;
+    this.layout(mode);
   }
   handlePaletteClick(event) {
     if (this.readonly) return;
@@ -2998,6 +3031,8 @@ var VdFlowchart = class {
   layout(mode = "tree", options = {}) {
     if (this.readonly) return this;
     const resolvedMode = LAYOUT_MODES.includes(mode) ? mode : "tree";
+    this.layoutMode = resolvedMode;
+    this.syncArrangeSelect();
     const positions = computeLayout(this.documentData, resolvedMode, options);
     if (!positions.size) return this;
     let changed = false;