awslabs / diagram-maker Goto Github PK
View Code? Open in Web Editor NEWA library to display an interactive editor for any graph-like data.
Home Page: https://awslabs.github.io/diagram-maker
License: Apache License 2.0
A library to display an interactive editor for any graph-like data.
Home Page: https://awslabs.github.io/diagram-maker
License: Apache License 2.0
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.
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
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
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.
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:
Expected behavior
The dark theme is applied.
Desktop (please complete the following information):
PS: examples from the NPM package are differents (olders ?) than the ones displayed on github.
Best regards
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!
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.
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:
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
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.
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 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?
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
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 :
Best regards
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:
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
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() }
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 }
);
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.
Desktop:
Additional context
React 17
React DOM 17
React Router DOM 5.2
Diagram Maker 1.3
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.
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'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.
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.
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
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
Is it possible to share the code that the demos are using?
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.
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?
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
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
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
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.
Documentation action is failing because it's trying to merge to main, which is a protected branch,
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.
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
Expected behavior: the node should be back at their last known location.
Observed on: Ubuntu 20.04 with Firefox 78 ESR.
Best regards
Since ReactDOM.render is deprecated, please update documentations with details how to render custom nodes, edges and other elements using React 18.
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.