add context menu, add functions to start, stop and cut

BossHobby · Sep 17, 2023 · 63c0241 · 63c0241
1 parent 9b02eb1
commit 63c0241
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 9 deletions.
diff --git a/src/components/TimeGraphComponent.vue b/src/components/TimeGraphComponent.vue
@@ -1,13 +1,51 @@
 <template>
+  <div
+    class="box context-menu p-1"
+    tabindex="0"
+    v-show="contextMenu.show"
+    :style="{ top: contextMenu.top + 'px', left: contextMenu.left + 'px' }"
+  >
+    <aside class="menu">
+      <ul class="menu-list">
+        <li>
+          <a
+            @click="
+              bb.start = tl.windowHoverIndex;
+              contextMenu.show = false;
+            "
+            >Start Here</a
+          >
+        </li>
+        <li>
+          <a
+            @click="
+              bb.end = tl.windowHoverIndex;
+              contextMenu.show = false;
+            "
+            >End Here</a
+          >
+        </li>
+        <li>
+          <a
+            @click="
+              bb.cutEntries(tl.windowHoverIndex);
+              contextMenu.show = false;
+            "
+            >Cut Here</a
+          >
+        </li>
+      </ul>
+    </aside>
+  </div>
   <div class="timeline-graph">
     <CanvasComponent
       ref="canvas"
       @draw="draw"
       @mousedown="mousedown"
       @mousemove="mousemove"
       @mouseup="mouseup"
-      @contextmenu.capture.prevent
       @wheel="wheel"
+      @contextmenu.capture.prevent="context"
     />
   </div>
 </template>
@@ -53,6 +91,11 @@ export default defineComponent({
       select: false,
       selectStart: 0,
       selectEnd: 0,
+      contextMenu: {
+        show: false,
+        top: 0,
+        left: 0,
+      },
     };
   },
   computed: {
@@ -148,6 +191,8 @@ export default defineComponent({
       e.preventDefault();
       e.stopPropagation();
 
+      this.contextMenu.show = false;
+
       switch (e.button) {
         case 0:
           if (e.ctrlKey) {
@@ -195,14 +240,6 @@ export default defineComponent({
             this.drag = false;
           }
           break;
-
-        case 2:
-          if (e.ctrlKey) {
-            this.bb.end = this.tl.windowHoverIndex;
-          } else {
-            this.bb.start = this.tl.windowHoverIndex;
-          }
-          break;
       }
     },
     wheel(e: WheelEvent) {
@@ -214,6 +251,11 @@ export default defineComponent({
         e.deltaX / this.tl.windowPixelsPerMS(this.canvas.width)
       );
     },
+    context(e: PointerEvent) {
+      this.contextMenu.show = true;
+      this.contextMenu.top = e.y;
+      this.contextMenu.left = e.x;
+    },
     draw(ctx: CanvasRenderingContext2D) {
       if (!this.tl.ready) {
         return;
@@ -295,4 +337,7 @@ export default defineComponent({
 .timeline-graph {
   height: 300px;
 }
+.context-menu {
+  position: fixed;
+}
 </style>
diff --git a/src/stores/blackbox.ts b/src/stores/blackbox.ts
@@ -227,6 +227,22 @@ export const useBlackboxStore = defineStore("blackbox", {
       const timeline = useTimelineStore();
       timeline.initTimeline(this.entries.time.length, this.duration);
 
+      const spectrum = useSpectrumStore();
+      spectrum.initSpectrum();
+    },
+    cutEntries(end: number) {
+      for (const key of Object.keys(this.entries)) {
+        this.entries[key] = this.entries[key].slice(0, end);
+      }
+
+      this.duration =
+        (this.entries.time[this.entries.time.length - 1] -
+          this.entries.time[0]) /
+        1000;
+
+      const timeline = useTimelineStore();
+      timeline.initTimeline(this.entries.time.length, this.duration);
+
       const spectrum = useSpectrumStore();
       spectrum.initSpectrum();
     },