Is it possible to share the code that the demos are using?

Hello,

The library allows to select multiple nodes at the same time. It would be great if you could also move them all together.

Describe the solution you'd like
Use the selection marquee tool to select multiple nodes.
Click and drag one of them.
The others follow while keeping their relative position to each others.

Describe alternatives you've considered
Should it be a plugin or a core feature ?

Best regards

Hello,

First of all, congrats for your work on this library, it's very pleasant to play with!

My question is the following: is there a way to prevent nodes to be hidden by/to go below panels when zooming out? I tried to change workspace config (position, scale, canvas size, view container size) and also to use a bit of CSS to achieve what I want, without success.

It seems that AWS IoT Consoles that use Diagram Maker achieve this behaviour successfully.

Steps to reproduce the behavior:

1. Go to https://awslabs.github.io/diagram-maker/iframe.html?id=demos-diagram-maker--left-right-rectangular&viewMode=story
2. Zoom out
3. Nodes are hidden by/go below left panel

I expect panels to act like canvas boundaries (or to have an option to enable this behaviour), i don't expect nodes to go below panels when zooming out.

Thanks,
Thibault

Is possible to handle touch events?

I'm reviewing the AWS IOT Events Dashboard from my iPad and all the gestures work properly but when I am using the demo documentation, the touch gestures don't work, ex, drag-and-drop.

Could'nt find the documentation for setting up local run time environment for the package.
Even though examples are given under integ directory, it uses compiled code to run.
Adding details on how to locally run the source code would allow to run the package locally.

Great library!

One thing I wasn't able to figure out is how to change the style of individual edges (e.g. dashed/different color/etc). Can you let me know how this can be accomplished?

Thanks,
Guido

Thanks for this library. Is there a possibility to style edges using CSS classes? In case of nodes I can easily add a CSS class as part of the renderCallback. But I cannot find a way to do the same for edges. Is this possible or could this be a feature implemented in the library?

Hello,

I often find myself making similar diagrams (or at least having some patterns coming back quite frequently).
Instinctively I want to copy/paste my work.

Describe the solution you'd like
I think the best or more intuitive solution would be :

1. Select mutliple nodes and edges
2. Hit ctrl + c
3. Hit ctrl + v
4. The selected nodes and edges are added to your canvas/workspace while keeping their states/connections/relative positions to each others

Best regards

Hello,

When I make a diagram, I would like to be able to auto align every nodes. A misalignment in a diagram is not very important but people that see my diagram often make comments about it.

Describe the solution you'd like
When you move a node, it snap to an imaginary/invisible strait line going through the middle of the closest node.
The line could also be visible.

Best regards

Describe the bug
I'm using diagram-maker in a React functional component. When the component is unmounted due to a client side route change, I get a message like the following for every node and panel that is currently displayed in the diagram:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

The nodes and panel are also React components rendered by calling ReactDOM.render. These components simply have some props passed in and do not make use of any hooks. Please see the component definition below.

To Reproduce

function WorkflowDiagram(props:IProps) {
  const container = useRef<HTMLDivElement>(null);
  let diagramMaker:DiagramMaker<IWorkflowNode, IWorkflowEdge>;

  const config:DiagramMakerConfig<IWorkflowNode, IWorkflowEdge> = {
    options: {
      connectorPlacement: ConnectorPlacement.TOP_BOTTOM,
      showArrowhead: true
    },
    renderCallbacks: {
      node: (node: DiagramMakerNode<IWorkflowNode>, diagramContainer: HTMLElement) =>
        ReactDOM.render(<WorkflowNode />, diagramContainer),
      potentialNode: (node: DiagramMakerPotentialNode, diagramContainer: HTMLElement) => {
        ReactDOM.render(<WorkflowNode />, diagramContainer)
      },
      panels: {
        library: (panel: any, state: any, diagramContainer: HTMLElement) => {
          ReactDOM.render(<StepLibraryPanel />, diagramContainer);
        },
      },
      destroy: (cont: HTMLElement) => ReactDOM.unmountComponentAtNode(cont)
    },
  };

  useEffect(() => {
    const initialData:DiagramMakerData<IWorkflowNode, IWorkflowEdge> = {
      nodes,
      edges,
      workspace: {
        position: { x: 0, y: 0 },
        scale: 1,
        canvasSize: { width: 1200, height: 600 },
        viewContainerSize: { width: window.innerWidth, height: window.innerHeight }
      },
      editor: { mode: EditorMode.DRAG },
      panels: {
        library: {
          id: 'library',
          position: { x: 10, y: 10 },
          size: { width: 250, height: 400 },
          positionAnchor: PositionAnchor.TOP_RIGHT
        },
      }
    };

    diagramMaker = new DiagramMaker(
      container.current as HTMLElement,
      config,
      {
        initialData,
      }
    );

    return () => {
      diagramMaker.destroy();
    };
  }, [props.workflow]);

  return <div id="workflowDiagram" ref={container} />;
}

