pinussilvestrus / postit-js Goto Github PK

View Code? Open in Web Editor NEW

84.0 6.0 26.0 4.8 MB

Create post-it boards - built with diagram-js

Home Page: https://postit-js-demo.netlify.app/

License: MIT License

JavaScript 92.04% CSS 4.35% HTML 3.61%

diagram-js post-it brainstorming postit-js sticky-notes javascript

postit-js's Introduction

postit-js

Create post-it brainstorming boards - built with diagram-js.

Checkout the Demo or the Experiments Page to get some inspiration.

Features

Create resizable Post-its on the Canvas (squared and circled) via
- Palette
- Double Click (latest element type will be respected)
Change the color of Post-its
Create simple Text Boxes on the Canvas
Create grouping frame elements on the Canvas
Add external image resources on the Canvas

Installation

Install the package to include it into your web application

$ npm install postit-js-core --save

Usage

To get started, create a postit-js instance and render a post-it board into your web application

import 'postit-js-core/assets/postit-js.css';

import PostItModeler from 'postit-js-core/lib/Modeler';

let xml; // my post-it xml 

const modeler = new PostItModeler({
  container: '#canvas',
  keyboard: {
    bindTo: window,
  }
});

modeler.importXML(xml).then(function() {
  console.log('board rendered');
}).catch(function(error) {
  console.error('could not import postit board', err);
});

For using postit-js inside your web application you'll need a source code bundler, e.g. webpack. Checkout the example for getting inspiration.

Development Setup

Spin up the application for development, all strings attached:

$ npm install
$ cd  example
$ npm install
$ npm run dev

Extensions

Since diagram-js and also this project is extendable by design, there exist a couple of great community maintained extensions

drag-drop-images - Drag and drop image files on the board
selection-organizer - Organize and distribute groups of elements
properties-panel - Properties panel for post-it elements

License

MIT

Contains parts of (bpmn-io) released under the bpmn.io license.

postit-js's People

Contributors

Stargazers

Watchers

postit-js's Issues

Integrating Drag Drop

Let's think of a Drag n Drop Image Feature. What is the best place to integrate it in the lib? PostitEditorActions, PostitRules...?
With Base64 encoded upload for now.

Add collaboration support

it should be possible to collaborate with others while working on a post-it board

Release on npm-js and add integration instructions

Unfortunately, postit-js is reserved on npm

postinstall / .npmignore issue

Hej,

using npm install results in an FileNotFound error when running the postinstall script, since it can't find the directory ./example/ since it is an entry within .npmignore.

I'm not sure, what the expected behaviour would be, hence no PR. I tested it in my fork with both workarounds - seemingly working fine.

Cheers, qloikp

Constant missing

This constant defined here
https://github.com/pinussilvestrus/postit-js/blob/main/lib/util/LabelUtil.js#L8
should be reused here
https://github.com/pinussilvestrus/postit-js/blob/main/lib/draw/PostitRenderer.js#L167

Include extensions to demo

We have some cool extensions now: https://github.com/xanpj/postit-js-extensions

Let's include them in the example demo.

Grid Align Feature

Grid Align Feature

This will make elements in a group align into a grid and resize the group element to wrap around them.
How should this feature be activated?

Key command
Dedicated button in pallete
Button appearing in floating menu or top right menu when multiple elements are selected.

Need help

Hi,
I tried to understand the meta model implemented in the postit.json and postitDi.json and I've got some questions

I didn't find any reference on attributs isReadOnly, isVirtual and subsettedProperty in moddle doc, are they implemented or just unused attributs ?
whats the difference between PostitRootBoard and PostitPlane, why using this to elements for encapsulate drawing elements ? can we mix them into a unique element ?

Thanks a lot for your help and congratulation for your work.

Demo: add possibility to import boards XML files

Direct editing has a white background

Currently, when direct editing is enabled, it fills with a white background

It would be better to respect the filled post-it color.

Empty text deletion works not stable

Sometimes, the empty text behavior does not get executed and empty text boxes got not deleted

Reproducible sometimes inside the demo

Create text box from the palette
Directly cancel direct editing
Empty text box is still on the canvas

What script do I run to keep it running continuously on the server?

Sorry for the newb Node question but whether I use npm run dev, npm run prod, npm build, etc, they all will terminate when I end my SSH session with my server. How do I keep it running?

Connect elements

It shall be possible to connect different elements.

css loader

Hello,
thank you for your help because I think it is a beginner mistake:

I have created a directory and installed postit-js-core: $ npm install postit-js-core --save
then I copied the example files in a subdirectory example and
followed ;
$ cd example
$ npm install
$ npm run dev
I have installed css-loader and style-loader in the main and subdirectoriy (in case of)

but I keep having this error:

