Skip to content

Commit

Permalink
Improve GLSP UI Extension mechanism for easier re-use of HTML elements
Browse files Browse the repository at this point in the history 
- Allow more fine-grained definition of container and parent
- Allow more fine-grained definition of container within parent
- Replace hard-coded styles with 'hidden' class
- Rework index file to define structure and use grid for layouting
- Properly align ALL index files with same structure, loading and style
- Remove workaround for toolbar height (48px adjustment)
- Ensure Quick Action UI is still rendering correctly

Minor fix:
- Ensure that mouse move is only ever executed on drag
  • Loading branch information
@martin-fleck-at
martin-fleck-at committed Mar 20, 2024
1 parent cf4ae16 commit daf2b31
Show file tree
Hide file tree
Showing 20 changed files with 445 additions and 177 deletions.
140 changes: 94 additions & 46 deletions integration/eclipse/index.html
View file
Expand Up @@ -8,61 +8,109 @@
<meta name="theme-color" content="#000000" />
<meta name="description" content="Inscription Editor for Axon Ivy Process Elements" />
<title>Process Editor</title>
<script>
/* set theme early to get better UX while loading */
const theme = new URLSearchParams(window.location.search).get('theme');
document.documentElement.dataset.theme = theme;
</script>
<style>
html body {
background-color: #fafafa;
}

html[data-theme="dark"] body {
background-color: #3c3b3a;
}

#process-editor {
height: 100%;
}

/* from https://cssloaders.github.io/, licensed under MIT */
.page-loader {
width: 48px;
height: 48px;
border-radius: 50%;
position: relative;
top: 50%;
left: 50%;
animation: rotate 1s linear infinite;
}

.page-loader::before {
content: '';
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 5px solid #a5a5a5;
animation: prixClipFix 2s linear infinite;
}

@keyframes rotate {
100% {
transform: rotate(360deg);
}
}

@keyframes prixClipFix {
0% {
clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
}

25% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
}

50% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
}

75% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
}

100% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
}
}
</style>
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="sprotty" class="main-widget">
<div class="ivy-viewport-bar" style="visibility: visible; opacity: 1;">
<div class="viewport-bar">
<div class="viewport-bar-tools" style="width: 167px; height: 36px;">
<div id="process-editor">
<header id="ivy-tool-bar"></header>
<main id="sprotty" class="main-widget">
<!-- Add some placeholder content for better UX while loading -->
<!-- As soon as the diagram is loaded all content within 'sprotty' will be overwritten -->
<div class="ivy-viewport-bar" style="visibility: visible; opacity: 1;">
<div class="viewport-bar">
<div class="viewport-bar-tools" style="width: 167px; height: 36px;">
</div>
</div>
</div>
</div>
<div class="ivy-tool-bar" style="visibility: visible; opacity: 1;">
<div class="tool-bar-header">
<div class="left-buttons">
<span class="tool-bar-button clicked" title="Selection Tool" id="btn_default_tools"><i
class="ivy ivy-selection-tool"></i></span>
<span class="tool-bar-button" title="Marquee Tool (Shift)" id="btn_marquee_tools"><i
class="ivy ivy-multi-selection"></i></span>
<div class="ivy-tool-bar" style="visibility: visible; opacity: 1;">
<div class="tool-bar-header">
<div class="left-buttons">
<span class="tool-bar-button clicked" title="Selection Tool" id="btn_default_tools">
<i class="ivy ivy-selection-tool"></i></span>
<span class="tool-bar-button" title="Marquee Tool (Shift)" id="btn_marquee_tools">
<i class="ivy ivy-multi-selection"></i></span>
</div>
</div>
<div class="tool-bar-progress-container">
<div class="progress-bit"></div>
</div>
</div>
<div class="tool-bar-progress-container" role="progressbar">
<div class="progress-bit"></div>
<div tabindex="0" style="width: 100%; height: 100%;">
<div class="page-loader" role="progressbar"></div>
<svg class="sprotty-graph" style="height: 100%; width: 100%;"></svg>
</div>
</div>
<div tabindex="0" id="ivy-glsp-process_Editor_1_15254DC87A1B183B" data-svg-metadata-api=""
data-svg-metadata-type="graph" style="width: 100%; height: 100%;">
<svg class="sprotty-graph" style="height: 100%; width: 100%;"></svg>
</div>
<script>
const theme = new URLSearchParams(window.location.search).get('theme');
document.documentElement.dataset.theme = theme;
</script>
<style>
html body {
background-color: #fafafa;
}

html[data-theme="dark"] body {
background-color: #3c3b3a;
}

