From 4da09542d6bf752d5d951a6af9d7cdd7401d140a Mon Sep 17 00:00:00 2001
From: Robin Tissot <tissotrobin@gmail.com>
Date: Tue, 1 Dec 2020 11:02:36 +0100
Subject: [PATCH] Fixes updating content ratio in visualisation panel.

---
 .../core/static/js/edit/components/base_panel.js    |  7 +++++++
 .../core/static/js/edit/components/visu_line.js     |  3 ---
 .../core/static/js/edit/components/visu_panel.js    | 13 ++++++++-----
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/apps/core/static/js/edit/components/base_panel.js b/app/apps/core/static/js/edit/components/base_panel.js
index a00e9c9b..cfc1ee8d 100644
--- a/app/apps/core/static/js/edit/components/base_panel.js
+++ b/app/apps/core/static/js/edit/components/base_panel.js
@@ -5,6 +5,13 @@ const BasePanel = Vue.extend({
             ratio: 1
         };
     },
+    watch: {
+        'part.loaded': function(n, o) {
+            if (this.part.loaded) {
+                this.refresh();
+            }
+        }
+    },
     methods: {
         setRatio() {
             this.ratio = this.$el.firstChild.clientWidth / this.part.image.size[0];
diff --git a/app/apps/core/static/js/edit/components/visu_line.js b/app/apps/core/static/js/edit/components/visu_line.js
index 9bb6456c..ad2e1482 100644
--- a/app/apps/core/static/js/edit/components/visu_line.js
+++ b/app/apps/core/static/js/edit/components/visu_line.js
@@ -29,7 +29,6 @@ const visuLine = LineBase.extend({
             this.textElement.style.fontSize =  lineHeight * (1/2) + 'px';
             return 10+'px';
         },
-
         computeTextLength() {
             if (!this.line.currentTrans) return;
             content = this.line.currentTrans.content;
@@ -61,7 +60,6 @@ const visuLine = LineBase.extend({
         textPathId() {
             return this.line ? 'textPath'+this.line.pk : '';
         },
-
         maskStrokeColor() {
             if (this.line.currentTrans && this.line.currentTrans.content) {
                 return 'none';
@@ -73,7 +71,6 @@ const visuLine = LineBase.extend({
             if (this.line == null || !this.line.mask) return '';
             return this.line.mask.map(pt => Math.round(pt[0]*this.ratio)+','+Math.round(pt[1]*this.ratio)).join(' ');
         },
-
         fakeBaseline() {
             // create a fake path based on the mask,
             var min = this.line.mask.reduce((minPt, curPt) => (curPt[0] < minPt[0]) ? curPt : minPt);
diff --git a/app/apps/core/static/js/edit/components/visu_panel.js b/app/apps/core/static/js/edit/components/visu_panel.js
index 01871e67..16e2394c 100644
--- a/app/apps/core/static/js/edit/components/visu_panel.js
+++ b/app/apps/core/static/js/edit/components/visu_panel.js
@@ -30,14 +30,17 @@ const VisuPanel = BasePanel.extend({
                 this.editLine = this.part.lines[index - 1];
             }
         },
+        resetLines() {
+            if (this.part.lines.length) {
+                this.$refs.visulines.forEach(function(line) {
+                    line.reset();
+                });
+            }
+        },
         updateView() {
             this.$el.querySelector('svg').style.height = Math.round(this.part.image.size[1] * this.ratio) + 'px';
             Vue.nextTick(function() {
-                if (this.part.lines.length) {
-                    this.$refs.visulines.forEach(function(line) {
-                        line.reset();
-                    });
-                }
+                this.resetLines();
             }.bind(this));
         }
     }
-- 
GitLab