Merge pull request #3 from pelusanchez/development

Development
pelusanchez · Oct 11, 2021 · 749d2fe · 749d2fe
2 parents 3f3e263 + c1b9bfa
commit 749d2fe
Show file tree

Hide file tree

Showing 28 changed files with 103 additions and 999 deletions.
diff --git a/README.md b/README.md
@@ -32,17 +32,18 @@ Sample: [https://rext.es](https://rext.es)
 * Atmospheric light: Used for dehaze.
 
 ### Transformations
-* Rotation.
-* Scale. 
-* Translate.
+* Rotation: Radians.
+* Rotation origin: Set the origin of the rotation. The image center by default. Range: [-1, 1]. Center at (0,0)
+* Scale. Multiplier number. 
+* Translate. Range: [-1, 1].
 
 ## HTML Vanilla example:
 
 ```[html]
 <!DOCTYPE html>
 <html>
   <head>
-    <script languaje="javascript" src="../build/index.js"></script>
+    <script languaje="javascript" src="./index.js"></script>
     <style type="text/css">
     #playground {
       display: flex;
@@ -83,6 +84,10 @@ Sample: [https://rext.es](https://rext.es)
         darkColor: 0,
         darkSat: 1,
         rotation: 0.0,
+        rotation_center: {
+          x: 0,
+          y: 0,
+        },
         scale: {
           x: 1,
           y: 1,
@@ -119,9 +124,10 @@ Sample: [https://rext.es](https://rext.es)
         rext.setCanvas(document.querySelector("#frame"));
         document.querySelector("#file").addEventListener("change", onFileUpload)
         document.querySelector("#rext-params").value = JSON.stringify(defaultParams, null, 2)
-        document.querySelector("#rext-params").addEventListener("change", updateParams)
-      })
+        document.querySelector("#rext-params").addEventListener("change", updateParams);
 
+        rext.load("/test.jpg");
+      });
       
     </script>
   </head>
@@ -130,8 +136,8 @@ Sample: [https://rext.es](https://rext.es)
       <input type="file" id="file"/>
     </div>
     <div id="playground">
-      <canvas width="1200" height="800" style="width: 800px; height: auto;" id="frame"></canvas>
-      <div class=>
+      <canvas width="640" height="468" style="width: 640px; height: 468px;" id="frame"></canvas>
+      <div>
         <textarea id="rext-params"></textarea>
         <button onClick="updateParams">Apply</button>
       </div>
@@ -185,5 +191,6 @@ rext.updateParams(nextParams : Params)
 | darkColor | number |
 | darkSat | number |
 | rotation | number (Radians) |
+| rotation_center | 2d number { x: number; y: number } |
 | scale | 2d number { x: number; y: number }|
 | translate | 2d number { x: number; y: number }|
diff --git a/examples/index.html → build/index.html b/examples/index.html → build/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script languaje="javascript" src="../build/index.js"></script>
+    <script languaje="javascript" src="./index.js"></script>
     <style type="text/css">
     #playground {
       display: flex;
@@ -42,6 +42,10 @@
         darkColor: 0,
         darkSat: 1,
         rotation: 0.0,
+        rotation_center: {
+          x: 0,
+          y: 0,
+        },
         scale: {
           x: 1,
           y: 1,
@@ -78,9 +82,10 @@
         rext.setCanvas(document.querySelector("#frame"));
         document.querySelector("#file").addEventListener("change", onFileUpload)
         document.querySelector("#rext-params").value = JSON.stringify(defaultParams, null, 2)
-        document.querySelector("#rext-params").addEventListener("change", updateParams)
-      })
+        document.querySelector("#rext-params").addEventListener("change", updateParams);
 
+        rext.load("/test.jpg");
+      });
 
     </script>
   </head>
@@ -89,8 +94,8 @@
       <input type="file" id="file"/>
     </div>
     <div id="playground">
-      <canvas width="1200" height="800" style="width: 800px; height: auto;" id="frame"></canvas>
-      <div class=>
+      <canvas width="640" height="468" style="width: 640px; height: 468px;" id="frame"></canvas>
+      <div>
         <textarea id="rext-params"></textarea>
         <button onClick="updateParams">Apply</button>
       </div>

diff --git a/build/index.js b/build/index.js
diff --git a/build/test.jpg b/build/test.jpg
diff --git a/buildShaders.js b/buildShaders.js
diff --git a/dist/editor.d.ts b/dist/editor.d.ts
@@ -23,7 +23,10 @@ export declare class RextEditor {
     resize(width: number, height: number): void;
     getWidth(): number;
     getHeight(): number;
+    rotateFrom(x: number, y: number): void;
+    rotateFromCenter(x: number, y: number): void;
     private get2dRotation;
+    private get2dRotationCenter;
     private loadImage;
     load(url: string): void;
     setLog(log: Log): void;