From 63d18dc295ae75325cf13beb7fffce1b729877ac Mon Sep 17 00:00:00 2001
From: Anders Gustafsson <34234789+anders-photowall@users.noreply.github.com>
Date: Fri, 19 Feb 2021 10:09:05 +0100
Subject: [PATCH] P5-6722 - Set frame objects as dirty each render (#6)

---
 .nvmrc               | 1 +
 README.md            | 8 ++++++++
 dist/image-editor.js | 1 +
 package-lock.json    | 5 +++++
 package.json         | 4 +++-
 src/FrameHandler.js  | 1 +
 6 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 .nvmrc

diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..bce43c2
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+v12.13.0
diff --git a/README.md b/README.md
index bc71089..581ca9d 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,14 @@ Photowall Image Editor
 ======================
 Image editor for the Photowall web project
 
+# Working with image-editor integrated in photowall site
+A suggested workflow is replacing `src/js/legacy/legacyVendor/image-editor.js` in photowall project with a symlink to
+`dist/image-editor.js` in this project. That way you can have `gulp watch` running to build on change in this project
+which will trigger `npm run watch` (webpack) in photowall project.
+
+Symlink should be removed and new copy of `dist/image-editor.js` copied to photowall project when work
+is done however to not force all team members to have same file structure for projects.
+
 # Linting
 Linting can be run manually with
 `npm run lint`
diff --git a/dist/image-editor.js b/dist/image-editor.js
index c5d0225..a399415 100644
--- a/dist/image-editor.js
+++ b/dist/image-editor.js
@@ -1042,6 +1042,7 @@ function FrameHandler(viewport) {
     this.setVisible(true);
 
     getFramesAsArray().forEach(function (o) {
+      o.dirty = true; // force objects cache to be rendered on next render http://fabricjs.com/docs/fabric.Object.html#dirty
       o.set(config.frames[frameType]);
     });
 
diff --git a/package-lock.json b/package-lock.json
index 1d254c7..7191cae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4460,6 +4460,11 @@
         }
       }
     },
+    "jquery": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-2.2.4.tgz",
+      "integrity": "sha1-LInWiJterFIqfuoywUUhVZxsvwI="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/package.json b/package.json
index 9239f1f..1e22db3 100644
--- a/package.json
+++ b/package.json
@@ -26,5 +26,7 @@
     "lint": "eslint gulpfile.js 'examples/**/*.js' 'test/unit/**/*.js' 'src/**/*.js'",
     "serve": "live-server --ignore=node_modules --port=50994 ./"
   },
-  "dependencies": {}
+  "dependencies": {
+    "jquery": "^2.2.4"
+  }
 }
diff --git a/src/FrameHandler.js b/src/FrameHandler.js
index b676f39..2d8827f 100644
--- a/src/FrameHandler.js
+++ b/src/FrameHandler.js
@@ -84,6 +84,7 @@ function FrameHandler(viewport) {
     this.setVisible(true);
 
     getFramesAsArray().forEach(function (o) {
+      o.dirty = true; // force objects cache to be rendered on next render http://fabricjs.com/docs/fabric.Object.html#dirty
       o.set(config.frames[frameType]);
     });