Skip to content

Commit 3bac8d1

Browse files
yGuyyGuy
committed
Updated to work nicely with yFiles 2.3 - plus some improvements
1 parent 695ea40 commit 3bac8d1

22 files changed

Lines changed: 2260 additions & 2149 deletions

‎README.md‎

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,80 @@
11
# Visual Programming based on yFiles
22

3+
[![A screenshot of this sample application](./Screenshot.png)](https://live.yworks.com/)
34

5+
Run the application here: https://live.yworks.com/
46

5-
![Screenshot](./Screenshot.png)
7+
This repository contains a sample application that can be used as a template to create your
8+
own visual programming editor.
9+
10+
## See also
11+
12+
- [Learn more about yFiles](https://www.yworks.com/products/yfiles), the software library for visualizing, editing, and analyzing graphs
13+
14+
## How to run and develop this app as a software developer
15+
16+
You need a copy of the [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) diagramming library in order
17+
to develop this application. You can download a free test version of yFiles in the
18+
[yWorks Customer Center](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).
19+
20+
Checkout this project, then extract the yFiles for HTML package zip to some directory and run the initial steps in that
21+
package for playing with the demos (execute the `start_demos` script or install the `package.json` in the `demos` directory).
22+
This will automatically create an `npm` package file (`yfiles-23.0.1-eval-dev.tgz` and `yfiles-23.0.1-eval.tgz`) (using `npm pack` in the `lib\es-modules` directory), but of course this last step can also be done, manually.
23+
24+
That `.tgz` file needs to be placed top-level in the directory of this checkout next to this file so that it can be installed via `npm i` or `yarn` into this project (it is referenced in the [`package.json`, here](./package.json).
25+
Before you compile and run the project, also copy the `license.json` file from the yFiles package (find it in `lib\license.json` as `yfiles-license.json` and also drop it into this directory.
26+
27+
This is what your directory contents should look like:
28+
29+
```
30+
documents
31+
|-- visual-programming
32+
+-- yfiles-23.0.1-eval-dev.tgz
33+
+-- yfiles-license.json
34+
+-- README.md
35+
+-- ...
36+
```
37+
38+
Afterwards, run the usual commands
39+
40+
```
41+
npm i
42+
```
43+
44+
followed by
45+
46+
```
47+
npm run serve
48+
```
49+
50+
or if you prefer the visual UI from vue-cli
51+
52+
```
53+
vue ui
54+
```
55+
56+
## About
57+
58+
This application is powered by [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html), the powerful
59+
diagramming library. It was created as part of yWorks' [Fight Corona Program](https://www.yworks.com/support/fightcorona).
60+
61+
Turn your data into clear diagrams with the help of unequaled automatic diagram layout, use rich visualizations for your
62+
diagram elements, and give your users an intuitive interface for smooth interaction.
63+
64+
You can learn more about the many features that come with yFiles
65+
on the [yFiles Features Overview](https://www.yworks.com/products/yfiles/features).
66+
67+
If you want to try it for yourself, obtain a free test version of yFiles in the
68+
[yWorks Customer Center](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).
69+
70+
## License
71+
72+
The MIT License (MIT)
73+
74+
Copyright (c) 2020 yWorks GmbH
75+
76+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
77+
78+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
79+
80+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎app/scripts/app.ts‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {Class, LayoutExecutor} from 'yfiles';
1010
import {ISurface} from './core/ISurface';
1111
import {SpyFlowNodeController} from './elements/spy/SpyFlowNodeController';
1212
import {RaytraceFlowNodeController} from './elements/raytrace/RaytraceFlowNodeController';
13+
import {SumFlowNodeController} from "./elements/sum/SumFlowNodeController";
1314

1415

1516
Class.ensure(LayoutExecutor);
@@ -24,34 +25,33 @@ class App {
2425

2526
createSampleGraph() {
2627

27-
// const r = new RandomFlowNodeController(model, surface);
28-
// r.create();
29-
// const r2 = new RandomFlowNodeController(model, surface);
30-
// r2.create();
31-
// const sum = new SumFlowNodeController(model, surface);
32-
// sum.create();
33-
// const spy = new SpyFlowNodeController(model, surface);
34-
// spy.create();
35-
// surface.connect(r.ports['Output'], sum.ports['Input1']);
36-
// surface.connect(r2.ports['Output'], sum.ports['Input2']);
37-
// surface.connect(sum.ports['Output'], spy.ports['Input']);
38-
// spy.enabled = false;
28+
const rs1 = new RandomFlowNodeController(this.surface);
29+
rs1.mode = RandomMode.NUNBER
30+
const rs2 = new RandomFlowNodeController(this.surface);
31+
rs2.mode = RandomMode.NUNBER
32+
const sum = new SumFlowNodeController(this.surface);
33+
const sumSpy = new SpyFlowNodeController(this.surface);
34+
this.surface.connect(rs1.ports['Output'], sum.ports['Input1']);
35+
this.surface.connect(rs2.ports['Output'], sum.ports['Input2']);
36+
this.surface.connect(sum.ports['Output'], sumSpy.ports['Input']);
37+
sumSpy.enabled = false;
3938

4039

4140
const r1 = new RandomFlowNodeController(this.surface);
4241
r1.mode = RandomMode.VECTOR3;
4342
const r2 = new RandomFlowNodeController(this.surface);
4443
r2.mode = RandomMode.VECTOR3;
45-
// const r3 = new RandomFlowNodeController(this.surface);
46-
// r3.mode = RandomMode.UNIT;
47-
// const barchart = new BarChartFlowNodeController(this.surface);
48-
// this.surface.connect(random.ports['Output'], barchart.ports['Input']);
49-
// const spy = new SpyFlowNodeController(this.surface);
50-
// this.surface.connect(random.ports['Output'], spy.ports['Input']);
44+
const r3 = new RandomFlowNodeController(this.surface);
45+
r3.mode = RandomMode.UNIT;
46+
const r4 = new RandomFlowNodeController(this.surface);
47+
r4.mode = RandomMode.NUMBER_ARRAY;
48+
const barchart = new BarChartFlowNodeController(this.surface);
49+
this.surface.connect(r4.ports['Output'], barchart.ports['Input']);
50+
const spy = new SpyFlowNodeController(this.surface);
51+
this.surface.connect(r3.ports['Output'], spy.ports['Input']);
5152
const ray = new RaytraceFlowNodeController(this.surface);
5253
this.surface.connect(r1.ports['Output'], ray.ports['SurfaceColor']);
5354
this.surface.connect(r2.ports['Output'], ray.ports['EmissionColor']);
54-
// this.surface.connect(r3.ports['Output'], ray.ports['Reflection']);
5555
this.surface.layout();
5656
}
5757

‎app/scripts/core/IFlowNodeViewModel.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {IFlowPortViewModel} from './IFlowPortViewModel';
55
/**
66
* Defines the view-model of a flow element.
77
*/
8-
export interface IFlowNodeViewModel extends IPropertyObservable {
8+
export interface IFlowNodeViewModel {
99
id: string;
1010
model: IFlowModel;
1111
title: String;

‎app/scripts/core/IFlowPortViewModel.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {IFlowNodeModel} from './IFlowNodeModel';
66
/**
77
* Defines the view-model of a port.
88
*/
9-
export interface IFlowPortViewModel extends IPropertyObservable {
9+
export interface IFlowPortViewModel {
1010
/**
1111
* The name of the property or port.
1212
*/

‎app/scripts/core/Surface.ts‎

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {ISurface} from './ISurface';
2-
import {BridgeCrossingStyle, BridgeManager, DefaultEdgePathCropper, Fill, GraphComponent, GraphEditorInputMode, GraphItemTypes, GraphObstacleProvider, GraphViewerInputMode, HierarchicLayout, HierarchicNestingPolicy, ICanvasObjectDescriptor, IEdge, IGraph, INode, IPort, LayoutExecutor, License, ShapeNodeStyle, Size, TemplateNodeStyle} from 'yfiles';
2+
import {BridgeCrossingStyle, BridgeManager, DefaultEdgePathCropper, Fill, GraphComponent, GraphEditorInputMode, GraphItemTypes, GraphObstacleProvider, HierarchicLayout, HierarchicNestingPolicy, IEdge, IGraph, INode, IPort, LayoutExecutor, License, ShapeNodeStyle, Size, TemplateNodeStyle} from 'yfiles';
33
import {IFlowModel} from './IFlowModel';
44
import {IFlowPortViewModel} from './IFlowPortViewModel';
55
import {IFlowNodeModel} from './IFlowNodeModel';
@@ -10,8 +10,7 @@ import IFlowEdgeViewModel from './IFlowEdgeViewModel';
1010
import RoutingEdgeStyle from '../style/EdgeStyle';
1111
import PortCandidateProvider from '../style/PortCandidateProvider';
1212
import * as _ from 'lodash';
13-
import {BackGridStyle} from '../style/BackGridStyle';
14-
13+
import license from '../../../yfiles-license.json';
1514

1615
/**
1716
* High-level API managing the flow.
@@ -173,26 +172,7 @@ export class Surface implements ISurface {
173172
}
174173

175174
setLicense() {
176-
177-
License.value = {
178-
'company': 'The Orbifold b.v.b.a.',
179-
'date': '10/22/2019',
180-
'distribution': true,
181-
'domains': [
182-
'*'
183-
],
184-
'fileSystemAllowed': true,
185-
'licensefileversion': '1.1',
186-
'localhost': true,
187-
'oobAllowed': true,
188-
'package': 'complete',
189-
'product': 'yFiles for HTML',
190-
'projectname': 'yWorks Consulting',
191-
'subscription': '12/31/2020',
192-
'type': 'project',
193-
'version': '2.2',
194-
'key': 'd9568c2bdf4ebd16cf3d80a0edc8fe155ca5a38c'
195-
};
175+
License.value = license
196176
}
197177

198178
createComponent() {

‎app/scripts/elements/barchart/BarChartFlowNodeController.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export class BarChartFlowNodeController extends FlowNodeController {
1818

1919
const vmInput = this.viewModel.portViewModels['Input'];
2020
this.ports['Input'] = this.surface.graph.addPort({owner: this.node, locationParameter: FreeNodePortLocationModel.INSTANCE.createParameter( this.node, vmInput.position), style: this.inputStyle, tag: vmInput});
21-
2221
}
2322

2423
}

‎app/scripts/elements/raytrace/RaytraceFlowNodeController.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ export class RaytraceFlowNodeController extends FlowNodeController {
1818

1919
const surfaceColorInput = this.viewModel.portViewModels['SurfaceColor'];
2020
const emissionColorInput = this.viewModel.portViewModels['EmissionColor'];
21-
const transparencyInput = this.viewModel.portViewModels['Transparency'];
22-
const reflectionInput = this.viewModel.portViewModels['Reflection'];
21+
//const transparencyInput = this.viewModel.portViewModels['Transparency'];
22+
//const reflectionInput = this.viewModel.portViewModels['Reflection'];
2323
this.ports['SurfaceColor'] = this.surface.graph.addPort({owner: this.node, locationParameter: FreeNodePortLocationModel.INSTANCE.createParameter(this.node, surfaceColorInput.position), style: this.inputStyle, tag: surfaceColorInput});
2424
this.ports['EmissionColor'] = this.surface.graph.addPort({owner: this.node, locationParameter: FreeNodePortLocationModel.INSTANCE.createParameter(this.node, emissionColorInput.position), style: this.inputStyle, tag: emissionColorInput});
2525
// posted an issue, these params seem not to work in the raytracer
26-
// this.ports['Transparency'] = this.surface.graph.addPort({owner: this.node, locationParameter: FreeNodePortLocationModel.INSTANCE.createParameter(this.node, transparencyInput.position), style: this.inputStyle, tag: transparencyInput});
27-
// this.ports['Reflection'] = this.surface.graph.addPort({owner: this.node, locationParameter: FreeNodePortLocationModel.INSTANCE.createParameter(this.node, reflectionInput.position), style: this.inputStyle, tag: reflectionInput});
26+
//this.ports['Transparency'] = this.surface.graph.addPort({owner: this.node, locationParameter: FreeNodePortLocationModel.INSTANCE.createParameter(this.node, transparencyInput.position), style: this.inputStyle, tag: transparencyInput});
27+
//this.ports['Reflection'] = this.surface.graph.addPort({owner: this.node, locationParameter: FreeNodePortLocationModel.INSTANCE.createParameter(this.node, reflectionInput.position), style: this.inputStyle, tag: reflectionInput});
2828

2929
}
3030

‎app/scripts/elements/raytrace/RaytraceFlowNodeViewModel.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,12 @@ import {Material, Vector3} from '../../style/raytracer';
99
export class RaytraceFlowNodeViewModel extends FlowNodeViewModel {
1010

1111
get material() {
12-
return new Material(this.surfaceColor || new Vector3(0.0, 0.2, 0.8), this.reflection || 0.1, this.transparency || 0.05, this.emissionColor || new Vector3(0.8, 0, 0));
12+
if (this._material.surfaceColor.equals(this.surfaceColor || new Vector3(0.0, 0.2, 0.8)) &&
13+
this._material.reflection === (this.reflection || 0.1) && this._material.transparency === (this.transparency || 0.05) &&
14+
this._material.emissionColor.equals(this.emissionColor || new Vector3(0.8, 0, 0))){
15+
return this._material
16+
}
17+
return this._material = new Material(this.surfaceColor || new Vector3(0.0, 0.2, 0.8), this.reflection || 0.1, this.transparency || 0.05, this.emissionColor || new Vector3(0.8, 0, 0));
1318
}
1419

1520
get emissionColor(): any {
@@ -71,6 +76,7 @@ export class RaytraceFlowNodeViewModel extends FlowNodeViewModel {
7176
private _transparency: number;
7277
private _reflection: number;
7378
private _emissionColor: Vector3;
79+
private _material : Material;
7480

7581
private ensureUnitSize(x: number) {
7682
if (_.isNil(x)) {
@@ -89,6 +95,7 @@ export class RaytraceFlowNodeViewModel extends FlowNodeViewModel {
8995
this.portViewModels['Reflection'] = new FlowPortViewModel('reflection', PortType.INPUT, this, new Point(0.0, 70 - 2));
9096
this.portViewModels['Transparency'] = new FlowPortViewModel('transparency', PortType.INPUT, this, new Point(0.0, 90 - 2));
9197
this.model.nodes[this.id] = new FlowNodeModel(this.id, this.model);
98+
this._material = new Material(this.surfaceColor || new Vector3(0.0, 0.2, 0.8), this.reflection || 0.1, this.transparency || 0.05, this.emissionColor || new Vector3(0.8, 0, 0));
9299

93100
}
94101

‎app/scripts/elements/spy/SpyFlowNodeViewModel.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ export class SpyFlowNodeViewModel extends FlowNodeViewModel {
1919
public set value(value: string) {
2020
this._value = value;
2121
this.firePropertyChanged('value');
22-
// console.log(`Spy: ${value}`)
2322
}
2423

2524
public get value(): string {

‎app/scripts/elements/sum/SumFlowNodeController.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import {FreeNodePortLocationModel, Rect, TemplateNodeStyle} from 'yfiles';
66

77
export class SumFlowNodeController extends FlowNodeController {
88

9-
constructor(model: IFlowModel, surface: ISurface) {
10-
super(model, surface);
9+
constructor(surface: ISurface) {
10+
super(surface);
1111
this.init();
1212
}
1313

0 commit comments

Comments
 (0)