{ "tldrawFileFormatVersion": 1, "schema": { "schemaVersion": 2, "sequences": { "com.tldraw.store": 5, "com.tldraw.asset": 1, "com.tldraw.camera": 1, "com.tldraw.document": 2, "com.tldraw.instance": 26, "com.tldraw.instance_page_state": 5, "com.tldraw.page": 1, "com.tldraw.instance_presence": 6, "com.tldraw.pointer": 1, "com.tldraw.shape": 4, "com.tldraw.user": 1, "com.tldraw.asset.image": 6, "com.tldraw.asset.video": 5, "com.tldraw.asset.bookmark": 2, "com.tldraw.shape.group": 0, "com.tldraw.shape.text": 4, "com.tldraw.shape.bookmark": 2, "com.tldraw.shape.draw": 5, "com.tldraw.shape.geo": 12, "com.tldraw.shape.note": 13, "com.tldraw.shape.line": 5, "com.tldraw.shape.frame": 1, "com.tldraw.shape.arrow": 8, "com.tldraw.shape.highlight": 4, "com.tldraw.shape.embed": 4, "com.tldraw.shape.image": 5, "com.tldraw.shape.video": 4, "com.tldraw.binding.arrow": 1 } }, "records": [ { "x": 1360, "y": 960, "rotation": 0, "isLocked": false, "opacity": 1, "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "component", "elementId": "light", "actions": [ "Day shows the surface color of each lume treatment", "Lume shot dims scene lights and enables emission", "Metals stay dark; the camera and design stay put" ], "errors": [ "If the light mode is unknown, reject the change." ], "evidence": [ "src/lume-lighting.js", "src/lume-regions.js" ] } }, "id": "shape:architecture-muxomdhx-component-light", "type": "geo", "parentId": "page:page", "index": "a6L02", "props": { "geo": "rectangle", "flipX": false, "flipY": false, "dash": "solid", "url": "", "w": 440, "h": 438, "growY": 0, "scale": 1, "labelColor": "black", "color": "blue", "fill": "none", "size": "m", "font": "sans", "align": "start", "verticalAlign": "start", "richText": { "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "text", "text": "Change the lighting" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "lume-lighting.js + lume-regions.js" } ] }, { "type": "paragraph", "content": [] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Day shows the surface color of each lume treatment" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Lume shot dims scene lights and enables emission" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Metals stay dark; the camera and design stay put" } ] }, { "type": "paragraph", "content": [] }, { "type": "paragraph", "content": [ { "type": "text", "text": "If this fails: If the light mode is unknown, reject the change." } ] } ] } }, "typeName": "shape" }, { "x": 0, "y": 0, "z": 1, "meta": {}, "id": "camera:page:page", "typeName": "camera" }, { "x": 60, "y": 20, "rotation": 0, "isLocked": false, "opacity": 1, "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "title" } }, "id": "shape:architecture-muxomdhx-title", "type": "text", "parentId": "page:page", "index": "a0xBb", "props": { "color": "black", "size": "xl", "font": "sans", "textAlign": "start", "w": 1740, "richText": { "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "text", "text": "3. What happens when you change the view" } ] } ] }, "scale": 1, "autoSize": false }, "typeName": "shape" }, { "x": 60, "y": 200, "rotation": 0, "isLocked": false, "opacity": 1, "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "component", "elementId": "input", "actions": [ "Drag or zoom; choose Front, Back or 3/4", "Choose Assembly, On wrist or On stand", "Use Explode, View a part, Day or Lume shot" ], "errors": [], "evidence": [ "src/editor.js", "src/editor-template.html" ] } }, "id": "shape:architecture-muxomdhx-component-input", "type": "geo", "parentId": "page:page", "index": "a1gQE", "props": { "geo": "rectangle", "flipX": false, "flipY": false, "dash": "solid", "url": "", "w": 440, "h": 438, "growY": 0, "scale": 1, "labelColor": "black", "color": "blue", "fill": "none", "size": "m", "font": "sans", "align": "start", "verticalAlign": "start", "richText": { "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "text", "text": "You use a view control" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "editor.js" } ] }, { "type": "paragraph", "content": [] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Drag or zoom; choose Front, Back or 3/4" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Choose Assembly, On wrist or On stand" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Use Explode, View a part, Day or Lume shot" } ] } ] } }, "typeName": "shape" }, { "meta": {}, "id": "page:page", "name": "Page 1", "index": "a1", "typeName": "page" }, { "gridSize": 10, "name": "view-controls-flow", "meta": {}, "id": "document:document", "typeName": "document" }, { "followingUserId": null, "opacityForNextShape": 1, "stylesForNextShape": {}, "brush": null, "scribbles": [], "cursor": { "type": "default", "rotation": 0 }, "isFocusMode": false, "exportBackground": true, "isDebugMode": false, "isToolLocked": false, "screenBounds": { "x": 0, "y": 0, "w": 1080, "h": 720 }, "insets": [ false, false, false, false ], "zoomBrush": null, "isGridMode": false, "isPenMode": false, "chatMessage": "", "isChatting": false, "highlightedUserIds": [], "isFocused": false, "devicePixelRatio": 1, "isCoarsePointer": false, "isHoveringCanvas": null, "openMenus": [], "isChangingStyle": false, "isReadonly": false, "meta": {}, "duplicateProps": null, "cameraState": "idle", "id": "instance:instance", "currentPageId": "page:page", "typeName": "instance" }, { "x": 1360, "y": 200, "rotation": 0, "isLocked": false, "opacity": 1, "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "component", "elementId": "draw", "actions": [ "Draw the watch at the current angle and size", "In darkness, only designated luminous areas glow", "Use simpler glow rendering on narrow screens" ], "errors": [ "If glow rendering fails, draw without the extra halo." ], "evidence": [ "src/editor.js", "src/lume-glow.js" ] } }, "id": "shape:architecture-muxomdhx-component-draw", "type": "geo", "parentId": "page:page", "index": "a3CLQ", "props": { "geo": "rectangle", "flipX": false, "flipY": false, "dash": "solid", "url": "", "w": 440, "h": 438, "growY": 0, "scale": 1, "labelColor": "black", "color": "blue", "fill": "none", "size": "m", "font": "sans", "align": "start", "verticalAlign": "start", "richText": { "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "text", "text": "Draw the next frame" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "editor.js" } ] }, { "type": "paragraph", "content": [] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Draw the watch at the current angle and size" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "In darkness, only designated luminous areas glow" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Use simpler glow rendering on narrow screens" } ] }, { "type": "paragraph", "content": [] }, { "type": "paragraph", "content": [ { "type": "text", "text": "If this fails: If glow rendering fails, draw without the extra halo." } ] } ] } }, "typeName": "shape" }, { "x": 0, "y": 0, "lastActivityTimestamp": 0, "meta": {}, "id": "pointer:p7LU820uPB-0C3uvC4Uzb", "typeName": "pointer" }, { "x": 710, "y": 200, "rotation": 0, "isLocked": false, "opacity": 1, "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "component", "elementId": "state", "actions": [ "Keep viewing settings apart from selected parts", "Send each action to its camera or display helper", "Reset view restores the normal viewing state" ], "errors": [], "evidence": [ "src/editor.js", "src/view-camera.js" ] } }, "id": "shape:architecture-muxomdhx-component-state", "type": "geo", "parentId": "page:page", "index": "a229E", "props": { "geo": "rectangle", "flipX": false, "flipY": false, "dash": "solid", "url": "", "w": 440, "h": 438, "growY": 0, "scale": 1, "labelColor": "black", "color": "blue", "fill": "none", "size": "m", "font": "sans", "align": "start", "verticalAlign": "start", "richText": { "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "text", "text": "Update the view settings" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "editor.js" } ] }, { "type": "paragraph", "content": [] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Keep viewing settings apart from selected parts" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Send each action to its camera or display helper" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Reset view restores the normal viewing state" } ] } ] } }, "typeName": "shape" }, { "x": 60, "y": 960, "rotation": 0, "isLocked": false, "opacity": 1, "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "component", "elementId": "camera", "actions": [ "Rotate and frame the watch without changing it", "View a part hides the rest for inspection", "Return to the whole watch with its design intact" ], "errors": [], "evidence": [ "src/view-camera.js", "src/inspection.js" ] } }, "id": "shape:architecture-muxomdhx-component-camera", "type": "geo", "parentId": "page:page", "index": "a4xIM", "props": { "geo": "rectangle", "flipX": false, "flipY": false, "dash": "solid", "url": "", "w": 440, "h": 360, "growY": 0, "scale": 1, "labelColor": "black", "color": "blue", "fill": "none", "size": "m", "font": "sans", "align": "start", "verticalAlign": "start", "richText": { "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "text", "text": "Camera and part inspection" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "view-camera.js + inspection.js" } ] }, { "type": "paragraph", "content": [] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Rotate and frame the watch without changing it" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "View a part hides the rest for inspection" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Return to the whole watch with its design intact" } ] } ] } }, "typeName": "shape" }, { "x": 710, "y": 960, "rotation": 0, "isLocked": false, "opacity": 1, "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "component", "elementId": "assembly", "actions": [ "Explode moves parts between their authored poses", "Wrist and stand bend the band for presentation", "Increasing Explode returns to Assembly mode" ], "errors": [ "If the requested mode or amount is invalid, reject it." ], "evidence": [ "src/assembly-controller.js", "src/presentation.js" ] } }, "id": "shape:architecture-muxomdhx-component-assembly", "type": "geo", "parentId": "page:page", "index": "a5oWz", "props": { "geo": "rectangle", "flipX": false, "flipY": false, "dash": "solid", "url": "", "w": 440, "h": 438, "growY": 0, "scale": 1, "labelColor": "black", "color": "blue", "fill": "none", "size": "m", "font": "sans", "align": "start", "verticalAlign": "start", "richText": { "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "text", "text": "Move the parts" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "assembly-controller.js" } ] }, { "type": "paragraph", "content": [] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Explode moves parts between their authored poses" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Wrist and stand bend the band for presentation" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Increasing Explode returns to Assembly mode" } ] }, { "type": "paragraph", "content": [] }, { "type": "paragraph", "content": [ { "type": "text", "text": "If this fails: If the requested mode or amount is invalid, reject it." } ] } ] } }, "typeName": "shape" }, { "editingShapeId": null, "croppingShapeId": null, "selectedShapeIds": [], "hoveredShapeId": null, "erasingShapeIds": [], "hintingShapeIds": [], "focusedGroupId": null, "meta": {}, "id": "instance_page_state:riez48mvDmMhp3WADWWqC", "pageId": "page:page", "typeName": "instance_page_state" }, { "x": 500, "y": 419, "rotation": 0, "isLocked": false, "opacity": 1, "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "connection", "elementId": "input->state:0", "from": "input", "to": "state", "call": "view action", "evidence": [] } }, "id": "shape:view-controls-flow-edge-0", "type": "arrow", "parentId": "page:page", "index": "aP", "props": { "kind": "elbow", "labelColor": "black", "color": "black", "fill": "none", "dash": "solid", "size": "m", "arrowheadStart": "none", "arrowheadEnd": "arrow", "font": "sans", "start": { "x": 0, "y": 0 }, "end": { "x": 210, "y": 0 }, "bend": 0, "richText": { "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "text", "text": "view action" } ] } ] }, "labelPosition": 0.5, "scale": 1, "elbowMidPoint": 0.5 }, "typeName": "shape" }, { "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "connection", "elementId": "input->state:0", "from": "input", "to": "state", "call": "view action", "evidence": [] } }, "id": "binding:view-controls-flow-0-0", "type": "arrow", "fromId": "shape:view-controls-flow-edge-0", "toId": "shape:architecture-muxomdhx-component-input", "props": { "terminal": "start", "normalizedAnchor": { "x": 1, "y": 0.5 }, "isExact": false, "isPrecise": true, "snap": "edge" }, "typeName": "binding" }, { "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "connection", "elementId": "input->state:0", "from": "input", "to": "state", "call": "view action", "evidence": [] } }, "id": "binding:view-controls-flow-0-1", "type": "arrow", "fromId": "shape:view-controls-flow-edge-0", "toId": "shape:architecture-muxomdhx-component-state", "props": { "terminal": "end", "normalizedAnchor": { "x": 0, "y": 0.5 }, "isExact": false, "isPrecise": true, "snap": "edge" }, "typeName": "binding" }, { "x": 1062, "y": 638, "rotation": 0, "isLocked": false, "opacity": 1, "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "connection", "elementId": "input->state:0", "from": "state", "to": "draw", "call": "redraw", "evidence": [] } }, "id": "shape:view-controls-flow-edge-1", "type": "arrow", "parentId": "page:page", "index": "aQ", "props": { "kind": "elbow", "labelColor": "black", "color": "black", "fill": "none", "dash": "solid", "size": "m", "arrowheadStart": "none", "arrowheadEnd": "arrow", "font": "sans", "start": { "x": 0, "y": 0 }, "end": { "x": 518, "y": -438 }, "bend": 0, "richText": { "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "text", "text": "redraw" } ] } ] }, "labelPosition": 0.5, "scale": 1, "elbowMidPoint": 0.5 }, "typeName": "shape" }, { "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "connection", "elementId": "input->state:0", "from": "input", "to": "state", "call": "view action", "evidence": [] } }, "id": "binding:view-controls-flow-1-0", "type": "arrow", "fromId": "shape:view-controls-flow-edge-1", "toId": "shape:architecture-muxomdhx-component-state", "props": { "terminal": "start", "normalizedAnchor": { "x": 0.8, "y": 1 }, "isExact": false, "isPrecise": true, "snap": "edge" }, "typeName": "binding" }, { "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "connection", "elementId": "input->state:0", "from": "input", "to": "state", "call": "view action", "evidence": [] } }, "id": "binding:view-controls-flow-1-1", "type": "arrow", "fromId": "shape:view-controls-flow-edge-1", "toId": "shape:architecture-muxomdhx-component-draw", "props": { "terminal": "end", "normalizedAnchor": { "x": 0.5, "y": 0 }, "isExact": false, "isPrecise": true, "snap": "edge" }, "typeName": "binding" }, { "x": 798, "y": 638, "rotation": 0, "isLocked": false, "opacity": 1, "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "connection", "elementId": "input->state:0", "from": "state", "to": "camera", "call": "angle / part", "evidence": [] } }, "id": "shape:view-controls-flow-edge-2", "type": "arrow", "parentId": "page:page", "index": "aR", "props": { "kind": "elbow", "labelColor": "black", "color": "black", "fill": "none", "dash": "solid", "size": "m", "arrowheadStart": "none", "arrowheadEnd": "arrow", "font": "sans", "start": { "x": 0, "y": 0 }, "end": { "x": -518, "y": 322 }, "bend": 0, "richText": { "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "text", "text": "angle / part" } ] } ] }, "labelPosition": 0.5, "scale": 1, "elbowMidPoint": 0.5 }, "typeName": "shape" }, { "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "connection", "elementId": "input->state:0", "from": "input", "to": "state", "call": "view action", "evidence": [] } }, "id": "binding:view-controls-flow-2-0", "type": "arrow", "fromId": "shape:view-controls-flow-edge-2", "toId": "shape:architecture-muxomdhx-component-state", "props": { "terminal": "start", "normalizedAnchor": { "x": 0.2, "y": 1 }, "isExact": false, "isPrecise": true, "snap": "edge" }, "typeName": "binding" }, { "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "connection", "elementId": "input->state:0", "from": "input", "to": "state", "call": "view action", "evidence": [] } }, "id": "binding:view-controls-flow-2-1", "type": "arrow", "fromId": "shape:view-controls-flow-edge-2", "toId": "shape:architecture-muxomdhx-component-camera", "props": { "terminal": "end", "normalizedAnchor": { "x": 0.5, "y": 0 }, "isExact": false, "isPrecise": true, "snap": "edge" }, "typeName": "binding" }, { "x": 930, "y": 638, "rotation": 0, "isLocked": false, "opacity": 1, "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "connection", "elementId": "input->state:0", "from": "state", "to": "assembly", "call": "pose", "evidence": [] } }, "id": "shape:view-controls-flow-edge-3", "type": "arrow", "parentId": "page:page", "index": "aS", "props": { "kind": "elbow", "labelColor": "black", "color": "black", "fill": "none", "dash": "solid", "size": "m", "arrowheadStart": "none", "arrowheadEnd": "arrow", "font": "sans", "start": { "x": 0, "y": 0 }, "end": { "x": 0, "y": 322 }, "bend": 0, "richText": { "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "text", "text": "pose" } ] } ] }, "labelPosition": 0.5, "scale": 1, "elbowMidPoint": 0.5 }, "typeName": "shape" }, { "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "connection", "elementId": "input->state:0", "from": "input", "to": "state", "call": "view action", "evidence": [] } }, "id": "binding:view-controls-flow-3-0", "type": "arrow", "fromId": "shape:view-controls-flow-edge-3", "toId": "shape:architecture-muxomdhx-component-state", "props": { "terminal": "start", "normalizedAnchor": { "x": 0.5, "y": 1 }, "isExact": false, "isPrecise": true, "snap": "edge" }, "typeName": "binding" }, { "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "connection", "elementId": "input->state:0", "from": "input", "to": "state", "call": "view action", "evidence": [] } }, "id": "binding:view-controls-flow-3-1", "type": "arrow", "fromId": "shape:view-controls-flow-edge-3", "toId": "shape:architecture-muxomdhx-component-assembly", "props": { "terminal": "end", "normalizedAnchor": { "x": 0.5, "y": 0 }, "isExact": false, "isPrecise": true, "snap": "edge" }, "typeName": "binding" }, { "x": 1580, "y": 638, "rotation": 0, "isLocked": false, "opacity": 1, "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "connection", "elementId": "input->state:0", "from": "draw", "to": "light", "call": "Day / Lume", "evidence": [] } }, "id": "shape:view-controls-flow-edge-4", "type": "arrow", "parentId": "page:page", "index": "aT", "props": { "kind": "elbow", "labelColor": "black", "color": "black", "fill": "none", "dash": "solid", "size": "m", "arrowheadStart": "none", "arrowheadEnd": "arrow", "font": "sans", "start": { "x": 0, "y": 0 }, "end": { "x": 0, "y": 322 }, "bend": 0, "richText": { "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "text", "text": "Day / Lume" } ] } ] }, "labelPosition": 0.5, "scale": 1, "elbowMidPoint": 0.5 }, "typeName": "shape" }, { "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "connection", "elementId": "input->state:0", "from": "input", "to": "state", "call": "view action", "evidence": [] } }, "id": "binding:view-controls-flow-4-0", "type": "arrow", "fromId": "shape:view-controls-flow-edge-4", "toId": "shape:architecture-muxomdhx-component-draw", "props": { "terminal": "start", "normalizedAnchor": { "x": 0.5, "y": 1 }, "isExact": false, "isPrecise": true, "snap": "edge" }, "typeName": "binding" }, { "meta": { "tldrawMcp": { "diagramId": "architecture-muxomdhx", "diagramType": "architecture", "metadataVersion": 2, "kind": "connection", "elementId": "input->state:0", "from": "input", "to": "state", "call": "view action", "evidence": [] } }, "id": "binding:view-controls-flow-4-1", "type": "arrow", "fromId": "shape:view-controls-flow-edge-4", "toId": "shape:architecture-muxomdhx-component-light", "props": { "terminal": "end", "normalizedAnchor": { "x": 0.5, "y": 0 }, "isExact": false, "isPrecise": true, "snap": "edge" }, "typeName": "binding" } ] }