Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve GLSP UI Extension mechanism for easier re-use of HTML elements #516

Merged
merged 1 commit into from Mar 21, 2024
Merged

Improve GLSP UI Extension mechanism for easier re-use of HTML elements #516

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
140 changes: 94 additions & 46 deletions integration/eclipse/index.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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