Progressing on CanvasEditor

components/page/Canvas.vue

@@ -70,6 +70,18 @@ dark:border-dark-yellow
 dark:border-dark-green
 dark:border-dark-cyan
 dark:border-dark-purple
+outline-light-red
+outline-light-orange
+outline-light-yellow
+outline-light-green
+outline-light-cyan
+outline-light-purple
+dark:outline-dark-red
+dark:outline-dark-orange
+dark:outline-dark-yellow
+dark:outline-dark-green
+dark:outline-dark-cyan
+dark:outline-dark-purple
 
 */
 
@@ -141,7 +153,13 @@ const pinchHandler = usePinch(({ offset: [z] }: { offset: number[] }) => {
                 </Tooltip>
             </div>
         </div>
-        <div :style="{transform: `scale(${zoom}) translate(${dispX}px, ${dispY}px)`}" >
+        <div :style="{
+            '--tw-translate-x': `${dispX}px`,
+            '--tw-translate-y': `${dispY}px`,
+            '--tw-scale-x': `${zoom}`,
+            '--tw-scale-y': `${zoom}`,
+            transform: 'scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)'
+        }">
             <CanvasRenderer :path="path"  />
         </div>
     </div>