@vanduo-oss/vd3-flowchart 1.3.0 → 1.5.0

package/dist/meta.json

@@ -5,14 +5,24 @@
       "imports": [],
       "format": "esm"
     },
+    "src/mindmap.js": {
+      "bytes": 6603,
+      "imports": [],
+      "format": "esm"
+    },
     "src/core.js": {
-      "bytes": 139173,
+      "bytes": 207176,
       "imports": [
         {
           "path": "src/layout.js",
           "kind": "import-statement",
           "original": "./layout.js"
         },
+        {
+          "path": "src/mindmap.js",
+          "kind": "import-statement",
+          "original": "./mindmap.js"
+        },
         {
           "path": "src/layout.js",
           "kind": "import-statement",
@@ -22,7 +32,7 @@
       "format": "esm"
     },
     "src/vue.js": {
-      "bytes": 3476,
+      "bytes": 4995,
       "imports": [
         {
           "path": "vue",
@@ -38,7 +48,7 @@
       "format": "esm"
     },
     "src/index.js": {
-      "bytes": 509,
+      "bytes": 541,
       "imports": [
         {
           "path": "src/vue.js",
@@ -59,7 +69,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 253577
+      "bytes": 379973
     },
     "dist/index.js": {
       "imports": [
@@ -73,6 +83,7 @@
         "FLOWCHART_DOCUMENT_VERSION",
         "FLOWCHART_EDGE_MARKERS",
         "FLOWCHART_EDGE_ROUTES",
+        "FLOWCHART_KEYBOARD_SHORTCUTS",
         "FLOWCHART_NODE_TYPES",
         "FLOWCHART_PORTS",
         "LAYOUT_MODES",
@@ -84,25 +95,28 @@
       "entryPoint": "src/index.js",
       "inputs": {
         "src/vue.js": {
-          "bytesInOutput": 2817
+          "bytesInOutput": 4145
         },
         "src/layout.js": {
           "bytesInOutput": 6422
         },
+        "src/mindmap.js": {
+          "bytesInOutput": 4886
+        },
         "src/core.js": {
-          "bytesInOutput": 132719
+          "bytesInOutput": 197291
         },
         "src/index.js": {
           "bytesInOutput": 0
         }
       },
-      "bytes": 142312
+      "bytes": 213149
     },
     "dist/index.cjs.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 254219
+      "bytes": 380653
     },
     "dist/index.cjs": {
       "imports": [
@@ -116,19 +130,22 @@
       "entryPoint": "src/index.js",
       "inputs": {
         "src/index.js": {
-          "bytesInOutput": 566
+          "bytesInOutput": 634
         },
         "src/vue.js": {
-          "bytesInOutput": 2880
+          "bytesInOutput": 4208
         },
         "src/layout.js": {
           "bytesInOutput": 6422
         },
+        "src/mindmap.js": {
+          "bytesInOutput": 4886
+        },
         "src/core.js": {
-          "bytesInOutput": 132719
+          "bytesInOutput": 197291
         }
       },
-      "bytes": 143502
+      "bytes": 214375
     }
   }
 }

package/dist/vd3-flowchart.css

@@ -114,6 +114,15 @@
   color: var(--vd-flowchart-muted);
 }
 
+/* The palette column is 88px wide; keep its title on one line. */
+.vd-flowchart-panel--palette .vd-flowchart-panel-title {
+  font-size: 0.72rem;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
 .vd-flowchart-palette {
   display: grid;
   grid-template-columns: 1fr;
@@ -371,6 +380,101 @@
   background: var(--vd-flowchart-canvas-bg);
 }
 
+.vd-flowchart-minimap {
+  position: absolute;
+  right: 0.75rem;
+  bottom: 0.75rem;
+  z-index: 4;
+  width: 180px;
+  height: 120px;
+  border: 1px solid var(--vd-flowchart-border);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--vd-flowchart-panel) 92%, transparent);
+  box-shadow: 0 8px 20px color-mix(in srgb, var(--vd-flowchart-text) 10%, transparent);
+  overflow: hidden;
+  cursor: pointer;
+  touch-action: none;
+}
+
+.vd-flowchart-minimap[hidden] {
+  display: none;
+}
+
+.vd-flowchart-minimap-svg {
+  display: block;
+}
+
+.vd-flowchart-minimap-node {
+  fill: color-mix(in srgb, var(--vd-flowchart-muted) 45%, transparent);
+}
+
+.vd-flowchart-minimap-node.is-selected {
+  fill: var(--vd-flowchart-accent);
+}
+
+.vd-flowchart-minimap-viewport {
+  fill: color-mix(in srgb, var(--vd-flowchart-accent) 12%, transparent);
+  stroke: var(--vd-flowchart-accent);
+  stroke-width: 1.25;
+}
+
+.vd-flowchart-shortcuts-btn {
+  font-size: 0.95rem;
+  font-weight: 700;
+}
+
+.vd-flowchart-shortcuts {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  z-index: 6;
+  box-sizing: border-box;
+  width: min(24rem, calc(100% - 1.5rem));
+  max-height: calc(100% - 1.5rem);
+  overflow-y: auto;
+  padding: 0.75rem 0.9rem;
+  border: 1px solid var(--vd-flowchart-border);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--vd-flowchart-panel) 96%, transparent);
+  box-shadow: 0 12px 26px color-mix(in srgb, var(--vd-flowchart-text) 14%, transparent);
+  color: var(--vd-flowchart-text);
+  font-size: 0.8rem;
+}
+
+.vd-flowchart-shortcuts[hidden] {
+  display: none;
+}
+
+.vd-flowchart-shortcuts-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.4rem;
+}
+
+.vd-flowchart-shortcuts-list {
+  display: grid;
+  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
+  gap: 0.4rem 0.75rem;
+  margin: 0;
+}
+
+.vd-flowchart-shortcuts-list dt,
+.vd-flowchart-shortcuts-list dd {
+  margin: 0;
+  padding: 0;
+  line-height: 1.35;
+}
+
+.vd-flowchart-shortcuts-list dt {
+  font-weight: 700;
+}
+
+.vd-flowchart-shortcuts-list dd {
+  color: var(--vd-flowchart-muted);
+}
+
 .vd-flowchart-svg {
   display: block;
   width: 100%;
@@ -507,21 +611,42 @@
   stroke: var(--vd-flowchart-accent);
   stroke-width: 2;
   vector-effect: non-scaling-stroke;
-  transition: opacity 120ms ease, transform 120ms ease, fill 120ms ease;
+  pointer-events: none;
+  transition: opacity 120ms ease, fill 120ms ease;
 }
 
-.vd-flowchart-port-group.is-visible {
+.vd-flowchart-port-plus {
+  fill: none;
+  stroke: var(--vd-flowchart-accent);
+  stroke-width: 1.75;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+/* Handles appear on node hover as well as on selection. Hidden during a node
+   drag or resize so they do not flicker under the pointer. */
+.vd-flowchart-port-group.is-visible,
+.vd-flowchart-node:hover:not(.is-dragging, .is-resizing) .vd-flowchart-port-group {
   pointer-events: auto;
   cursor: crosshair;
 }
 
-.vd-flowchart-port-group.is-visible .vd-flowchart-port {
+.vd-flowchart-port-group.is-visible .vd-flowchart-port,
+.vd-flowchart-node:hover:not(.is-dragging, .is-resizing) .vd-flowchart-port {
   opacity: 1;
 }
 
-.vd-flowchart-port-group.is-visible:hover .vd-flowchart-port {
-  transform: scale(1.08);
-  fill: color-mix(in srgb, var(--vd-flowchart-accent) 12%, var(--vd-bg-primary, #fcfbf7));
+/* Color only: a transform here would scale around the node origin and shift
+   the handle away from the pointer. */
+.vd-flowchart-port-group:hover .vd-flowchart-port {
+  fill: color-mix(in srgb, var(--vd-flowchart-accent) 22%, var(--vd-bg-primary, #fcfbf7));
+}
+
+.vd-flowchart-port-group:hover .vd-flowchart-port-plus {
+  opacity: 1;
 }
 
 .vd-flowchart-canvas.is-connecting .vd-flowchart-node:hover .vd-flowchart-node-shape {
@@ -529,14 +654,62 @@
   filter: none;
 }
 
-.vd-flowchart-canvas.is-connecting .vd-flowchart-port-group.is-visible .vd-flowchart-port,
-.vd-flowchart-canvas.is-arrow-tool .vd-flowchart-port-group.is-visible .vd-flowchart-port {
-  opacity: 1;
+.vd-flowchart-canvas.is-connecting .vd-flowchart-port-group:hover .vd-flowchart-port-plus,
+.vd-flowchart-canvas.is-arrow-tool .vd-flowchart-port-group:hover .vd-flowchart-port-plus {
+  opacity: 0;
 }
 
-.vd-flowchart-canvas.is-connecting .vd-flowchart-port-group.is-visible:hover .vd-flowchart-port,
-.vd-flowchart-canvas.is-arrow-tool .vd-flowchart-port-group.is-visible:hover .vd-flowchart-port {
-  transform: none;
+.vd-flowchart-collapse-toggle {
+  cursor: pointer;
+}
+
+.vd-flowchart-collapse-toggle circle {
+  fill: color-mix(in srgb, var(--vd-flowchart-panel) 92%, var(--vd-bg-primary, #fcfbf7));
+  stroke: var(--vd-flowchart-accent);
+  stroke-width: 1.5;
+  vector-effect: non-scaling-stroke;
+}
+
+.vd-flowchart-collapse-toggle.is-collapsed circle {
+  fill: var(--vd-flowchart-accent);
+}
+
+.vd-flowchart-collapse-toggle text {
+  fill: var(--vd-flowchart-accent);
+  font-family: var(--vd-flowchart-font);
+  font-weight: 700;
+  pointer-events: none;
+}
+
+.vd-flowchart-collapse-toggle.is-collapsed text {
+  fill: var(--vd-bg-primary, #fcfbf7);
+}
+
+.vd-flowchart-marquee {
+  fill: color-mix(in srgb, var(--vd-flowchart-accent) 10%, transparent);
+  stroke: var(--vd-flowchart-accent);
+  stroke-width: 1;
+  stroke-dasharray: 4 3;
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+}
+
+.vd-flowchart-guide {
+  stroke: var(--vd-flowchart-accent);
+  stroke-width: 1;
+  stroke-dasharray: 3 3;
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+}
+
+.vd-flowchart-selection-box {
+  fill: none;
+  stroke: var(--vd-flowchart-accent);
+  stroke-width: 1;
+  stroke-dasharray: 4 3;
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+  opacity: 0.7;
 }
 
 .vd-flowchart-edge-endpoint-hit {
@@ -599,6 +772,11 @@
   text-align: left;
 }
 
+.vd-flowchart-text-editor--edge {
+  font-weight: 500;
+  white-space: nowrap;
+}
+
 .vd-flowchart-text-editor--label {
   border-color: transparent;
   background: color-mix(in srgb, var(--vd-flowchart-panel) 82%, transparent);

package/dist/vue.d.ts

@@ -8,6 +8,7 @@ import type {
   VdFlowchart as VdFlowchartCore,
   LayoutMode,
   LayoutOptions,
+  FlowchartKeyboardShortcuts,
 } from './core';
 
 /** Loosely-typed document accepted by the `data` prop. */
@@ -32,6 +33,22 @@ export interface VdFlowchartProps {
   history?: boolean;
   /** Maximum number of history entries to retain. */
   historyLimit?: number;
+  /** Keyboard model on the focused canvas (default `'mindmap'`). */
+  keyboardShortcuts?: FlowchartKeyboardShortcuts;
+  /** Snap dragged nodes to alignment guides; Alt bypasses (default true). */
+  snapGuides?: boolean;
+  /** Show the overview minimap (default true). */
+  minimap?: boolean;
+  /** Re-run the current layout after keyboard or handle insertions (default false). */
+  autoLayout?: boolean;
+  /** Lowest camera scale. Defaults to 0.35. Set it together with `maxScale`. */
+  minScale?: number;
+  /** Highest camera scale. Defaults to 3. Set it together with `minScale`. */
+  maxScale?: number;
+  /** Smallest resizable-node side. Defaults to 56. Set it together with `maxNodeSize`. */
+  minNodeSize?: number;
+  /** Largest resizable-node side. Defaults to 420. Set it together with `minNodeSize`. */
+  maxNodeSize?: number;
 }
 
 export interface VdFlowchartEmits {
@@ -50,6 +67,7 @@ export interface VdFlowchartExposed {
   canUndo(): boolean;
   canRedo(): boolean;
   layout(mode?: LayoutMode, options?: LayoutOptions): void;
+  fitNode(nodeId: string, padding?: number): void;
 }
 
 /* eslint-disable @typescript-eslint/no-empty-object-type -- DefineComponent filler params */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanduo-oss/vd3-flowchart",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Vanduo Vue 3 flowchart editor — nodes, edges, layout, undo/redo, and a framework-agnostic core",
   "type": "module",
   "license": "MIT",
@@ -56,6 +56,7 @@
   },
   "devDependencies": {
     "@eslint/js": "10.0.1",
+    "@fission-ai/openspec": "1.14.3",
     "@playwright/test": "1.63.0",
     "@typescript-eslint/parser": "8.69.0",
     "@vue/test-utils": "2.5.0",
@@ -67,7 +68,8 @@
     "stylelint-config-standard": "40.0.0",
     "typescript": "6.0.3",
     "typescript-eslint": "8.69.0",
-    "vitest": "4.1.11",
+    "vite": "8.3.4",
+    "vitest": "4.1.12",
     "vue": "3.5.42"
   },
   "engines": {
@@ -84,6 +86,7 @@
     "test": "vitest run",
     "test:types": "tsc --noEmit -p tests/types/tsconfig.json",
     "test:e2e": "playwright test",
+    "release:check": "node scripts/release-check.mjs",
     "release": "pnpm run build && pnpm publish",
     "test:skills": "node scripts/check-skills.mjs"
   }

package/recipes/editor.vue

@@ -12,6 +12,8 @@ const document = ref<VdFlowchartDocument>({
 <template>
   <button type="button" @click="readonly = !readonly">Toggle read-only</button>
   <button type="button" :disabled="readonly" @click="editor?.undo()">Undo</button>
-  <VdFlowchart ref="editor" :data="document" :readonly="readonly" auto-fit
-    style="height: 560px" @change="document = $event.document" />
+  <button type="button" @click="editor?.fitNode('start')">Frame start</button>
+  <VdFlowchart ref="editor" :data="document" :readonly="readonly"
+    :min-scale="0.05" :max-scale="20" :min-node-size="6" :max-node-size="4800"
+    auto-fit style="height: 560px" @change="document = $event.document" />
 </template>