From 3fb6252591d97bd21687f17587c9b1706fbf5e08 Mon Sep 17 00:00:00 2001
From: Vibhav Katre <vibhav@frappe.io>
Date: Mon, 20 Jul 2026 10:58:05 +0530
Subject: [PATCH] Frappe Draw: unified frames no longer land stacked on insert
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A new "Drawing" (unified) diagram is created via
createDiagramDocument(undefined, 'unified') from the home "New diagram" flow.
That factory left both auto-layout frames at their model-default origin (0,0), so
inserting a mind map and a flowchart dropped them on top of each other. The
distinct origins only lived in createUnifiedDocument(), which the create flow
never calls.

Fix: seed the distinct frame origins (mind map 600,200 · flowchart 600,700) inside
createDiagramDocument itself for a unified type, so every unified doc gets
separated frames however it's built. createUnifiedDocument now just delegates.
Frames stay freely movable afterwards.

- schema.js: applyUnifiedFrameOrigins() called from createDiagramDocument when
  diagramType === unified; createUnifiedDocument delegates (no duplicate constants).
- unifiedDocument.test.js: assert the plain factory (the actual create-flow path)
  also seeds the distinct origins — the existing test only covered
  createUnifiedDocument, which is why the stacking slipped through.

Verified: vitest 101 pass; Playwright drive of the real app (create -> insert mind
map -> insert flowchart) shows the two frames spatially separated instead of
overlapping.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/diagram/schema.js               | 25 +++++++++++++-------
 frontend/src/diagram/unifiedDocument.test.js |  9 +++++++
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/frontend/src/diagram/schema.js b/frontend/src/diagram/schema.js
index 4657894..872ceda 100644
--- a/frontend/src/diagram/schema.js
+++ b/frontend/src/diagram/schema.js
@@ -34,7 +34,7 @@ const NO_COLOR = null
 
 export function createDiagramDocument(presetName = DEFAULT_PRESET_NAME, diagramType = DEFAULT_DIAGRAM_TYPE) {
   const preset = findPreset(presetName)
-  return {
+  const document = {
     schemaVersion: SCHEMA_VERSION,
     diagramType,
     canvas: {
@@ -54,6 +54,19 @@ export function createDiagramDocument(presetName = DEFAULT_PRESET_NAME, diagramT
     flowchart: usesSubModel('flowchart', diagramType) ? createFlowchart() : null,
     whiteboard: usesSubModel('whiteboard', diagramType) ? createWhiteboard() : null,
   }
+  // A unified canvas holds every frame at once, so seed distinct frame origins —
+  // otherwise the mind map and flowchart both default to (0,0) and land stacked
+  // when inserted. They stay freely movable afterwards.
+  if (diagramType === UNIFIED_DIAGRAM_TYPE) applyUnifiedFrameOrigins(document)
+  return document
+}
+
+// The default spatial layout of a fresh unified canvas: mind map upper-centre,
+// flowchart well below it, both clear of the block substrate around (0,0).
+function applyUnifiedFrameOrigins(document) {
+  if (document.mindmap) document.mindmap.origin = { x: 600, y: 200 }
+  if (document.flowchart) document.flowchart.origin = { x: 600, y: 700 }
+  return document
 }
 
 // Whether a document of `diagramType` should carry the given sub-model: its own
@@ -63,14 +76,10 @@ function usesSubModel(subModel, diagramType) {
 }
 
 // Create a blank unified-canvas document (shared substrate + all sub-models).
-// The auto-layout sub-models get distinct default frame origins so their content
-// doesn't stack on top of the block substrate (which lives around 0,0) or on each
-// other once they're populated.
+// createDiagramDocument already seeds the distinct frame origins for a unified
+// type; this stays as a named, intent-revealing entry point.
 export function createUnifiedDocument(presetName = DEFAULT_PRESET_NAME) {
-  const document = createDiagramDocument(presetName, UNIFIED_DIAGRAM_TYPE)
-  document.mindmap.origin = { x: 600, y: 200 }
-  document.flowchart.origin = { x: 600, y: 700 }
-  return document
+  return createDiagramDocument(presetName, UNIFIED_DIAGRAM_TYPE)
 }
 
 // Parse a document that may arrive as a JSON string (from the API) or an object,
diff --git a/frontend/src/diagram/unifiedDocument.test.js b/frontend/src/diagram/unifiedDocument.test.js
index c081325..3024fd8 100644
--- a/frontend/src/diagram/unifiedDocument.test.js
+++ b/frontend/src/diagram/unifiedDocument.test.js
@@ -39,6 +39,15 @@ describe('unified document', () => {
     expect(doc.flowchart.origin).toEqual({ x: 600, y: 700 })
     expect(doc.mindmap.origin).not.toEqual(doc.flowchart.origin)
   })
+
+  it('seeds the distinct origins via the plain factory too (the create-flow path)', () => {
+    // The home "New diagram" flow builds the doc with
+    // createDiagramDocument(undefined, 'unified') — NOT createUnifiedDocument — so
+    // the offsets must live in the factory, else the frames land stacked at (0,0).
+    const doc = createDiagramDocument(undefined, UNIFIED_DIAGRAM_TYPE)
+    expect(doc.mindmap.origin).toEqual({ x: 600, y: 200 })
+    expect(doc.flowchart.origin).toEqual({ x: 600, y: 700 })
+  })
 })
 
 describe('legacy single-type documents are unchanged', () => {