diff --git a/package-lock.json b/package-lock.json index 9fb26ea4..0201c0c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "@mrblenny/react-flow-chart", - "version": "0.0.13", + "name": "@futureworkshops/react-flow-chart", + "version": "0.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 88a690a4..e9c11979 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { - "name": "@georginaso/react-flow-chart", - "version": "0.0.13", + "name": "@futureworkshops/react-flow-chart", + "version": "0.1.2", "description": "A flexible, stateless flow chart library for react.", "main": "src/index.js", - "repository": "git@github.com:georginaso/react-flow-chart.git", + "repository": "git@github.com:FutureWorkshops/react-flow-chart.git", "author": "Georgina Serra ", "license": "MIT", "devDependencies": { diff --git a/src/components/Link/Link.default.tsx b/src/components/Link/Link.default.tsx index 90f5f1fc..740fb425 100644 --- a/src/components/Link/Link.default.tsx +++ b/src/components/Link/Link.default.tsx @@ -51,6 +51,8 @@ export const LinkDefault = ({ (fromPort.properties && fromPort.properties.linkColor) || "cornflowerblue"; const linkStrokeWidth: string = (fromPort.properties && fromPort.properties.linkStrokeWidth) || "3"; + const linkStrokeDasharray: string = + (fromPort.properties && fromPort.properties.linkStrokeDasharray) || "none"; return ( {/* Thick line to make selection easier */} (o: Obj, func: (value: Obj[keyof Obj]) => Res[keyof Obj]) { +> (o: Obj, func: (value: Obj[keyof Obj]) => any) { const res: Res = {} as any for (const key in o) { if (o.hasOwnProperty(key)) { diff --git a/stories/LinkStrokeDasharray.tsx b/stories/LinkStrokeDasharray.tsx new file mode 100644 index 00000000..a1fd5dd5 --- /dev/null +++ b/stories/LinkStrokeDasharray.tsx @@ -0,0 +1,138 @@ +import * as React from "react"; + +import { FlowChartWithState, IChart } from "../src"; +import { Page } from "./components"; + +const chartSimpleWithDottedLink: IChart = { + offset: { + x: 0, + y: 0, + }, + scale: 1, + nodes: { + node1: { + id: "node1", + type: "output-only", + position: { + x: 300, + y: 100, + }, + ports: { + port1: { + id: "port1", + type: "output", + properties: { + value: "no", + linkStrokeDasharray: "10", + }, + }, + }, + }, + node2: { + id: "node2", + type: "input-output", + position: { + x: 300, + y: 300, + }, + ports: { + port1: { + id: "port1", + type: "input", + }, + port2: { + id: "port2", + type: "output", + properties: { + linkStrokeDasharray: "8 2 4", + }, + }, + port3: { + id: "port3", + type: "output", + }, + }, + }, + node3: { + id: "node3", + type: "input-output", + position: { + x: 100, + y: 600, + }, + ports: { + port1: { + id: "port1", + type: "input", + }, + port2: { + id: "port2", + type: "output", + }, + }, + }, + node4: { + id: "node4", + type: "input-output", + position: { + x: 500, + y: 600, + }, + ports: { + port1: { + id: "port1", + type: "input", + }, + port2: { + id: "port2", + type: "output", + }, + }, + }, + }, + links: { + link1: { + id: "link1", + from: { + nodeId: "node1", + portId: "port1", + }, + to: { + nodeId: "node2", + portId: "port1", + }, + }, + link2: { + id: "link2", + from: { + nodeId: "node2", + portId: "port2", + }, + to: { + nodeId: "node3", + portId: "port1", + }, + }, + link3: { + id: "link3", + from: { + nodeId: "node2", + portId: "port3", + }, + to: { + nodeId: "node4", + portId: "port1", + }, + }, + }, + selected: {}, + hovered: {}, +}; + +export const LinkStrokeDasharray = () => { + return ( + + + + ); +}; diff --git a/stories/index.tsx b/stories/index.tsx index 31c43c4d..61a9d51e 100644 --- a/stories/index.tsx +++ b/stories/index.tsx @@ -13,6 +13,7 @@ import { ExternalReactState } from "./ExternalReactState"; import { InternalReactState } from "./InternalReactState"; import { LinkColors } from "./LinkColors"; import { LinkStrokeWidths } from "./LinkStrokeWidths"; +import { LinkStrokeDasharray } from "./LinkStrokeDasharray"; import { ReadonlyMode } from "./ReadonlyMode"; import { SelectedSidebar } from "./SelectedSidebar"; import { SmartRouting } from "./SmartRouting"; @@ -30,6 +31,7 @@ storiesOf("Custom Components", module) .add("Canvas Outer", CustomCanvasOuterDemo) .add("Canvas Link", () => ) .add("Link Colors", () => ) + .add("Link Dotted", () => ) .add("Link Stroke Widths", () => ); storiesOf("Stress Testing", module).add("default", StressTestDemo);