From ce65c18634d37583375c7e746df39963bf3075b6 Mon Sep 17 00:00:00 2001
From: Vibhav Katre <vibhav@frappe.io>
Date: Sat, 18 Jul 2026 22:24:09 +0530
Subject: [PATCH] =?UTF-8?q?Frappe=20Draw:=20unified-canvas=20polish=20?=
 =?UTF-8?q?=E2=80=94=20minimap=20coverage=20+=20library=20type=20filter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Minimap: on a unified doc, the navigator now overviews ALL content — block
  shapes + whiteboard objects + the mind-map / flowchart frames (offset by their
  origin) — instead of only block shapes. (whiteboardObjectBoxes + per-frame
  layout, added as an isUnifiedDocument branch in items().)
- Library: add 'unified' (label "Drawing", the current default type) to
  DIAGRAM_TYPES, so unified diagrams are filterable in the home type filter and
  their tiles read "Drawing" instead of falling back to "Block".

Verified: build + 101 JS tests + live app — a unified doc with a block shape,
a pen stroke, a mind-map frame and a flowchart frame shows all of them in the
minimap (6 glyphs incl. viewport rect).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/canvas/Minimap.vue | 39 ++++++++++++++++++++++
 frontend/src/data/diagramTypes.js          |  3 ++
 2 files changed, 42 insertions(+)

diff --git a/frontend/src/components/canvas/Minimap.vue b/frontend/src/components/canvas/Minimap.vue
index 4b4fc89..3a3bce7 100644
--- a/frontend/src/components/canvas/Minimap.vue
+++ b/frontend/src/components/canvas/Minimap.vue
@@ -14,6 +14,8 @@ import { layoutMindMap } from '@/diagram/mindmapLayout.js'
 import { resolveNodeColor, nodeFill } from '@/diagram/mindmapColors.js'
 import { isRoot as isMindRoot } from '@/diagram/mindmapModel.js'
 import { nodeSize as flowchartNodeSize } from '@/diagram/flowchartModel.js'
+import { whiteboardObjectBoxes } from '@/diagram/whiteboardModel.js'
+import { isUnifiedDocument } from '@/diagram/schema.js'
 
 const store = useDiagramStore()
 const editorUi = useEditorUi()
@@ -67,6 +69,43 @@ function miniMindShape(shape) {
 // real `fill`, an optional `stroke`, and a `kind` the template renders — so the
 // overview looks like the diagram (colours + shapes), not flat grey boxes.
 const items = computed(() => {
+  // Unified canvas: overview ALL content — block shapes + whiteboard objects +
+  // the mind-map / flowchart frames (offset by their origin).
+  if (isUnifiedDocument(store.state)) {
+    const out = []
+    for (const s of store.state.shapes.filter(isVisible)) {
+      const b = axisAlignedBBox(s)
+      out.push({
+        id: `s-${s.id}`, x: b.x, y: b.y, w: b.w, h: b.h,
+        fill: s.fill && s.fill !== 'none' ? s.fill : '#CBD5E1',
+        stroke: s.border?.color || null, kind: miniKind(s.type),
+      })
+    }
+    const wb = store.state.whiteboard
+    if (wb) {
+      for (const o of whiteboardObjectBoxes(wb)) {
+        out.push({ id: `w-${o.id}`, ...o.box, fill: '#E2E8F0', stroke: '#94A3B8', kind: 'rect' })
+      }
+    }
+    const mm = store.state.mindmap
+    if (mm?.nodes?.length) {
+      const { positions } = layoutMindMap(mm)
+      const o = mm.origin || { x: 0, y: 0 }
+      for (const n of mm.nodes) {
+        const b = positions[n.id]
+        if (b) out.push({ id: `m-${n.id}`, x: b.x + o.x, y: b.y + o.y, w: b.w, h: b.h, fill: '#F3F3F3', stroke: '#CBD5E1', kind: 'rounded' })
+      }
+    }
+    const fc = store.state.flowchart
+    if (fc?.nodes?.length) {
+      const o = fc.origin || { x: 0, y: 0 }
+      for (const n of fc.nodes) {
+        const s = flowchartNodeSize(n)
+        out.push({ id: `f-${n.id}`, x: n.x + o.x, y: n.y + o.y, w: s.w, h: s.h, fill: n.fill && n.fill !== 'none' ? n.fill : '#EEF2F7', stroke: '#94A3B8', kind: 'rect' })
+      }
+    }
+    return out
+  }
   if (type.value === 'flowchart' && store.state.flowchart) {
     return store.state.flowchart.nodes.map((n) => {
       const s = flowchartNodeSize(n)
diff --git a/frontend/src/data/diagramTypes.js b/frontend/src/data/diagramTypes.js
index 1616791..8262df6 100644
--- a/frontend/src/data/diagramTypes.js
+++ b/frontend/src/data/diagramTypes.js
@@ -4,6 +4,9 @@
 // Icons match the new-diagram dialog cards so a diagram's type reads the same
 // everywhere it appears.
 export const DIAGRAM_TYPES = [
+  // `unified` is the current default (one canvas, all types). The four single
+  // types remain for the legacy diagrams created before canvas unification.
+  { value: 'unified', label: 'Drawing', icon: 'layout-template' },
   { value: 'block', label: 'Block', icon: 'box' },
   { value: 'mindmap', label: 'Mind map', icon: 'git-branch' },
   { value: 'flowchart', label: 'Flowchart', icon: 'activity' },