ERROR in ../node_modules/postit-js-core/assets/postit-js.css (./node_modules/css-loader/dist/cjs.js!../node_modules/postit-js-core/assets/postit-js.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../node_modules/diagram-js/assets/diagram-js.css' in 'C:\Users\thoma\OneDrive\SONEAR 2023\postit-js-scratch\node_modules\postit-js-core\assets'
at finishWithoutResolve (C:\Users\thoma\OneDrive\SONEAR 2023\postit-js-scratch\example\node_modules\enhanced-resolve\lib\Resolver.js:309:18)
at C:\Users\thoma\OneDrive\SONEAR 2023\postit-js-scratch\example\node_modules\enhanced-resolve\lib\Resolver.js:386:15
at C:\Users\thoma\OneDrive\SONEAR 2023\postit-js-scratch\example\node_modules\enhanced-resolve\lib\Resolver.js:435:5
at eval (eval at create (C:\Users\thoma\OneDrive\SONEAR 2023\postit-js-scratch\example\node_modules\tapable\lib\HookCodeFactory.js:33:10), :16:1)
at C:\Users\thoma\OneDrive\SONEAR 2023\postit-js-scratch\example\node_modules\enhanced-resolve\lib\Resolver.js:435:5
at eval (eval at create (C:\Users\thoma\OneDrive\SONEAR 2023\postit-js-scratch\example\node_modules\tapable\lib\HookCodeFactory.js:33:10), :27:1)
at C:\Users\thoma\OneDrive\SONEAR 2023\postit-js-scratch\example\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:87:43
at C:\Users\thoma\OneDrive\SONEAR 2023\postit-js-scratch\example\node_modules\enhanced-resolve\lib\Resolver.js:435:5
at eval (eval at create (C:\Users\thoma\OneDrive\SONEAR 2023\postit-js-scratch\example\node_modules\tapable\lib\HookCodeFactory.js:33:10), :15:1)
at C:\Users\thoma\OneDrive\SONEAR 2023\postit-js-scratch\example\node_modules\enhanced-resolve\lib\Resolver.js:435:5
@ ../node_modules/postit-js-core/assets/postit-js.css 8:6-117 22:17-24 26:0-87 26:0-87 27:22-29 27:33-47 27:50-64
@ ./app/app.js 3:0-45

webpack 5.78.0 compiled with 1 error in 1905 ms

Introduce own font

Currently, postit-js reuses the existing bpmn-js-font (cf. package.json). Would be nice to have an own icon set for the library.

Ibm/iplex

Describe the Bug

I am trying to run a example you provided But getting an issue: Can't resolve '../node_modules/@ibm/plex/css/ibm-plex.min.css' in 'G:\postit-js\node_modules\postit-js-core\assets'
I tried to uninstall and install it again but same issue.
Steps to Reproduce

do this
do that
now this happens

Expected Behavior

Environment

OS: [e.g. MacOS 10.2, Windows 10]
Library version: [e.g. 2.0.0]

Error is thrown when deleting elements created via canvas-create

When creating a new element on the board directly on the Canvas via double click and deleting it, an error is showing up.

This blows up the whole editor so a restart is needed.

Cf. sentry error report

Add a little shadow to post-its

Currently, post-its are rendered quite simple:

A little svg shadow would be nice:

Inspiration: Miro

Improve image selection

Currently, the component for setting the source of postit:Image elements is very rudimental

It is based on the browser native prompt feature, cf. ImageSelection module. This can be improved, e.g. by having a proper modal.

Follow up of #16

npm package is missing resources folder for moddle

https://github.com/pinussilvestrus/postit-js/tree/main/lib/moddle

without those files in the resources it can't build with webpack/laravel-mix

Create pen functionality

Like in Miro there could be a pen to freely draw on the canvas

TextBox should not be rendered when no text is available

Sentry integration is not working properly

How to set businessObject attributes at creation time

Hi @pinussilvestrus
this time it's a question from my side.

I understand that attributes set in the xml are loaded as attributes ($attrs) inside the businessObject of an element. From then on they are meant to be read only.

What would be the best way to set the $attrs manually at creation time? (i.e. here)

const shape = _elementFactory.createShape({
      type: type,
      ...options,
  });

I am thinking of a scenario where I undo the history in the panel and need to recreate some elements. However, I want to set them as $attrs instead of object properties so that elements stay consistent with the way they'd look if they'd be loaded fresh from an xml.

I hope that makes sense.

Add support for custom svg or image elements

The Palette and Context Pad are offering a finite set of available elements to store on the board. Besides that different Tools offers a custom image possibility.

For example, Miro offers something like this

What has to be considered is how to store the custom element information (URL, svg data, ...). The best solution would be inside the XML.

Remove bpmn-moddle dependency

Currently, the moddle is built on top of the bpmn-moddle dependency. This should be removed to work independently.

This comes along with a major refactoring of some other components as well (importer, viewer, modeler, copy-paste)

When copying elements, the color got lost

Image source should be configurable for existing images

Currently, the image selection gets triggered after a postit:Image element got created. The module was built in that way the image selection can be executed as a service.

Therefore it should be possible to configure the image source for existing elements on the board. One solution would be to have an action in the Context Pad.

Follow-up of #16

Netlify experiments demo

Hi, how about netlifying the extension-experiments in the experiments branch instead of the live branch. The v2 extensions require a modified lib and less so they don't work on the master branch.

We could probably also remove extension-experiments/ in the master branch.

Move to promises

Update to current, promisified version of moddle-xml
Update APIs in the style of: https://github.com/bpmn-io/bpmn-js-callbacks-to-promises

Demo takes too long to load (minify)

Sometimes, when no cache is available, the demo application takes very long to load, which leads to an ugly "not-ready" state at the moment. Things we could do against it

Minify source code
Add a loading spinner