JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 8
  • Score
    100M100P100Q35394F
  • License MIT

Description Drag Resize Rotate Warp any element inside an Html page

Package Exports

  • @azure06/rxcomponent

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@azure06/rxcomponent) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

RxCanvas

Move Resize Warp Scale Rotate any element in inside a page.

Get Started

npm

 npm install rxjs
 npm install @azure06/rxcomponent

Usage

import { RxComponent, RxHandler } from '@azure06/rxcomponent';

const appDiv: HTMLElement = document.getElementById("app");

const rxComponent = new RxComponent(appDiv, {
  width: "200px",
  height: "80px"
});

const rxHandler = new RxHandler(rxComponent, {
  draggable: true,
  rotable: true,
  resizable: true,
  interactive: true
});

rxHandler
  .onDrag(tap(_ => console.log("Dragging!🔥")))
  .onResize(tap(_ => console.log("Resizing")))
  .onRotation(tap(_ => console.log("Rotating")));

RxComponent is MIT licensed.

Codebase

RxComponent is written completely in TypeScript, and built using rollup.

RxComponent makes extensive use of functional and reactive programming.