webcat12345/konva-demo

Canvas editing application using KonvaJS and Angular

Konva Demo

Demo

You can checkout demo here

Project Details

Angular 5.2.0 + Angular-CLI + Konva.js

• Angular
• Anugular-CLi
• Konva.js

@angular/cdk: 5.2.1
@angular/cli: 1.6.8
@angular/material: 5.2.1
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.8
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

Requirements

https://blogs.mulesoft.com/wp-content/uploads/2011/08/Studio-screenshot.png

Setup a fresh Angular 5 app that user can just run by doing:

npm install

npm run

The app will start and provide a canvas and a object pallete. The pallette will have different kinds of object that user can drag and drop to the canvas. The user can then connect to an existing object and provide a direction for the connection. User can then group multiple objects into a group (just like in the image).

Each of the object can have its own properties. So clicking on an object will open a property editor where use can specify certain values to property keys. This will need to be stored in localStorage or sessionStorage so clicking it back again we can see existing values. For this task, you can choose any kind of property to be attached to a component. If an object can have multiple properties then it will be even better. This would also showcase how you would build a complex property editor.

Constraints:

• You can only connect one object to maximum 3 objects.
• A group of object behaves as one single object when you try to connect it with another component. E.g. component1 -> group1 -> component2. Now inside group1, you can have components: foo -> bar -> baz. You cannot connect component1 with foo, bar or baz. Nor you can connect them with component2.
• Moving around component/group will also correctly redraw the connection line and setup the correct path to the object.

Deliverables

• Push your code to a github respoitory. It can be public.
• Provide docs on how to setup to run the app and code comments.
• One document on your algorithms and how code is structured.
• You can use any external libraries to complete this task.
• Use Angular 5 + any material design library
• Should be able to add 100s of objects with any performance degradation

konva-demo's Issues

ability to remove linked line

• select two elements from canvas
• show link button if two elements are unlinked.
• show unlink button if two elements are linked

general property handling

Each element has their own properties. Different types of elements will have different properties.

• select element from canvas
• property window will be shown on the right sidebar
• properties should be different for different types of elements
• user can edit properties
• properties should be stored in session storage or somewhere else.
• user can review saved properties.

more features could be approaching

update document

Repository document update for giving brief information about this sample app.

Thanks for sharing a fantastic demo

I checked your demo app.
It's really good to start my project. Thanks for your sharing.
I have experience in Angular and Nestjs, looking forward to working with you.