Fix zoom and paste for embedded shapes

packages/core/src/components/canvas/canvas.tsx

@@ -61,26 +61,15 @@ export function Canvas<T extends TLShape, M extends Record<string, unknown>>({
 
   usePreventNavigation(rCanvas, inputs.bounds.width)
 
-  const events = useCanvasEvents()
-
   useCameraCss(rLayer, rContainer, pageState)
 
-  const preventScrolling = React.useCallback((e: React.UIEvent<HTMLDivElement, UIEvent>) => {
-    e.preventDefault()
-    // e.currentTarget.scrollTo(0, 0)
-  }, [])
-
   useKeyEvents()
 
+  const events = useCanvasEvents()
+
   return (
     <div id={id} className="tl-container" ref={rContainer}>
-      <div
-        id="canvas"
-        className="tl-absolute tl-canvas"
-        ref={rCanvas}
-        onScroll={preventScrolling}
-        {...events}
-      >
+      <div id="canvas" className="tl-absolute tl-canvas" ref={rCanvas} {...events}>
         <ErrorBoundary FallbackComponent={ErrorFallback} onReset={resetError}>
           <div ref={rLayer} className="tl-absolute tl-layer">
             <Page

packages/dev/src/embedded.tsx

@@ -7,24 +7,24 @@ export default function Embedded(): JSX.Element {
       <div
         style={{
           position: 'relative',
-          width: 'auto',
+          width: '100%',
           height: '500px',
           overflow: 'hidden',
           marginBottom: '32px',
         }}
       >
-        <TLDraw id="small3" />
+        <TLDraw id="small5" />
       </div>
 
       <div
         style={{
           position: 'relative',
-          width: 'auto',
+          width: '100%',
           height: '500px',
           overflow: 'hidden',
         }}
       >
-        <TLDraw id="small4" />
+        <TLDraw id="small6" />
       </div>
     </div>
   )

packages/dev/src/styles.css

@@ -4,8 +4,6 @@ html,
 }
 
 body {
-  position: fixed;
-  overflow: hidden;
   overscroll-behavior: none;
   margin: 0px;
   padding: 0px;

packages/tldraw/src/state/tlstate.ts

@@ -162,7 +162,7 @@ export class TLDrawState extends StateManager<Data> {
     onChange?: (tlstate: TLDrawState, data: Data, reason: string) => void,
     onMount?: (tlstate: TLDrawState) => void
   ) {
-    super(defaultState, id, 4, (next, prev) => ({
+    super(defaultState, id, 10, (next, prev) => ({
       ...next,
       document: prev.document,
     }))
@@ -572,6 +572,7 @@ export class TLDrawState extends StateManager<Data> {
     this.session = undefined
     this.selectedGroupId = undefined
     this.currentTool.setStatus(TLDrawStatus.Idle)
+    this.pasteInfo.offset = [0, 0]
     this.resetHistory()
       .clearSelectHistory()
       .loadDocument(defaultDocument)
@@ -1126,15 +1127,21 @@ export class TLDrawState extends StateManager<Data> {
 
       let center = Vec.round(this.getPagePoint(point || this.centerPoint))
 
+      this.createShapes({
+        id: 'temp',
+        type: TLDrawShapeType.Ellipse,
+        point: center,
+      })
+
       if (
         Vec.dist(center, this.pasteInfo.center) < 2 ||
         Vec.dist(center, Vec.round(Utils.getBoundsCenter(commonBounds))) < 2
       ) {
+        center = Vec.add(center, this.pasteInfo.offset)
         this.pasteInfo.offset = Vec.add(this.pasteInfo.offset, [
           this.state.settings.nudgeDistanceLarge,
           this.state.settings.nudgeDistanceLarge,
         ])
-        center = Vec.add(center, this.pasteInfo.offset)
       } else {
         this.pasteInfo.center = center
         this.pasteInfo.offset = [0, 0]
@@ -2347,6 +2354,6 @@ export class TLDrawState extends StateManager<Data> {
   }
 
   get centerPoint() {
-    return Vec.round(Utils.getBoundsCenter(this.bounds))
+    return Vec.round([this.bounds.width / 2, this.bounds.height / 2])
   }
 }