npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

resus-diagrams

v1.1.1

Published

A super simple, no-nonsense diagramming library written in React that just works. It is storm-react-diagrams fork version for Resus-ide.

Downloads

4

Readme

Resus - Diagrams Core

A super simple, no-nonsense diagramming library written in React that just works. It is storm-react-diagrams fork version for Resus-ide.

Introduction

A no-nonsense diagramming library written entirely in React with the help of Lodash, and a single polyfill. It aims to be:

  • Simple, and void of any fuss/complications when implementing it into your own application
  • Customizable without having to hack the core (adapters/factories etc..)
  • Simple to operate and understand without sugar and magic
  • Fast and optimized to handle large diagrams with hundreds of nodes/links
  • Super easy to use, and should work as you expect it to

Roadmap

  • Move path logic associated with links into a base link class so we can easily extend links
  • Add more fault tolerance

How to install

npm install resus-diagrams

or

yarn add resus-diagrams

Make your own nodes

To see how to create your own nodes like the one below, take a look at demo3:

How does it work

The library uses a Model Graph to represent the virtual diagram and then renders the diagram using 2 layers:

  • Node Layer -> which is responsible for rendering nodes as HTML components
  • Link Layer -> which renders the links as SVG paths

Each node and link is fed into a factory that then generates the corresponding node or link react widget. Therefore, to create custom nodes and links, register your own factories that return your own widgets.

As long as a node contains at least one port and the corresponding NodeWidget contains at least one PortWidget, a link can be connected to it.

Usage

Delete removes any selected items ![Delete]

Shift + Mouse Drag triggers a multi-selection box ![Shift + Mouse Drag]

Shift + Mouse Click selects the item (items can be multi-selected) ![Shift + Mouse Click]

Mouse Drag drags the entire diagram ![Mouse Drag]

Mouse Wheel zooms the diagram in / out ![Mouse Wheel]

Click Link + Drag creates a new link point ![Click Link + Drag]

Click Node Port + Drag creates a new link ![Click Node Port + Drag]

What's new

2021-05

  • node model에 onclick event param 추가
  • canvas에 onclick event 추가
  • node 앞부분에 break point div 추가, defaultnode model에 break point onclick event param 추가
  • node div classname에 isbreakpoint로 break-point boolean 추가
  • 전체 canvas에 break-points disabled boolean 추가
  • node model에 onwheel event param 추가
  • diagram node delete function disabled