Remove option to bind an image with crop points

onstuimig · Nov 7, 2023 · ceaf84b · ceaf84b
1 parent a261f63
commit ceaf84b
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 46 deletions.
diff --git a/croppie.js b/croppie.js
@@ -164,10 +164,9 @@ export class Croppie {
      * Bind an image from an src string. Returns a Promise which resolves when the image has been loaded and state is initialized.
      * @param {string} src 
      * @param {number | null} zoom 
-     * @param {[number, number, number, number] | []} points
      * @returns {Promise<void>}
      */
-    bind(src, zoom = null, points = []) {
+    bind(src, zoom = null) {
         if (!src) {
             throw new Error('src cannot be empty');
         }
@@ -177,7 +176,6 @@ export class Croppie {
 
         return loadImage(src).then((img) => {
             this.#replaceImage(img);
-            this.data.points = points;
             this.#updatePropertiesFromImage();
         });
     }
@@ -873,19 +871,14 @@ export class Croppie {
         if (this.options.enableZoom) {
             this.#updateZoomLimits(true);
         } else {
-            this._currentZoom = 1;
+            this._currentZoom = this.data.boundZoom ?? 1;
         }
 
         transformReset.scale = this._currentZoom;
         cssReset.transform = transformReset.toString();
         css(this.elements.preview, cssReset);
 
-        if (this.data.points.length) {
-            this.#bindPoints(this.data.points);
-        } else {
-            this.#centerImage();
-        }
-
+        this.#centerImage();
         this.#updateCenterPoint();
         this.#updateOverlay();
     }
@@ -946,33 +939,6 @@ export class Croppie {
         }
     }
 
-    #bindPoints(points) {
-        if (points.length !== 4) {
-            throw "Croppie - Invalid number of points supplied: " + points;
-        }
-
-        var pointsWidth = points[2] - points[0],
-            vpData = this.elements.viewport.getBoundingClientRect(),
-            boundRect = this.elements.boundary.getBoundingClientRect(),
-            vpOffset = {
-                left: vpData.left - boundRect.left,
-                top: vpData.top - boundRect.top
-            },
-            scale = vpData.width / pointsWidth,
-            originTop = points[1],
-            originLeft = points[0],
-            transformTop = (-1 * points[1]) + vpOffset.top,
-            transformLeft = (-1 * points[0]) + vpOffset.left;
-
-        css(this.elements.preview, {
-            transform: new Transform(transformLeft, transformTop, scale).toString(),
-            transformOrigin: originLeft + 'px ' + originTop + 'px',
-        });
-
-        this.#setZoomerVal(scale);
-        this._currentZoom = scale;
-    }
-
     #centerImage() {
         var imgDim = this.elements.preview.getBoundingClientRect(),
             vpDim = this.elements.viewport.getBoundingClientRect(),

diff --git a/demo/demo.js b/demo/demo.js
@@ -50,7 +50,7 @@ function demoBasic() {
 		},
 	});
 
-	basic.bind('demo/cat.jpg', null, [77, 469, 280, 739]);
+	basic.bind('demo/cat.jpg', 0.5);
 
 	var basicResult = document.querySelector('.basic-result');
 	basicResult.addEventListener('click', function () {

diff --git a/index.html b/index.html
@@ -148,20 +148,16 @@ <h3>Methods</h3>
                             <p>Get the crop points.</p>
                         </li>
                         <li id="bind">
-                            <strong class="focus">bind(src, zoom, points)</strong><em>Promise</em>
-                            <p>Bind an image to the croppie. Returns a promise to be resolved when the image has been loaded and the croppie has been initialized.</p>
+                            <strong class="focus">bind(src, zoom)</strong><em>Promise</em>
+                            <p>Bind an image from an src string. Returns a Promise which resolves when the image has been loaded and state is initialized.</p>
                             <span class="default">Parameters</span>
                             <br />
                             <ul class="parameter-list">
                                 <li><code class="language-javascript">src</code> URL to image</li>
-                                <li><code class="language-javascript">zoom</code> Apply zoom after image has been bound</li>
+                                <li><code class="language-javascript">zoom</code> A number between 0 and 1, or null</li>
                                 <li>
                                     <span class="default">Default:</span><code class="language-javascript">null</code>
                                 </li>
-                                <li><code class="language-javascript">points</code> Array of points that translate into <code class="language-javascript">[topLeftX, topLeftY, bottomRightX, bottomRightY]</code></li>
-                                <li>
-                                    <span class="default">Default:</span><code class="language-javascript">[]</code>
-                                </li>
                             </ul>
                         </li>
                         <li id="destroy">
@@ -242,7 +238,7 @@ <h2>Demos</h2>
         height: 200
     }
 });
-basic.bind('demo/cat.jpg', null, [77, 469, 280, 739]);
+basic.bind('demo/cat.jpg', 0.5);
 //on button click
 basic.toCanvas(300).then((canvas) => {
     let src = canvas.toDataURL();