draw2d

repository·master·Indexed 21 days ago

https://github.com/freegroup/draw2d

An HTML5 JavaScript library for creating interactive diagrams, workflows, and visual languages similar to Microsoft Visio. Version 6.7.1 provides tools for visualization and interaction with graphs, including a command stack for undo/redo functionality and support for databinding via pure JavaScript, Rivets.js, BackboneJS, and Watch.JS.

Tokens
18.6K
Snippets
57
Records
85
Agent score
70%

What's inside draw2d

  1. Overview of Draw2D

    master
    Draw2D is a modern HTML5 JavaScript library designed for creating Visio-like drawings, diagrams, and workflows. It provides tools for visualization and interaction with diagrams and graphs, making it suitable for building visual languages and interactive tools.
  2. What is the Haruki JSDoc template?

    master
    Haruki is an experimental JSDoc 3 template designed for publishing processes that require machine-readable formats rather than standard HTML. Instead of generating HTML documentation, Haruki outputs a JSON representation of your API, or optionally an XML representation. This makes it suitable for consumption by other tools or for integration into custom documentation pipelines.
  3. Build Draw2D

    master

    To build the project, use a Python 3.9 virtual environment to run the build script:

    1. Create and activate a Python 3.9 virtual environment.
    2. Execute ./build.sh.
    python3.9 -m venv venv  
    source ./venv/bin/activate 
    ./build.sh
  4. Generate API documentation in XML format using Haruki

    master

    To use the Haruki template, run the jsdoc command pointing to the Haruki template directory. You can specify the output format using the -q flag. Using -d console directs the output to stdout, allowing you to pipe the results into other tools.

    ./jsdoc myscript.js -t templates/haruki -d console -q format=xml
  5. Set up Draw2D for Local Development

    master

    To develop Draw2D locally, ensure you are using Node.js version v14.15.0 via nvm. Follow these steps to install dependencies and run the development server with examples:

    1. Switch to the required Node version: nvm use v14.15.0
    2. Install dependencies: npm install
    3. Run the development server: DIR=/examples yarn dev
    nvm use v14.15.0
    npm install
    DIR=/examples yarn dev
  6. Manage undo/redo with CommandStack

    master

    The draw2d.command.CommandStack manages the execution, undoing, and redoing of draw2d.command.Command objects. It maintains an undo stack and a redo stack. When a new command is executed, the redo stack is automatically cleared to maintain a clean history.

    You can access the current command stack from a canvas instance using canvas.getCommandStack().

    const commandStack = canvas.getCommandStack();
    
    // Execute a command
    commandStack.execute(myCommand);
    
    // Undo the last action
    if (commandStack.canUndo()) {
      commandStack.undo();
    }
    
    // Redo an undone action
    if (commandStack.canRedo()) {
      commandStack.redo();
    }