javascript/react-diagrams
1
0
Fork 0
mirror of https://github.com/projectstorm/react-diagrams.git synced 2025-08-26 16:01:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix custom links

Browse Source
This commit is contained in:
Dylan Vorster
2018-02-23 18:27:03 +02:00
parent 20675cbf38
commit 6dea182ab8
2 changed files with 22 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
demos/demo-custom-link1/index.tsx
View File

@ -13,31 +13,34 @@ import { action } from "@storybook/addon-actions";
import * as React from "react"; import * as React from "react";
import { LinkFactory } from "../../src/AbstractFactory"; import { LinkFactory } from "../../src/AbstractFactory";
import {DefaultLinkModel} from "../../src/defaults/models/DefaultLinkModel"; import {DefaultLinkModel} from "../../src/defaults/models/DefaultLinkModel";
import {DefaultLinkFactory} from "../../src/defaults/factories/DefaultLinkFactory";
export class AdvancedLinkModel extends DefaultLinkModel { export class AdvancedLinkModel extends DefaultLinkModel {
constructor() { constructor() {
super("advanced"); super("advanced");
this.width = 10;
} }
} }
export class AdvancedPortModel extends DefaultPortModel { export class AdvancedPortModel extends DefaultPortModel {
createLinkModel(): AdvancedLinkModel | null { createLinkModel(): AdvancedLinkModel | null {
var link = new AdvancedLinkModel(); return new AdvancedLinkModel();
link.setSourcePort(this);
return link;
} }
} }
export class AdvancedLinkWidgetFactory extends LinkFactory<AdvancedLinkModel> { export class AdvancedLinkFactory extends DefaultLinkFactory {
constructor() {
super();
this.type = "advanced"
}
getNewInstance(initialConfig?: any): AdvancedLinkModel { getNewInstance(initialConfig?: any): AdvancedLinkModel {
return new AdvancedLinkModel(); return new AdvancedLinkModel();
} }
constructor() {
super("advanced");
}
generateReactWidget(diagramEngine: DiagramEngine, link: AdvancedLinkModel): JSX.Element { generateReactWidget(diagramEngine: DiagramEngine, link: AdvancedLinkModel): JSX.Element {
return React.createElement(DefaultLinkWidget, { return React.createElement(DefaultLinkWidget, {
@ -56,12 +59,12 @@ export default () => {
//1) setup the diagram engine //1) setup the diagram engine
var engine = new DiagramEngine(); var engine = new DiagramEngine();
engine.installDefaultFactories(); engine.installDefaultFactories();
engine.registerLinkFactory(new AdvancedLinkWidgetFactory()); engine.registerLinkFactory(new AdvancedLinkFactory());
// create some nodes // create some nodes
var node1 = new DefaultNodeModel("Source", "rgb(0,192,255)"); var node1 = new DefaultNodeModel("Source", "rgb(0,192,255)");
node1.addPort(new AdvancedPortModel(false, "out-1", "Out thick")); let port1 = node1.addPort(new AdvancedPortModel(false, "out-1", "Out thick"));
node1.addPort(new DefaultPortModel(false, "out-2", "Out default")); let port2 = node1.addPort(new DefaultPortModel(false, "out-2", "Out default"));
node1.setPosition(100, 100); node1.setPosition(100, 100);
var node2 = new DefaultNodeModel("Target", "rgb(192,255,0)"); var node2 = new DefaultNodeModel("Target", "rgb(192,255,0)");
@ -81,20 +84,9 @@ export default () => {
var model = new DiagramModel(); var model = new DiagramModel();
var link1 = node1.getOutPorts()[0].createLinkModel(); model.addAll(port1.link(port3), port2.link(port4));
var link2 = node1.getOutPorts()[1].createLinkModel();
if (link1) { // add everything else
link1.setTargetPort(port3);
model.addLink(link1);
}
if (link2) {
link2.setTargetPort(port4);
model.addLink(link2);
}
// add everything
model.addAll(node1, node2, node3, node4); model.addAll(node1, node2, node3, node4);
// load model into engine // load model into engine

14
demos/index.tsx
View File

@ -113,13 +113,13 @@ storiesOf("Custom Models", module)
require("!!raw-loader!./demo-custom-node1/index") require("!!raw-loader!./demo-custom-node1/index")
) )
) )
// .add( .add(
// "Custom link sizes", "Custom link sizes",
// Helper.makeDemo( Helper.makeDemo(
// require("./demo-custom-link1/index").default(), require("./demo-custom-link1/index").default(),
// require("!!raw-loader!./demo-custom-link1/index") require("!!raw-loader!./demo-custom-link1/index")
// ) )
// ); );
storiesOf("3rd party libraries", module).add( storiesOf("3rd party libraries", module).add(
"Auto Distribute (Dagre)", "Auto Distribute (Dagre)",