altwalker / model-visualizer Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 1.04 MB

A JavaScript library for visualizing and visualy editing JSON models for AltWalker and GraphWalker.

Home Page: https://altwalker.github.io/model-visualizer/

License: GNU General Public License v3.0

JavaScript 68.08% CSS 3.62% Vue 28.30%

altwalker graphwalker javascript model-based-testing nodejs

model-visualizer's Introduction

Model-Visualizer

A JavaScript library for visualizing and visually editing JSON models for AltWalker and GraphWalker.

Installation

Browser scripts

You can get the latest browser-ready script:

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" href="https://altwalker.github.io/model-visualizer/build/model-visualizer.css">

JS

Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them.

<script src="https://altwalker.github.io/model-visualizer/build/model-visualizer.js"></script>

Required Dependencies

Optional Dependencies

Milligram (Optional) - for the forms design.

Example

The following code initializes ModelVisualizer in editMode inside the element with the id visualizer, using default models defined in the library.

let visualizer = new ModelVisualizer({container: "visualizer", editMode: false});

Yo can find a working example here.

Setting Up a Development Environment

Install the npm dependencies:

$ npm install

Running locally

$ npm run dev

Now you can visit http://localhost:8080/ and you should see a live demo.

Building

$ npm run build

Will create a build inside the public/ directory.

Running Tests

$ npm run test

Support

For help, discussion about best practices, sharing ideas, projects, or any other conversation that benefits from being searchable:

For casual chit-chat with us or with other members of the community:

Gitter Chat Room

License

This project is licensed under the GNU General Public License v3.0.

model-visualizer's People

Contributors

Stargazers

Watchers

model-visualizer's Issues

Upgrade dependencies

Publish model-visualizer on npm

Build a light version of the model-visualizer

Build a lightweight version of the model visualizer that eliminates dependencies on Vue.js. The lightweight version will focus solely on displaying models and will not support model editing. This version is intended to be used by the VS Code Extension and the Live Viewer.

Upgrade Vue.js form 2.x to 3.x

Migrate `dagre-d3-es` from `dagre-d3`

The dagre-d3 package currently relies on an outdated version of the d3 library. There is a fork named dagre-d3-es which is a modified version that upgrades the d3 library to a more recent release.

Migrate to dagre-d3-es to leverage the improvements and updates in the latest d3 version, until dagre-d3 is upgraded.

Arrow heads are not displayed on Safari

The arrow head (svg's marker-end property) is not displayed on Safari. Note that the arrow head is displayed while editing the edge.

Environment

Safari Version	Result
17.3	❌
16.5	❌
15.6	✅
14.1	✅
13.1	✅

Add a new job for creating a new release branch for each new release

Create a workflow job that automatically generates a new release branch containing the model-visualizer.min.css and model-visualizer.min.js files for each new tag. This process allows the model-editor and live-viewer projects to use a specific versions, by using these release branches as CDNs with jsDelivr.

Below are the commands required to create a release branch:

git checkout --orphan release-v<version-number> 
git rm --cached -r .
git add model-visualizer.min.css model-visualizer.min.js 
git push -u origin release-v<version-number>