.tool-bar-progress-container .progress-bit {
background-color: var(--glsp-editor-selected, #0065ff);
width: 2%;
height: 2px;
animation-name: progress;
animation-duration: 4s;
animation-iteration-count: infinite;
transform: translateZ(0);
animation-timing-function: linear;
}
</style>
</main>
<aside id="inscription-ui"></aside>
</div>
<div id="inscription"></div>
<script type="module" src="/src/index.ts"></script>
<script async type="module" src="/src/index.ts"></script>
</body>

</html>
</html>
33 changes: 18 additions & 15 deletions integration/eclipse/src/index.css
View file
Expand Up @@ -5,26 +5,29 @@ body {
overflow: hidden;
}

body {
#process-editor {
display: grid;
grid-template-areas: 'sprotty inscription';
grid-auto-columns: minmax(250px, 100%) min-content;
}
#sprotty {
grid-area: sprotty;
height: 100vh;
grid-template-columns: 1fr auto; /* Adjust the auto value based on sidebar width */
grid-template-rows: auto 1fr; /* Adjust based on toolbar height */
height: 100vh; /* Full viewport height */
}
#inscription {
grid-area: inscription;
background-color: var(--glsp-editor-background);
height: 100vh;

#sprotty,
.main-widget {
grid-column: 1 / 2;
grid-row: 2 / 3;
position: relative; /* to ensure that absolute positioning of elements within the diagram work relative to the diagram. */
}
#inscription.hidden {
display: none;

#ivy-tool-bar {
grid-column: 1 / 2;
grid-row: 1 / 2;
}

.main-widget {
position: relative;
#inscription-ui {
grid-column: 2 / 3;
grid-row: 1 / 3; /* Spanning across both the rows */
background-color: var(--glsp-editor-background);
}

.sprotty svg {
Expand Down
54 changes: 47 additions & 7 deletions integration/standalone/index.html
View file
Expand Up @@ -8,13 +8,26 @@
<meta name="theme-color" content="#000000" />
<meta name="description" content="Inscription Editor for Axon Ivy Process Elements" />
<title>Process Editor</title>
<script>
/* set theme early to get better UX while loading */
const theme = new URLSearchParams(window.location.search).get('theme');
document.documentElement.dataset.theme = theme;
</script>
<style>
#root {
html body {
background-color: #fafafa;
}

html[data-theme="dark"] body {
background-color: #3c3b3a;
}

#process-editor {
height: 100%;
}

/* from https://cssloaders.github.io/, licensed under MIT */
.loader {
.page-loader {
width: 48px;
height: 48px;
border-radius: 50%;
Expand All @@ -24,7 +37,7 @@
animation: rotate 1s linear infinite;
}

.loader::before {
.page-loader::before {
content: '';
box-sizing: border-box;
position: absolute;
Expand Down Expand Up @@ -66,11 +79,38 @@

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="sprotty" class="main-widget">
<div class="loader"></div>
<div id="process-editor">
<header id="ivy-tool-bar"></header>
<main id="sprotty" class="main-widget">
<!-- Add some placeholder content for better UX while loading -->
<!-- As soon as the diagram is loaded all content within 'sprotty' will be overwritten -->
<div class="ivy-viewport-bar" style="visibility: visible; opacity: 1;">
<div class="viewport-bar">
<div class="viewport-bar-tools" style="width: 167px; height: 36px;">
</div>
</div>
</div>
<div class="ivy-tool-bar" style="visibility: visible; opacity: 1;">
<div class="tool-bar-header">
<div class="left-buttons">
<span class="tool-bar-button clicked" title="Selection Tool" id="btn_default_tools">
<i class="ivy ivy-selection-tool"></i></span>
<span class="tool-bar-button" title="Marquee Tool (Shift)" id="btn_marquee_tools">
<i class="ivy ivy-multi-selection"></i></span>
</div>
</div>
<div class="tool-bar-progress-container">
<div class="progress-bit"></div>
</div>
</div>
<div tabindex="0" style="width: 100%; height: 100%;">
<div class="page-loader" role="progressbar"></div>
<svg class="sprotty-graph" style="height: 100%; width: 100%;"></svg>
</div>
</main>
<aside id="inscription-ui"></aside>
</div>
<div id="inscription"></div>
<script type="module" src="/src/index.ts"></script>
<script async type="module" src="/src/index.ts"></script>
</body>

</html>
30 changes: 16 additions & 14 deletions integration/standalone/src/index.css
View file
Expand Up @@ -5,26 +5,28 @@ body {
overflow: hidden;
}

body {
#process-editor {
display: grid;
grid-template-areas: 'sprotty inscription';
grid-auto-columns: minmax(250px, 100%) min-content;
grid-template-columns: 1fr auto; /* Adjust the auto value based on sidebar width */
grid-template-rows: auto 1fr; /* Adjust based on toolbar height */
height: 100vh; /* Full viewport height */
}

#sprotty {
grid-area: sprotty;
height: 100vh;
}
#inscription {
grid-area: inscription;
background-color: var(--glsp-editor-background);
height: 100vh;
grid-column: 1 / 2;
grid-row: 2 / 3;
position: relative; /* to ensure that absolute positioning of elements within the diagram work relative to the diagram. */
}
#inscription.hidden {
display: none;

#ivy-tool-bar {
grid-column: 1 / 2;
grid-row: 1 / 2;
}

.main-widget {
position: relative;
#inscription-ui {
grid-column: 2 / 3;
grid-row: 1 / 3; /* Spanning across both the rows */
background-color: var(--glsp-editor-background);
}

.sprotty svg {
Expand Down

0 comments on commit daf2b31

Please sign in to comment.