From 2b011716d76d9e888156f0b2c4c23cb3c775d148 Mon Sep 17 00:00:00 2001 From: leodennis Date: Fri, 29 Nov 2019 11:50:01 +0100 Subject: [PATCH] improved styling Signed-off-by: leodennis rebase Signed-off-by: leodennis fixed bugs Signed-off-by: leodennis fixing bugs, added final svgs Signed-off-by: leodennis improved styling Signed-off-by: leodennis rebase Signed-off-by: leodennis fixed bugs Signed-off-by: leodennis fixing bugs, added final svgs Signed-off-by: leodennis improved styling Signed-off-by: leodennis rebase Signed-off-by: leodennis test Signed-off-by: leodennis cleanup Signed-off-by: leodennis fixed selection Signed-off-by: leodennis fixed errors Signed-off-by: leodennis --- client/sprotty-ecore/css/diagram.css | 8 +- client/sprotty-ecore/images/EAttribute.svg | 92 ++++++++++ client/sprotty-ecore/images/EClass.svg | 112 ++++++++++++ .../sprotty-ecore/images/EClass_abstract.svg | 137 +++++++++++++++ .../sprotty-ecore/images/EClass_interface.svg | 140 +++++++++++++++ client/sprotty-ecore/images/EDataType.svg | 134 +++++++++++++++ client/sprotty-ecore/images/EEnum.svg | 160 ++++++++++++++++++ client/sprotty-ecore/images/EEnumLiteral.svg | 92 ++++++++++ client/sprotty-ecore/src/di.config.ts | 12 +- client/sprotty-ecore/src/feedback.tsx | 2 +- client/sprotty-ecore/src/model.ts | 29 +++- client/sprotty-ecore/src/views.tsx | 53 ++++-- .../glsp/ecore/EcoreDiagramConfiguration.java | 6 +- .../ecore/gmodel/ClassifierNodeFactory.java | 19 +-- .../glsp/ecore/gmodel/LabelFactory.java | 4 +- .../glsp/ecore/util/EcoreBuilder.java | 62 ------- .../glsp/ecore/util/EcoreConfig.java | 7 +- 17 files changed, 966 insertions(+), 103 deletions(-) create mode 100644 client/sprotty-ecore/images/EAttribute.svg create mode 100644 client/sprotty-ecore/images/EClass.svg create mode 100644 client/sprotty-ecore/images/EClass_abstract.svg create mode 100644 client/sprotty-ecore/images/EClass_interface.svg create mode 100644 client/sprotty-ecore/images/EDataType.svg create mode 100644 client/sprotty-ecore/images/EEnum.svg create mode 100644 client/sprotty-ecore/images/EEnumLiteral.svg delete mode 100644 server/ecore-glsp/src/main/java/com/eclipsesource/glsp/ecore/util/EcoreBuilder.java diff --git a/client/sprotty-ecore/css/diagram.css b/client/sprotty-ecore/css/diagram.css index bfd3281..efbfd7a 100644 --- a/client/sprotty-ecore/css/diagram.css +++ b/client/sprotty-ecore/css/diagram.css @@ -29,10 +29,11 @@ svg { } .ecore-node { - fill: #fffcdb; + fill: #fffcdf; stroke: black; stroke-width: 1; font-weight: bold; + filter: url(#dropShadow); } .sprotty-node.selected { @@ -51,7 +52,7 @@ svg { } .sprotty-label-node>.sprotty-label { - alignment-baseline: middle; + alignment-baseline: middle; } .sprotty-label-node>.selection-feedback { @@ -90,7 +91,6 @@ svg { } .sprotty-icon { - fill: #debe5b; stroke-width: 0; } @@ -190,7 +190,7 @@ svg { } .ecore-node.enum { - fill: #e7f2da; + fill: #fffcdf; } .italic { diff --git a/client/sprotty-ecore/images/EAttribute.svg b/client/sprotty-ecore/images/EAttribute.svg new file mode 100644 index 0000000..9150a98 --- /dev/null +++ b/client/sprotty-ecore/images/EAttribute.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/client/sprotty-ecore/images/EClass.svg b/client/sprotty-ecore/images/EClass.svg new file mode 100644 index 0000000..c963236 --- /dev/null +++ b/client/sprotty-ecore/images/EClass.svg @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/client/sprotty-ecore/images/EClass_abstract.svg b/client/sprotty-ecore/images/EClass_abstract.svg new file mode 100644 index 0000000..6bb72ab --- /dev/null +++ b/client/sprotty-ecore/images/EClass_abstract.svg @@ -0,0 +1,137 @@ + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + diff --git a/client/sprotty-ecore/images/EClass_interface.svg b/client/sprotty-ecore/images/EClass_interface.svg new file mode 100644 index 0000000..60b9ec7 --- /dev/null +++ b/client/sprotty-ecore/images/EClass_interface.svg @@ -0,0 +1,140 @@ + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + diff --git a/client/sprotty-ecore/images/EDataType.svg b/client/sprotty-ecore/images/EDataType.svg new file mode 100644 index 0000000..3ce508e --- /dev/null +++ b/client/sprotty-ecore/images/EDataType.svg @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/sprotty-ecore/images/EEnum.svg b/client/sprotty-ecore/images/EEnum.svg new file mode 100644 index 0000000..0f6c8a2 --- /dev/null +++ b/client/sprotty-ecore/images/EEnum.svg @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + diff --git a/client/sprotty-ecore/images/EEnumLiteral.svg b/client/sprotty-ecore/images/EEnumLiteral.svg new file mode 100644 index 0000000..cebed01 --- /dev/null +++ b/client/sprotty-ecore/images/EEnumLiteral.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/client/sprotty-ecore/src/di.config.ts b/client/sprotty-ecore/src/di.config.ts index c0d07aa..31c1d38 100644 --- a/client/sprotty-ecore/src/di.config.ts +++ b/client/sprotty-ecore/src/di.config.ts @@ -71,8 +71,8 @@ import { Container, ContainerModule } from "inversify"; import {EditLabelUIAutocomplete} from "./features/edit-label-autocomplete"; import { EditLabelUI } from "sprotty/lib"; import { LabelSelectionFeedback } from "./feedback"; -import {ArrowEdge, CompositionEdge, Icon, InheritanceEdge, LabeledNode, SEditableLabel, SLabelNode} from "./model"; -import { ArrowEdgeView, ClassNodeView, CompositionEdgeView, IconView, InheritanceEdgeView, LabelNodeView } from "./views"; +import {ArrowEdge, CompositionEdge, InheritanceEdge, LabeledNode, SEditableLabel, SLabelNode, IconDataType, IconEnum, IconInterface, IconAbstract, IconClass} from "./model"; +import { ArrowEdgeView, ClassNodeView, CompositionEdgeView, IconView, InheritanceEdgeView, LabelNodeView, EcoreSLabelView } from "./views"; export default (containerId: string) => { const classDiagramModule = new ContainerModule((bind, unbind, isBound, rebind) => { @@ -89,12 +89,16 @@ export default (containerId: string) => { configureModelElement(context, 'label:name', SEditableLabel, SLabelView); configureModelElement(context, 'label:edge', SLabel, SLabelView); configureModelElement(context, 'node:attribute', SLabelNode, LabelNodeView); - configureModelElement(context, 'node:enumliteral', SNode, RectangularNodeView); + configureModelElement(context, 'node:enumliteral', SLabel, EcoreSLabelView); configureModelElement(context, 'node:operation', SNode, RectangularNodeView); configureModelElement(context, 'label:text', SLabel, SLabelView); configureModelElement(context, 'comp:comp', SCompartment, SCompartmentView); configureModelElement(context, 'comp:header', SCompartment, SCompartmentView); - configureModelElement(context, 'icon', Icon, IconView); + configureModelElement(context, 'icon:class', IconClass, IconView); + configureModelElement(context, 'icon:abstract', IconAbstract, IconView); + configureModelElement(context, 'icon:interface', IconInterface, IconView); + configureModelElement(context, 'icon:enum', IconEnum, IconView); + configureModelElement(context, 'icon:datatype', IconDataType, IconView); configureModelElement(context, 'label:icon', SLabel, SLabelView); configureModelElement(context, 'html', HtmlRoot, HtmlRootView); configureModelElement(context, 'routing-point', SRoutingHandle, SRoutingHandleView); diff --git a/client/sprotty-ecore/src/feedback.tsx b/client/sprotty-ecore/src/feedback.tsx index be43acd..1aaa18a 100644 --- a/client/sprotty-ecore/src/feedback.tsx +++ b/client/sprotty-ecore/src/feedback.tsx @@ -29,7 +29,7 @@ const JSX = { createElement: snabbdom.svg }; export class LabelSelectionFeedback implements IVNodePostprocessor { decorate(vnode: VNode, element: SModelElement): VNode { if (element instanceof SLabelNode && element.selected) { - const vPadding = 3; + const vPadding = 1; const hPadding = 5; const feedback: VNode = ( diff --git a/client/sprotty-ecore/src/model.ts b/client/sprotty-ecore/src/model.ts index 441c5f1..b47afcb 100644 --- a/client/sprotty-ecore/src/model.ts +++ b/client/sprotty-ecore/src/model.ts @@ -58,7 +58,6 @@ export class LabeledNode extends RectangularNode implements WithEditableLabel, N hasFeature(feature: symbol) { return super.hasFeature(feature) || feature === nameFeature || feature === withEditLabelFeature; } - } export class SEditableLabel extends SLabel implements EditableLabel { @@ -68,21 +67,39 @@ export class SEditableLabel extends SLabel implements EditableLabel { } export class Icon extends SShapeElement { - size = { - width: 32, - height: 32 - }; + iconImageName: string; hasFeature(feature: symbol): boolean { return feature === boundsFeature || feature === layoutContainerFeature || feature === layoutableChildFeature || feature === fadeFeature; } } +export class IconClass extends Icon { + iconImageName = "EClass.svg"; +} + +export class IconAbstract extends Icon { + iconImageName = "EClass_abstract.svg"; +} + +export class IconInterface extends Icon { + iconImageName = "EClass_interface.svg"; +} + +export class IconEnum extends Icon { + iconImageName = "EEnum.svg"; +} + +export class IconDataType extends Icon { + iconImageName = "EDataType.svg"; +} + export class SLabelNode extends SLabel implements EditableLabel { hoverFeedback: boolean = false; hasFeature(feature: symbol): boolean { - return (feature === selectFeature || feature === editLabelFeature || feature === popupFeature || feature === deletableFeature || feature === hoverFeedbackFeature || super.hasFeature(feature)); + return (feature === selectFeature || feature === editLabelFeature || feature === popupFeature || feature === deletableFeature || + feature === hoverFeedbackFeature || super.hasFeature(feature)); } } diff --git a/client/sprotty-ecore/src/views.tsx b/client/sprotty-ecore/src/views.tsx index eaaa04d..633876b 100644 --- a/client/sprotty-ecore/src/views.tsx +++ b/client/sprotty-ecore/src/views.tsx @@ -26,7 +26,8 @@ import { SEdge, setAttr, SLabelView, - toDegrees + toDegrees, + SLabel, } from "sprotty/lib"; import { Icon, LabeledNode, SLabelNode } from "./model"; @@ -36,29 +37,39 @@ const JSX = { createElement: snabbdom.svg }; @injectable() export class ClassNodeView extends RectangularNodeView { render(node: LabeledNode, context: RenderingContext): VNode { + + const rhombStr = "M 0,38 L " + node.bounds.width + ",38"; + return + + + + + + {context.renderChildren(node)} + {(node.children[1] && node.children[1].children.length > 0) ? + : ''} + } ; } } + @injectable() export class IconView implements IView { - render(element: Icon, context: RenderingContext): VNode { - const radius = this.getRadius(); + const image = require("../images/" + element.iconImageName); + return - + {context.renderChildren(element)} ; } - - getRadius() { - return 16; - } } + @injectable() export class ArrowEdgeView extends PolylineEdgeView { protected renderAdditionals(edge: SEdge, segments: Point[], context: RenderingContext): VNode[] { @@ -69,7 +80,6 @@ export class ArrowEdgeView extends PolylineEdgeView { transform={`rotate(${angle(p2, p1)} ${p2.x} ${p2.y}) translate(${p2.x} ${p2.y})`} />, ]; } - } @injectable() @@ -122,13 +132,34 @@ export class AggregationEdgeView extends DiamondEdgeView { @injectable() export class LabelNodeView extends SLabelView { render(labelNode: Readonly, context: RenderingContext): VNode { + const image = require("../images/EAttribute.svg"); + const vnode = ( - {labelNode.text} + + {labelNode.text} + + ); + + const subType = getSubType(labelNode); + if (subType) setAttr(vnode, "class", subType); + return vnode; + } +} + +@injectable() +export class EcoreSLabelView extends SLabelView { + render(labelNode: Readonly, context: RenderingContext): VNode { + const image = require("../images/EEnumLiteral.svg"); + + const vnode = ( + + + {labelNode.text} ); diff --git a/server/ecore-glsp/src/main/java/com/eclipsesource/glsp/ecore/EcoreDiagramConfiguration.java b/server/ecore-glsp/src/main/java/com/eclipsesource/glsp/ecore/EcoreDiagramConfiguration.java index d64f41f..4dcbe51 100644 --- a/server/ecore-glsp/src/main/java/com/eclipsesource/glsp/ecore/EcoreDiagramConfiguration.java +++ b/server/ecore-glsp/src/main/java/com/eclipsesource/glsp/ecore/EcoreDiagramConfiguration.java @@ -103,7 +103,11 @@ public Map getTypeMappings() { mappings.put(Types.COMP, GraphPackage.Literals.GCOMPARTMENT); mappings.put(Types.COMP_HEADER, GraphPackage.Literals.GCOMPARTMENT); mappings.put(Types.LABEL_ICON, GraphPackage.Literals.GCOMPARTMENT); - mappings.put(Types.ICON, GraphPackage.Literals.GCOMPARTMENT); + mappings.put(Types.ICON_CLASS, GraphPackage.Literals.GCOMPARTMENT); + mappings.put(Types.ICON_ABSTRACT, GraphPackage.Literals.GCOMPARTMENT); + mappings.put(Types.ICON_INTERFACE, GraphPackage.Literals.GCOMPARTMENT); + mappings.put(Types.ICON_ENUM, GraphPackage.Literals.GCOMPARTMENT); + mappings.put(Types.ICON_DATATYPE, GraphPackage.Literals.GCOMPARTMENT); // ecore stuff mappings.put(Types.ECLASS, GraphPackage.Literals.GNODE); diff --git a/server/ecore-glsp/src/main/java/com/eclipsesource/glsp/ecore/gmodel/ClassifierNodeFactory.java b/server/ecore-glsp/src/main/java/com/eclipsesource/glsp/ecore/gmodel/ClassifierNodeFactory.java index 19e201b..aa12000 100644 --- a/server/ecore-glsp/src/main/java/com/eclipsesource/glsp/ecore/gmodel/ClassifierNodeFactory.java +++ b/server/ecore-glsp/src/main/java/com/eclipsesource/glsp/ecore/gmodel/ClassifierNodeFactory.java @@ -26,7 +26,6 @@ import com.eclipsesource.glsp.ecore.enotation.Shape; import com.eclipsesource.glsp.ecore.model.EcoreModelState; -import com.eclipsesource.glsp.ecore.util.EcoreBuilder; import com.eclipsesource.glsp.ecore.util.EcoreConfig.CSS; import com.eclipsesource.glsp.ecore.util.EcoreConfig.Types; import com.eclipsesource.glsp.graph.GCompartment; @@ -127,8 +126,7 @@ private void applyShapeData(EClassifier classifier, GNodeBuilder builder) { private GCompartment buildHeader(EClassifier classifier) { return new GCompartmentBuilder(Types.COMP_HEADER) // .layout("hbox") // - .add(new EcoreBuilder.IconBuilder() // - .label(Character.toString(getIconChar(classifier))) // + .add(new GCompartmentBuilder(getType(classifier)) // .build()) // .add(new GLabelBuilder(Types.LABEL_NAME) // .text(classifier.getName()) // @@ -149,21 +147,22 @@ private GCompartment createLabeledChildrenCompartment(Collection { - private String label; - - public IconBuilder() { - super(Types.ICON); - layout("stack"); - layoutOptions(new GLayoutOptionsBuilder() // - .hAlign("center") // - .resizeContainer(false) // - .build()); // - } - - public IconBuilder label(String label) { - this.label = label; - return self(); - } - - @Override - protected void setProperties(GCompartment comp) { - add(new GLabelBuilder(Types.LABEL_ICON) // - .text(label) // - .build()); - super.setProperties(comp); - } - - @Override - protected GCompartment instantiate() { - return GraphFactory.eINSTANCE.createGCompartment(); - } - - @Override - protected IconBuilder self() { - return this; - } - } -} diff --git a/server/ecore-glsp/src/main/java/com/eclipsesource/glsp/ecore/util/EcoreConfig.java b/server/ecore-glsp/src/main/java/com/eclipsesource/glsp/ecore/util/EcoreConfig.java index 1b504ee..9ac6ea6 100644 --- a/server/ecore-glsp/src/main/java/com/eclipsesource/glsp/ecore/util/EcoreConfig.java +++ b/server/ecore-glsp/src/main/java/com/eclipsesource/glsp/ecore/util/EcoreConfig.java @@ -24,9 +24,12 @@ public static final class Types { public static final String LABEL_EDGE = "label:edge"; public static final String COMP = "comp:comp"; public static final String COMP_HEADER = "comp:header"; - public static final String ICON = "icon"; + public static final String ICON_CLASS = "icon:class"; + public static final String ICON_ABSTRACT = "icon:abstract"; + public static final String ICON_INTERFACE = "icon:interface"; + public static final String ICON_ENUM = "icon:enum"; + public static final String ICON_DATATYPE = "icon:datatype"; public static final String LABEL_ICON = "label:icon"; - public static final String ECLASS = "node:class"; public static final String ENUM = "node:enum"; public static final String DATATYPE = "node:datatype";