vesoft-inc / nebulagraph-veditor Goto Github PK

View Code? Open in Web Editor NEW

79.0 21.0 3.0 10.5 MB

A Highly customizable JavaScript Diagramming Lib with SVG, HTML, Canvas support.

Home Page: https://vesoft-inc.github.io/nebulagraph-veditor

License: Apache License 2.0

HTML 25.03% JavaScript 1.38% CSS 9.29% Less 1.89% TypeScript 62.41%

canvas dag diagram erd erdiagram flowchart graph javascript nebulagraph svg

nebulagraph-veditor's Introduction

NebulaGraph veditor

NebulaGraph VEditor is a highly customizable flow chart library, with which you create flow charts, sequence diagrams, workflow, and more.

Features

Typescript: Natively TS support
Customizable: Support SVG, HTML, CSS, Canvas, React/Vue and more to custome node/line shapes
Minimap: Birdview of given viewport in the diagram
Shortcuts Keys: undo, redo, copy, paste, select, zoom, pan and more
Performant: Async/Await pattern enabled high performance of graph loading

Installation

npm install @vesoft-inc/veditor

demo

npm run start

Build

npm run build
# make declaration
npm run makeDts

Quick Start

import VEditor from "@vesoft-inc/veditor";

let index = 0;
const editor =  new VEditor({ 
  dom: document.getElementById("root")
});
// add node
function add(){
  editor.graph.node.addNode({
    uuid:index,
    type:"default",// node shape type
    name:"test"+index++,
    x:window.innerWidth*Math.random(),
    y:300*Math.random()
  })
}
for(let x = 0;x<50;x++){
  add();
}
// add line
for(let x = 0;x<10;x++){
  editor.graph.line.addLine({
    from:Math.floor(50*Math.random()),
    to:Math.floor(50*Math.random()),
    fromPoint:1,
    toPoint:0
  })
}
// result
console.log(editor.schema.getData())

Documents

License

Apache 2.0

nebulagraph-veditor's People

Contributors

Stargazers

Watchers

Forkers

latitudemaster mizy hugoren

nebulagraph-veditor's Issues

dependency error

PS C:\vesoft-inc\nebulagraph-veditor> npm run build

@vesoft-inc/[email protected] build
webpack --config webpack.config.build.js

CLI for webpack must be installed.
webpack-cli (https://github.com/webpack/webpack-cli)

We will use "npm" to install the CLI via "npm install -D webpack-cli".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: @vesoft-inc/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR! dev webpack@"^5.71.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.0.0" from [email protected]
npm ERR! node_modules/css-loader
npm ERR! dev css-loader@"^1.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

why don't integrate with nebula-studio

It looks there are something in common

npm run start doesn't work (demo)

We followed the documentation

Open terminal
npm install @vesoft-inc/veditor --save

npm WARN saveError ENOENT: no such file or directory, open '/mnt/c/tobedeleted/veditor/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=12.0.0"} (current: {"node":"10.19.0","npm":"6.14.4"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=12.0.0"} (current: {"node":"10.19.0","npm":"6.14.4"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN enoent ENOENT: no such file or directory, open '/mnt/c/tobedeleted/veditor/package.json'
npm WARN veditor No description
npm WARN veditor No repository field.
npm WARN veditor No README data
npm WARN veditor No license field.

+ @vesoft-inc/[email protected]
added 14 packages from 20 contributors and audited 14 packages in 4.331s
found 0 vulnerabilities

-- ls

admin@DESKTOP-RMGSJKG:/mnt/c/tobedeleted/veditor$ ls
node_modules  package-lock.json

-- npm run start

admin@DESKTOP-RMGSJKG:/mnt/c/tobedeleted/veditor$ npm run start
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /mnt/c/tobedeleted/veditor/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/mnt/c/tobedeleted/veditor/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ramsun/.npm/_logs/2022-09-19T20_06_30_276Z-debug.log

undo will crash when history is empty

Quick start can't see anything and errors

In a cra project, write the following code, there are two error points inside, and even if these two points are solved, nothing can be rendered in the web page window.

// EditorTester.jsx

import React, { useEffect } from 'react'
import VEditor from '@vesoft-inc/veditor'

export const EditorTester = () => {
  let editorRef = React.useRef()

  useEffect(() => {
    const editor = new VEditor(editorRef.current)
    let index = 0
    console.log('editor', editor)
    const add = () => {
      // 如果改为 graph?. 则会报错 Uncaught TypeError: Cannot read properties of undefined (reading 'node')
      editor.graph.node.addNode({
        uuid: index,
        type: 'default', // node shape type
        name: 'test' + index++,
        x: window.innerWidth * Math.random(),
        y: 300 * Math.random(),
      })
    }
    for (let x = 0; x < 50; x++) {
      add()
    }
    // add line
    for (let x = 0; x < 10; x++) {
      editor.graph?.line.addLine({
        from: Math.floor(50 * Math.random()),
        to: Math.floor(50 * Math.random()),
        fromPoint: 1,
        toPoint: 0,
      })
    }

    // 这行会报错 Uncaught TypeError: Cannot read properties of undefined (reading 'getData')
    console.log(editor.schema.getData())
  }, [])

  return <div ref={editorRef} id='ca'></div>
}

the edior log: