Code Monkey home page Code Monkey logo

react-diagrams's People

Contributors

adaladam avatar ajthinking avatar alex-enchi avatar brunoalano avatar chlumper avatar danielazarldapps avatar dasilvaremi avatar drummerhead avatar dylanvorster avatar frank-martinez-27 avatar gen4sp avatar gitbook-bot avatar github-actions[bot] avatar gothy avatar jeevcat avatar joase avatar jokernn avatar kfrajtak avatar klaus-atlassian avatar mathiasbaldissera avatar maxleiko avatar renato-bohler avatar rkesters avatar sergnek avatar siosphere avatar sljuka avatar tentakano avatar tkolanko avatar vadimshvetsov avatar yngndrw avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-diagrams's Issues

Background image

Hey guys,
Is there any built-in way to make an image as scalable background?
I've tried to set background for SVG, but result is not looking so good )
screen shot 2017-03-16 at 13 31 10

Any plans on `group-nodes` support?

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!

More complex examples / docs / guides

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?

DiagramWidget always gets height of 0

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?

License ?

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

Cannot drag links between ports with webpack production build

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.

TS2559 error in DefaultPortLabelWidget.ts

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.

How to run react-diagrams for dev?

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

View-only mode?

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.

Serialization/deserialization of default models broken

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"}]}]}

links deSerialize problem

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()+'"]');

how to remove the link

In the gif I can see the operation of removing the link, but I couldn't figure out in the test.

Usage with JSX

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?

Server side rendering

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)

problem with offset

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

Typescript is not compiled in npm distribution

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.

Zoom centering at mouse position with mouse wheel

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.

Adding additional properties to default nodes

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.

Control Link creation

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

Link has been linked event | Auto remove unlinked wires bahavior

Hey!
Two things I want to implement:

  1. 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?

  2. 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

Events

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.

aligning HTML and SVG with drag, drop, pan and zoom

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.

Error when importing in MacOS

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 disk react.

@ ./~/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)

Can't seem to build with Rollup.js (0.41.4) / possibility of converting to ES6 modules?

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?

window.addEventListener return noting

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.

windowListener: window.addEventListener('keyup',(event) => {

So when you in the unmount event is not work

window.removeEventListener('keyup',this.state.windowListener);

Node renaming

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.

Add ability to select link without creating a point if the mouse is not moved

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.

Why not use JSX?

I would love to contribute but I don't think I could/would build for React without JSX. Any particular reason for the choice?

Question on editing properties of Node/ Port Models

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.

screen shot 2017-03-30 at 3 31 47 pm

screen shot 2017-03-30 at 3 32 10 pm

screen shot 2017-03-30 at 3 32 18 pm

Thanks,
Sai.

Adding new Nodes

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

Import error after build

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?

Backspace removes element - interferes with textboxes (make binding pluggable)

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?

Publish to npm

Hi,

i like to use this engine in for my open source project. Is there a npm install available?

Regards,
Manuel

Using React.createElement(x,...) instead of React.DOM.x

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)

Better Gif.

Bra, don't you want to improve the gif. This shit doesn't do it justice.

Zoom to fit

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.