fix: quick click to reset zoom

tldraw/apps/tldraw-logseq/src/components/Button/Button.tsx

@@ -5,5 +5,5 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
 }
 
 export function Button(props: ButtonProps) {
-  return <button className="button" {...props} />
+  return <button className="tl-button" {...props} />
 }

tldraw/apps/tldraw-logseq/src/lib/tools/LogseqPortalTool/states/CreatingState.tsx

@@ -29,6 +29,9 @@ export class CreatingState extends TLToolState<
       this.creatingShape = shape
       this.app.currentPage.addShapes(shape)
       this.app.setEditingShape(shape)
+      if (this.app.viewport.camera.zoom < 0.8 || this.app.viewport.camera.zoom > 1.2) {
+        this.app.api.resetZoomToCursor()
+      }
     })
   }
 

tldraw/apps/tldraw-logseq/src/styles.css

@@ -248,7 +248,7 @@
   pointer-events: all;
 }
 
-.tl-primary-tools .button {
+.tl-primary-tools .tl-button {
   position: relative;
   height: 36px;
   width: 36px;
@@ -264,16 +264,16 @@
   color: var(--ls-secondary-text-color);
 }
 
-.tl-primary-tools .button:hover {
+.tl-primary-tools .tl-button:hover {
   background-color: var(--color-hover);
 }
 
-.tl-primary-tools .button[data-selected='true'] {
+.tl-primary-tools .tl-button[data-selected='true'] {
   background-color: var(--color-selectedFill);
   color: var(--color-selectedContrast);
 }
 
-.floating-panel[data-tool-locked='true'] > .button[data-selected='true']::after {
+.floating-panel[data-tool-locked='true'] > .tl-button[data-selected='true']::after {
   content: '';
   display: block;
   height: 6px;
@@ -478,6 +478,7 @@
   grid-area: 1/2;
   width: auto;
   line-height: 1;
+  outline: none;
 }
 
 .tl-quick-search-input-sizer::after {
@@ -524,7 +525,6 @@
   flex-direction: column;
   opacity: 1;
   border-radius: 8px;
-  overflow: hidden;
 }
 
 .tl-logseq-portal-header {
@@ -534,6 +534,8 @@
   background: transparent;
   display: flex;
   color: var(--ls-title-text-color);
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
   padding: 0 1rem;
   align-items: center;
   gap: 0.5em;

tldraw/packages/core/src/lib/TLApi/TLApi.ts

@@ -155,6 +155,18 @@ export class TLApi<S extends TLShape = TLShape, K extends TLEventMap = TLEventMa
     return this
   }
 
+  resetZoomToCursor = (): this => {
+    const viewport = this.app.viewport
+    viewport.update({
+      zoom: 1,
+      point: Vec.sub(
+        Vec.sub(this.app.inputs.originScreenPoint, Vec.mul(this.app.inputs.containerOffset, 2)),
+        this.app.inputs.originPoint
+      ),
+    })
+    return this
+  }
+
   toggleGrid = (): this => {
     const { settings } = this.app
     settings.update({ showGrid: !settings.showGrid })

tldraw/packages/react/src/hooks/useResizeObserver.ts

@@ -79,7 +79,7 @@ export function useResizeObserver<T extends HTMLElement>(
     }
   }, [ref])
 
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     updateBounds()
   }, [ref])
 }