core: fix various zone editor bugs

plugins/core/package-lock.json

@@ -1,12 +1,12 @@
 {
    "name": "@scrypted/core",
-   "version": "0.0.158",
+   "version": "0.0.159",
    "lockfileVersion": 2,
    "requires": true,
    "packages": {
       "": {
          "name": "@scrypted/core",
-         "version": "0.0.158",
+         "version": "0.0.159",
          "license": "Apache-2.0",
          "dependencies": {
             "@koush/wrtc": "^0.5.0",

plugins/core/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@scrypted/core",
-   "version": "0.0.158",
+   "version": "0.0.159",
    "description": "Scrypted Core plugin. Provides the UI, websocket, and engine.io APIs.",
    "author": "Scrypted",
    "license": "Apache-2.0",

plugins/core/ui/src/components/clippath/ClipPathEditor.vue

@@ -1,8 +1,13 @@
 <template>
   <div id="playground_container" class="playground-container flex">
-    <v-btn @click="toggle">
-      {{ 'Toggle Mode: ' + (!customizing ? "Add Points" : "Drag Points") }}
-    </v-btn>
+    <v-btn-toggle mandatory v-model="pointMode">
+      <v-btn @click="customizing = false" width="100px">
+        {{ "Drag Points" }}
+      </v-btn>
+      <v-btn @click="customizing = true" width="100px">
+        {{ "Add Points" }}
+      </v-btn>
+    </v-btn-toggle>
     <section
       @click="addHandle"
       class="playground"
@@ -25,7 +30,7 @@
             },
           ]"
         ></div>
-        
+
         <ClipPathEditorHandles
           ref="handles"
           @updateHandle="updateHandle"
@@ -41,7 +46,7 @@
 <script>
 import { clipCSS } from "./utilities";
 import ClipPathEditorHandles from "./ClipPathEditorHandles.vue";
-import CustomValue from "../../common/CustomValue.vue"
+import CustomValue from "../../common/CustomValue.vue";
 
 export default {
   mixins: [CustomValue],
@@ -52,24 +57,21 @@ export default {
 
   data() {
     return {
+      pointMode: this.value.length < 3 ? 1 : 0,
       customizing: this.value.length < 3,
     };
   },
 
   mounted() {
-    console.log('mounted clippatheditor')
+    console.log("mounted clippatheditor");
   },
 
   watch: {
-    lazyValue() {
-    }
+    lazyValue() {},
   },
 
   methods: {
     clipCSS,
-    toggle() {
-      this.customizing = !this.customizing;
-    },
     addHandle(e) {
       if (!this.customizing) return;
 

plugins/core/ui/src/interfaces/Camera.vue

@@ -8,19 +8,19 @@
     <div style="position: relative; overflow: hidden;">
       <video
         ref="video"
-        style="background-color: black; width: 100%; height: 100%"
+        style="background-color: black; width: 100%; height: 100%; z-index: 0;"
         playsinline
         autoplay
       ></video>
       <svg
         :viewBox="`0 0 ${svgWidth} ${svgHeight}`"
         ref="svg"
-        style="top: 0; left: 0; position: absolute; width: 100%; height: 100%"
+        style="top: 0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 1;"
         v-html="svgContents"
       ></svg>
       <ClipPathEditor
         v-if="clipPath"
-        style="background: transparent; top: 0; left: 0; position: absolute; width: 100%; height: 100%"
+        style="background: transparent; top: 0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 2;"
         v-model="clipPath"
       ></ClipPathEditor>
     </div>