From 1e61d6cd981b60f759b92e7ec4f5328833b6d313 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Tue, 15 Aug 2023 16:42:44 +0400
Subject: [PATCH] Add canvas dynamic style element

---
 src/canvas/view/CanvasView.ts | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/canvas/view/CanvasView.ts b/src/canvas/view/CanvasView.ts
index d7f6d92a1..f13a656d5 100644
--- a/src/canvas/view/CanvasView.ts
+++ b/src/canvas/view/CanvasView.ts
@@ -58,6 +58,7 @@ export default class CanvasView extends ModuleView<Canvas> {
         <div class="${pfx}canvas__spots" data-spots style="z-index: 1; position: absolute; pointer-events: none"></div>
       </div>
       <div id="${pfx}tools" class="${pfx}canvas__tools" data-tools></div>
+      <style data-canvas-style></style>
     `;
   }
   /*get className(){
@@ -76,6 +77,8 @@ export default class CanvasView extends ModuleView<Canvas> {
   framesArea?: HTMLElement;
   toolsWrapper?: HTMLElement;
   spotsEl?: HTMLElement;
+  cvStyle?: HTMLElement;
+  clsUnscale: string;
   ready = false;
 
   frames!: FramesView;
@@ -91,6 +94,7 @@ export default class CanvasView extends ModuleView<Canvas> {
     bindAll(this, 'clearOff', 'onKeyPress', 'onCanvasMove');
     const { em, pfx } = this;
     this.className = `${pfx}canvas${!em.config.customUI ? ` ${pfx}canvas-bg` : ''}`;
+    this.clsUnscale = `${pfx}unscale`;
     this._initFrames();
     this.listenTo(em, 'change:canvasOffset', this.clearOff);
     this.listenTo(em, 'component:selected', this.checkSelected);
@@ -195,15 +199,21 @@ export default class CanvasView extends ModuleView<Canvas> {
   }
 
   updateFramesArea() {
-    const { framesArea, model, module } = this;
+    const { framesArea, model, module, cvStyle, clsUnscale } = this;
+    const mpl = module.getZoomMultiplier();
 
     if (framesArea) {
       const { x, y } = model.attributes;
       const zoomDc = module.getZoomDecimal();
-      const mpl = module.getZoomMultiplier();
 
       framesArea.style.transform = `scale(${zoomDc}) translate(${x * mpl}px, ${y * mpl}px)`;
     }
+
+    if (cvStyle) {
+      cvStyle.innerHTML = `
+        .${clsUnscale} { scale: ${mpl} }
+      `;
+    }
   }
 
   fitViewport(opts: FitViewportOptions = {}) {
@@ -590,6 +600,7 @@ export default class CanvasView extends ModuleView<Canvas> {
     this.fixedOffsetEl = el.querySelector(`.${ppfx}offset-fixed-v`)!;
     this.toolsGlobEl = el.querySelector(`.${ppfx}tools-gl`)!;
     this.spotsEl = el.querySelector('[data-spots]')!;
+    this.cvStyle = el.querySelector('[data-canvas-style]')!;
     this.el.className = getUiClass(em, this.className);
     this.ready = true;
     this._renderFrames();