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 styling and simplfy workflow example #160

Merged
merged 5 commits into from
Jan 17, 2022
Merged

Improve styling and simplfy workflow example #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3807946
Improve styling and simplfy workflow example
planger Jan 7, 2022
3245e0c
Incorporate feedback by Nina
planger Jan 11, 2022
0e6162b
workflow - Fix label editing and reveal by name
planger Jan 11, 2022
66d6ab3
Adapt to colors suggested by @ndoschek
planger Jan 14, 2022
4495c41
Update copyright headers
planger Jan 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
177 changes: 30 additions & 147 deletions examples/workflow-glsp/css/diagram.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/********************************************************************************
* Copyright (c) 2019-2021 EclipseSource and others.
* Copyright (c) 2019-2022 EclipseSource and others.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v. 2.0 which is available at
Expand All @@ -20,10 +20,6 @@
height: 100%;
}

.sprotty-popup {
z-index: 1;
}

.sprotty-text {
font-size: 12pt;
text-anchor: middle;
Expand All @@ -34,15 +30,6 @@
font-weight: bold;
}

.sprotty-node.mouseover:not(.selected) {
stroke-width: 2;
}

.sprotty-comp {
line-height: 3px;
text-align: left;
}

.sprotty-label {
stroke-width: 0;
fill: #000;
Expand All @@ -53,171 +40,67 @@

.sprotty-label.heading {
font-weight: normal;
font-size: 0.7em;
fill: #f0f3f8;
}

.sprotty-icon {
stroke: black;
stroke-width: 0.5;
fill: #ffffff;
opacity: 0.5;
}

.sprotty-label.icon {
fill: black;
}

.sprotty-button {
fill: #152;
.icon path {
stroke-width: 0;
fill: #f0f3f8;
}

.sprotty-edge {
fill: none;
stroke-width: 1px;
}

.sprotty-edge.selected {
stroke-width: 3px;
}

.sprotty-edge.mouseover:not(.selected) {
stroke-width: 2px;
}

.sprotty-edge > .sprotty-routing-handle {
r: 7px;
fill: #884;
stroke: none;
z-index: 1000;
}

.sprotty-edge > .sprotty-routing-handle[data-kind='line'] {
opacity: 0.35;
}

.sprotty-edge > .sprotty-routing-handle.selected {
fill: #66a;
}

.sprotty-edge > .sprotty-routing-handle.mouseover {
stroke: #112;
stroke-width: 1;
}

.sprotty-missing {
stroke-width: 1;
stroke: #f00;
fill: #f00;
font-size: 14pt;
text-anchor: middle;
}

.sprotty-node:not(.selected) {
stroke-width: 1px;
}

.sprotty-node.marquee {
fill: lightgray;
opacity: 0.2;
.icon .icon-background {
fill: transparent;
}

.task.automated > .sprotty-node {
fill: lightgray;
fill: #5b9fa8;
}

.task.manual > .sprotty-node {
fill: lightblue;
fill: #db8651;
}

.category > .sprotty-node {
fill: lightblue;
}

text {
stroke-width: 0;
stroke: #000;
fill: #000;
font-family: sans-serif;
font-size: 8pt;
text-anchor: middle;
}

.sprotty-edge.weighted.low,
.sprotty-edge.weighted.low .arrow {
stroke: lightblue;
fill: #5c87bd;
}

.sprotty-edge.weighted.low .arrow {
fill: lightblue;
.sprotty-edge.weighted.low:not(.selected),
.sprotty-edge.weighted.low:not(.selected) .arrow {
stroke: rgb(128, 90, 233);
}

.sprotty-edge.weighted,
.sprotty-edge.weighted .arrow,
.sprotty-edge.weighted.medium,
.sprotty-edge.weighted.medium .arrow {
stroke: #007fd4;
.sprotty-edge.weighted.low:not(.selected) .arrow {
fill: rgb(128, 90, 233);
}

.sprotty-edge.weighted .arrow,
.sprotty-edge.weighted.medium .arrow {
fill: #007fd4;
.sprotty-edge.weighted:not(.selected),
.sprotty-edge.weighted:not(.selected) .arrow,
.sprotty-edge.weighted.medium:not(.selected),
.sprotty-edge.weighted.medium:not(.selected) .arrow {
stroke: rgb(98, 60, 193);
}

.sprotty-edge.weighted.high,
.sprotty-edge.weighted.high .arrow {
stroke: darkblue;
.sprotty-edge.weighted:not(.selected) .arrow,
.sprotty-edge.weighted.medium:not(.selected) .arrow {
fill: rgb(98, 60, 193);
}

.sprotty-edge.weighted.high .arrow {
fill: darkblue;
.sprotty-edge.weighted.high:not(.selected),
.sprotty-edge.weighted.high:not(.selected) .arrow {
stroke: rgb(68, 30, 163);
}

polygon.sprotty-node {
fill: white;
stroke-width: 1pt;
}

.sprotty-node.selected {
stroke-width: 3px;
.sprotty-edge.weighted.high:not(.selected) .arrow {
fill: rgb(68, 30, 163);
}

.sprotty-comp {
stroke: transparent;
fill: transparent;
}

.sprotty-comp.debug {
stroke: deepskyblue;
}

svg {
border-style: solid;
border-width: 1px;
border-color: #bbb;
}

.label-edit input {
margin-top: -1px;
margin-left: -5px;
}

g .movement-not-allowed > .sprotty-node {
stroke: var(--glsp-error-foreground) !important;
}

.sprotty-resize-handle.movement-not-allowed {
stroke: var(--glsp-error-foreground) !important;
fill: var(--glsp-error-foreground) !important;
}

.error > .sprotty-node {
stroke: var(--glsp-error-foreground) !important;
}

.warning > .sprotty-node {
stroke: var(--glsp-warning-foreground) !important;
}

.info > .sprotty-node {
stroke: var(--glsp-info-foreground) !important;
margin-top: -3px;
margin-left: -3px;
}
17 changes: 9 additions & 8 deletions examples/workflow-glsp/src/model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/********************************************************************************
* Copyright (c) 2020-2021 EclipseSource and others.
* Copyright (c) 2020-2022 EclipseSource and others.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v. 2.0 which is available at
Expand Down Expand Up @@ -53,21 +53,22 @@ export class TaskNode extends RectangularNode implements Nameable, WithEditableL
nameFeature,
withEditLabelFeature
];
name = '';
duration?: number;
taskType?: string;
reference?: string;

get editableLabel(): (SChildElement & EditableLabel) | undefined {
const headerComp = this.children.find(element => element.type === 'comp:header');
if (headerComp) {
const label = headerComp.children.find(element => element.type === 'label:heading');
if (label && isEditableLabel(label)) {
return label;
}
const label = this.children.find(element => element.type === 'label:heading');
if (label && isEditableLabel(label)) {
return label;
}
return undefined;
}

get name(): string {
const labelText = this.editableLabel?.text;
return labelText ? labelText : '<unknown>';
}
}

export function isTaskNode(element: SModelElement): element is TaskNode {
Expand Down
52 changes: 39 additions & 13 deletions examples/workflow-glsp/src/workflow-views.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/********************************************************************************
* Copyright (c) 2019-2021 EclipseSource and others.
* Copyright (c) 2019-2022 EclipseSource and others.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v. 2.0 which is available at
Expand All @@ -15,17 +15,18 @@
********************************************************************************/
import {
angleOfPoint,
IView,
getSubType,
Point,
PolylineEdgeViewWithGapsOnIntersections,
RenderingContext,
SEdge,
setAttr,
toDegrees
} from '@eclipse-glsp/client';
import { injectable } from 'inversify';
import { VNode } from 'snabbdom';
import { svg } from 'sprotty';
import { Icon } from './model';
import { findParentByFeature, ShapeView, svg } from 'sprotty';
import { Icon, isTaskNode } from './model';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const JSX = { createElement: svg };
Expand All @@ -40,7 +41,7 @@ export class WorkflowEdgeView extends PolylineEdgeViewWithGapsOnIntersections {
<path
class-sprotty-edge={true}
class-arrow={true}
d='M 1.5,0 L 10,-4 L 10,4 Z'
d='M 1,0 L 10,-4 L 10,4 Z'
transform={`rotate(${toDegrees(angleOfPoint({ x: p1.x - p2.x, y: p1.y - p2.y }))} ${p2.x} ${p2.y}) translate(${p2.x} ${
p2.y
})`}
Expand All @@ -52,18 +53,43 @@ export class WorkflowEdgeView extends PolylineEdgeViewWithGapsOnIntersections {
}

@injectable()
export class IconView implements IView {
render(element: Icon, context: RenderingContext): VNode {
const radius = this.getRadius();
return (
export class IconView extends ShapeView {
render(element: Icon, context: RenderingContext): VNode | undefined {
const taskNode = findParentByFeature(element, isTaskNode);
if (!taskNode || !this.isVisible(element, context)) {
return undefined;
}

let icon;
if (taskNode.type === 'task:manual') {
// From codicons: https://github.com/microsoft/vscode-codicons/blob/main/src/icons/account.svg?short_path=8135b2d
icon =
// eslint-disable-next-line max-len
'M16 7.992C16 3.58 12.416 0 8 0S0 3.58 0 7.992c0 2.43 1.104 4.62 2.832 6.09.016.016.032.016.032.032.144.112.288.224.448.336.08.048.144.111.224.175A7.98 7.98 0 0 0 8.016 16a7.98 7.98 0 0 0 4.48-1.375c.08-.048.144-.111.224-.16.144-.111.304-.223.448-.335.016-.016.032-.016.032-.032 1.696-1.487 2.8-3.676 2.8-6.106zm-8 7.001c-1.504 0-2.88-.48-4.016-1.279.016-.128.048-.255.08-.383a4.17 4.17 0 0 1 .416-.991c.176-.304.384-.576.64-.816.24-.24.528-.463.816-.639.304-.176.624-.304.976-.4A4.15 4.15 0 0 1 8 10.342a4.185 4.185 0 0 1 2.928 1.166c.368.368.656.8.864 1.295.112.288.192.592.24.911A7.03 7.03 0 0 1 8 14.993zm-2.448-7.4a2.49 2.49 0 0 1-.208-1.024c0-.351.064-.703.208-1.023.144-.32.336-.607.576-.847.24-.24.528-.431.848-.575.32-.144.672-.208 1.024-.208.368 0 .704.064 1.024.208.32.144.608.336.848.575.24.24.432.528.576.847.144.32.208.672.208 1.023 0 .368-.064.704-.208 1.023a2.84 2.84 0 0 1-.576.848 2.84 2.84 0 0 1-.848.575 2.715 2.715 0 0 1-2.064 0 2.84 2.84 0 0 1-.848-.575 2.526 2.526 0 0 1-.56-.848zm7.424 5.306c0-.032-.016-.048-.016-.08a5.22 5.22 0 0 0-.688-1.406 4.883 4.883 0 0 0-1.088-1.135 5.207 5.207 0 0 0-1.04-.608 2.82 2.82 0 0 0 .464-.383 4.2 4.2 0 0 0 .624-.784 3.624 3.624 0 0 0 .528-1.934 3.71 3.71 0 0 0-.288-1.47 3.799 3.799 0 0 0-.816-1.199 3.845 3.845 0 0 0-1.2-.8 3.72 3.72 0 0 0-1.472-.287 3.72 3.72 0 0 0-1.472.288 3.631 3.631 0 0 0-1.2.815 3.84 3.84 0 0 0-.8 1.199 3.71 3.71 0 0 0-.288 1.47c0 .352.048.688.144 1.007.096.336.224.64.4.927.16.288.384.544.624.784.144.144.304.271.48.383a5.12 5.12 0 0 0-1.04.624c-.416.32-.784.703-1.088 1.119a4.999 4.999 0 0 0-.688 1.406c-.016.032-.016.064-.016.08C1.776 11.636.992 9.91.992 7.992.992 4.14 4.144.991 8 .991s7.008 3.149 7.008 7.001a6.96 6.96 0 0 1-2.032 4.907z';
} else {
// From codicons: https://github.com/microsoft/vscode-codicons/blob/main/src/icons/gear.svg?short_path=8ee3ec4
icon =
// eslint-disable-next-line max-len
'M9.1 4.4L8.6 2H7.4l-.5 2.4-.7.3-2-1.3-.9.8 1.3 2-.2.7-2.4.5v1.2l2.4.5.3.8-1.3 2 .8.8 2-1.3.8.3.4 2.3h1.2l.5-2.4.8-.3 2 1.3.8-.8-1.3-2 .3-.8 2.3-.4V7.4l-2.4-.5-.3-.8 1.3-2-.8-.8-2 1.3-.7-.2zM9.4 1l.5 2.4L12 2.1l2 2-1.4 2.1 2.4.4v2.8l-2.4.5L14 12l-2 2-2.1-1.4-.5 2.4H6.6l-.5-2.4L4 13.9l-2-2 1.4-2.1L1 9.4V6.6l2.4-.5L2.1 4l2-2 2.1 1.4.4-2.4h2.8zm.6 7c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM8 9c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z';
}

const vnode = (
<g>
<circle class-sprotty-icon={true} r={radius} cx={radius + 2} cy={radius + 2}></circle>
<path
transform={'scale(1.15),translate(0.75,0.75)'}
// From codicons: https://github.com/microsoft/vscode-codicons/blob/main/src/icons/terminal.svg?short_path=2ffc08e
// eslint-disable-next-line max-len
d={icon}
/>
<rect class-icon-background x={0} y={0} width={25} height={20} />
{context.renderChildren(element)}
</g>
);
}

getRadius(): number {
return 14;
const subType = getSubType(element);
if (subType) {
setAttr(vnode, 'class', subType);
}
return vnode;
}
}
Loading