Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 15 09:13
    dberardo-com commented #375
  • Oct 14 17:55
    aaron-michaux opened #896
  • Oct 14 16:06
    DaSilvaRemi opened #895
  • Oct 14 12:53
    jbflow commented #232
  • Oct 14 12:50
    jbflow edited #894
  • Oct 14 12:50
    jbflow opened #894
  • Oct 12 03:28
    LLOUIS03 opened #893
  • Oct 09 00:14
    bold881 commented #678
  • Oct 08 12:56
    sudha53633 edited #892
  • Oct 08 12:48
    sudha53633 edited #892
  • Oct 08 09:59
    sudha53633 edited #892
  • Oct 08 08:21
    sudha53633 opened #892
  • Oct 08 01:18
    aaron-michaux commented #617
  • Oct 07 18:41
    aaron-michaux commented #879
  • Oct 07 18:40
    aaron-michaux commented #889
  • Oct 07 12:36
    renato-bohler commented #391
  • Oct 07 11:50
    andra-sava commented #391
  • Oct 06 18:54
    parties edited #891
  • Oct 06 18:54
    parties opened #891
  • Oct 05 21:30
    dberardo-com opened #890
Aymen Marouani
@AymenMarouani
I'd like to ask a question
I want to delete a link in a given diagram
The combination SHIFT + LEFT CLICK + DELETE works very well
but I'd like to use only DELETE when the link is highlighted
is there any possibility to override this behaviour (no SHIT + LEFT CLICK keys combination) ?
2 replies
Thanks
Fikett
@Fikett
hi! How can i add feature to delete link on double mouse click?
Sinan Yaman
@sinanyaman95
It looks like DiagramEngine.recalculatePortsVisually is obsolete. What is the alternative for that? When I delete a port, previous links still point to the old port destination
Vadim Shvetsov
@vadimshvetsov

Hey all. Does anybody extended InputType with some sort of events, that CanvasWidget is not support from the box? I need to extend it with a drop event, but its impossible to be typesafe as I think. The main problem is that InputType enum can't be extended. Maybe someone has a solution I've can't imagine?

import { DragEvent } from 'react'
import {
  Action,
  CanvasEngine,
  ActionOptions,
  Mapping,
  ActionEvent,
} from '@projectstorm/react-canvas-core'

export enum MyInputType {
  MOUSE_DOWN = 'mouse-down',
  MOUSE_UP = 'mouse-up',
  MOUSE_MOVE = 'mouse-move',
  MOUSE_WHEEL = 'mouse-wheel',
  KEY_DOWN = 'key-down',
  KEY_UP = 'key-up',
  DROP = 'drop',
}

export interface MyInputTypeEventMapping extends Mapping {
  [MyInputType.DROP]: DragEvent
}

export interface MyActionOptions extends ActionOptions {
  type: MyInputType | any
  fire: (event: ActionEvent<MyInputTypeEventMapping[this['type']]>) => void
}

export class MyAction<
  T extends CanvasEngine = CanvasEngine
> extends Action<T> {
  constructor(options: MyActionOptions) {
    super(options)
  }
}

This is the only thing I've evolved but maybe there is a typesafe alternative?

wxrl
@wxrl
Hello all...This is a beautiful diagram pack, but anyone's got a demo with parameters (items and their values (values can be input by web users)) in each block for realizing a simple pipeline system UI? Input values need to be stored in a JSON file or so on the server for back-end program to do the calculation. New to JS/TS... Thanks!
Ben Szymkow
@simcof
I;m having some trouble getting the first basic demo working, getting: "TypeError: path is null"
Ben Szymkow
@simcof
Screen Shot 2021-07-08 at 11.47.06 am.png
Ben Szymkow
@simcof
I figured it out :) needed to force the height attribute of the CanvasWidget
Guidogl
@Guidogl

Is there a proper way to update state with useContext hook when creating a new node? Currently, it does update the sate but node doesn't show up on the screen.

const onNodeDrop = async (event: any) => {

        const nodeData = JSON.parse(event.dataTransfer.getData('storm-diagram-node'))

        const linkedTables = await getRelationships(nodeData.name, nodeData.source)

        const node = new MyNodeModel({
            activeColumns: nodeData.activeColumns,
            color: nodeData.tool ? '#2671B5' : "#e86c24",
            name: nodeData.name,
            source: nodeData.source,
            size: nodeData.size,
            keys: nodeData.keys,
            tool: nodeData.tool,
            items: nodeData.items,
            linkedTables: linkedTables,
        })

        const point = diagramEngine.getRelativeMousePoint(event)
        node.setPosition(point)

        diagramEngine.getModel().addNode(node)
        forceUpdate()

        triggerPreview(true)

        updatePreviewData({
             name: nodeData.name,
             source: nodeData.source,
             size: nodeData.size,
             keys: nodeData.keys,
             items: nodeData.items,
        })
    }

