From cc48044772ba7673ce5f3074d639aaf30c1fa820 Mon Sep 17 00:00:00 2001 From: MrCoder Date: Fri, 14 Oct 2022 18:22:38 +1100 Subject: [PATCH 1/6] Added embed-container-demo.html and embed.html. --- public/embed-container-demo.html | 14 ++++++++++++++ public/embed.html | 25 +++++++++++++++++++++++++ vue.config.js | 5 +++++ 3 files changed, 44 insertions(+) create mode 100644 public/embed-container-demo.html create mode 100644 public/embed.html diff --git a/public/embed-container-demo.html b/public/embed-container-demo.html new file mode 100644 index 000000000..59ecbc97a --- /dev/null +++ b/public/embed-container-demo.html @@ -0,0 +1,14 @@ + + + + + + + ZenUML + + + + + diff --git a/public/embed.html b/public/embed.html new file mode 100644 index 000000000..0e52eb7a0 --- /dev/null +++ b/public/embed.html @@ -0,0 +1,25 @@ + + + + + + + ZenUML + + + + + + + +
+ diagram +
+ + + diff --git a/vue.config.js b/vue.config.js index 4ffbbd7a9..4d05dced4 100644 --- a/vue.config.js +++ b/vue.config.js @@ -5,6 +5,11 @@ module.exports = { template: 'public/index.html', filename: 'index.html' }, + embed: { + entry: 'src/main.ts', + template: 'public/embed.html', + filename: 'embed.html' + }, smoke: { entry: 'src/main.ts', template: 'public/smoke.html', From 1b6118fd0f699d9a407efbef0645c33304d0a964 Mon Sep 17 00:00:00 2001 From: MrCoder Date: Fri, 14 Oct 2022 19:54:47 +1100 Subject: [PATCH 2/6] Container and embed can post message to each other. --- public/embed-container-demo.html | 11 +++++++++++ public/embed.html | 17 +++++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/public/embed-container-demo.html b/public/embed-container-demo.html index 59ecbc97a..2e1365feb 100644 --- a/public/embed-container-demo.html +++ b/public/embed-container-demo.html @@ -7,6 +7,17 @@ ZenUML + diff --git a/public/embed.html b/public/embed.html index 0e52eb7a0..9ab3982bf 100644 --- a/public/embed.html +++ b/public/embed.html @@ -14,6 +14,23 @@ We're sorry but ZenUML doesn't work properly without JavaScript enabled. Please enable it to continue. From c5ff28dbb4a22b3b6c175aab5089b1a70be97289 Mon Sep 17 00:00:00 2001 From: MrCoder Date: Fri, 14 Oct 2022 20:39:00 +1100 Subject: [PATCH 3/6] Can update the code and tell client to resize iframe. --- public/embed-container-demo.html | 5 ++++- public/embed.html | 17 ++++++++++++----- src/components/lifeline/LifeLineLayer.vue | 2 +- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/public/embed-container-demo.html b/public/embed-container-demo.html index 2e1365feb..267c2d468 100644 --- a/public/embed-container-demo.html +++ b/public/embed-container-demo.html @@ -15,10 +15,13 @@ if (data && data.event === 'resize') { iframe.style.height = data.rect.height + 'px'; iframe.style.width = data.rect.width + 'px'; + // add log for the above changes + console.log('iframe.style.height', iframe.style.height); + console.log('iframe.style.width', iframe.style.width); } }) - diff --git a/public/embed.html b/public/embed.html index 9ab3982bf..e87f2eb29 100644 --- a/public/embed.html +++ b/public/embed.html @@ -6,10 +6,7 @@ ZenUML - - + @@ -27,14 +24,24 @@ if (data.action !== 'load') return; const code = data && data.code; updateCode(code); + setTimeout(() => { + // get the first element with class .zenuml + const zenuml = document.getElementsByClassName('zenuml')[0]; + window.parent.postMessage(JSON.stringify({event: 'resize', rect: zenuml.getBoundingClientRect()}), '*'); + }, 2000); }, false); document.addEventListener("DOMContentLoaded", function() { updateCode('A.method'); + setTimeout(() => { + // get the first element with class .zenuml + const zenuml = document.getElementsByClassName('zenuml')[0]; + window.parent.postMessage(JSON.stringify({event: 'resize', rect: zenuml.getBoundingClientRect()}), '*'); + }, 500); }, false); -
+
diagram
diff --git a/src/components/lifeline/LifeLineLayer.vue b/src/components/lifeline/LifeLineLayer.vue index 67be77dcd..6bf3b58ca 100644 --- a/src/components/lifeline/LifeLineLayer.vue +++ b/src/components/lifeline/LifeLineLayer.vue @@ -1,5 +1,5 @@