Skip to content
This repository has been archived by the owner on Jul 8, 2023. It is now read-only.

Embed view #397

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Embed view #397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cc48044
Added embed-container-demo.html and embed.html.
MrCoder Oct 14, 2022
1b6118f
Container and embed can post message to each other.
MrCoder Oct 14, 2022
c5ff28d
Can update the code and tell client to resize iframe.
MrCoder Oct 14, 2022
76660d1
Added a simple editor
MrCoder Oct 14, 2022
65f05d9
Switched from dispatch to setting state.code.
MrCoder Oct 14, 2022
2a40dfd
Resize the iFrame from embed.html.
MrCoder Oct 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions public/embed-container-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>ZenUML</title>
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css" crossOrigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/codemirror.min.css" crossOrigin="anonymous" integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<script>
// window.addEventListener('message', (e) => {
// if (!e.data || typeof e.data !== 'string') return;
// const data = JSON.parse(e.data);
// const iframe = document.getElementsByTagName('iframe')[0];
// if (data && data.event === 'resize') {
// iframe.style.height = data.rect.height + 'px';
// iframe.style.width = data.rect.width + 'px';
// }
// })
</script>

<div class="m-1 grid grid-cols-6" id="diagram1">
<div class="col-span-2">
<textarea id="text" class="col-span-1 m-1 border-2" cols="30" rows="200" oninput="updateCode(this.value)"></textarea>
</div>
<div class="col-span-4">
<iframe src="embed.html" style="border: none">

</iframe>
</div>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("text"), {
lineNumbers: true
});
editor.on("change", function(cm) {
// get the first iframe
const iframe = document.getElementsByTagName('iframe')[0];
iframe.contentWindow.postMessage(JSON.stringify({action: 'load',
code: cm.getValue()}), '*');
});
</script>

</body>
</html>
51 changes: 51 additions & 0 deletions public/embed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>ZenUML</title>
</head>
<body>
<noscript>
<strong>We're sorry but ZenUML doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<script>
function updateCode(c) {
document.getElementsByClassName('sequence-diagram')[0].__vue__.$store.state.code = c
}
window.addEventListener('message', (e) => {
if (!e.data) return;
console.log('e.data', e.data);
// return if typeof e.data is not string
if(typeof e.data !== 'string') return;

const data = JSON.parse(e.data);
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()}), '*');
window.parent.document.getElementsByTagName('iframe')[0].style.height = zenuml.getBoundingClientRect().height + 'px';
window.parent.document.getElementsByTagName('iframe')[0].style.width = zenuml.getBoundingClientRect().width + 'px';
}, 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);
</script>


<div id="diagram" class="diagram">
diagram
</div>
<!-- built files will be auto injected -->
</body>
</html>
2 changes: 1 addition & 1 deletion src/components/lifeline/LifeLineLayer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="life-line-layer absolute h-full" :style="{'min-width': '400px'}">
<div class="life-line-layer absolute h-full" :style="{'min-width': '200px'}">
<life-line
v-if="starterOnTheLeft"
:entity="starterParticipant"
Expand Down
5 changes: 5 additions & 0 deletions vue.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down