The console errors occur when when I am viewing a diagram rendered with a component like this one and the client side route is changed by clicking a link to another page in the application, thus causing the component with the diagram to be unmounted.

Expected behavior
I expect that all components should be unmounted without error.

Screenshots

Desktop:

• OS: Windows 10
• Browser Chrome
• Version 91.0.4472.164

Additional context
React 17
React DOM 17
React Router DOM 5.2
Diagram Maker 1.3

Describe the issue with documentation
A clear and concise description of what the issue is.
Right now diagram make is taking all my screen in my react app. I was assuming that it would render inside the HTMLElement that i am passing by default and not take over all my screen real estate.

1. can someone please show me how i would make this work in a create react app ?
2. would you consider making it the default behaviour ?
3. can someone please point me to any react application out there using diagram maker ?

Hello,

I've been recently using your cool library and I noticed that when I use the undo/redo feature, it seems that only some events are kept in memory : node creation, edge creation and delete item.

I have custom nodes that have an internal HTML input with a default value.
Whenever the user changes the input value a custom event is dispatched.
Internally, a custom reducer catches the event then updates the node's consumerData with the new value.
Unfortunately, after an undo/redo, the value is back to the default one.

I don't know if this is the intended behavior. I would like to be able to keep the last value set.

Best regards

Documentation action is failing because it's trying to merge to main, which is a protected branch,

Hi there, thank you for the amazing library.

I'm only on my first experiments and diving into the documentation, but my first attempts did not went well since I'm receiving the error bellow:

> vue-cli-service serve

 INFO  Starting development server...
 WARN  A new version of sass-loader is available. Please upgrade for best experience.
98% after emitting CopyPlugin

 WARNING  Compiled with 1 warnings                                                                                          23:48:30

 warning  in ./node_modules/diagram-maker/dist/diagramMaker.js

Module not found: Error: Can't resolve 'dagre' in '.../node_modules/diagram-maker/dist'

As you can see I'm using Vue but I was planning on writing with VanillaJS the part related to the diagram. Here is my package.json:

{
  "name": "ChatBot-CMS-Client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
  },
  "dependencies": {
    "axios": "^0.20.0",
    "core-js": "^3.6.5",
    "diagram-maker": "^1.0.0",
    "element-ui": "^2.4.5",
    "vue": "^2.6.11",
    "vue-i18n": "^8.22.0",
    "vue-json-pretty": "^1.6.7",
    "vue-router": "^3.4.6",
    "vuedraggable": "^2.24.1",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.7",
    "@vue/cli-plugin-eslint": "^4.5.7",
    "@vue/cli-plugin-router": "^4.5.7",
    "@vue/cli-plugin-vuex": "^4.5.7",
    "@vue/cli-service": "^4.5.7",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.0.3",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-cli-plugin-i18n": "^1.0.1",
    "vue-cli-plugin-scss-base": "^0.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

I'm running:

• Linux Ubuntu 20.04
• Node v14.11.0
• npm 6.14.8

Would you have any suggestion of what I could try? Maybe I need to install something else... for example, I have nothing related to typescript on my project so far...

Describe the issue with documentation
I'm tryng to dynamically update the consumerData on a particular node, after it was created.
What is the preffered way to update the store data?
It would be nice to include this in the documentation or in the examples.

Hello,

Whenever I use the undo/redo feature, the nodes are not correctly positionned to their last known location. This seems to happen when you undo everything (sometimes before, it's not 100% consistent).

To reproduce: you can use the demo

1. Create three nodes
2. Move them around (away from their initial position)
3. Undo everything
4. Redo everything
5. The nodes are back to their initial position (when they were created)

Expected behavior: the node should be back at their last known location.

Observed on: Ubuntu 20.04 with Firefox 78 ESR.

Best regards

Is your feature request related to a problem? Please describe.
N/A

Describe the solution you'd like
When I hover an edge, I'd like to highligh its src and dest node.

Describe alternatives you've considered
Right now, I'm using renderCallbacks.edge to add event listeners on .dm-edge all elements. When a edge is hovered (mouse-enter and mouse-leave), I search on DOM for element which data-id = src and data-id = dest. Is that the best option?

I've also tried to use actionInterceptor and eventListener but it seems like there is nothing about hover actions. What about introducing them as a kind of interaction (not only clicking).

Additional context
N/A

Since ReactDOM.render is deprecated, please update documentations with details how to render custom nodes, edges and other elements using React 18.

Is your feature request related to a problem? Please describe.
In my action interceptors, for mouse / keyboard type of events, I'd like to receive the information about the original event that triggered the action - ex. left click or mouse wheel.
This would allow me to get more information about the event, based on which I could make a decision - ex. if Ctrl key was held while selecting a node, add to the selection, instead of selecting only this node.

Describe the solution you'd like
For events that originated from mouse / keyboard input type of events, automatically pass the original event data in the payload of the action, similar to how it is done in the event listeners.

Describe alternatives you've considered
I considered stopping the native action in an action interceptor, and then using an event listener for input events, and passing my custom events with the original event data along side, but that is too messy and requires to overwrite a lot of the native action events.

This is an awesome project.
I'm struggling with migrating a simple example to a Vuejs application.

I would really appreciate an example Vue.js.
Is this something you're considering to include?

It would really help with the adoption of the library.

Many thanks

environment
diagram-maker: 1.0.0
parcel: 1.12.4
npm: 6.14.8
node: v14.8.0

index.html

<html>
<body>
  <script src="./index.js"></script>
  <div id="root"></div>
</body>
</html>

index.js

import DiagramMaker, { ConnectorPlacement } from 'diagram-maker';
import 'diagram-maker/dist/diagramMaker.css';
const diagramMaker = new DiagramMaker(
    'root',
    {
        options: {
            connectorPlacement: ConnectorPlacement.LEFT_RIGHT
        },
        renderCallbacks: {
            // Example Render Callback that displays the id within the node
            node: (node, container) => {
                const newDiv = document.createElement('div');
                const newContent = document.createTextNode(node.id);
                newDiv.appendChild(newContent);
                newDiv.classList.add('example-node');
                if (node.diagramMakerData.selected) {
                    newDiv.classList.add('selected');
                }
                container.innerHTML = '';
                container.appendChild(newDiv);
                container.addEventListener('click', myAwesomeEventListener);
            },
            // Example destroy callback that removes the event listener
            destroy: (container) => {
                container.removeEventListener('click', myAwesomeEventListener);
            }
        }

    },
    // optionalParams // { initialData, eventListener, consumerRootReducer, consumerEnhancer }
);

I have an DiagramMaker running in VueJs component and I'm trying to destroy it in one of the lifecycle hooks. While the call to destroy happens I get this error. It happens every time the destroy is called.

beforeDestroy () { this.diagram.destroy() }

Is your feature request related to a problem? Please describe.
The dagre package has been deprecated and diagram-maker has it as a dependency.

Describe the solution you'd like
Remove dagre as a dependency and update the documentation

I'm trying to replace the background diagram-maker canvas svg, with custom small circular nodes. So, probably this lead to more than 5000 number of circular nodes.

This is causing Performance Issues. Any suggestions, how to optimize this usecase?

Describe the issue with documentation
I cannot find any mention of supported browsers in the documentation. I apologize if I just missed it, but in that case it should probably be more prominent.

I noticed that the demos don't function properly in ie11, and that ie11 also causes errors in the AWS IoT Things Graph Console. Is ie11 supported via polyfill?

Thanks!

Hello,

I'm trying to use the dark theme as explained in the documentation. Unfortunately, I can't make it work. It seems that the feature is missing from the NPM package 1.2.0 or not fully documented.

To Reproduce
Steps to reproduce the behavior:

1. Install the NPM package
2. Follow the documentation (add class on body)
3. Nothing happens

Expected behavior
The dark theme is applied.

Desktop (please complete the following information):

• Ubuntu 20.04
• Firefox 78 ESR

PS: examples from the NPM package are differents (olders ?) than the ones displayed on github.

Best regards

Is your feature request related to a problem? Please describe.
I'd like to have scrollbars that I can use. It would help me with visual orientation on the workspace.
I'd like to be able to scroll with the mouse wheel, instead of zooming in / out.

Describe the solution you'd like
A configuration option to enable scrollbars.
A configuration option to set the behaviour of the mouse wheel.

Describe alternatives you've considered
I tried setting the css "overflow: scroll" on the "dm-view" element, so that I get the scrollbars.
I tried intercepting the WORKSPACE_ZOOM action, stopping it, and instead dispatching a custom action to scroll.
This custom action is updating the scrollTop property of the "dm-view" element, in order to scroll up and down.
This works, but does not feel very natural. Also, I need to handle panning in a similar way.
I think there should be a way to natively see and use scrollbars and to be able to configure the mouse wheel action.

This project looks promising but the examples directory contains code that has already been minified which makes it difficult to learn by example. Is it possible to check in the original source code?

Hi, I'm finding difficulty to manage custom number of connectors to the nodes. Right now, Diagram-Maker Nodes only support (one input and one output).

Also, please let us know, if it is possible to create custom-standard nodes in diagram maker.

I followed the user guide from https://awslabs.github.io/diagram-maker/ and used the example "Vanilla JS"
And then, I got a error

environment
diagram-maker: 1.0.0
parcel: 1.12.4
npm: 6.14.8
node: v14.8.0

index.html

<html>
<body>
  <script src="./index.js"></script>
  <div id="root"></div>
</body>
</html>

index.js

import DiagramMaker, { ConnectorPlacement } from 'diagram-maker';
import 'diagram-maker/dist/diagramMaker.css';
const diagramMaker = new DiagramMaker(
    'root',
    {
        options: {
            connectorPlacement: ConnectorPlacement.LEFT_RIGHT
        },
        renderCallbacks: {
            // Example Render Callback that displays the id within the node
            node: (node, container) => {
                const newDiv = document.createElement('div');
                const newContent = document.createTextNode(node.id);
                newDiv.appendChild(newContent);
                newDiv.classList.add('example-node');
                if (node.diagramMakerData.selected) {
                    newDiv.classList.add('selected');
                }
                container.innerHTML = '';
                container.appendChild(newDiv);
                container.addEventListener('click', myAwesomeEventListener);
            },
            // Example destroy callback that removes the event listener
            destroy: (container) => {
                container.removeEventListener('click', myAwesomeEventListener);
            }
        }

    },
    // optionalParams // { initialData, eventListener, consumerRootReducer, consumerEnhancer }
);

Is your feature request related to a problem? Please describe.
There are only a few options for editor mode: READ_ONLY, SELECT and DRAG. With only those options, it isn't possible to make a node selectable but not draggable.

Describe the solution you'd like
Instead of creating new editor mode types, exposing a way to provide a custom event filter would be very useful:

new DiagramMaker(..., {
  eventFilter(e: NormalizedEvent, editorMode: EditorModeType, rootEventFilter: EventFilter): boolean {
    if (e.type === MouseClickEventType.LEFT_CLICK) return true;
    return rootEventFilter(e, editorMode);
  }
);

Describe alternatives you've considered
I've tried to use all those editor modes available, but none of those behave as desired.

Additional context
N/A

Describe the issue with documentation

The Demo applications do not use the NPM modules, which means it requires significant refactoring to play around with, and some code uses symbols that are not exported by the library.

For example, the utils.ts code uses LayoutType, which is not exported by the NPM module.

First of all, thank you very much for this library

Now I have integrated the library into my app, but I don't know how to create multi branch nodes.
It's like this:

This is a fantastic project. I'm struggling with migrating a simple example to a preact application. I would really appreciate an example (like the vanilla js) in preact. Is this something you're considering to include? It would really help with the adoption of the library.

Many thanks

To contextualize the nodes, it would be great if the nodes can be grouped. Similar to how the Cloud Formation Designer works where you can have a VPC and EC2 instances within it.

Hi,

Not sure if this is the correct category for that issue, im trying to understand how can i pass the consumerData or any custom data to the potentialNode, I mean when i define the library panel the nodes that can be drag to the diagram i create something like this:

<div class="node-adapter" data-id="node_adapter" data-type="DiagramMaker.PotentialNode"
    data-draggable="true" data-event-target="true" data-consumer-data="hi">
</div>

How can i pass custom data to the potentialNode so when i drag the node and also when is finally is created i can use this info to render the node correctly, im thinking in things as usual as the name of the node....

Best regards.

Does it possible to set a custom curve for edges?

Example: