@vanduo-oss/vd3-flowchart 1.2.0 → 1.4.0

package/dist/meta.json

@@ -5,14 +5,24 @@
       "imports": [],
       "format": "esm"
     },
+    "src/mindmap.js": {
+      "bytes": 6603,
+      "imports": [],
+      "format": "esm"
+    },
     "src/core.js": {
-      "bytes": 127688,
+      "bytes": 196396,
       "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": 3278,
+      "bytes": 3981,
       "imports": [
         {
           "path": "vue",
@@ -38,7 +48,7 @@
       "format": "esm"
     },
     "src/index.js": {
-      "bytes": 479,
+      "bytes": 541,
       "imports": [
         {
           "path": "src/vue.js",
@@ -59,7 +69,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 233948
+      "bytes": 360394
     },
     "dist/index.js": {
       "imports": [
@@ -70,8 +80,10 @@
         }
       ],
       "exports": [
+        "FLOWCHART_DOCUMENT_VERSION",
         "FLOWCHART_EDGE_MARKERS",
         "FLOWCHART_EDGE_ROUTES",
+        "FLOWCHART_KEYBOARD_SHORTCUTS",
         "FLOWCHART_NODE_TYPES",
         "FLOWCHART_PORTS",
         "LAYOUT_MODES",
@@ -83,25 +95,28 @@
       "entryPoint": "src/index.js",
       "inputs": {
         "src/vue.js": {
-          "bytesInOutput": 2621
+          "bytesInOutput": 3238
         },
         "src/layout.js": {
           "bytesInOutput": 6422
         },
+        "src/mindmap.js": {
+          "bytesInOutput": 4886
+        },
         "src/core.js": {
-          "bytesInOutput": 121438
+          "bytesInOutput": 186928
         },
         "src/index.js": {
           "bytesInOutput": 0
         }
       },
-      "bytes": 130805
+      "bytes": 201879
     },
     "dist/index.cjs.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 234554
+      "bytes": 361074
     },
     "dist/index.cjs": {
       "imports": [
@@ -115,19 +130,22 @@
       "entryPoint": "src/index.js",
       "inputs": {
         "src/index.js": {
-          "bytesInOutput": 502
+          "bytesInOutput": 634
         },
         "src/vue.js": {
-          "bytesInOutput": 2684
+          "bytesInOutput": 3301
         },
         "src/layout.js": {
           "bytesInOutput": 6422
         },
+        "src/mindmap.js": {
+          "bytesInOutput": 4886
+        },
         "src/core.js": {
-          "bytesInOutput": 121438
+          "bytesInOutput": 186928
         }
       },
-      "bytes": 131961
+      "bytes": 203105
     }
   }
 }

package/dist/vd3-flowchart.css

@@ -44,7 +44,7 @@
 .vd-flowchart-shell {
   box-sizing: border-box;
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
   height: 100%;
   /* Fill the host only — a fixed min-height here overflowed short containers
      and clipped the bottom outline off-screen. */
@@ -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;
@@ -352,8 +361,7 @@
 .vd-flowchart-field input:focus-visible,
 .vd-flowchart-field select:focus-visible,
 .vd-flowchart-field textarea:focus-visible,
-.vd-flowchart-json textarea:focus-visible,
-.vd-flowchart-canvas:focus-visible {
+.vd-flowchart-json textarea:focus-visible {
   outline: 2px solid color-mix(in srgb, var(--vd-flowchart-accent) 72%, transparent);
   outline-offset: 2px;
 }
@@ -372,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%;
@@ -508,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 {
@@ -530,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 {
@@ -600,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);
@@ -727,3 +904,45 @@
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
+
+.vd-flowchart-outline {
+  max-height: 220px;
+  overflow: auto;
+  padding: 0.5rem 0.9rem;
+  border-top: 1px solid var(--vd-flowchart-border);
+  background: var(--vd-flowchart-panel);
+  font-size: 0.875rem;
+}
+
+.vd-flowchart-outline summary {
+  cursor: pointer;
+}
+
+.vd-flowchart-outline-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.vd-flowchart-host .vd-flowchart-outline select,
+.vd-flowchart-shell .vd-flowchart-outline select {
+  max-width: 16rem;
+  color: var(--vd-flowchart-text);
+  background: var(--vd-flowchart-surface);
+}
+
+.vd-flowchart-outline :focus-visible,
+.vd-flowchart-canvas:focus-visible {
+  outline: 2px solid var(--vd-flowchart-accent);
+  outline-offset: -2px;
+}
+
+.vd-flowchart-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

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,14 @@ 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;
 }
 
 export interface VdFlowchartEmits {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanduo-oss/vd3-flowchart",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Vanduo Vue 3 flowchart editor — nodes, edges, layout, undo/redo, and a framework-agnostic core",
   "type": "module",
   "license": "MIT",
@@ -28,7 +28,10 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./css": "./dist/vd3-flowchart.css",
+    "./css": {
+      "types": "./styles.d.ts",
+      "default": "./dist/vd3-flowchart.css"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -36,7 +39,9 @@
     "README.md",
     "SKILL.md",
     "CHANGELOG.md",
-    "LICENSE"
+    "LICENSE",
+    "recipes",
+    "styles.d.ts"
   ],
   "keywords": [
     "vanduo",
@@ -73,12 +78,13 @@
     "build": "node scripts/build.js",
     "clean": "rm -rf dist",
     "lint": "eslint .",
-    "format": "prettier --write \"src/**/*.{js,ts}\" \"scripts/**/*.js\" \"tests/**/*.{js,ts}\"",
-    "format:check": "prettier --check \"src/**/*.{js,ts}\" \"scripts/**/*.js\" \"tests/**/*.{js,ts}\"",
+    "format": "prettier --write \"src/**/*.{js,ts}\" \"scripts/**/*.{js,mjs}\" \"tests/**/*.{js,ts}\"",
+    "format:check": "prettier --check \"src/**/*.{js,ts}\" \"scripts/**/*.{js,mjs}\" \"tests/**/*.{js,ts}\"",
     "stylelint": "stylelint \"src/**/*.css\"",
     "test": "vitest run",
     "test:types": "tsc --noEmit -p tests/types/tsconfig.json",
     "test:e2e": "playwright test",
-    "release": "pnpm run build && pnpm publish"
+    "release": "pnpm run build && pnpm publish",
+    "test:skills": "node scripts/check-skills.mjs"
   }
 }

package/recipes/editor.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VdFlowchart, type VdFlowchartDocument, type VdFlowchartExposed } from '@vanduo-oss/vd3-flowchart';
+import '@vanduo-oss/vd3-flowchart/css';
+const editor = ref<VdFlowchartExposed | null>(null);
+const readonly = ref(false);
+const document = ref<VdFlowchartDocument>({
+  nodes: [{ id: 'start', text: 'Start', x: 40, y: 100 }, { id: 'end', text: 'End', x: 300, y: 100 }],
+  edges: [{ id: 'next', from: { nodeId: 'start', port: 'right' }, to: { nodeId: 'end', port: 'left' } }],
+});
+</script>
+<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" />
+</template>

package/styles.d.ts

@@ -0,0 +1,2 @@
+// TypeScript declaration for the side-effect stylesheet exports.
+export {};