Fixes & optimizations

.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  extends: ["plugin:@typescript-eslint/recommended"],
+  rules: {},
+};

README.md

@@ -1,11 +1,11 @@
 # perspective.ts
+
 ![npm](https://img.shields.io/npm/v/perspectivets) ![npm type definitions](https://img.shields.io/npm/types/typescript) ![GitHub](https://img.shields.io/github/license/adonmo/perspective.ts)
 
 **perspective.ts** is a TypeScript library which allow you to transform a rectangle image into an arbitrary form of quadrilateral on a canvas element. It is used to draw an image using perspective on a canvas.
 
 **perspective.ts** is a fork of [**perspective.js**](https://github.com/wanadev/perspective.js), which is itself a derivative work of the original [Futomi Hatano's **perspective.js**](http://www.html5.jp/test/perspective_canvas/demo1_en.html)
 
-
 ## Codesandbox demo
 
 https://codesandbox.io/s/perspectivets-demo-upqfy
@@ -68,7 +68,10 @@ And then open http://localhost:8080/demo/ in your browser.
 
 ## License
 
-    Copyright 2010 futomi  http://www.html5.jp/
+    Copyright 2010 futomi <http://www.html5.jp/>
+    Copyright 2014 Fabien LOISON <http://www.flozz.fr/>
+    Copyright 2021 Adonmo <https://www.adonmo.com/>
+    Copyright 2021 Aarni Koskela <https://github.com/akx>
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

demo/demo.css

@@ -0,0 +1,29 @@
+body {
+  font: 12pt sans-serif;
+}
+
+#wrapper {
+  position: relative;
+}
+
+.handle {
+  position: absolute;
+  background: rgba(0, 0, 0, 30%);
+  width: 20px;
+  height: 20px;
+  transform: translate(-50%, -50%);
+  border-radius: 100%;
+  border: 1px solid black;
+  cursor: move;
+  user-select: none;
+}
+.handle:hover {
+  border-color: goldenrod;
+  border-width: 2px;
+  background: rgba(0, 0, 0, 80%);
+}
+
+canvas {
+  position: absolute;
+  border: 1px dashed silver;
+}

demo/demo.js

@@ -0,0 +1,74 @@
+var canvas = document.getElementById("canvas");
+var image = new Image();
+
+function setElementPosition(element, x, y) {
+  Object.assign(element.style, { left: `${x}px`, top: `${y}px` });
+}
+
+function setHandlePosition(name, x, y) {
+  setElementPosition(document.getElementById(name), x, y);
+}
+
+function getHandlePosition(name) {
+  var el = document.getElementById(name);
+  // This only works when the values are indeed pixels
+  return [parseInt(el.style.left), parseInt(el.style.top)];
+}
+
+function beginMoving(element, relativeTo, onMove) {
+  const moveHandler = (event) => {
+    var relativeRect = relativeTo.getBoundingClientRect();
+    var relX = event.clientX - relativeRect.left;
+    var relY = event.clientY - relativeRect.top;
+    setElementPosition(element, relX, relY);
+    onMove && onMove(element, relX, relY);
+  };
+  window.addEventListener("mousemove", moveHandler);
+  window.addEventListener("mouseup", () => {
+    window.removeEventListener("mousemove", moveHandler);
+  });
+}
+
+function init() {
+  var width = image.width;
+  var height = image.height;
+  canvas.width = width + 30;
+  canvas.height = height + 50;
+  setHandlePosition("tl", 30, 30);
+  setHandlePosition("tr", width - 50, 50);
+  setHandlePosition("br", width - 70, height - 30);
+  setHandlePosition("bl", 10, height);
+  draw();
+  let wrapper = document.getElementById("wrapper");
+  wrapper.addEventListener("mousedown", (event) => {
+    if (
+      event.target instanceof HTMLDivElement &&
+      event.target.classList.contains("handle")
+    ) {
+      beginMoving(event.target, wrapper, () => draw());
+    }
+  });
+}
+
+function draw() {
+  var ctx = canvas.getContext("2d");
+  var p = new Perspective(ctx, image);
+  var [topLeftX, topLeftY] = getHandlePosition("tl");
+  var [topRightX, topRightY] = getHandlePosition("tr");
+  var [bottomLeftX, bottomLeftY] = getHandlePosition("bl");
+  var [bottomRightX, bottomRightY] = getHandlePosition("br");
+  p.draw({
+    topLeftX,
+    topLeftY,
+    topRightX,
+    topRightY,
+    bottomRightX,
+    bottomRightY,
+    bottomLeftX,
+    bottomLeftY,
+  });
+  // setTimeout(draw, 1000);
+}
+
+image.src = "firefox.jpg";
+image.onload = init;

demo/index.html

@@ -1,33 +1,21 @@
 <!DOCTYPE html>
-
 <html>
   <head>
     <title>Perspective.ts demo</title>
+    <link rel="stylesheet" href="demo.css" />
   </head>
 
   <body>
-    <canvas id="canvas"></canvas>
+    <h1>Perspective.ts demo</h1>
+    <p>Drag the handles below to warp the image's perspective.</p>
+    <div id="wrapper">
+      <canvas id="canvas"></canvas>
+      <div class="handle" id="tl"></div>
+      <div class="handle" id="tr"></div>
+      <div class="handle" id="bl"></div>
+      <div class="handle" id="br"></div>
+    </div>
     <script src="../dist/perspectivets.min.js"></script>
-    <script>
-      var canvas = document.getElementById("canvas");
-      var image = new Image();
-      image.onload = function () {
-        canvas.width = image.width;
-        canvas.height = image.height;
-        var ctx = canvas.getContext("2d");
-        var p = new Perspective(ctx, image);
-        p.draw({
-          topLeftX: 30,
-          topLeftY: 30,
-          topRightX: image.width - 50,
-          topRightY: 50,
-          bottomRightX: image.width - 70,
-          bottomRightY: image.height - 30,
-          bottomLeftX: 10,
-          bottomLeftY: image.height,
-        });
-      };
-      image.src = "firefox.jpg";
-    </script>
+    <script src="./demo.js"></script>
   </body>
 </html>