Icon Point v1.2.0

What's Changed

• Fix typo in readme, docs, descriptions by @doubleactii in #3
• Closes #6 by @doubleactii in #7
• Closes #4 by @doubleactii in #8
• Closes #5 by @doubleactii in #9

New API

• Adds the resetPoint API. This API resets the point back to its original position it was originated in.
• Adds the transform API. This API moves the point based on a transformation value. This is helpful when mirroring a point, or when an icon is transformed (flipped), you can get the new icon point on that flipped icon, by transforming the point by the same value of the transformation of the icon.

This API is extended via separated axis calls for the transform API via transformX and transformY for instances when only one axis needs to be mirror.

Full Changelog: v1.1.0...v1.2.0

Icon Point v1.1.0

What's Changed

• v1.1.0, add updatePoint & updateBounds API & code refactor by @doubleactii in #1
• Doc hotfix by @doubleactii in #2

New Contributors

• @doubleactii made their first contribution in #1

Full Changelog: v1.0.0...v1.1.0

Icon Point v1.0.0

Full Changelog: https://github.com/EvitcaStudio/IconPoint/commits/v1.0.0

IconPoint

A class that manager a point that exists inside/outside a virtual rectangle. The point's position inside/outside of the rectangle is maintained when the rectangle is rotated.

Installation

ES Module

import { IconPoint } from './icon-point.mjs';

IIFE (Immediately Invoked Function Expression)

<script src="icon-point.js"></script>;
// ...
window.IconPointBundle.IconPoint;

Example

// Create a rectangle at the position of (0,0)
const rectangle = { x: 0, y: 0 };
// Make the dimensions of the rectangle 100x50
const bounds = { width: 100, height: 50 };
// Create a point at the top left corner of the rectangle
const point = { x: 1, y: 1, useRawPixels: true };
// Create an icon point that will track the point on this rectangle when it moves/rotates
const tlPoint = new IconPoint(rectangle, bounds, point);

// Verify the point is where it should be
console.log(tlPoint.getPoint()) // { x: 0, y: 0 } This shows that the point is at the position (0,0) which is the top left position of the rectangle

// Changing the position of the rectangle
rectangle.x += 100;
// Verify the point is where it should be after the rectangle changes positions
console.log(tlPoint.getPoint()) // { x: 100, y: 0 } This shows that the point has moved to the updated position of the rectangle

// Applying some offsets to the rectangle
const rectangleOffsets = { x: 25, y: 25 };  
// Verify the point is where it should be after offsets have been applied to the rectangle
console.log(tlPoint.getPoint(undefined, rectangleOffsets)) // { x: 125, y: 25 } This shows that the point has moved to the updated position based on the offsets of the rectangle

// Applying some rotation to the rectangle
const angle = Math.PI;
// Verify the point is where it should be after rotating the rectangle by `angle`
console.log(tlPoint.getPoint(angle)) // {x: 200, y: 50.00000000000001} This shows that the point has moved to the updated position after the rectangle had been rotated by `angle`.