Isometric

Isometric circles support dragging. When a circle is being dragged, the following CustomEvents are fired in order:

1. dragstart
2. drag
3. dragend

The detail property of these events contains the right, left, and top coordinates that the isometric circle will receive.

You can prevent the circle from changing position during a drag by calling event.preventDefault() on the drag event.

When the drag property is set to a PlaneView (e.g., "TOP", "FRONT", "SIDE"), the pentagram becomes draggable.

Event Lifecycle:

1. dragstart
2. drag
3. dragend

These are CustomEvents. The detail property of the event contains the right, left, and top coordinates received during the drag. You can prevent the pentagram from moving by calling event.preventDefault() inside the drag event listener.

When the drag property of an IsometricPentagram is set to a PlaneView (e.g., "TOP", "FRONT", "SIDE"), the following custom events are fired in order:

1. dragstart
2. drag
3. dragend

Each event is a CustomEvent containing a detail property with the right, left, and top coordinates. You can prevent the position from changing by calling event.preventDefault() on the drag event.

To use the library directly in a browser without a module bundler, include the compiled isometric.js file (found in the dist/web folder) in your HTML. This creates a global isometric object containing all classes.

<script src="wherever/you/installed/isometric.js"></script>
<script>
  // Access classes via the global isometric object
  const canvas = new isometric.IsometricCanvas();
</script>

In Deno, import the ESM version directly from a CDN like JSDELIVR. The package includes reference directives for type checking, so you get TypeScript support automatically.

import {
    IsometricCanvas,
    IsometricGroup,
    IsometricRectangle,
    IsometricCircle,
    IsometricStarPolygon,
    IsometricPentagram,
    IsometricPath
} from 'https://cdn.jsdelivr.net/npm/@elchininet/isometric/esm/index.js';

For Node.js or older environments using require syntax, import the classes from the main entry point.

const {
    IsometricCanvas,
    IsometricGroup,
    IsometricRectangle,
    IsometricCircle,
    IsometricStarPolygon,
    IsometricPentagram,
    IsometricPath
} = require('@elchininet/isometric');

For modern web development with bundlers (like Webpack, Vite, or Rollup), import the required classes directly from the package.

import {
    IsometricCanvas,
    IsometricGroup,
    IsometricRectangle,
    IsometricCircle,
    IsometricStarPolygon,
    IsometricPentagram,
    IsometricPath
} from '@elchininet/isometric';

To use the package in a Node.js environment, you must install jsdom because the library requires a DOM implementation to function. When importing, use the /node entry point to ensure compatibility.

npm install jsdom

// Using ES6 modules in Node
import {
    IsometricCanvas,
    IsometricGroup,
    IsometricRectangle,
    IsometricCircle,
    IsometricStarPolygon,
    IsometricPentagram,
    IsometricPath
} from '@elchininet/isometric/node';

// Using CommonJS in Node
const {
    IsometricCanvas,
    IsometricGroup,
    IsometricRectangle,
    IsometricCircle,
    IsometricStarPolygon,
    IsometricPentagram,
    IsometricPath
} = require('@elchininet/isometric/node');

You can install the library using any of the following package managers:

• NPM: npm install @elchininet/isometric
• PNPM: pnpm add @elchininet/isometric
• Yarn: yarn add @elchininet/isometric

To restrict the movement of a draggable pentagram, set the bounds property. If bounds is set to false, the pentagram has no boundaries.

Bounds Properties:

• right: [number, number] (Minimum and maximum right coordinates)
• left: [number, number] (Minimum and maximum left coordinates)
• top: [number, number] (Minimum and maximum top coordinates)

To restrict the movement of an isometric circle, set its bounds property. If bounds is set to false, the circle will have no boundaries.

Bounds Object Structure:

• right: [number, number] (Minimum and maximum boundaries for right coordinates)
• left: [number, number] (Minimum and maximum boundaries for left coordinates)
• top: [number, number] (Minimum and maximum boundaries for top coordinates)

circle.bounds = {
  right: [0, 500],
  left: [0, 500],
  top: [0, 500]
};

You can apply an image texture to an IsometricStarPolygon using the texture property.

Texture Object Properties:

• url (string): URL of the image texture.
• planeView (string): The texture's plane view. Defaults to the parent polygon's planeView.
• height / width (number): Dimensions of the texture.
• scale (number): Scale of the texture.
• pixelated (boolean): Whether to use pixelated image rendering.
• shift (object): Background position shift using right, left, and top coordinates.
• rotation (object): Background rotation.

Rotation Object:

• axis (string): The axis of rotation ("RIGHT", "LEFT", or "TOP").
• value (number): The rotation value.

const star = new IsometricStarPolygon({
  texture: {
    url: 'path/to/image.png',
    scale: 2,
    rotation: {
      axis: 'TOP',
      value: 45
    }
  }
});