Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Sep 17 14:19
    sinanyaman95 commented #853
  • Sep 17 07:36
    dgurkaynak commented #853
  • Sep 14 14:20
    rzfzr commented #886
  • Sep 13 20:47
    rzfzr commented #887
  • Sep 13 13:15
    Farfeght opened #887
  • Sep 13 10:37
    thanhpv3380 reopened #824
  • Sep 13 10:37
    thanhpv3380 closed #824
  • Sep 10 14:33
    rzfzr edited #886
  • Sep 10 14:30
    rzfzr edited #886
  • Sep 10 14:09
    rzfzr commented #886
  • Sep 10 14:05
    rzfzr opened #886
  • Sep 10 00:59
    rzfzr commented #726
  • Sep 09 10:39
    lokhmakov commented #453
  • Sep 07 13:43
    davidsu06 closed #747
  • Sep 07 13:43
    davidsu06 commented #747
  • Sep 07 13:39
    davidsu06 reopened #747
  • Sep 07 13:39
    davidsu06 commented #747
  • Sep 07 09:42
    KurtKellens opened #885
  • Sep 07 09:36
    KurtKellens commented #747
  • Sep 05 01:32
    DavidDionise commented #598
Vamshi Krishna Chippa
@iamvamshi
Where can we set allowLooseLinks={false}
2 replies
Vitchenko Vladislav
@Oladik123
image.png
Hello! Does anyone know why when we call generateModel here we do not pass initial config like we do when we generate layer or node? NodeModel.ts from react-diagrams-core on screenshot
Hemant Ranvir
@hr-ing:matrix.org
[m]
did anyone find solution for this?
projectstorm/react-diagrams#726
Vishal Diyora
@vishal87_gitlab
Hey Guys, This is awesome library. I'm creating custom node and custom link using the demo in the demo https://github.com/projectstorm/react-diagrams/tree/446cc8cdffc506adb9a7a2b9466dfe6b6bcd42e3/demos/demo-custom-link1 and https://github.com/projectstorm/react-diagrams/tree/master/diagrams-demo-project .
I have couple of questions.
Can I create a link without creating port between nodes?
Can I have N number of links at different location in the nodes?
Attached design above
Sinan Yaman
@sinanyaman95
The smart routing example on the storybook doesn't show any links? Is it getting updated?
Dylan Vorster
@dylanvorster
Probably a regression after the updates i did a few days ago
Ill look later today
Big Bad Waffle
@BigBadWaffle_gitlab

Hi all! Quick (fairly common I bet) question...

  • I have a custom node with a function on the model to update a property
  • I'd like the widget to be redrawn afterwards
  • What is the correct pattern to do this?
  • Calling repaintCanvas isn't doing anything but manually dragging the node DOES cause the changed option value (it's displayed in the widget) to appear
  • Calling repaintCanvas in a setTimeout also doesn't work
  • The node I'm modifying is currently selected
  • Deselecting the node performs the redraw
  • Overriding performanceTune to return false on the model doesn't work
  • Calling model.clearSelection() DOES work

Thanks in advance!

9 replies
Vamshi Krishna Chippa
@iammrvkc_gitlab
Hey @renato-bohler,
Could you pls help me out to built right click options on node. I guess you made it in your project for copy, paste, zoom etc
Andrej-jigx
@Andrej-jigx
Hi guys can some1 help me? How can I create my custom node with name, inputs and outputs. I check every demo but I’m still litle confused. Can some1 make tutorial or documentation abou thath?
wxrl
@wxrl
Is there a close-to-step-by-step setup instruction for beginners? Sorry but current doc is just not clear enough... Having same problems when trying the demos as @EbiPenMan mentioned above... Thanks!
chakripy
@chakripy
Hi Everyone, Could someone please tell how to access the connected ports in the format of json. The user connects different ports. At the end of the task, how can I know the connections between the ports.
3 replies
nsabhani14
@narendra-sabhani

Hi Everyone,

is there a way to drag node on link and auto-connect to that link?

Let's say i have a two nodes Node1 and Node2, and both the node are connected with default link (link1). Now i also have another node named as Node3, which is not connected to any link.

When dragging Node3 and drop on link1, Node3 should placed between Node1 and Node2 and connected to link1.

How to achieve this. Please help me.

snufkin877
@snufkin877
Hello! Is it possible to selects a link and then presses the keyboard delete \ backspace key in order to delete it? How can I implement it?
2 replies
gima35
@gima35
Hi everyone! Is it possible to change the font of a single port in a node?
1 reply
Anders Jürisoo
@ajthinking

Problems migrating to TS

Im migrating my react-diagram app to TS but have issues when inheriting from react-diagrams classes. Here is my PortModel.js:

import { DefaultPortModel } from '@projectstorm/react-diagrams';

export default class PortModel extends DefaultPortModel {
    constructor(options) {
        super({
            ...options,
            // Make id easier on humans
            id: `Port_${options.name}_on_${options.parent.options.id}}`
        });
    }
}

After renaming it to PortModel.ts I get this message

Class constructor DefaultPortModel cannot be invoked without 'new'

It seems I have some transpilation/versioning issue. Though I have lots of TS other files migrated already and it works fine...

Configs:

tsconfig.json

{
    "compilerOptions": {
      "module": "commonjs",
      "removeComments": true,
      "preserveConstEnums": true,
      "sourceMap": true,
      "lib": [
        "es2019",
        "dom"
      ],
    }
}

.babelrc

{
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        "@babel/plugin-proposal-class-properties"
    ]
}

Any remedy for my situation?

2 replies
ratnajeetshyamkunwar
@ratnajeetshyamkunwar
Hi everyone, I am working on a diagram with 700+ nodes. It seems during deserialization, the performance drops significantly. It takes more than 40 seconds to load the graph. Anybody else facing the same problem? How can I enhance the performance?
1 reply
SamuelOsborne
@samuelOsborne

Hello! I picked up the lib today and doing quite well. I'm trying to see if it is possible to only export nodes + their links to .json. Using serialization makes a massive file and i'm having a hard time reading through if theres anything like I want in it.

If anyone knows or could point me in the direction to export only nodes and their links to .json, it would be a great help.

Cheers.

ps: using custom nodes if that makes a difference

5 replies
Anders Jürisoo
@ajthinking
carbon (6).png
Sara Quispe
@sarastef
Hello, I'm trying to make a project which have multiples CanvasWidget, but the performace for the others was too bad, there some ways to render multiples engines ?
cmarshall10450
@cmarshall10450
Hi. I'm trying to create an insepctor form where I can edit data within a node. I can store the selected node in a Redux store but I was wondering what the best way of updating the diagram is after editing data in the form.
1 reply
Anders Jürisoo
@ajthinking
How can I extend the setLocked method to also prevent zoom/drag? Pseudo of what I want: image.png
Aymen Marouani
@AymenMarouani
Hi all,
Thanks for the awsome library and the sharing on that chat room.
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.