From 8fc1a41535658ff5f5a95eb746123e2befbd703e Mon Sep 17 00:00:00 2001
From: mildiemilk <punthitra.dits@gmail.com>
Date: Thu, 22 Oct 2020 22:26:53 +0700
Subject: [PATCH] Add initial crop when click the image

---
 lib/js/idcrop/IdCrop.js | 43 +++++++++++++++++++++++++++--------------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/lib/js/idcrop/IdCrop.js b/lib/js/idcrop/IdCrop.js
index 4ae9e64..797c8fb 100644
--- a/lib/js/idcrop/IdCrop.js
+++ b/lib/js/idcrop/IdCrop.js
@@ -193,25 +193,40 @@ class IdCrop {
 
   createHandles(event, self) {
     if (self.cropArea.isDrawing) {
-      const cbounds = self.cropArea.canvas.getBoundingClientRect();
-      const x = event.clientX - cbounds.left,
-        y = event.clientY - cbounds.top;
-
-      let point = new Point(x, y),
-        handle = new Handle(
+      const cbounds = self.cropArea.canvas.getBoundingClientRect()
+      const initialPoint = [
+        {
+          "x": 50,
+          "y": 50,
+        },
+        {
+          "x": cbounds.width - 50,
+          "y": 50,
+        },
+        {
+          "x": cbounds.width - 50,
+          "y": cbounds.height - 50,
+        },
+        {
+          "x": 50,
+          "y": cbounds.height - 50,
+        },
+      ]
+
+      initialPoint.map((item) => {
+        const point = new Point(item.x, item.y)
+        const handle = new Handle(
           self.config.containers.displayArea,
           self.image.left,
           self.image.top,
           point
-        );
-
-      handle.init(self.config.handles.defaultStyles, self.config.handles.class);
-      self.handles.push(handle);
-      self.points.push(point);
+        )
+        handle.init(self.config.handles.defaultStyles, self.config.handles.class)
+        self.handles.push(handle)
+        self.points.push(point)
+      })
 
-      if (self.handles.length == self.config.numPoints) {
-        self.startCroppingPolygon(self);
-      }
+      self.startCroppingPolygon(self)
     }
   }