smart_shape – npm

Interactive vector shapes for the Internet.

Sensible form is a polygon (array of linked factors) which will be connected to any HTML node and displayed on high of it. These figures are interactive and consumer can transfer them inside specified HTML container aspect or edit them by shifting factors to alter a form of determine.

Set up
    As a module
    On a Internet Web page
Use
    SmartShape
    ResizeBox
Examples
    SmartShape
    ResizeBox
Contribution

As a module

You possibly can set up and use SmartShape from NPM as a module in any net framework:

Then, you possibly can import SmartShape class to your venture:

import {SmartShape} from "smart_shape";

On a Internet web page

If you don’t use a framework with module assist, then yow will discover compiled SmartShape javascript file smart_shape.umd.cjs within the root folder of this bundle and embody it to an HTML web page:

<script src="<path-to-file>/smart_shape.umd.cjs"></script>

That is all. It is self-contained and doesn’t have every other dependencies.

This may add SmartShape object to a worldwide namespace robotically, and you can begin utilizing it to create interactive shapes.

The principle class is clearly SmartShape, however there are different helper courses exist as effectively, that both utilized by SmartShape, or will be instantiated independently for various duties. Their specs yow will discover in API docs.

SmartShape

When the script is loaded, you’ve got the SmartShape class, that’s prepared for use. Nevertheless, sensible shapes will be added solely inside a container. Container is any html aspect, that ought to exist on an internet web page.

<div id="floor" model="width:100%;top:400px"></div>

Then you possibly can assemble your first form and add it to the prevailing container:

const div = doc.getElementById("floor");
const form = new SmartShape();
form.init(div,{fill:"#00ff00"},[ [0,100],[100,0],[200,100],[100,200] ]);

This code creates new form object and initializes it by init technique, which has the next signature:

SmartShape.init(container_node,choices,array_of_points);

• container_node – HTML DOM aspect to inject determine into
• choices – Javascript object with choices, that defines look and habits of form. For instance, {fill:’#00ff00′} signifies that form should be stuffed with mild inexperienced shade. All form and factors choices described in API docs.
• array_of_points – array of factors of polygon the place every level is a subarray of coordinates [x,y].

After operating HTML web page with code above, you must see this:

You can’t solely see this form, however use mouse to pull and drop it to anyplace inside container. Additionally, the factors of a form marked by crimson circles and you may drag these circles to alter a form of determine. For instance, like this:

The complete code of this demo is out there in Examples.

After create the form with default choices, you possibly can change them, utilizing setOptions technique. For instance, this can change background shade to yellow:

form.setOptions({fill:"#ffff00"});

After altering the choices, it is required to redraw the form to see the outcomes through the use of form.redraw() technique.

After create the form, you possibly can talk with it, utilizing numerous strategies of SmartShape API. For instance, you possibly can add and delete factors on form through the use of addPoint and deletePoint strategies. You may get any level through the use of findPoint and findPointById strategies. The purpose of form is SmartPoint object, which has its personal choices and strategies, so you possibly can customise level look and habits by setOptions technique of SmartPoint object. Additionally, any SmartShape and SmartPoint objects generates occasions for all actions which consumer is doing with them: clicking. shifting, resizing, dragging, creating, destroying and so forth. Your utility can react on these occasions by attaching occasion listeners to those objects. Customary addEventListener technique used for this:

form.addEventListener("transfer",(occasion) => {
    console.log(occasion.oldPos);
    console.log(occasion.newPos);
})

On this instance, occasion listener will run each time when consumer strikes the form on the display screen. occasion object incorporates previous place of the form and new place (left,proper,high,backside,width and top).

Utilizing the choices, the occasion listeners and the API strategies of SmartShape objects, developer can create extremely personalized kinds of shapes for particular duties and combine them to their purposes. Look Examples part to see supply code and stay purposes, that use the SmartShape.

Full API that accessible for personalisation is in API docs.

One in all these personalized shapes that already created is ResizeBox, which described under. This part is a particular SmartShape with customized properties, with predefined set of factors and with personalized reactions on occasions. This form can be utilized as a widget to resize one thing in your utility display screen, or choose rectangular space on it.

ResizeBox

ResizeBox is a particular part, created on high of the SmartShape, by customizing its properties and attaching occasion listeners which prolong habits of ordinary SmartShape for a particular case – give a capability to resize a squared space. On the one hand it utilized by SmartShape internally to resize shapes, if canScale choices enabled, then again this part will be imported and used independently for giant vary of UI duties to offer the consumer an interface to resize or transfer one thing on the display screen.

<div id="floor" model="width:100%;top:400px"></div>

import {ResizeBox} from 'smart_shape';
const div = doc.getElementById("floor");
const resizeBox = new ResizeBox();
resizeBox.init(div,0,0,100,100,{id:"box1"});

This code will show the form like this:

It is a form with predefined factors, displayed on (0,0) coordinate with width=100 and top=100. It is linked to specified div HTML node and has HTML id=”box1″. Developer can drag it as any form, and likewise drag it factors. However every level programmed to maneuver solely in predefined instructions, utilizing occasion listeners.

Developer could make the app to react to motion and resize occasions of ResizeBox by attaching listeners to them utilizing addEventListener strategies:

resizeBox.addEventListener("resize",(occasion) => {
    console.log(occasion.oldPos);
    console.log(occasion.newPos);
    // Do one thing
})

resizeBox.addEventListener("transfer",(occasion) => {
    console.log(occasion.oldPos);
    console.log(occasion.newPos);
    // Do one thing
})

On this instance, these occasion handlers intercept resize and transfer occasions of ResizeBox and builders can do one thing of their purposes within the second of those occasions utilizing details about earlier and new positions of the ResizeBox.

ResizeBox class created on high of SmartShape, nevertheless it would not use class inheritance for that. As a substitute, it makes use of object composition and incorporates a hyperlink to this SmartShape in resizeBox.form property. ResizeBox class decorates this form by making use of particular properties, strategies and occasion listeners to it. On the identical time, you should utilize all properties and strategies of authentic form by calling them from resizeBox.form object immediately.

See examples of utilizing ResizeBox in Examples part.

Full API and properties of ResizeBox accessible in API docs.

Examples under present how you should utilize SmartShape and it is derivatives in primary mode and likewise how they are often personalized and built-in in actual world purposes.

SmartShape

Minimize picture utilizing SmartShape demo:

SmartShape in manufacturing

The following video exhibits how SmartShape used inside on-line textual content recognition software to pick out a picture area for perspective correction. Then, after area chosen, utility makes use of getPointsArray() technique of SmartShape to get an array of coordinates and ship them to the backend for additional processing.

Watch on YouTube: https://youtu.be/4ee-HYCtgJ4 .

Resize Field

It is a new part on early stage of growth. Numerous new options to come back. Observe this repository to get updates as quickly as I push them. Additionally, this venture is open supply, so you possibly can clone SmartShape GitHub repository and modify supply code so as to add any options, that also doesn’t exist right here.

As an early stage software program, watch out through the use of it in actual world tasks. Take a look at all options of shapes that you simply use correctly, earlier than pushing to manufacturing. If you happen to modify the code by including new options to those shapes, I can be very happy for those who share your code with my GitHub repository.

If you happen to discover bugs or have some nice concepts so as to add right here, be at liberty to submit a message on Disussions tab of GitHub repository of SmartShape venture. Maybe I’ll embody it to growth plan.

The event plan is public and accessible right here: https://github.com/customers/AndreyGermanov/tasks/1/views/1 .