triggerPreview and updatePreviewData are set to update context. When I just use useState it seems to work ok.

Daniel McQuillen
@danielmcquillen_gitlab
Has anyone had a go at using ctrl-c ctrl-v to copy and paste nodes to and from clipboard? (Followed the 'clone' demo well enough but want to get keyboard-based operations going for multi-node select then copy and paste). BTW, thanks Dylan and all for a most excellent library...having such a good time working with it.
5 replies
Anders Jürisoo
@ajthinking

Hi @danielmcquillen_gitlab, saw you posted this the other day, could not find it in the history so reposting it:

When I shift-drag in my local experiments... SOME ERROR ...

Answer: YES. Also have this since I don't know when. I know that used to work at least a couple of months ago. Did you find a solution or workaround or reported it as an issue?

Daniel McQuillen
@danielmcquillen_gitlab
So if you npm update to the latest you shouldn't see that issue anymore...I would think .
Daniel McQuillen
@danielmcquillen_gitlab
Any strategies for best handling a 'print' function? As a first go, I'm working with zoom to fit but realizing that I also need a recalibrate to upper left kind of operation...(or maybe there's an easier approach?)
Ishtiaq Ahmad
@Ishtiaq-Ahmad

Hey Everyone. lot's of respect for everyone who is in this community.
i am drawing a projectstrom/react-diagrams. I tried creating a view, by following the instructions at
https://projectstorm.gitbook.io/react-diagrams/getting-started.
i have develop 3 nodes manually. but now i want to create dynamically nodes through map function. i am not getting an idea that how i do this.any one help me please.
below is my code.

import createEngine, {DefaultLinkModel,DefaultNodeModel,DiagramModel } from '@projectstorm/react-diagrams'
import {CanvasWidget} from '@projectstorm/react-canvas-core';
import '../App.css'

const MindMap = () => {
const engine = createEngine();
const node1 = new DefaultNodeModel({
name: 'Node 1',
color: 'rgb(0,192,255)',
});

node1.setPosition(100, 100);
let port1 = node1.addOutPort('In');

// node 2
const node2 = new DefaultNodeModel({
name: 'Node 2',
color: 'yellow',
});
node2.setPosition(59, 50);
let port2 = node2.addOutPort('OUT');

const node3 = new DefaultNodeModel({
name: 'Node 3',
color: 'rgb(0,192,130)',
});
node3.setPosition(80, 6);
let port3 = node3.addOutPort('Out');

const link = port1.link(port2);
const link1 = port1.link(port3)

// link.addLabel('Hello World!');

const model = new DiagramModel();
model.addAll(node1, node2, node3, link, link1);
engine.setModel(model);

return ( 
    <div>
<div style={{height:'100vh', width:'100%', backgroundColor:'aliceblue'}}>
<CanvasWidget className="canvas" engine={engine} />
</div>
</div>
)  

}

export default MindMap

hippien
@hippien
image.png
Hi!
Are there any recommendations of how to use background elements, I'd like to group nodes in the layout.
One way could be to just add some customized Nodes first so they are rendered below all other nodes. But that would require the possibility to lock the specific background nodes, regular nodes should not be locked. Or if there are events like OnClick, OnDrag, that can I can prevent for those nodes to be "locked".
Or are there any other approach more suitable for my usecase?
Thanks!
hippien
@hippien
Or can the engine take an array of node-models so that the layout can be layered?
(Please let me know if there are any detailed documentation where I can find the asnwers myself)
GaopengBai
@Gaopeng-Bai
Hello all, is there any easy way to migrate the old version (storm-react-diagrams) to the new version(@projectstorm/react-diagrams)?
Orellabac
@orellabac
Hello! I am having some performance issues. I do not know If I have reached the top for this library. I have a project where I have 400 nodes and 7000 links. Even without the connectors I am having problems.
marcosaso
@marcosaso

Hi everbody!

I'm having the autocomplete input issue only in Chromium based browsers (Chrome and Brave).
projectstorm/react-diagrams#678
If I've tested in Safari and Mozila using Mac OS and in that browsers doesn't have any problem.

