From 2f0125b31f58426191ee7cb1a51206f978dca3e9 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Thu, 4 Aug 2022 23:46:10 +0800
Subject: [PATCH] fix: quick click to reset zoom

---
 .../tldraw-logseq/src/components/Button/Button.tsx   |  2 +-
 .../tools/LogseqPortalTool/states/CreatingState.tsx  |  3 +++
 tldraw/apps/tldraw-logseq/src/styles.css             | 12 +++++++-----
 tldraw/packages/core/src/lib/TLApi/TLApi.ts          | 12 ++++++++++++
 tldraw/packages/react/src/hooks/useResizeObserver.ts |  2 +-
 5 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/tldraw/apps/tldraw-logseq/src/components/Button/Button.tsx b/tldraw/apps/tldraw-logseq/src/components/Button/Button.tsx
index ef99b046f5..90d5246dcd 100644
--- a/tldraw/apps/tldraw-logseq/src/components/Button/Button.tsx
+++ b/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} />
 }
diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/LogseqPortalTool/states/CreatingState.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/LogseqPortalTool/states/CreatingState.tsx
index e80c669e45..8e834d67d7 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/tools/LogseqPortalTool/states/CreatingState.tsx
+++ b/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()
+      }
     })
   }
 
diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css
index 2ada4aaeb5..48b81d5c47 100644
--- a/tldraw/apps/tldraw-logseq/src/styles.css
+++ b/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;
diff --git a/tldraw/packages/core/src/lib/TLApi/TLApi.ts b/tldraw/packages/core/src/lib/TLApi/TLApi.ts
index 69ed753d61..22f310139e 100644
--- a/tldraw/packages/core/src/lib/TLApi/TLApi.ts
+++ b/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 })
diff --git a/tldraw/packages/react/src/hooks/useResizeObserver.ts b/tldraw/packages/react/src/hooks/useResizeObserver.ts
index bb319c0ce7..9129c2f42f 100644
--- a/tldraw/packages/react/src/hooks/useResizeObserver.ts
+++ b/tldraw/packages/react/src/hooks/useResizeObserver.ts
@@ -79,7 +79,7 @@ export function useResizeObserver<T extends HTMLElement>(
     }
   }, [ref])
 
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     updateBounds()
   }, [ref])
 }