eclipse-sprotty · spoenemann · Sep 3, 2019 · Aug 30, 2019 · Sep 3, 2019
diff --git a/examples/app.ts b/examples/app.ts
@@ -16,7 +16,7 @@
 
 import "reflect-metadata";
 
-import runStandalone from "./circlegraph/src/standalone";
+import runCircleGraph from "./circlegraph/src/standalone";
 import runClassDiagram from "./classdiagram/src/standalone";
 import runMindmap from "./mindmap/src/standalone";
 import runSvgPreRendered from "./svg/src/standalone";
@@ -26,7 +26,7 @@ const appDiv = document.getElementById('sprotty-app')
 if(appDiv) {
     const appMode = appDiv.getAttribute('data-app');
     if (appMode === 'circlegraph')
-        runStandalone();
+        runCircleGraph();
     else if (appMode === 'class-diagram')
         runClassDiagram();
     else if (appMode === 'mindmap')

diff --git a/examples/circlegraph/circlegraph.html b/examples/circlegraph/circlegraph.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>sprotty Circles Example</title>
+    <title>Sprotty Circles Example</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">    
     <link rel="stylesheet" href="css/page.css">
     <!-- support Microsoft browsers -->
@@ -13,10 +13,11 @@
     <div class="container">
         <div class="row" id="sprotty-app" data-app="circlegraph">
             <div class="col-md-10">
-                <h1>sprotty Circles Example</h1>
+                <h1>Sprotty Circles Example</h1>
                 <p>
                     <button id="addNode">Add node</button>
-                    <button id="scrambleNodes">Scramble nodes</button>
+                    <button id="scrambleAll">Scramble all</button>
+                    <button id="scrambleSelection">Scramble selection</button>
                 </p>
             </div>
             <div class="help col-md-2">

diff --git a/examples/circlegraph/src/di.config.ts b/examples/circlegraph/src/di.config.ts
@@ -19,10 +19,19 @@ import {
     defaultModule, TYPES, configureViewerOptions, SGraphView, PolylineEdgeView, ConsoleLogger,
     LogLevel, WebSocketDiagramServer, boundsModule, moveModule, selectModule, undoRedoModule, viewportModule,
     LocalModelSource, exportModule, CircularNode, configureModelElement, SGraph, SEdge, updateModule,
-    graphModule, routingModule, modelSourceModule
+    graphModule, routingModule, modelSourceModule, selectFeature
 } from "../../../src";
 import { CircleNodeView } from "./views";
 
+class CustomEdge extends SEdge {
+    hasFeature(feature: symbol): boolean {
+        if (feature === selectFeature)
+            return false;
+        else
+            return super.hasFeature(feature);
+    }
+}
+
 export default (useWebsocket: boolean) => {
     require("../../../css/sprotty.css");
     require("../css/diagram.css");
@@ -36,7 +45,7 @@ export default (useWebsocket: boolean) => {
         const context = { bind, unbind, isBound, rebind };
         configureModelElement(context, 'graph', SGraph, SGraphView);
         configureModelElement(context, 'node:circle', CircularNode, CircleNodeView);
-        configureModelElement(context, 'edge:straight', SEdge, PolylineEdgeView);
+        configureModelElement(context, 'edge:straight', CustomEdge, PolylineEdgeView);
         configureViewerOptions(context, {
             needsClientLayout: false
         });

diff --git a/examples/circlegraph/src/standalone.ts b/examples/circlegraph/src/standalone.ts
@@ -16,79 +16,115 @@
 
 import {
     TYPES, IActionDispatcher, SModelElementSchema, SEdgeSchema, SNodeSchema, SGraphSchema, SGraphFactory,
-    ElementMove, MoveAction, LocalModelSource
+    ElementMove, MoveAction, LocalModelSource, Bounds, SelectAction, Point
 } from "../../../src";
 import createContainer from "./di.config";
 
-export default function runStandalone() {
-    const container = createContainer(false);
-
-    // Initialize gmodel
-    const node0 = { id: 'node0', type: 'node:circle', position: { x: 100, y: 100 }, size: { width: 80, height: 80 } };
-    const graph: SGraphSchema = { id: 'graph', type: 'graph', children: [node0] };
+const NODE_SIZE = 60;
 
+export default async function runCircleGraph() {
     let count = 2;
-    function addNode(): SModelElementSchema[] {
+    function addNode(bounds: Bounds): SModelElementSchema[] {
         const newNode: SNodeSchema = {
             id: 'node' + count,
             type: 'node:circle',
             position: {
-                x: Math.random() * 1024,
-                y: Math.random() * 768
+                x: bounds.x + Math.random() * (bounds.width - NODE_SIZE),
+                y: bounds.y + Math.random() * (bounds.height - NODE_SIZE)
             },
             size: {
-                width: 80,
-                height: 80
+                width: NODE_SIZE,
+                height: NODE_SIZE
             }
         };
         const newEdge: SEdgeSchema = {
             id: 'edge' + count,
             type: 'edge:straight',
             sourceId: 'node0',
-            targetId: 'node' + count++
+            targetId: 'node' + count
         };
+        count++;
         return [newNode, newEdge];
     }
 
-    for (let i = 0; i < 200; ++i) {
-        const newElements = addNode();
-        for (const e of newElements) {
-            graph.children.splice(0, 0, e);
+    function focusGraph(): void {
+        const graphElement = document.getElementById('graph');
+        if (graphElement !== null && typeof graphElement.focus === 'function')
+            graphElement.focus();
+    }
+
+    function getVisibleBounds({ canvasBounds, scroll, zoom }: { canvasBounds: Bounds; scroll: Point; zoom: number; }): Bounds {
+        return {
+            ...scroll,
+            width: canvasBounds.width / zoom,
+            height: canvasBounds.height / zoom
         }
     }
 
-    // Run
+    const container = createContainer(false);
+    const dispatcher = container.get<IActionDispatcher>(TYPES.IActionDispatcher);
+    const factory = container.get<SGraphFactory>(TYPES.IModelFactory);
     const modelSource = container.get<LocalModelSource>(TYPES.ModelSource);
+
+    // Initialize model
+    const node0 = { id: 'node0', type: 'node:circle', position: { x: 100, y: 100 }, size: { width: NODE_SIZE, height: NODE_SIZE } };
+    const graph: SGraphSchema = { id: 'graph', type: 'graph', children: [node0] };
+
+    const initialViewport = await modelSource.getViewport()
+    for (let i = 0; i < 200; ++i) {
+        const newElements = addNode(getVisibleBounds(initialViewport));
+        graph.children.push(...newElements);
+    }
+
+    // Run
     modelSource.setModel(graph);
 
     // Button features
-    document.getElementById('addNode')!.addEventListener('click', () => {
-        const newElements = addNode();
+    document.getElementById('addNode')!.addEventListener('click', async () => {
+        const viewport = await modelSource.getViewport()
+        const newElements = addNode(getVisibleBounds(viewport));
         modelSource.addElements(newElements);
-        const graphElement = document.getElementById('graph');
-        if (graphElement !== null && typeof graphElement.focus === 'function')
-            graphElement.focus();
+        dispatcher.dispatch(new SelectAction(newElements.map(e => e.id)));
+        focusGraph();
     });
 
-    const dispatcher = container.get<IActionDispatcher>(TYPES.IActionDispatcher);
-    const factory = container.get<SGraphFactory>(TYPES.IModelFactory);
-    document.getElementById('scrambleNodes')!.addEventListener('click', function (e) {
+    document.getElementById('scrambleAll')!.addEventListener('click', async () => {
+        const viewport = await modelSource.getViewport()
+        const bounds = getVisibleBounds(viewport);
         const nodeMoves: ElementMove[] = [];
         graph.children.forEach(shape => {
             if (factory.isNodeSchema(shape)) {
                 nodeMoves.push({
                     elementId: shape.id,
                     toPosition: {
-                        x: Math.random() * 1024,
-                        y: Math.random() * 768
+                        x: bounds.x + Math.random() * (bounds.width - NODE_SIZE),
+                        y: bounds.y + Math.random() * (bounds.height - NODE_SIZE)
                     }
                 });
             }
         });
         dispatcher.dispatch(new MoveAction(nodeMoves, true));
-        const graphElement = document.getElementById('graph');
-        if (graphElement !== null && typeof graphElement.focus === 'function')
-            graphElement.focus();
+        focusGraph();
+    });
+
+    document.getElementById('scrambleSelection')!.addEventListener('click', async () => {
+        const selection = await modelSource.getSelection();
+        const viewport = await modelSource.getViewport()
+        const bounds = getVisibleBounds(viewport);
+        const nodeMoves: ElementMove[] = [];
+        selection.forEach(shape => {
+            if (factory.isNodeSchema(shape)) {
+                nodeMoves.push({
+                    elementId: shape.id,
+                    toPosition: {
+                        x: bounds.x + Math.random() * (bounds.width - NODE_SIZE),
+                        y: bounds.y + Math.random() * (bounds.height - NODE_SIZE)
+                    }
+                });
+            }
+        });
+        dispatcher.dispatch(new MoveAction(nodeMoves, true));
+        focusGraph();
     });
 
 }
diff --git a/examples/circlegraph/src/views.tsx b/examples/circlegraph/src/views.tsx
@@ -34,7 +34,8 @@ export class CircleNodeView implements IView {
         </g>;
     }
 
-    protected getRadius(node: SNode) {
-        return 40;
+    protected getRadius(node: SNode): number {
+        const d = Math.min(node.size.width, node.size.height);
+        return d > 0 ? d / 2 : 0;
     }
 }
diff --git a/examples/classdiagram/class-diagram.html b/examples/classdiagram/class-diagram.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>sprotty Class Diagram Example</title>
+    <title>Sprotty Class Diagram Example</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">    
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
@@ -15,7 +15,7 @@
     <div class="container">
         <div class="row" id="sprotty-app" data-app="class-diagram">
             <div class="col-md-10">
-                <h1>sprotty Class Diagram Example</h1>
+                <h1>Sprotty Class Diagram Example</h1>
             </div>
             <div class="help col-md-2">
                 <a href='https://github.com/theia-ide/sprotty/wiki/Using-sprotty'>Help</a>

diff --git a/examples/classdiagram/src/popup.ts b/examples/classdiagram/src/popup.ts
@@ -14,24 +14,29 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { injectable } from "inversify";
+import { injectable, inject } from "inversify";
 import {
-    SModelElementSchema, SModelRootSchema, RequestPopupModelAction, PreRenderedElementSchema, IPopupModelProvider
+    TYPES, IModelFactory, SModelElementSchema, SModelRootSchema, RequestPopupModelAction,
+    PreRenderedElementSchema, IPopupModelProvider
 } from "../../../src";
+import { ClassNode } from "./model";
 
 @injectable()
 export class PopupModelProvider implements IPopupModelProvider {
 
+    @inject(TYPES.IModelFactory) modelFactory: IModelFactory;
+
     getPopupModel(request: RequestPopupModelAction, element?: SModelElementSchema): SModelRootSchema | undefined {
         if (element !== undefined && element.type === 'node:class') {
+            const node = this.modelFactory.createElement(element) as ClassNode;
             return {
                 type: 'html',
                 id: 'popup',
                 children: [
                     <PreRenderedElementSchema> {
                         type: 'pre-rendered',
                         id: 'popup-title',
-                        code: `<div class="sprotty-popup-title">Class ${element.id === 'node0' ? 'Foo' : 'Bar'}</div>`
+                        code: `<div class="sprotty-popup-title">Class ${node.name}</div>`
                     },
                     <PreRenderedElementSchema> {
                         type: 'pre-rendered',

diff --git a/examples/index.html b/examples/index.html
@@ -3,16 +3,16 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>sprotty Examples</title>
+    <title>Sprotty Examples</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
 </head>
 <body>
 <div class="container">
     <div class="row">
         <div class="col-md-12">
-            <h1>sprotty Examples</h1>
-            <a href="https://github.com/eclipse/sprotty">sprotty</a> is a web-based diagramming framework.
-            For information how to use these examples see <a href="https://github.com/eclipse/sprotty/wiki/Using-sprotty">Using sprotty</a>.
+            <h1>Sprotty Examples</h1>
+            <a href="https://github.com/eclipse/sprotty">Sprotty</a> is a web-based diagramming framework.
+            For information how to use these examples see <a href="https://github.com/eclipse/sprotty/wiki/Using-sprotty">Using Sprotty</a>.
 
             <h3>Without server</h3>
             <ul>

diff --git a/examples/mindmap/mindmap.html b/examples/mindmap/mindmap.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>sprotty Mindmap Example</title>
+    <title>Sprotty Mindmap Example</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">    
     <link rel="stylesheet" href="css/page.css">
     <!-- support Microsoft browsers -->
@@ -13,7 +13,7 @@
     <div class="container">
         <div class="row" id="sprotty-app" data-app="mindmap">
             <div class="col-md-6">
-                <h1>sprotty Mindmap Example</h1>
+                <h1>Sprotty Mindmap Example</h1>
             </div>
             <div class="description col-md-4">
                 Use the mouse hover popup buttons to add or remove nodes.

diff --git a/examples/mindmap/src/popup.ts b/examples/mindmap/src/popup.ts
@@ -18,7 +18,7 @@ import { inject, injectable } from "inversify";
 import {
     TYPES, SModelElementSchema, SModelRootSchema, RequestPopupModelAction, MouseListener,
     SModelElement, Action, LocalModelSource, SNodeSchema, SetPopupModelAction, EMPTY_ROOT,
-    Point, Command, CommandExecutionContext, CommandResult, SChildElement, FadeAnimation,
+    Point, Command, CommandExecutionContext, CommandReturn, SChildElement, FadeAnimation,
     isFadeable, isLocateable, isBoundsAware, subtract, IPopupModelProvider
 } from "../../../src";
 import { PopupButtonSchema, PopupButton } from "./model";
@@ -108,7 +108,7 @@ export class AddElementCommand extends Command {
         super();
     }
 
-    execute(context: CommandExecutionContext): CommandResult {
+    execute(context: CommandExecutionContext): CommandReturn {
         const newElement = context.modelFactory.createElement(this.action.newElement);
         context.root.add(newElement);
         this.initialize(newElement);
@@ -130,15 +130,15 @@ export class AddElementCommand extends Command {
         }
     }
 
-    undo(context: CommandExecutionContext): CommandResult {
+    undo(context: CommandExecutionContext): CommandReturn {
         const element = context.root.index.getById(this.action.newElement.id);
         if (element instanceof SChildElement) {
             element.parent.remove(element);
         }
         return context.root;
     }
 
-    redo(context: CommandExecutionContext): CommandResult {
+    redo(context: CommandExecutionContext): CommandReturn {
         return this.execute(context);
     }
 }
diff --git a/examples/multicore/multicore.html b/examples/multicore/multicore.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>sprotty Multicore Example</title>
+    <title>Sprotty Multicore Example</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">    
     <link rel="stylesheet" href="css/page.css">
     <!-- support Microsoft browsers -->
@@ -13,7 +13,7 @@
     <div class="container">
         <div class="row" id="sprotty-app" data-app="multicore">
             <div class="col-md-10">
-                <h1>sprotty Multicore Example</h1>
+                <h1>Sprotty Multicore Example</h1>
             </div>
             <div class="help col-md-2">
                 <a href='https://github.com/theia-ide/sprotty/wiki/Using-sprotty'>Help</a>

diff --git a/examples/svg/svg-prerendered.html b/examples/svg/svg-prerendered.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>sprotty SVG Example</title>
+    <title>Sprotty SVG Example</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">    
     <link rel="stylesheet" href="css/page.css">
     <!-- support Microsoft browsers -->
@@ -13,7 +13,7 @@
     <div class="container">
         <div class="row" id="sprotty-app" data-app="svg">
             <div class="col-md-10">
-                <h1>sprotty SVG Example</h1>
+                <h1>Sprotty SVG Example</h1>
             </div>
             <div class="help col-md-2">
                 <a href='https://github.com/theia-ide/sprotty/wiki/Using-sprotty'>Help</a>