what we need: scroll to zoom like cad

• we want to mimic the user interaction of existing tools, such as Autodesk's Revit, AutoCAD for ease of transition to our product.

• these tools scrolling the wheel means zooming instead of scrolling/panning.

• relevant issues: #1344

what we knew:

• currently in tldraw: the pinch, wheel and pointer get special treatment from tldraw event (i think)

  • these kind of event all related to zooming and such

  • in wheel:

    • wheel event will pan before emit info to user state chart to handle

    • holding ctrl/alt will zoom and immediately return without emiting anything to user state chart to handle

what we tried:

• handling event using onWheel provided by tldraw api:

  • not working as intended due to editor intercept wheel event and pan before emiting info details to us

  • 

• patching Editor.ts:

  • i tried inverting the logic of ctrl/alt by removing ! before

  • Of course not working due to inability to comprehend the magic inside tldraw lol 😂

tldraw is a whiteboard app built upon html and svg not canvas

• scale and translate both use css transform: no canvas math here

• every shapes are represent with a component and an indicator using svg to draw the outline of its shape

  • component of the shape can be any kind of markup(jsx) e.g div, button, even an iframe point to another site or another html

  • svg is there to serialize, to indicate component

  • readmore: https://canary.tldraw.dev/docs/shapes#The-shape-object

technical stack aka stuff tldraw use

• react 🙁

• @tldraw/signia: primitive signal home grown by tldraw team to build

• @tldraw/state: built upon @tldraw/sigina

• @tldraw/editor: core engine which tldraw team nicely split out for normie like me to poke around, and underlying of @tldraw/tldraw

  • this package purpose is for builder (like me and you) to build our own tldraw

• @tldraw/tldraw: https://tldraw.com app, act as a demo showcasing capabilities of what @tldraw/editor and friends can do

what is components, default components?

• a set of components layer on top each other and render together to provide some functionality for the canvas

  • ref: canvas.ts editor.css

  • canvas split into 3 layers: background, camera/overlay part of the canvas, canvas

    • background/z-index:100: have background component, grid line, and ui debug log, svg defs for other shapes to reference to (cursor shape too)

    • canvas/z-index:200: where shapes/z-index:300 get rendered, and things that follow shapes like selection background

    • overlay/z-index:400: foremost layer that have components that you can interact with shapes behind like

      • Handles: to manipulate shapes, scale, squish, expand, rotate

      • Selection Foreground: to highlight selected shaped, create handles to manipulate

• notable, necessary components: Background, SelectionForeground, Handles, OnTheCanvas, PositionOnCanvas,

tools: set of tools to interact with canvas, to create new shape, move around, select stuff, etc…

• ref: canary docs

• think about tools like a state chart where one tool state can transition to another through action/event

• 

• notable, necessary tools: Selection, Zoom, Hand, Line, Stamp

shape: things that exist on canvas

• internal it’s just a JSON record carry some information of how to render its shape onto the canvas

• tldraw have some default shapes but we can create our own using ShapeUtils

• notable, regularly uses property of ShapeUtils:

  • props

  • coordinates, rotation of shape on canvas: x, y, rotation

  • flags: hideRotateHandles, hideResizeHandles