Skip to content
This repository was archived by the owner on Jan 5, 2025. It is now read-only.

wings-j/two-dimension-container

Repository files navigation

twe-dimension-container

2D container. Drag and scale in a fixed space.

Demo

https://wings-j.github.io/two-dimension-container

Usage

Install:

npm install --save-dev @wings-j/two-dimensional-container

Example:

import TwoDimensionContainer from '@wings-j/two-dimensional-container'

let container = new TwoDimensionContainer('100%', '100%', { animate: true })
container.translateTo(window.innerWidth / 2, window.innerHeight / 2)
document.body.appendChild(container.$container)

let div = document.createElement('div')
container.$content.appendChild(div)

API

Constructor

constructor(width?: string, height?: string, config?: Partial<Config>)

  • width: width of the container
  • height: height of the container
  • config:
    • translate: draggable
    • scale: scalable
    • translateSpeed: speed of translating
    • scaleSpeed: speed of scaling
    • animate: zoom with animations
    • animateDuration: animation duration

Members

$container: HTMLElement

Container element.

$content: HTMLElement

Content element.

state: {x: number, y: number, s: number}

Current position and scale factor

translateTo(ax: number, ay: number): void

Absolute translate.

Parameters:

  • ax:absolute value of x
  • ay:absolute value of y

translateBy(dx: number, dy: number): void

Relative translate.

Parameters:

  • ax:relative value of x
  • ay:relative value of y

scaleTo(as: number): void

Absolute scale.

Parameters:

  • ax:absolute factor

scaleBy(as: number): void

Relative scale

Parameters:

  • ax:relative factor

About

2D container. Drag and scale in a fixed space.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published