December 4, 2022

Robotic Notes

All technology News

smart_shape – npm

6 min read

Interactive vector shapes for the web.

A smart shape is a polygon (an array of connected points) that can be attached to and displayed on any HTML node. These shapes are interactive and the user can move them within a specific HTML container element or edit them by moving points to change the shape of the shape.


As a module
On a web page
Use it

You can install and use SmartShape from NPM as a module in any web framework:

You can then import the SmartShape class into your project:

import SmartShape from "smart_shape";

If you are not using a framework with module support, then you can find a compiled SmartShape javascript file smart_shape.umd.cjs in the root folder of this package and include it in an HTML page:

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

That is all. It is self-contained and has no other dependencies.

That will add SmartShape object to a global namespace automatically and you can start using it to create interactive forms.

The main class is obvious SmartShape, but other helper classes exist that are either used by SmartShape or can be instantiated independently for various tasks. Their specifications can be found in the API docs.

When the script loads, you have SmartShape class that is ready to use. However, Smart Shapes can only be added inside a container. A container is any html element that must exist on a web page.

<div id="surface" style="width:100%;height:400px"></div>

You can then construct your first shape and add it to the existing container:

const div = document.getElementById("surface");
const shape = new SmartShape();
shape.init(div,fill:"#00ff00",[ [0,100],[100,0],[200,100],[100,200] ]);

This code creates a new shape object and initializes it from init method that has the following signature:

  • container_node – HTML DOM element to inject a shape
  • options – Javascript object with options that define the appearance and behavior of the form. For example, fill:’#00ff00′ means that the shape should be filled with a light green color. All shape and point options described in API docs.
  • array_of_points – an array of polygon points, where each point is a subarray of coordinates [x,y].

After running an HTML page with the code above, you should see this:


Not only can you see this shape, but you can also use the mouse to drag and drop it anywhere in the container. Also, the points of a figure marked with red circles and you can drag these circles to change the shape of the figure. For example like this:


The full code of this demo is available in Examples.

After you create the form with default options, you can change them using setOptions method. For example, this will change the background color to yellow:


After changing the options, you need to redraw the shape to see the results using shape.redraw() method.

After you create the shape, you can communicate with it using various SmartShape API methods. For example, you can add and delete points on a shape using addPoint and deletePoint methods. You can get any point by using findPoint and findPointById methods. A shape point is a SmartPoint object that has its own options and methods, so you can customize the point’s appearance and behavior by setOptions method on a SmartPoint object. Additionally, each SmartShape and SmartPoint object generates events for any action the user takes on them: click. move, resize, drag, create, destroy, etc. Your application can react to these events by attaching event listeners to these objects. Standard addEventListener method used for this:

shape.addEventListener("move",(event) => 

In this example, the event listener will be executed whenever the user moves the shape on the screen. event the object contains the shape’s old position and new position (left, right, top, bottom, width, and height).

Using the options, event listeners, and API methods of SmartShape objects, a developer can create highly customized shape types for specific tasks and integrate them into their applications. See the Examples section to see source code and live applications that use SmartShape.

The full API available for customization is in the API docs.

One of these already created custom forms is ResizeBox, which is described below. This component is a special SmartShape with custom properties, a predefined set of points, and custom event responses. This shape can be used as a widget to resize something on your app’s screen or to select a rectangular area on it.

ResizeBox is a special component built on SmartShape, by customizing its properties and attaching event listeners that extend the behavior of the standard SmartShape for a special case – enabling the resizing of a square area. For one, it is used internally by SmartShape to resize shapes if canScale options are enabled, on the other hand, this component can be imported and used independently for a large set of UI tasks to give the user an interface to resize or move something on the screen.

<div id="surface" style="width:100%;height:400px"></div>
import ResizeBox from 'smart_shape';
const div = document.getElementById("surface");
const resizeBox = new ResizeBox();

This code will display the form as follows:

resizing box

This is a shape with predefined points displayed at (0,0) coordinate with width=100 and height=100. It is related to the above div HTML node and has HTML id=”box1″. The developer can drag it like any shape and also drag points. But each point is programmed to move only in predetermined directions using event listeners.

A developer can make the application react to movement and resize events on ResizeBox by attaching listeners to them using addEventListener methods:

resizeBox.addEventListener("resize",(event) => 
    // Do something

resizeBox.addEventListener("move",(event) => 
    // Do something

In this example, these event handlers intercept resize and move ResizeBox events and developers can do something in their applications at the time of these events using information about previous and new ResizeBox positions.

A ResizeBox class built on top of SmartShape, but it doesn’t use class inheritance for this. Instead, it uses object composition and contains a link to this SmartShape in resizeBox.shape Property. The ResizeBox class decorates this form by applying specific properties, methods, and event listeners to it. At the same time, you can use all the properties and methods of the original form by calling them from resizeBox.shape object directly.

See examples of using ResizeBox in the Examples section.

The full API and ResizeBox properties are available in the API docs.

The examples below show how you can use SmartShape and its derivatives in basic mode, and how they can be customized and integrated into real applications.

Description Source Live
A prime example connection connection
Advanced example: multiple forms with different options connection connection
Crop an image using SmartShape connection connection

Crop an image using SmartShape demonstration:


The following video shows how SmartShape uses inside the online text recognition tool to select an image area for perspective correction. Then, once the region is selected, the application uses getPointsArray() SmartShape method to get an array of coordinates and send them to the backend for further processing.

Watch on YouTube:

Description Source Live
A prime example connection connection
Resize and move an image using ResizeBox connection connection

This is a new component in early development. Many new features are coming. Follow this repository to get updates as soon as I hit them. Also, this project is open source, so you can clone the SmartShape GitHub repository and modify the source code to add features that don’t already exist here.

As an early stage software, be careful using it in real projects. Test all the features of the molds you use correctly before going into production. If you modify the code by adding new features to these forms, I will be more than happy if you share your code with my GitHub repository.

If you find any bugs or have great ideas to add here, feel free to post a message Disussions section of the SmartShape project’s GitHub repository. Maybe I’ll include it in the development plan.

The development plan is public and available here: .

Source link