@pairbo/ui-kit 0.1.1 → 0.2.0

package/dist/pairbo.es.js

@@ -15246,6 +15246,15 @@ const styles$b = i$7`
     font-size: var(--pbo-font-size-medium);
   }
 `;
+const isMobileDevice = () => {
+  return /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+};
+const isValid = (value) => {
+  return value !== null && value !== void 0;
+};
+const removeNullUndefined = (obj) => Object.entries(obj).reduce((acc, [k3, v2]) => {
+  return v2 == null ? acc : (acc[k3] = v2, acc);
+}, {});
 var __defProp$c = Object.defineProperty;
 var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
 var __decorateClass$c = (decorators, target, key, kind) => {
@@ -15261,15 +15270,13 @@ let PboTypeForm$1 = class PboTypeForm extends PairboElement {
     super(...arguments);
     this.windowHeight = window.innerHeight;
     this.resizeTimeout = null;
-    this.formData = {
-      font: "",
-      text: "",
-      color: "",
-      alignment: ""
-    };
     this.charsNum = 0;
     this.ctaButtonState = PboTypeForm$1.CTA_STATES.primary;
     this.cardInnerImageUrl = "../../../public/Greeting Card from Pairbo.png";
+    this.card = null;
+    this.submitTypeForm = (formData) => {
+      console.error("submitTypingForm function not implemented", formData);
+    };
     this.handleResize = () => {
       if (this.resizeTimeout) {
         window.clearTimeout(this.resizeTimeout);
@@ -15284,34 +15291,24 @@ let PboTypeForm$1 = class PboTypeForm extends PairboElement {
       alert("Please add a message to continue");
     });
   }
-  get form() {
-    var _a2, _b, _c, _d;
-    return {
-      font: (_a2 = this.fontSelector) == null ? void 0 : _a2.value,
-      text: (_b = this.greetingText) == null ? void 0 : _b.value,
-      color: (_c = this.textColor) == null ? void 0 : _c.value,
-      alignment: (_d = this.textAlignment) == null ? void 0 : _d.value
+  get formData() {
+    var _a2, _b, _c, _d, _e2, _f, _g, _h;
+    const formData = {
+      pboCardId: ((_a2 = this.card) == null ? void 0 : _a2.pboId) || "Unknown",
+      productId: (_b = this.card) == null ? void 0 : _b.productId,
+      sku: (_c = this.card) == null ? void 0 : _c.sku,
+      variantId: (_d = this.card) == null ? void 0 : _d.variantId,
+      font: ((_e2 = this.fontSelector) == null ? void 0 : _e2.value) || "",
+      text: ((_f = this.greetingText) == null ? void 0 : _f.value) || "",
+      color: ((_g = this.textColor) == null ? void 0 : _g.value) || "",
+      alignment: ((_h = this.textAlignment) == null ? void 0 : _h.value) || ""
     };
+    return removeNullUndefined(formData);
   }
   handleFormChange(e3) {
-    var _a2;
     this.ctaButtonState = PboTypeForm$1.CTA_STATES.primary;
-    const target = e3.target;
-    const tempForm = {
-      ...this.formData
-    };
-    if (target.classList.contains("font-selector")) {
-      tempForm.font = ((_a2 = target == null ? void 0 : target.value) == null ? void 0 : _a2.value) || " Font form control not implemented yet";
-    } else if (target.classList.contains("greeting-text")) {
-      tempForm.text = target.value;
-    } else if (target.classList.contains("text-color")) {
-      tempForm.color = target.value;
-    } else if (target.classList.contains("text-alignment")) {
-      tempForm.alignment = target.value;
-    }
-    this.formData = { ...tempForm };
     this.emit("pbo-change", {
-      detail: this.form
+      detail: this.formData
     });
   }
   hostConnected() {
@@ -15326,7 +15323,7 @@ let PboTypeForm$1 = class PboTypeForm extends PairboElement {
     const submitterName = (_a2 = e3.submitter) == null ? void 0 : _a2.name;
     if (this.ctaButtonState.type === "danger") {
       if (submitterName === "skip") {
-        alert("Skipping, adding empty message");
+        this.submitTypeForm(this.formData);
       }
       return;
     }
@@ -15335,7 +15332,7 @@ let PboTypeForm$1 = class PboTypeForm extends PairboElement {
       this.greetingText.focus();
       return;
     }
-    alert("Form submitted with data:");
+    this.submitTypeForm(this.formData);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -15494,9 +15491,6 @@ __decorateClass$c([
 __decorateClass$c([
   r$3()
 ], PboTypeForm$1.prototype, "windowHeight", 2);
-__decorateClass$c([
-  r$3()
-], PboTypeForm$1.prototype, "formData", 2);
 __decorateClass$c([
   r$3()
 ], PboTypeForm$1.prototype, "charsNum", 2);
@@ -15506,6 +15500,12 @@ __decorateClass$c([
 __decorateClass$c([
   n$3({ type: String, reflect: true })
 ], PboTypeForm$1.prototype, "cardInnerImageUrl", 2);
+__decorateClass$c([
+  n$3()
+], PboTypeForm$1.prototype, "card", 2);
+__decorateClass$c([
+  n$3()
+], PboTypeForm$1.prototype, "submitTypeForm", 2);
 PboTypeForm$1 = __decorateClass$c([
   t$3("pbo-type-form")
 ], PboTypeForm$1);
@@ -15655,12 +15655,6 @@ const styles$a = i$7`
   }
 `;
 const splideCss = ".splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports (outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports (outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}";
-const isMobileDevice = () => {
-  return /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
-};
-const isValid = (value) => {
-  return value !== null && value !== void 0;
-};
 var __defProp$b = Object.defineProperty;
 var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
 var __decorateClass$b = (decorators, target, key, kind) => {
@@ -16007,7 +16001,7 @@ let PboEditor$1 = class PboEditor extends PairboElement {
     this.handwrittenFormState = { isLoading: false, processedFileUrl: "" };
     this.editorType = "type";
     this.handleTypingFormChange = () => {
-      this.formData = this.typingForm.form;
+      this.formData = this.typeForm.formData;
       this.slider.focusOn(1);
     };
     this.handelHandwrittenFormChange = (e3) => {
@@ -16032,7 +16026,7 @@ let PboEditor$1 = class PboEditor extends PairboElement {
     this.addEventListener("handwritten-image-dimensions-changed", (e3) => {
       this.handwrittenForm.setDimensions(e3.detail);
     });
-    this.typingForm.addEventListener("pbo-change", this.handleTypingFormChange);
+    this.typeForm.addEventListener("pbo-change", this.handleTypingFormChange);
     this.handwrittenForm.addEventListener("pbo-change", this.handelHandwrittenFormChange);
     document.addEventListener("pbo-zoomed-preview-open", () => {
       this.openZoomedPreview();
@@ -16045,19 +16039,12 @@ let PboEditor$1 = class PboEditor extends PairboElement {
     if (this.card) {
       this.slider.card = this.card;
       this.requestUpdate();
+      this.typeForm.card = this.card;
+      this.handwrittenForm.card = this.card;
     }
   }
-  // updated(changedProperties: PropertyValues<this>): void {
-  //   if (changedProperties.has("cardInnerImageUrl")) {
-  //     this.requestUpdate();
-  //   }
-  //   if (changedProperties.has("card")) {
-  //     this.slider.card = this.card;
-  //     this.requestUpdate();
-  //   }
-  // }
   disconnectedCallback() {
-    this.typingForm.removeEventListener("pbo-change", this.handleTypingFormChange);
+    this.typeForm.removeEventListener("pbo-change", this.handleTypingFormChange);
     this.handwrittenForm.removeEventListener("pbo-change", this.handelHandwrittenFormChange);
   }
   render() {
@@ -16076,6 +16063,7 @@ let PboEditor$1 = class PboEditor extends PairboElement {
         <div class="editor__form">
           <pbo-editor-selector @pbo-change=${this.handleEditorChange}></pbo-editor-selector>
           <pbo-type-form
+            .submitTypeForm=${this.submitTypeForm}
             style=${o$1({
       display: this.editorType === "type" ? "block" : "none"
     })}
@@ -16084,6 +16072,8 @@ let PboEditor$1 = class PboEditor extends PairboElement {
             style=${o$1({
       display: this.editorType === "handwritten" ? "block" : "none"
     })}
+            .submitHandwrittenForm=${this.submitHandwrittenForm}
+            .getProcessedImg=${this.getProcessedImg}
           ></pbo-handwritten-form>
         </div>
       </div>
@@ -16116,9 +16106,21 @@ PboEditor$1.dependencies = {
 __decorateClass$a([
   n$3({ type: String, reflect: true })
 ], PboEditor$1.prototype, "cardInnerImageUrl", 2);
+__decorateClass$a([
+  n$3({ type: Object })
+], PboEditor$1.prototype, "card", 2);
+__decorateClass$a([
+  n$3()
+], PboEditor$1.prototype, "submitTypeForm", 2);
+__decorateClass$a([
+  n$3()
+], PboEditor$1.prototype, "submitHandwrittenForm", 2);
+__decorateClass$a([
+  n$3()
+], PboEditor$1.prototype, "getProcessedImg", 2);
 __decorateClass$a([
   e$5("pbo-type-form")
-], PboEditor$1.prototype, "typingForm", 2);
+], PboEditor$1.prototype, "typeForm", 2);
 __decorateClass$a([
   e$5("pbo-handwritten-form")
 ], PboEditor$1.prototype, "handwrittenForm", 2);
@@ -16128,9 +16130,6 @@ __decorateClass$a([
 __decorateClass$a([
   e$5(".editor__zoomed")
 ], PboEditor$1.prototype, "zoomedPreview", 2);
-__decorateClass$a([
-  n$3({ type: Object })
-], PboEditor$1.prototype, "card", 2);
 __decorateClass$a([
   r$3()
 ], PboEditor$1.prototype, "formData", 2);
@@ -18869,7 +18868,7 @@ let PboCategory$1 = class PboCategory extends PairboElement {
                       src=${card.medias.cover.url}
                       alt="${card.medias.cover.alt}"
                       @click=${this.clickHandler}
-                      data-card-id="${card.id}"
+                      data-card-id="${card.pboId}"
                     />
                   </li>
                 `;
@@ -19211,8 +19210,8 @@ let PboPageManager$1 = class PboPageManager extends PairboElement {
     this.onClose = () => {
     };
     this.currentPage = "selection";
-    this.selectedCard = null;
     this.categories = [];
+    this.selectedCard = null;
     this.selectedCardId = null;
     this.selectedCardDetails = null;
     this.handleCardSelected = (event) => {
@@ -19223,6 +19222,15 @@ let PboPageManager$1 = class PboPageManager extends PairboElement {
       this.goToEditor();
     };
   }
+  handleSubmitTypeFormUpdate() {
+    this.editorEl.submitTypeForm = this.submitTypeForm;
+  }
+  handleSubmitHandwrittenFormUpdate() {
+    this.editorEl.submitHandwrittenForm = this.submitHandwrittenForm;
+  }
+  handleGetProcessedImgUpdate() {
+    this.editorEl.getProcessedImg = this.getProcessedImg;
+  }
   goToEditor() {
     this.currentPage = "editor";
   }
@@ -19252,7 +19260,7 @@ let PboPageManager$1 = class PboPageManager extends PairboElement {
   findCardInCategoryById(cardId) {
     console.log("Categories from findCardInCategoryById", this.categories);
     for (const category of this.categories) {
-      const card = category.cards.find((card2) => card2.id === cardId);
+      const card = category.cards.find((card2) => card2.pboId === cardId);
       console.log("card from findCardInCategoryById", card);
       if (card) {
         return card;
@@ -19319,18 +19327,36 @@ __decorateClass$7([
 __decorateClass$7([
   n$3({ type: String, reflect: true })
 ], PboPageManager$1.prototype, "currentPage", 2);
-__decorateClass$7([
-  r$3()
-], PboPageManager$1.prototype, "selectedCard", 2);
 __decorateClass$7([
   n$3()
 ], PboPageManager$1.prototype, "categories", 2);
+__decorateClass$7([
+  n$3()
+], PboPageManager$1.prototype, "submitTypeForm", 2);
+__decorateClass$7([
+  n$3()
+], PboPageManager$1.prototype, "submitHandwrittenForm", 2);
+__decorateClass$7([
+  n$3()
+], PboPageManager$1.prototype, "getProcessedImg", 2);
+__decorateClass$7([
+  r$3()
+], PboPageManager$1.prototype, "selectedCard", 2);
 __decorateClass$7([
   r$3()
 ], PboPageManager$1.prototype, "selectedCardId", 2);
 __decorateClass$7([
   r$3()
 ], PboPageManager$1.prototype, "selectedCardDetails", 2);
+__decorateClass$7([
+  watch("submitTypeForm")
+], PboPageManager$1.prototype, "handleSubmitTypeFormUpdate", 1);
+__decorateClass$7([
+  watch("submitHandwrittenForm")
+], PboPageManager$1.prototype, "handleSubmitHandwrittenFormUpdate", 1);
+__decorateClass$7([
+  watch("getProcessedImg")
+], PboPageManager$1.prototype, "handleGetProcessedImgUpdate", 1);
 __decorateClass$7([
   watch("categories")
 ], PboPageManager$1.prototype, "handleCategoriesUpdate", 1);
@@ -19961,7 +19987,22 @@ var __decorateClass$2 = (decorators, target, key, kind) => {
 let PboHandwrittenForm$1 = class PboHandwrittenForm extends PairboElement {
   constructor() {
     super(...arguments);
+    this.card = null;
+    this.submitHandwrittenForm = (formData) => {
+      console.warn("submitHandwrittenForm not implemented", formData);
+    };
+    this.getProcessedImg = async (file) => {
+      console.warn("getProcessedImg not implemented", file.name);
+      return {
+        pred_image_uid: "",
+        masked_img: ""
+      };
+    };
     this.sourceImg = null;
+    this.processedImg = {
+      fileUrl: null,
+      imgId: null
+    };
     this.processedFileUrl = null;
     this.handwrittenDimensions = {
       top: null,
@@ -19997,6 +20038,23 @@ let PboHandwrittenForm$1 = class PboHandwrittenForm extends PairboElement {
       }
     });
   }
+  get formData() {
+    var _a2, _b, _c, _d;
+    const pixelsPerMMHeight = 177.8 / this.handwrittenDimensions.cardHeight;
+    const pixelsPerMMWidth = 127 / this.handwrittenDimensions.cardWidth;
+    const formData = {
+      pboCardId: ((_a2 = this.card) == null ? void 0 : _a2.pboId) || "Unknown",
+      productId: (_b = this.card) == null ? void 0 : _b.productId,
+      sku: (_c = this.card) == null ? void 0 : _c.sku,
+      variantId: (_d = this.card) == null ? void 0 : _d.variantId,
+      pred_image_uid: this.processedImg.imgId || "",
+      position_x: this.handwrittenDimensions.top * pixelsPerMMWidth,
+      position_y: this.handwrittenDimensions.left * pixelsPerMMHeight,
+      height: this.handwrittenDimensions.height * pixelsPerMMHeight,
+      width: this.handwrittenDimensions.width * pixelsPerMMWidth
+    };
+    return removeNullUndefined(formData);
+  }
   setDimensions(dimensions) {
     this.handwrittenDimensions = dimensions;
   }
@@ -20011,36 +20069,12 @@ let PboHandwrittenForm$1 = class PboHandwrittenForm extends PairboElement {
     const file = (_b = (_a2 = e3.target) == null ? void 0 : _a2.files) == null ? void 0 : _b[0];
     if (file == null) return;
     this.sourceImg = file;
-    const fetchSimulation = () => new Promise((resolve) => {
-      setTimeout(() => {
-        resolve({ fileUrl: file ? URL.createObjectURL(file) : null });
-      }, 2e3);
-    });
-    const processedFileUrl = await fetchSimulation();
-    this.processedFileUrl = processedFileUrl.fileUrl;
+    const processedImage = await this.getProcessedImg(file);
+    this.processedFileUrl = `data:image/png;base64,${processedImage.masked_img}`;
   }
   handleSubmit(e3) {
     e3.preventDefault();
-    console.log(e3);
-    const pixelsPerMMHeight = 177.8 / this.handwrittenDimensions.cardHeight;
-    const pixelsPerMMWidth = 127 / this.handwrittenDimensions.cardWidth;
-    let formData = {
-      items: [
-        {
-          // id: card.shopifyVariantId,
-          quantity: 1,
-          properties: {
-            // _pairbo_id: card.pairboId,
-            // _pred_image_uid: imgId,
-            _position_x: this.handwrittenDimensions.top * pixelsPerMMWidth,
-            _position_y: this.handwrittenDimensions.left * pixelsPerMMHeight,
-            _height: this.handwrittenDimensions.height * pixelsPerMMHeight,
-            _width: this.handwrittenDimensions.width * pixelsPerMMWidth
-          }
-        }
-      ]
-    };
-    console.log(formData);
+    this.submitHandwrittenForm(this.formData);
   }
   render() {
     return x$1`
@@ -20090,8 +20124,9 @@ let PboHandwrittenForm$1 = class PboHandwrittenForm extends PairboElement {
             style=${o$1({
       display: this.sourceImg && this.processedFileUrl ? "block" : "none"
     })}
-            >Save and Continue</pbo-button
           >
+            Save and Continue
+          </pbo-button>
           <pbo-button
             name="reupload"
             variant="text"
@@ -20116,9 +20151,21 @@ __decorateClass$2([
 __decorateClass$2([
   e$5(".handwritten-form")
 ], PboHandwrittenForm$1.prototype, "handwrittenForm", 2);
+__decorateClass$2([
+  n$3()
+], PboHandwrittenForm$1.prototype, "card", 2);
+__decorateClass$2([
+  n$3()
+], PboHandwrittenForm$1.prototype, "submitHandwrittenForm", 2);
+__decorateClass$2([
+  n$3()
+], PboHandwrittenForm$1.prototype, "getProcessedImg", 2);
 __decorateClass$2([
   r$3()
 ], PboHandwrittenForm$1.prototype, "sourceImg", 2);
+__decorateClass$2([
+  r$3()
+], PboHandwrittenForm$1.prototype, "processedImg", 2);
 __decorateClass$2([
   r$3()
 ], PboHandwrittenForm$1.prototype, "processedFileUrl", 2);
@@ -20219,6 +20266,7 @@ let PboHandwrittenCanvas$1 = class PboHandwrittenCanvas extends PairboElement {
         this.handwrittenImage.selectable = true;
         this.handwrittenImage.lockRotation = true;
         this.handwrittenImage.lockScalingFlip = true;
+        this.handwrittenImage.noScaleCache = false;
         const scaleWidth = this.areaSize.width / this.handwrittenImage.width;
         const scaleHeight = this.areaSize.height / this.handwrittenImage.height;
         const scale = Math.min(scaleWidth, scaleHeight);
@@ -20237,7 +20285,7 @@ let PboHandwrittenCanvas$1 = class PboHandwrittenCanvas extends PairboElement {
           scaleY: scale,
           bringToFrontOnSelect: false,
           borderColor: "#4287f5",
-          borderScaleFactor: 1.5
+          borderScaleFactor: 10
         });
         this.setHandwrittenImageDimensions({
           top: this.areaPosition.top,