This issue appear, for example, when I add a input with a datalist bellow to a react diagram in another div and choose one option of autocomplete option:
Ex.:


<input list="listExamples">
   <datalist id="listExamples">
           <option value="PETR4" />
            <option value="VALE4" />
            <option value="Internet Explorer" />
            <option value="Chrome" />
    </datalist>
![alt](http://user-images.githubusercontent.com/18434900/134091731-1603b8ba-6d09-4ec8-a5cd-42479ac3a5c9.png)

In that example above, if I use a keyboard or mouse and choose a autocomplete option like "PETR4" on chromium browser based, it will throw the error:

![alt](http://user-images.githubusercontent.com/18434900/134090194-dce978a0-a1fd-43dd-9661-3e26bcf3f20c.png)

![alt](http://user-images.githubusercontent.com/18434900/134090309-3bc4d30e-fbdd-4386-99c8-5d92eb7fe76a.png)

Can anyone has any idea to help me with this issue?

marcosaso
@marcosaso
Captura de Tela 2021-09-20 às 20.51.05.png
Captura de Tela 2021-09-20 às 20.35.13.png
Captura de Tela 2021-09-20 às 20.36.51.png
These images above is about that issue.
marcosaso
@marcosaso
It is also showing in issue #642: projectstorm/react-diagrams#642
Kuba Szymanowski
@KKSzymanowski
Is there a built-in way to edit nodes (the name for example) or do I have to implement it manually?
If there is no way to do it out of the box, is there some example of how to extend a node to add for example an edit button or a button to add new port?
marcosaso
@marcosaso

Hey @KKSzymanowski ,

To edit nodes, you've to implement it manually. Just put a edit and use the onChange event. For example:

onChange={(e) => {
                             // node receive value of edit
                              node_example.options.name = e.target.value;
                             // refresh diagram with new node name
                              engine.repaintCanvas();

                            }}
donkeyDau
@donkeyDau

I'm using dagre to distribute the nodes in the diagram. I randomly place the nodes and "autodistribute" them:

import {
  DagreEngine,
  PathFindingLinkFactory,
} from '@projectstorm/react-diagrams';

import centerModel from '../Actions/centerModel';

const reroute = (engine) => {
  engine
    .getLinkFactories()
    .getFactory(PathFindingLinkFactory.NAME)
    .calculateRoutingMatrix();
};

const autoDistributeNetwork = (engine, useGraphOptions = true) => {
  const graphOptions = useGraphOptions
    ? {
        rankdir: 'TB',
        ranker: 'longest-path',
        marginx: 50, // margin of whole diagram
        marginy: 50, // margin of whole diagram
        nodesep: 200, // minimum x distance between nodes
        ranksep: 100, // minimum y distance between nodes
      }
    : {};

  const distributionEngine = new DagreEngine({ graph: graphOptions });

  distributionEngine.redistribute(engine.getModel());
  reroute(engine);
  centerModel(engine);
};

Additionally I have a sidebar which can pull in from the side and shrinking the canvas. On this action the nodes on the diagram "crumble" together in the state they used to have before "autodistribution" kicked in. And it keeps in this state. Calling autoDistributeNetwork has no effect on the layout. Even dragging and dropping has no (coordinated) effect (the nodes get picked randomly and dropped at weird places).

Does anyone encounter this problem as well? How can I get around this?

1 reply
Aymen Marouani
@AymenMarouani
Hi All,
Aymen Marouani
@AymenMarouani

Simple question, I'd like to ask about the property added to DiagramWidget called inverseZoom to inverse the behavior of the mouse's zoom wheel(see projectstorm/react-diagrams#95): actually, I'm using CanvasWidget which came after DiagramWidget with a react-diagrams version 6.5.2 as following `

<CanvasWidget  engine={engine}/>

Does any one have an example of how to add the property inverseZoom to work with (code please) ?
Thanks in advance.

1 reply
sudha53633
@sudha53633
Hi There, I need help on adding html content in nodes and ports
Can anyone provide inputs on this ?
sudha53633
@sudha53633
Thanks
projectstorm/react-diagrams#27 Kindly help here?
Aaron Michaux
@aaron-michaux

So... when I add repaintDebounceMs to the engine options, it sometimes disables panning the CanvasWidget.

  const engine = createEngine({
    registerDefaultDeleteItemsAction: false,
    repaintDebounceMs: 50
  })

Anyone else seen this?

Aaron Michaux
@aaron-michaux
For anyone out there, the problem went away when I patched engine.repaintCanvas, so that debouncing happens on the leading edge of the timeout.