playcanvas / pcui-graph Goto Github PK
View Code? Open in Web Editor NEWA PCUI extension for creating node-based graphs
Home Page: https://playcanvas.github.io/pcui-graph
License: MIT License
pcui-graph's People
Contributors
Stargazers
Watchers
Forkers
ailhc andrewraycode classdojo w0lramd ehtick zanegjun webstorage119 dmitrykolesnikovich querielo study-game-enginespcui-graph's Issues
Story book cannot be created
Ran
npm install
npm run storybook
I get the following error:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
WARN Failed to load static files, no such directory: /Users/syau/Snapchat/Dev/playcanvas-public/pcui-graph/public
WARN Make sure this directory exists, or omit the -s (--static-dir) option.
info Addon-docs: using MDX1
info => Using implicit CSS loaders
(node:77486) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.
See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.
WARN Storybook support for Create React App is now a separate preset.
WARN To use the new preset, install `@storybook/preset-create-react-app` and add it to the list of `addons` in your `.storybook/main.js` config file.
WARN The built-in preset has been disabled in Storybook 6.0.
info => Using default Webpack4 setup
10% building 1/1 modules 0 active/Users/syau/Snapchat/Dev/playcanvas-public/pcui-graph/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:13
mainCompilation.fileSystemInfo.createSnapshot(
^
TypeError: Cannot read properties of undefined (reading 'createSnapshot')
at /Users/syau/Snapchat/Dev/playcanvas-public/pcui-graph/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:13:36
at new Promise (<anonymous>)
at Object.createSnapshot (/Users/syau/Snapchat/Dev/playcanvas-public/pcui-graph/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:12:10)
at /Users/syau/Snapchat/Dev/playcanvas-public/pcui-graph/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:219:35
Another forum user gets a different error (https://forum.playcanvas.com/t/introducing-pcui-graph-an-node-based-graph-rendering-library-for-the-web/21733/4?u=yaustar):
10% building 1/3 modules 2 active /home/jay3d/Documents/Development/pcui-graph/node_modules/@storybook/addon-docs/preview.js-generated-config-entry.jsnode:internal/crypto/hash:67
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (/home/jay3d/Documents/Development/pcui-graph/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/home/jay3d/Documents/Development/pcui-graph/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/home/jay3d/Documents/Development/pcui-graph/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:471:10)
at /home/jay3d/Documents/Development/pcui-graph/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:503:5
at /home/jay3d/Documents/Development/pcui-graph/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:358:12
at /home/jay3d/Documents/Development/pcui-graph/node_modules/@storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/home/jay3d/Documents/Development/pcui-graph/node_modules/@storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at /home/jay3d/Documents/Development/pcui-graph/node_modules/@storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:205:4 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
error Command failed with exit code 1.
Can we host the story book online somewhere?
We have PCUI storybook online at https://playcanvas.github.io/pcui , it would be great to add one for PCUI graph as well
Support invisible node attributes
Would be useful if we could specify invisible node attributes.
The attribute values could be used by custom text formatters.
Implement custom text formatters
Would be good if node schema supported custom text formatters.
These would be used by applications to customise the text rendered on node headings and input/output ports.
Node type switching
Node types cant currently be changed. It would be good to have a function that updates the node type for a given node. This will cause a rebuild of the nodes UI using the new node schema for that type. It will also maintain any valid connections for the new node type.
Storybook Build Broken: Unexpected token
Describe the bug
When attempting to run the storybook I am receiving the following error:
ERROR in ./node_modules/playcanvas/src/math/vec2.js 649:14
Module parse failed: Unexpected token (649:14)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> static ZERO = Object.freeze(new Vec2(0, 0));
Ive attempted updating node from LTS to Current, and also attempted checking out version 2.0.0 instead of main. It still fails to build.
To Reproduce
npm install
npm run storybook
Expected behavior
Storybook should be opened
Desktop (please complete the following information):
- OS: macOS
- Version: 8dd6efe
- Node Version: v16.15.0
Additional context
➜ pcui-graph git:(main) ✗ npm run storybook
> @playcanvas/[email protected] storybook
> start-storybook -p 9010 -s public
info @storybook/react v6.4.19
info
(node:31723) DeprecationWarning: --static-dir CLI flag is deprecated, see:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
WARN Failed to load static files, no such directory: /Users/emmetmcpoland/Sources/pcui-graph/public
WARN Make sure this directory exists, or omit the -s (--static-dir) option.
info => Using implicit CSS loaders
WARN Storybook support for Create React App is now a separate preset.
WARN To use the new preset, install `@storybook/preset-create-react-app` and add it to the list of `addons` in your `.storybook/main.js` config file.
WARN The built-in preset has been disabled in Storybook 6.0.
info => Using default Webpack4 setup
(node:31723) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.
See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.
11% building 14/19 modules 5 active /Users/emmetmcpoland/Sources/pcui-graph/node_modules/webpack-hot-middleware/process-update.js
info => Using cached manager
webpack built preview 84af76e0c7a4a6ecf53d in 12017ms
✖ ｢wdm｣: Hash: 84af76e0c7a4a6ecf53d
Version: webpack 4.42.0
Time: 12017ms
Built at: 26/05/2022 22:30:39
Asset Size Chunks Chunk Names
0.iframe.bundle.js 1.35 MiB 0 [emitted] [big]
0.iframe.bundle.js.map 996 KiB 0 [emitted] [dev]
1.iframe.bundle.js 228 KiB 1 [emitted]
1.iframe.bundle.js.map 218 KiB 1 [emitted] [dev]
2.iframe.bundle.js 206 KiB 2 [emitted]
2.iframe.bundle.js.map 145 KiB 2 [emitted] [dev]
3.iframe.bundle.js 9.15 KiB 3 [emitted]
3.iframe.bundle.js.map 6.47 KiB 3 [emitted] [dev]
4.iframe.bundle.js 95.5 KiB 4 [emitted]
4.iframe.bundle.js.map 84.6 KiB 4 [emitted] [dev]
5.iframe.bundle.js 372 KiB 5 [emitted] [big]
5.iframe.bundle.js.map 412 KiB 5 [emitted] [dev]
6.iframe.bundle.js 15.7 KiB 6 [emitted]
6.iframe.bundle.js.map 16.6 KiB 6 [emitted] [dev]
iframe.html 11.1 KiB [emitted]
main.iframe.bundle.js 320 KiB main [emitted] [big] main
main.iframe.bundle.js.map 296 KiB main [emitted] [dev] main
runtime~main.iframe.bundle.js 34 KiB runtime~main [emitted] runtime~main
runtime~main.iframe.bundle.js.map 35.2 KiB runtime~main [emitted] [dev] runtime~main
vendors~main.iframe.bundle.js 5.96 MiB vendors~main [emitted] [big] vendors~main
vendors~main.iframe.bundle.js.map 5.91 MiB vendors~main [emitted] [dev] vendors~main
Entrypoint main [big] = runtime~main.iframe.bundle.js runtime~main.iframe.bundle.js.map vendors~main.iframe.bundle.js vendors~main.iframe.bundle.js.map main.iframe.bundle.js main.iframe.bundle.js.map
[0] multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js 136 bytes {main} [built]
[./.storybook/preview.js] 341 bytes {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 3.08 KiB {main} [built]
[./.storybook/stories sync recursive ^\.(?:(?:(?:(?!(?:^|\/)\.).)*?))$] ./.storybook/stories sync ^\.(?:(?:(?:(?!(?:^|\/)\.).)*?))$ 764 bytes {main} [built]
[./generated-stories-entry.js] 252 bytes {main} [built]
[./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js] 2.43 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js] 2.98 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js] 554 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js] 2.97 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js] 2.97 KiB {vendors~main} [built]
[./node_modules/@storybook/core-client/dist/esm/globals/globals.js] 105 bytes {vendors~main} [built]
[./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js] 97 bytes {vendors~main} [built]
[./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js] 2.96 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined] (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined 7.69 KiB {vendors~main} [built]
[./storybook-init-framework-entry.js] 26 bytes {main} [built]
+ 1398 hidden modules
ERROR in ./node_modules/playcanvas/src/math/vec2.js 649:14
Module parse failed: Unexpected token (649:14)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> static ZERO = Object.freeze(new Vec2(0, 0));
| /**
| * @field
@ ./src/graph-view.js 28:0-51 235:17-21 413:59-63 420:28-32 543:17-21
@ ./src/index.js
@ ./.storybook/base-component.jsx
@ ./.storybook/stories/basic/node-attributes.jsx
@ ./.storybook/stories sync ^\.(?:(?:(?:(?!(?:^|\/)\.).)*?))$
@ ./generated-stories-entry.js
@ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 6.48 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/@storybook/builder-webpack4/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 2.03 KiB {HtmlWebpackPlugin_0} [built]
ModuleParseError: Module parse failed: Unexpected token (649:14)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> static ZERO = Object.freeze(new Vec2(0, 0));
| /**
| * @field
at handleParseError (/Users/emmetmcpoland/Sources/pcui-graph/node_modules/webpack/lib/NormalModule.js:469:19)
at /Users/emmetmcpoland/Sources/pcui-graph/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/emmetmcpoland/Sources/pcui-graph/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/emmetmcpoland/Sources/pcui-graph/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/emmetmcpoland/Sources/pcui-graph/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/Users/emmetmcpoland/Sources/pcui-graph/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /Users/emmetmcpoland/Sources/pcui-graph/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at context.callback (/Users/emmetmcpoland/Sources/pcui-graph/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /Users/emmetmcpoland/Sources/pcui-graph/node_modules/babel-loader/lib/index.js:59:71
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
Renders as zero width
When I render a graph following the readme, and put the graph in a dom node with a set width and height, the graph is rendered with 0 width and height:
<div style="width: 600px; height: 600px;">
<div class="pcui-element font-regular pcui-graph joint-paper joint-theme-default" style="background-color: rgb(32, 41, 43); width: 0px; height: 0px;">
...
</div>
</div>
If I manually expand the graph size manually in the chrome inspector, it shows the grid with mouse interactivity, however neither of the two nodes show up in the graph that i can find.
I'm doing this in React, but react isn't doing anything here, I'm following the readme:
useEffect(() => {
const schema = {
nodes: {
0: {
name: 'Hello',
fill: 'red',
},
1: {
name: 'World',
fill: 'green',
},
},
edges: {
0: {
from: [0], // this edge can connect nodes of type 0
to: [1], // to nodes of type 1,
stroke: 'blue',
},
},
};
const graph = new PcGraph(schema);
if (graphRef.current) {
graphRef.current.appendChild(graph.dom);
}
}, [graphRef]);
Missing dependency to playcanvas.Vec2
I've tried to get the library to run for quite some time now.
I was successful at building and adding it to my html page via a script tag.
This is the error i get, when trying to create a new Graph:
Uncaught TypeError: Cannot read properties of undefined (reading 'Vec2')
at new JointGraph (pcui-graph.js:40913)
at new GraphView (pcui-graph.js:44975)
at Graph._buildGraphFromData (pcui-graph.js:45567)
at new Graph (pcui-graph.js:45543)
at (index):63
On further inspection it looks like the library is referering to the class playcanvas.Vec2 which is not included in the library itself.
I guess this is the class Vec2 from the playcanvas/engine project?
PCUI-Graph styles embed PCUI styles
See here:
pcui-graph/src/styles/style.scss
Line 4 in 07d647a
This feels wrong to me. Shouldn't the application import PCUI and then import PCUI-Graph styles? Some problems:
- Currently, the PlayCanvas Editor has two copies of PCUI styles in the compiled CSS.
- This forces a user that's using PCUI-Graph to use the PCUI green theme.
Remove usage of PCUI ContextMenu
The ContextMenu is a legacy component which should be eventually removed from PCUI. Any instances in PCUI Graph should be moved to the PCUI Menu component.
Creating edge from target node to source doesn't work correctly
If you create an edge starting at a node's outPort dropping on another node's inPort, this works as expected. If the target node is already connected, the existing edge is removed and the new edge created in its place.
However attempting to create the same connection, but starting the target node's inPort and dropping on the source node's outPort, will only work if both ports have no existing clashing edges. If the target node is already connected, then the attempted edge creation will fail.
Starting at the inPort should work the same as starting at the outPort.
Background grid flickers when panning on Safari
As per summary. This is on Safari 15.
No TypeScript declarations
It appears generating declarations using JSDoc is enabled, but not being distributed through NPM, making this library difficult to use with TypeScript.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.