Grid paper.

Author: Orbifold

app/GridPaper.svg

@@ -11,7 +11,7 @@
             height: 100%;
             padding: 0;
             margin: 0;
-            background-color: #2e2e2e;
+            background: #2e2e2e url("./GridPaper.svg");
         }
 
         .flow-node-title {

app/index.html

@@ -47,8 +47,15 @@ export class FlowPortViewModel implements IFlowPortViewModel {
     port:IPort;
 
 
-    constructor(name, portType, viewModel, position) {
-        this._name = name;
+    /**
+     *
+     * @param propertyName {string} Sets the property name of the {@link IFlowNodeViewModel} which will be used to pass data from the source.
+     * @param portType {PortType} The port type.
+     * @param viewModel {IFlowNodeViewModel} The view-model of the node the port belongs to.
+     * @param position {Point} The position of the port on the shape.
+     */
+    constructor(propertyName, portType, viewModel, position) {
+        this._name = propertyName;
         this._portType = portType;
         this._viewModel = viewModel;
         this._position = position;

app/scripts/core/FlowPortViewModel.ts

@@ -1,5 +1,5 @@
 import {ISurface} from './ISurface';
-import {BridgeCrossingStyle, BridgeManager, DefaultEdgePathCropper, Fill, GraphComponent, GraphEditorInputMode, GraphItemTypes, GraphObstacleProvider, HierarchicLayout, HierarchicNestingPolicy, IEdge, IGraph, INode, IPort, LayoutExecutor, License, ShapeNodeStyle, Size, TemplateNodeStyle} from 'yfiles';
+import {BridgeCrossingStyle, BridgeManager, DefaultEdgePathCropper, Fill, GraphComponent, GraphEditorInputMode, GraphItemTypes, GraphObstacleProvider, HierarchicLayout, HierarchicNestingPolicy, ICanvasObjectDescriptor, IEdge, IGraph, INode, IPort, LayoutExecutor, License, ShapeNodeStyle, Size, TemplateNodeStyle} from 'yfiles';
 import {IFlowModel} from './IFlowModel';
 import {IFlowPortViewModel} from './IFlowPortViewModel';
 import {IFlowNodeModel} from './IFlowNodeModel';
@@ -10,6 +10,7 @@ import IFlowEdgeViewModel from './IFlowEdgeViewModel';
 import RoutingEdgeStyle from '../style/EdgeStyle';
 import PortCandidateProvider from '../style/PortCandidateProvider';
 import * as _ from 'lodash';
+import {BackGridStyle} from '../style/BackGridStyle';
 
 
 /**
@@ -107,6 +108,9 @@ export class Surface implements ISurface {
         // crop the edge path at the port and not at the node bounds
         DefaultEdgePathCropper.isInstance(this.graph);
 
+        // this.graphComponent.backgroundGroup.addChild(new BackGridStyle(),
+        //     ICanvasObjectDescriptor.VISUAL);
+
         const decorator = this.graph.decorator;
         const pathCropper = new DefaultEdgePathCropper();
         pathCropper.cropAtPort = true;

app/scripts/core/Surface.ts

@@ -0,0 +1,51 @@
+import {HtmlCanvasVisual, IRenderContext, Point} from 'yfiles';
+
+export class BackGridStyle extends HtmlCanvasVisual {
+    minorTickSpacing: number
+    minorTickSize: number
+    private scaleFactor: number;
+    private majorTickSpacing: number;
+    private labeledTickSpacing: number;
+    private tickSpacingFactor: number;
+
+    constructor() {
+        super();
+        this.scaleFactor = 1;
+        this.minorTickSpacing = 20;
+        this.majorTickSpacing = 100;
+        this.labeledTickSpacing = 200;
+        this.tickSpacingFactor = 1;
+    }
+
+    paint(renderContext: IRenderContext, ctx: CanvasRenderingContext2D): void {
+        const canvas = renderContext.canvasComponent;
+        const viewPoint = canvas.viewPoint;
+        const viewPort = canvas.viewport;
+        ctx.translate(viewPoint.x, viewPoint.y);
+
+        ctx.strokeStyle = '#000';
+        ctx.fillStyle = '#000';
+
+        ctx.beginPath();
+
+        let tickNr = Math.floor(viewPort.x / this.minorTickSpacing);
+        const worldX = tickNr * this.minorTickSpacing;
+        let viewX = 0;//canvas.toViewCoordinates(new Point(worldX, 0)).x;
+
+
+        while (viewX <= canvas.size.width + 10) {
+
+
+
+            if ((tickNr % this.tickSpacingFactor) === 0) {
+                ctx.moveTo(viewX, 0);
+                ctx.lineTo(viewX, canvas.size.height);
+            }
+
+            viewX += (this.minorTickSpacing );
+        }
+
+        ctx.stroke();
+    }
+
+}

app/scripts/style/BackGridStyle.ts

@@ -1,4 +1,4 @@
-import {BaseClass, DefaultPortCandidate, INode, IPortCandidate, IPortCandidateProvider, List, PortCandidateProviderBase} from 'yfiles';
+import {BaseClass, DefaultPortCandidate, IEnumerable, IInputModeContext, INode, IPortCandidate, IPortCandidateProvider, List, PortCandidateProviderBase} from 'yfiles';
 import {FlowPortModel} from './FlowPortModel';
 import {PortType} from '../core/PortType';
 import {IFlowPortViewModel} from '../core/IFlowPortViewModel';
@@ -18,19 +18,12 @@ export default class PortCandidateProvider extends   PortCandidateProviderBase {
      * @returns {IEnumerable.<IPortCandidate>}
      */
     getAllSourcePortCandidates(context) {
-        // create a port candidate at the right side of the node
+
         const candidates = new List<IPortCandidate>();
-        const found = this.node.ports.filter(p => p.tag && (p.tag as IFlowPortViewModel).portType == PortType.OUTPUT);
-        if (found.size === 0) {
-            return candidates;
-        }
-        // const defaultPortCandidate: IPortCandidate = new DefaultPortCandidate(
-        //     this.node,
-        //     found.first().locationParameter
-        // );
-        // candidates.add(defaultPortCandidate);
+        // add all
         this.addExistingPorts(this.node, candidates);
-        return candidates
+        // but keep only the output
+        return  candidates.filter(p => p.port.tag && (p.port.tag as IFlowPortViewModel).portType == PortType.OUTPUT)
     }
 
     /**
@@ -40,13 +33,10 @@ export default class PortCandidateProvider extends   PortCandidateProviderBase {
      */
     getAllTargetPortCandidates(context) {
         const candidates = new List<IPortCandidate>();
-        const found = this.node.ports.filter(p => p.tag && (p.tag as IFlowPortViewModel).portType == PortType.INPUT);
-        if (found.size === 0) {
-            return candidates;
-        }
-
+        // add all
         this.addExistingPorts(this.node, candidates);
-        return candidates
+        // but keep only the output
+        return  candidates.filter(p => p.port.tag && (p.port.tag as IFlowPortViewModel).portType == PortType.INPUT);
     }
 
     /**
@@ -66,4 +56,8 @@ export default class PortCandidateProvider extends   PortCandidateProviderBase {
     getTargetPortCandidates(context, source) {
         return this.getAllTargetPortCandidates(context)
     }
+
+    getPortCandidates(context: IInputModeContext): IEnumerable<IPortCandidate> {
+        return undefined;
+    }
 }