projectstorm / react-diagrams Goto Github PK
View Code? Open in Web Editor NEWa super simple, no-nonsense diagramming library written in react that just works
Home Page: https://projectstorm.cloud/react-diagrams
License: MIT License
a super simple, no-nonsense diagramming library written in react that just works
Home Page: https://projectstorm.cloud/react-diagrams
License: MIT License
Hi again :)
Looking at this image I had a feeling that group nodes are supported like a droppable target for some types of nodes.
But it's clearly not the case now.
Any plans on implementing those? Maybe you can point me in the right direction if I'm going to investigate this possibility deeper?
Thanks!
A project is look very good.
I have to create something more like on you first images. Different types of ports and nodes.
What the best way to extend default ones?
I'm rendering the DiagramWidget in a subtree of my React view (i.e., not the top level component) and, no matter what width/height styles I apply to its container it always has a height of 0. If I explicitly specify a min-height from the browser inspector, it renders correctly.
Its styling is specified in the storm-diagrams-canvas css class. Would it make sense to allow inline styling of this component? Am I missing something obvious?
Is the code licensed under tthe MIT ?
If yes, can you please add the following in the root of the repository :
The MIT License (MIT)
Copyright (c) 2016 projectstorm
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:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
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.
Source : https://opensource.org/licenses/MIT
It works without passing -p
to webpack. With -p
I see this in the console:
TypeError: Cannot read property 'diagramEngine' of undefined
at bundle.js:35
at bundle.js:29
at bundle.js:29
at tr (bundle.js:29)
at bundle.js:29
at zr (bundle.js:29)
at Function.yu [as map] (bundle.js:30)
at t.render (bundle.js:35)
at bundle.js:31
at u (bundle.js:31)
bundle.js:35 Uncaught TypeError: Cannot read property 'model' of null
at http://localhost:3000/js/bundle.js:35:25977
at c (http://localhost:3000/js/bundle.js:28:27584)
at Function.vu (http://localhost:3000/js/bundle.js:30:2172)
at onMouseUp (http://localhost:3000/js/bundle.js:35:25889)
at Object.o.invokeGuardedCallback (http://localhost:3000/js/bundle.js:7:17135)
at a (http://localhost:3000/js/bundle.js:7:10910)
at Object.u [as executeDispatchesInOrder] (http://localhost:3000/js/bundle.js:7:11161)
at h (http://localhost:3000/js/bundle.js:6:26323)
at g (http://localhost:3000/js/bundle.js:6:26449)
at Array.forEach (native)
I know that isn't particularly helpful, but it seems to be an issue caused by symbol name mangling. The diagram does render and I can drag around nodes.
After installing all devdependencies and dependencies, I am running into this 1 error:
ERROR in ./src/defaults/DefaultPortLabelWidget.ts (17,2): error TS2559: Type '{ in: boolean; label: string; }' has no properties in common with type 'DefaultPortLabelProps'.
Any clue about this? Can't find anything online.
I am trying to test react-diagrams but I could not figure out how to run it locally.
I have cloned the repo used webpack in the root directory to start it but everytime I got some some lacking dependencies. I have installed them one by one at the end I got this types of errors:
ERROR in ./src/defaults/DefaultLinkWidget.ts
(181,13): error TS2339: Property 'props' does not exist on type 'DefaultLinkWidget'.
ERROR in ./src/defaults/DefaultLinkFactory.ts
(15,69): error TS2503: Cannot find namespace 'JSX'.
I have tried to run a demo in runkit but it's giving an error.
Could you please explain step by step how to run the demos locally?
Thanks
Hi folks, thanks for the great tool!
I'm trying to wrap react-diagrams
into a react component that would take some list of nodes and links between them and (maybe) auto-position them.
The thing is DiagramWidget
is stateful and events are emitted just to notify on the change.
Is there (planned?) a way to disable some user interactions like removing the node or a link?
The only way to do it that I see now is to just re-create the engine, model, etc. and re-render the new DiagramWidget.
e.g., The serialized representation of a DefaultPortModel
instance has a _class
of "e"
. I suspect Uglify is mangling it.
e.g. ConsumerNodeModel is a custom node, but its ports use DefaultPortModel. Points, links, etc also all get a "_class" of "e", (their constructor.name). (Note: below is a JS Object literal printed by ClojureScript):
#js{:id "e06e9816-0c88-4ac3-9ac5-f26b85be224e",
:offsetX 0,
:offsetY 0,
:zoom 100,
:links #js[],
:nodes #js[#js{:id "89308dfe-4ea9-41d0-a0b0-7a1ab54de899",
:_class "ConsumerNodeModel",
:selected false,
:type "consumer",
:x 20,
:y 115,
:extras #js{},
:ports #js[#js{:id "8ef7d2fe-91be-446a-b6ee-885cb03c2d72",
:_class "e",
:selected false,
:name "in1",
:parentNode "89308dfe-4ea9-41d0-a0b0-7a1ab54de899",
:links #js[],
:in true,
:label "in1"}]}]}
Hi! ๐
What do you think about:
I think these automatic quality checking tools are helpful ๐ for open-source project.
I can make a PR if you wish.
When creating a link with mouse drag end point of the link doesn't respect scroll position.
Here i just dragged from node.
How to check:
PS: thanks ferdaarikan for creating repository
I've faced a problem. While deserializing simple diagram with custom nodes and ports this line returns null. But if I call it in a few msec - it returns correct value.
It seems the canvas doesn't rendered yet when this code is run.
Where could be a problem?
diagramEngine.js - getNodePortElement()
var selector = this.canvas.querySelector('.port[data-name="' + port.getName() + '"][data-nodeid="' + port.getParent().getID()+'"]');
In the gif I can see the operation of removing the link, but I couldn't figure out in the test.
The demos create everything on window.onload
and render directly to document.body
.
The closest thing I could find was adventure-weave's index.tsx which returns a DiagramWidget
on its render()
, but that's just a wrapper and the actual work is also done during window.onload
.
In my case that wouldn't really work - I already have a full app with redux, grommet, routing, other "pages" (so the diagram would not be always visible), etc. The ideal way would be for DiagramWidget
to be wrapped by a Component
that abstracts all that and just renders the diagram in the provided div, I guess.
I realize you guys are not fans of JSX, but many people don't really have an option there (: - plus the "default" way to start learning React usually uses JSX.
Apologies if this looks like a noobish request, but Is there an example about linking it? What would be the best way to do it?
When we are running the production build, which is minimized using Uglify, all class names are minified, meaning that when you serialize your diagram, the class is not found.
See:
Line 30 in 01485ad
I receive:
[2] C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:2
[2] var n=o.getZoomLevel()/100;return(t+o.getOffsetX())*n>this.mouseX&&(t+o.getOffsetX())*n<this.mouseX2&&(e+o.getOffsetY())*n>this.mouseY&&(e+o.getOff
setY())*n<this.mouseY2},SelectingAction}(p);e.SelectingAction=u;var f=function(t){function MoveCanvasAction(e,o,n){var i=t.call(this,e,o)||this;return
i.initialOffsetX=n.getOffsetX(),i.initialOffsetY=n.getOffsetY(),i}return n(MoveCanvasAction,t),MoveCanvasAction}(p);e.MoveCanvasAction=f;var g=function
(t){function MoveItemsAction(e,o,n){var i=t.call(this,e,o)||this;i.moved=!1,n.enableRepaintEntities(n.getDiagramModel().getSelectedItems());var r=n.get
DiagramModel().getSelectedItems();return r=r.filter(function(t){return!n.isModelLocked(t)}),i.selectionModels=r.map(function(t){return{model:t,initialX
:t.x,initialY:t.y}}),i}return n(MoveItemsAction,t),MoveItemsAction}(p);e.MoveItemsAction=g;var h=function(t){function DiagramWidget(e){var o=t.call(thi
s,e)||this;return o.onMouseMove=o.onMouseMove.bind(o),o.onMouseUp=o.onMouseUp.bind(o),o.state={action:null,wasMoved:!1,renderedNodes:!1,windowListener:
null,diagramEngineListener:null,document:null},o}return n(DiagramWidget,t),DiagramWidget.prototype.componentWillMount=function(){var t=this;this.setSta
te({diagramEngineListener:this.props.diagramEngine.addListener({repaintCanvas:function(){t.forceUpdate()}})})},DiagramWidget.prototype.componentWillUnm
ount=function(){this.props.diagramEngine.removeListener(this.state.diagramEngineListener),this.props.diagramEngine.setCanvas(null),window.removeEventLi
stener("keyup",this.state.windowListener),window.removeEventListener("mouseUp",this.onMouseUp),window.removeEventListener("mouseMove",this.onMouseMove)
},DiagramWidget.prototype.componentWillUpdate=function(t){this.props.diagramEngine.diagramModel.id!==t.diagramEngine.diagramModel.id&&(this.setState({r
enderedNodes:!1}),t.diagramEngine.diagramModel.rendered=!0),t.diagramEngine.diagramModel.rendered||(this.setState({renderedNodes:!1}),t.diagramEngine.d
iagramModel.rendered=!0)},DiagramWidget.prototype.componentDidUpdate=function(){this.state.renderedNodes||this.setState({renderedNodes:!0})},DiagramWid
get.prototype.componentDidMount=function(){var t=this;this.props.diagramEngine.setCanvas(this.refs.canvas),this.setState({document:document,renderedNod
es:!0,windowListener:window.addEventListener("keyup",function(e){46!==e.keyCode&&8!==e.keyCode||(s.forEach(t.props.diagramEngine.getDiagramModel().getS
electedItems(),function(e){t.props.diagramEngine.isModelLocked(e)||e.remove()}),t.forceUpdate())},!1)}),window.focus()},DiagramWidget.prototype.getMous
eElement=function(t){var e=t.target,o=this.props.diagramEngine.diagramModel,n=l.Toolkit.closest(e,".port[data-name]");if(n){var i=l.Toolkit.closest(e,"
.node[data-nodeid]");return{model:o.getNode(i.getAttribute("data-nodeid")).getPort(n.getAttribute("data-name")),element:n}}return(n=l.Toolkit.closest(e
,".point[data-id]"))?{model:o.getLink(n.getAttribute("data-linkid")).getPointModel(n.getAttribute("data-id")),element:n}:(n=l.Toolkit.closest(e,"[data-
linkid]"))?{model:o.getLink(n.getAttribute("data-linkid")),element:n}:(n=l.Toolkit.closest(e,".node[data-nodeid]"),n?{model:o.getNode(n.getAttribute("d
ata-nodeid")),element:n}:null)},DiagramWidget.prototype.fireAction=function(){this.state.action&&this.props.actionStillFiring&&this.props.actionStillFi
ring(this.state.action)},DiagramWidget.prototype.stopFiringAction=function(t){this.props.actionStoppedFiring&&!t&&this.props.actionStoppedFiring(this.s
tate.action),this.setState({action:null})},DiagramWidget.prototype.startFiringAction=function(t){var e=!0;this.props.actionStartedFiring&&(e=this.props
.actionStartedFiring(t)),e&&this.setState({action:t})},DiagramWidget.prototype.onMouseMove=function(t){var e=this,o=this.props.diagramEngine,n=o.getDia
gramModel();if(this.state.action instanceof u){var r=o.getRelativePoint(t.pageX,t.pageY);return s.forEach(n.getNodes(),function(t){e.state.action.conta
insElement(t.x,t.y,n)&&t.setSelected(!0)}),s.forEach(n.getLinks(),function(t){var o=!0;s.forEach(t.points,function(t){e.state.action.containsElement(t.
x,t.y,n)?t.setSelected(!0):o=!1}),o&&t.setSelected(!0)}),this.state.action.mouseX2=r.x,this.state.action.mouseY2=r.y,this.fireAction(),void this.setSta
te({action:this.state.action})}this.state.action instanceof g?(this.state.wasMoved||this.setState(i({},this.state,{wasMoved:!0})),s.forEach(this.state.
action.selectionModels,function(o){(o.model instanceof a.NodeModel||o.model instanceof a.PointModel)&&(o.model.x=o.initialX+(t.pageX-e.state.action.mou
seX)/(n.getZoomLevel()/100),o.model.y=o.initialY+(t.pageY-e.state.action.mouseY)/(n.getZoomLevel()/100))}),this.fireAction(),this.forceUpdate()):this.s
tate.action instanceof f&&this.props.allowCanvasTranslation&&(n.setOffset(this.state.action.initialOffsetX+(t.pageX-this.state.action.mouseX)/(n.getZoo
mLevel()/100),this.state.action.initialOffsetY+(t.pageY-this.state.action.mouseY)/(n.getZoomLevel()/100)),this.fireAction(),this.forceUpdate())},Diagra
mWidget.prototype.onMouseUp=function(t){var e=this.props.diagramEngine;e.getDiagramModel();if(this.state.action instanceof g){var o=this.getMouseElemen
t(t),n=!1;s.forEach(this.state.action.selectionModels,function(t){if(t.model instanceof a.PointModel&&o.model instanceof a.PortModel){n=!0;var e=t.mode
l.getLink();e.setTargetPort(o.model)}}),n||this.props.allowLooseLinks||s.forEach(this.state.action.selectionModels,function(t){if(t.model instanceof a.
PointModel){var e=t.model.getLink();e.isLastPoint(t.model)&&e.remove()}}),e.clearRepaintEntities(),this.stopFiringAction(!this.state.wasMoved)}else e.c
learRepaintEntities(),this.stopFiringAction();this.state.document.removeEventListener("mousemove",this.onMouseMove),this.state.document.removeEventList
ener("mouseup",this.onMouseUp)},DiagramWidget.prototype.render=function(){var t=this,e=this.props.diagramEngine,o=e.getDiagramModel();return r.DOM.div(
{ref:"canvas",className:"storm-diagrams-canvas",onWheel:function(n){t.props.allowCanvasZoom&&(n.preventDefault(),n.stopPropagation(),o.setZoomLevel(o.g
etZoomLevel()+n.deltaY/60),e.enableRepaintEntities([]),t.forceUpdate(),setTimeout(function(){t.forceUpdate()},100))},onMouseDown:function(n){t.setState
(i({},t.state,{wasMoved:!1})),e.clearRepaintEntities();var r=t.getMouseElement(n);if(null===r)if(n.shiftKey){var s=e.getRelativePoint(n.pageX,n.pageY);
t.startFiringAction(new u(s.x,s.y))}else o.clearSelection(),t.startFiringAction(new f(n.pageX,n.pageY,o));else if(r.model instanceof a.PortModel){var s
=e.getRelativeMousePoint(n),c=new a.LinkModel;c.setSourcePort(r.model),c.getFirstPoint().updateLocation(s),c.getLastPoint().updateLocation(s),o.clearSe
lection(),c.getLastPoint().setSelected(!0),o.addLink(c),t.startFiringAction(new g(n.pageX,n.pageY,e))}else n.shiftKey||r.model.isSelected()||o.clearSel
ection(),r.model.setSelected(!0),t.startFiringAction(new g(n.pageX,n.pageY,e));t.state.document.addEventListener("mousemove",t.onMouseMove),t.state.doc
ument.addEventListener("mouseup",t.onMouseUp)}},this.state.renderedNodes?r.createElement(c.LinkLayerWidget,{diagramEngine:e,pointAdded:function(n,i){t.
state.document.addEventListener("mousemove",t.onMouseMove),t.state.document.addEventListener("mouseup",t.onMouseUp),i.stopPropagation(),o.clearSelectio
n(n),t.setState({action:new g(i.pageX,i.pageY,e)})}}):null,r.createElement(d.NodeLayerWidget,{diagramEngine:e}),this.state.action instanceof u?r.DOM.di
v({className:"selector",style:{top:this.state.action.mouseY,left:this.state.action.mouseX,width:this.state.action.mouseX2-this.state.action.mouseX,heig
ht:this.state.action.mouseY2-this.state.action.mouseY}}):null)},DiagramWidget}(r.Component);h.defaultProps={diagramEngine:null,allowLooseLinks:!0,allow
CanvasTranslation:!0,allowCanvasZoom:!0},e.DiagramWidget=h},function(t,e,o){var n=o(24);t.exports=function(t,e,o){for(var i=o?t:t.parentNode;i&&i!==doc
ument;){if(n(i,e))return i;i=i.parentNode}}},function(t,e){function match(t,e){if(n)return n.call(t,e);for(var o=t.parentNode.querySelectorAll(e),i=0;i
<o.length;++i)if(o[i]==t)return!0;return!1}var o=Element.prototype,n=o.matchesSelector||o.webkitMatchesSelector||o.mozMatchesSelector||o.msMatchesSelec
tor||o.oMatchesSelector;t.exports=match},function(t,e,o){"use strict";function __export(t){for(var o in t)e.hasOwnProperty(o)||(e[o]=t[o])}__export(o(1
8)),__export(o(8)),__export(o(19)),__export(o(9)),__export(o(20)),__export(o(21)),__export(o(10)),__export(o(6)),__export(o(5)),__export(o(16)),__expor
t(o(7)),__export(o(4)),__export(o(2)),__export(o(3)),__export(o(17)),__export(o(22)),__export(o(11)),__export(o(12)),__export(o(13)),__export(o(14)),__
export(o(15))}])});
[2] ^
[2] ReferenceError: Element is not defined
[2] at Object.<anonymous> (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:2:1)
[2] at __webpack_require__ (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:1:1)
[2] at Object.o (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:2:1)
[2] at __webpack_require__ (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:1:1)
[2] at Object.<anonymous> (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:1:1)
[2] at __webpack_require__ (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:1:1)
[2] at Object.<anonymous> (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:1:1)
[2] at __webpack_require__ (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:1:1)
[2] at Object.AbstractInstanceFactory.getName (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:1:1)
[2] at __webpack_require__ (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:1:1)
I've placed SRD with little offset and moving event now is broken.
I've tried to fix it with this code, but it didn't workout.
DiagramWodget:345
var relative = diagramEngine.getRelativePoint(event.pageX + diagramModel.getOffsetX(), event.pageY + diagramModel.getOffsetY()); //here
diagramModel.clearSelection();
this.startFiringAction(new MoveCanvasAction(relative.x, relative.y, diagramModel));
Give me a hint and I'll fix it
http://take.ms/61vkV
The prepublishOnly script is executed after tarball creation. I think Webpack needs to run as part of the "prepare" script.
The npm package might work in projects that have a webpack loader for typescript, but that is suboptimal because it requires the library consumer to manually satisfy the libraries dev dependencies.
When I try to put diagrams in the lower part of the page, I move the component when there will be offset
Right now the diagram ignores where you point the mouse pointer when spinning the wheel / swiping the touchpad, so the diagram is always scaling to the left top corner, which is counter-intuitive UX compared to, for example, Google Maps.
How about add interactive github pages demos + docs?
We have a couple examples:
These demos impelemented using home-made tool react-showroom
Maybe it has sense to consider other options:
Is there any way to persist the state in Redux?
Hi and thank you for everything you guys did.
I was wondering if there is any built-in feature to add properties when using the DefaultNodeModel
rather than creating a custom node model. The defaultNodeModel
currently accepts a color property/string to adjust the background node color but would it be possible to take an object to pass its properties to the node.
Maybe this feature was already included or I am also open to creating a PR.
It's currently not possible to drag the selection box up and to the left.
Is there a way to control which ports are connected to which?
Meaning that only certain ports should be able to be connected to others, but to do this not programmatically but through the canvas
Thanks
Hey!
Two things I want to implement:
It would be great to have an event right after connection wire or disconnection (on mouse up). Could you point me, where is the best place to place it?
It would be great if unlinked wires will be automatically removed right after mouse up. Do you want this behavoir in the lib? Or i can implement it optionaly
Also, I am looking for a way to implement events, such as nodeSelected, nodeAdded, nodeRemoved and custom nodeConfigChanged.
I've looked through the code, but didn't get what is the best way to do it.
Really cool project. Thanks for making this.
You've solved a general problem of integrating HTML and SVG, which I think a lot of people will face, and I was hoping hoping you could say a bit about how you did it. In particular, how did you get the links to point to a particular part of an HTML element when the HTML element moves, and how did you get pan/zoom to work (while having good performance)? I'll be reading your code in the mean time, but thought this would be generally useful to a lot of people doing interactive dataviz.
Hey there!
I'm trying to spike the lib, currently on a create-react-app default install on MacOS. When I import it on a JSX as import * as SRD from "storm-react-diagrams";
it throws the following error:
Failed to compile.
Error in ./~/storm-react-diagrams/dist/main.js
Module not found: [CaseSensitivePathsPlugin]/Users/mzr/projetos/react-diagrams-example/node_modules/React/react.js
does not match the corresponding path on diskreact
.@ ./~/storm-react-diagrams/dist/main.js 1:82-98
Apparently this means something is requiring "React" while the folder is actually "react"; since the only placed that seemed to do that was webpack.config.js
, I changed it to the following on my local (linked) file and rebuilt:
externals: {
...
- "react": 'React',
+ "react": 'react',
...
}
It seemed to work (at least it compiled), but is that a proper fix?
(btw, the lib seems great. From the demos, it looks much easier to use than any other available ones)
Hi. Is there an event I can listen for when nodes are moved or links have points added/removed/moved?
I use the Google Closure compiler (advanced optimizations) as part of building my ClojureScript code, from which I'm subclassing react-diagrams' model types. constructor.name
returns different values under different compilation scenarios and is therefore not reliable (e.g., if the serialized diagram is stored in a DB for later deserialization).
I'm making a toy project to get the hang of this library, but can't seem to be able to build it with rollup.
I've tried several approaches, but none of them is working: I keep ending up with either 'CanvasWidget' is not exported by node_modules\storm-react-diagrams\src\main.js
or 'default' is not exported by node_modules\storm-react-diagrams\src\main.js
. This happens regardless of whether I specify namedExports
for rollup's commonJS plugin.
For reference, my rollup config is mostly derived from the one available here
Secondary question: would you be interested in PRs that migrate the codebase to ES6 modules? If so, how would you propose to best handle it?
I noticed that your code if unmount the component out later, window.keyup will still trigger. and we can get some error message.
the problem is:
windowListener: window.addEventListener('keyup',(event)
the window.addEventListener return noting.
react-diagrams/src/widgets/DiagramWidget.ts
Line 175 in 01485ad
So when you in the unmount event is not work
react-diagrams/src/widgets/DiagramWidget.ts
Line 144 in 01485ad
Hi. Is there a way to introduce some form of node renaming? e.g. double-click a node changes the name to an input which when saved updates the model.
This is quite a common feature of diagram builders and it'd be great to see a demo of this. I have quite a large diagram to build and this would certainly help.
I've tried this on a Windows machine and a Mac on Chrome: I'm unable to find a way to delete a link if it is connected to two nodes. Delete, fn-backspace, backspace all don't work. If I drag a link from a port to nowhere and hover over the end, then I can delete with backspace, but it seems that because you can't see the ends of a connected link then you can't hover over an end to delete it.
I would love to contribute but I don't think I could/would build for React without JSX. Any particular reason for the choice?
Hey dylanvoster,
Firstly, huge thanks for creating this awesome project. This is really helpful for usecases dealing with flows.
I have an issue that I am unable to figure out how to solve.
I am building a flow-builder tool and I want to provide users the ability to change port/node properties on the fly. Is there a way to do this without re-rendering the whole model?
Problem is that when I change the title of the node by directly mutating the digramModel, the link gets deleted.
So I save the links' state and re-render the whole model and add all the links back again for editing to work seemlessly.
Want to check if there is an easier way to do this.
Thanks,
Sai.
Hi there,
I really like what you have started here - its super fast and responsive.
Is it possible to add new Node's and Connections dynamically to the diagram at runtime? I tried running the demos but not quite sure how to access the diagram after its already rendered. Would like to have a button or do a drag and drop from outside the diagram to add new members.. let me know..
Cheers
react-diagrams/src/defaults/DefaultLinkWidget.ts
Lines 164 to 170 in f36a8cf
Related: #71
I've got an error while importing brand new built library.
It completely ok with importing your git version.
But I got an error after importing a library just right after built with webpack
command. Even if no any single change.
Uncaught (in promise) Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
at invariant (invariant.js:38)
at Object.addComponentAsRefTo (ReactOwner.js:68)
at attachRef (ReactRef.js:23)
at Object.ReactRef.attachRefs (ReactRef.js:42)
at ReactDOMComponent.attachRefs (ReactReconciler.js:23)
at CallbackQueue.notifyAll (CallbackQueue.js:76)
at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)
at ReactReconcileTransaction.closeAll (Transaction.js:206)
at ReactReconcileTransaction.perform (Transaction.js:153)
at ReactUpdatesFlushTransaction.perform (Transaction.js:140)
Do you have any idea what could be wrong?
Hello. First of all, thanks for the lib, really well-thought architecture here.
While building a real-world app I have encountered an annoying problem with backspace. In my app there is a "details" area with node parameters that user can edit. This area consists of textboxes and other form elements. Now, since lib is using window event handler, every backspace press in a textbox removes selected element from diagram. Maybe 'delete' key should be more than enough?
Thoughts?
Hey there,
would it be possible if you could upload the source code for the example seen on this picture: https://github.com/projectstorm/react-diagrams/blob/master/images/example1.png ? :)
I would really much appreciate it!
Cheers, Max
Hi,
i like to use this engine in for my open source project. Is there a npm install available?
Regards,
Manuel
react-diagrams/src/defaults/DefaultLinkWidget.ts
Lines 85 to 88 in f36a8cf
Since using the React.DOM.x convenience wrapper is considered legacy, what do you think about converting this to React.createElement?
(Raising this as recently our company deprecated the use of React.DOM.x causing our app which uses this lib to break. I made codemods myself to fix this for now, but think it will be better for everyone to move to standards that have more support)
Bra, don't you want to improve the gif. This shit doesn't do it justice.
I'm wondering if there's a way to auto zoom the diagram to the canvas size? Fitting all the nodes and links into the frame. Thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.