core: fix zone editor

plugins/core/package-lock.json

@@ -1,12 +1,12 @@
 {
    "name": "@scrypted/core",
-   "version": "0.1.65",
+   "version": "0.1.66",
    "lockfileVersion": 2,
    "requires": true,
    "packages": {
       "": {
          "name": "@scrypted/core",
-         "version": "0.1.65",
+         "version": "0.1.66",
          "license": "Apache-2.0",
          "dependencies": {
             "@scrypted/common": "file:../../common",

plugins/core/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@scrypted/core",
-   "version": "0.1.65",
+   "version": "0.1.66",
    "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,6 +1,6 @@
 <template>
   <div id="playground_container" class="playground-container flex">
-    <v-btn-toggle mandatory v-model="pointMode">
+    <v-btn-toggle mandatory v-model="pointMode" style="position: absolute; left: 0; top: 0; z-index: 3000">
       <v-btn @click="customizing = false" width="100px">
         {{ "Drag Points" }}
       </v-btn>
@@ -11,9 +11,9 @@
         {{ "Clear Points" }}
       </v-btn>
     </v-btn-toggle>
-    <section
+    <div
       @click="addHandle"
-      class="playground"
+      class="playground pa-0"
       style="width: 100%; height: 100%"
       :class="{ customizing: customizing, start: !lazyValue.length }"
     >
@@ -42,7 +42,7 @@
           :customizing="customizing"
         ></ClipPathEditorHandles>
       </div>
-    </section>
+    </div>
   </div>
 </template>
 

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    style="position: relative; overflow: hidden; width: 100%; height: 100%"
+    style="position: relative; overflow: hidden; width: 100%; height: 100%; display: flex;"
     @wheel="doTimeScroll"
   >
     <video