Fix zoom CSS on zoom

components/canvas/page.tsx

@@ -130,7 +130,6 @@ const TranslatedShape = memo(
 
     const center = getShapeUtils(shape).getCenter(shape)
     const rotation = shape.rotation * (180 / Math.PI)
-
     const transform = `
     rotate(${rotation}, ${center})
     translate(${shape.point})

state/commands/change-page.ts

@@ -1,6 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { Data } from 'types'
+import tld from 'utils/tld'
 import storage from 'state/storage'
 
 export default function changePage(data: Data, toPageId: string): void {
@@ -17,11 +18,15 @@ export default function changePage(data: Data, toPageId: string): void {
         storage.loadPage(data, data.document.id, toPageId)
         data.currentPageId = toPageId
         data.currentParentId = toPageId
+
+        tld.setZoomCSS(tld.getPageState(data).camera.zoom)
       },
       undo(data) {
         storage.loadPage(data, data.document.id, fromPageId)
         data.currentPageId = fromPageId
         data.currentParentId = fromPageId
+
+        tld.setZoomCSS(tld.getPageState(data).camera.zoom)
       },
     })
   )

state/commands/create-page.ts

@@ -2,6 +2,7 @@ import Command from './command'
 import history from '../history'
 import { Data, Page, PageState } from 'types'
 import { uniqueId } from 'utils/utils'
+import tld from 'utils/tld'
 import storage from 'state/storage'
 
 export default function createPage(data: Data, goToPage = true): void {
@@ -25,6 +26,7 @@ export default function createPage(data: Data, goToPage = true): void {
 
         storage.savePage(data, data.document.id, page.id)
         storage.saveDocumentToLocalStorage(data)
+        tld.setZoomCSS(tld.getPageState(data).camera.zoom)
       },
       undo(data) {
         const { page, currentPageId } = snapshot
@@ -32,6 +34,7 @@ export default function createPage(data: Data, goToPage = true): void {
         delete data.pageStates[page.id]
         data.currentPageId = currentPageId
         storage.saveDocumentToLocalStorage(data)
+        tld.setZoomCSS(tld.getPageState(data).camera.zoom)
       },
     })
   )

state/commands/move-to-page.ts

@@ -87,6 +87,8 @@ export default function moveToPageCommand(data: Data, newPageId: string): void {
 
         // Move to the new page
         data.currentPageId = toPageId
+
+        tld.setZoomCSS(tld.getPageState(data).camera.zoom)
       },
       undo(data) {
         const fromPageId = newPageId
@@ -141,6 +143,8 @@ export default function moveToPageCommand(data: Data, newPageId: string): void {
         tld.setSelectedIds(data, [...selectedIds])
 
         data.currentPageId = toPageId
+
+        tld.setZoomCSS(tld.getPageState(data).camera.zoom)
       },
     })
   )

state/hacks.ts

@@ -90,6 +90,8 @@ export function fastZoomUpdate(point: number[], delta: number): void {
 
   data.pageStates[data.currentPageId].camera = deepClone(camera)
 
+  tld.setZoomCSS(camera.zoom)
+
   state.forceData(freeze(data))
 }
 
@@ -116,6 +118,8 @@ export function fastPinchCamera(
 
   data.pageStates[data.currentPageId] = { ...pageState }
 
+  tld.setZoomCSS(camera.zoom)
+
   state.forceData(freeze(data))
 }
 

state/shape-styles.ts

@@ -77,5 +77,5 @@ export const defaultStyle: ShapeStyles = {
   color: ColorStyle.Black,
   size: SizeStyle.Medium,
   isFilled: false,
-  dash: DashStyle.Solid,
+  dash: DashStyle.Draw,
 }