From 8590f61ba152fd9286cfad5f188ba9e315542232 Mon Sep 17 00:00:00 2001
From: Anatoly <akopyl@radner.ru>
Date: Wed, 2 Feb 2022 03:12:04 +0300
Subject: [PATCH] Notches

---
 bundle/vue-three-d-mockup.esm.js | 23 ++++++++++++++++++++++-
 src/Mockup.vue                   |  9 ++++++++-
 src/utils/roundedPlane.js        | 14 ++++++++++++++
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/bundle/vue-three-d-mockup.esm.js b/bundle/vue-three-d-mockup.esm.js
index 227e243..6c82be0 100644
--- a/bundle/vue-three-d-mockup.esm.js
+++ b/bundle/vue-three-d-mockup.esm.js
@@ -81,11 +81,25 @@ class MockupModel extends Group {
 
 function roundedPlane(width, height, radius) {
   const x = 0; const y = 0;
+  const nW = 25;
+  const nH = radius / 2.2;
   const shape = new Shape();
 
   shape.moveTo(x, y + radius);
   shape.lineTo(x, y + height - radius);
   shape.quadraticCurveTo(x, y + height, x + radius, y + height);
+
+  shape.lineTo(width / 2 - nW / 2 - nH, y + height);
+  shape.quadraticCurveTo(width / 2 - nW / 2, y + height, width / 2 - nW / 2, y + height - nH / 2);
+  shape.quadraticCurveTo(
+    width / 2 - nW / 2, y + height - nH, width / 2 - nW / 2 + nH, y + height - nH,
+  );
+  shape.lineTo(width / 2 + nW / 2 - nH, y + height - nH);
+  shape.quadraticCurveTo(
+    width / 2 + nW / 2, y + height - nH, width / 2 + nW / 2, y + height - nH / 2,
+  );
+  shape.quadraticCurveTo(width / 2 + nW / 2, y + height, width / 2 + nW / 2 + nH, y + height);
+
   shape.lineTo(x + width - radius, y + height);
   shape.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
   shape.lineTo(x + width, y + radius);
@@ -120,6 +134,9 @@ var script = {
       type: Object,
       default: () => ({}),
     },
+    linearFilter: {
+      type: Boolean,
+    },
   },
   setup(props) {
     const container = ref(null);
@@ -180,7 +197,11 @@ var script = {
           texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
 
           const material = new THREE.MeshLambertMaterial({ map: texture });
-          // material.map.minFilter = THREE.LinearFilter;
+
+          if (props.linearFilter) {
+            material.map.minFilter = THREE.LinearFilter;
+          }
+
           const screen = new THREE.Mesh(geometry, material);
 
           const recomputeUVs = () => {
diff --git a/src/Mockup.vue b/src/Mockup.vue
index f6afe81..e54e008 100644
--- a/src/Mockup.vue
+++ b/src/Mockup.vue
@@ -38,6 +38,9 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    linearFilter: {
+      type: Boolean,
+    },
   },
   setup(props) {
     const container = ref(null);
@@ -98,7 +101,11 @@ export default {
           texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
 
           const material = new THREE.MeshLambertMaterial({ map: texture });
-          // material.map.minFilter = THREE.LinearFilter;
+
+          if (props.linearFilter) {
+            material.map.minFilter = THREE.LinearFilter;
+          }
+
           const screen = new THREE.Mesh(geometry, material);
 
           const recomputeUVs = () => {
diff --git a/src/utils/roundedPlane.js b/src/utils/roundedPlane.js
index 8289ba7..90e5517 100644
--- a/src/utils/roundedPlane.js
+++ b/src/utils/roundedPlane.js
@@ -2,11 +2,25 @@ import { Shape, ShapeBufferGeometry } from 'three';
 
 export default function roundedPlane(width, height, radius) {
   const x = 0; const y = 0;
+  const nW = 25;
+  const nH = radius / 2.2;
   const shape = new Shape();
 
   shape.moveTo(x, y + radius);
   shape.lineTo(x, y + height - radius);
   shape.quadraticCurveTo(x, y + height, x + radius, y + height);
+
+  shape.lineTo(width / 2 - nW / 2 - nH, y + height);
+  shape.quadraticCurveTo(width / 2 - nW / 2, y + height, width / 2 - nW / 2, y + height - nH / 2);
+  shape.quadraticCurveTo(
+    width / 2 - nW / 2, y + height - nH, width / 2 - nW / 2 + nH, y + height - nH,
+  );
+  shape.lineTo(width / 2 + nW / 2 - nH, y + height - nH);
+  shape.quadraticCurveTo(
+    width / 2 + nW / 2, y + height - nH, width / 2 + nW / 2, y + height - nH / 2,
+  );
+  shape.quadraticCurveTo(width / 2 + nW / 2, y + height, width / 2 + nW / 2 + nH, y + height);
+
   shape.lineTo(x + width - radius, y + height);
   shape.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
   shape.lineTo(x + width, y + radius);