create track full frame action (#232)

* create track full frame action

* opacity version of endpoint and path key added to metadata

* transfer configuration

* version increment

Author: BryonLewis

.github/workflows/workflow-dive-dsa-slicer.yml

@@ -25,7 +25,7 @@ jobs:
         name: Build and push web
         uses: docker/build-push-action@v3
         with:
-          context: ./dive-dsa-slicer
+          context: ./dive-dsa-slicer/example-docker-containers
           file: ./dive-dsa-slicer/example-docker-containers/Dockerfile
           tags: ghcr.io/digitalslidearchive/dive-dsa/dive-dsa-slicer-examples:latest
           push: true

client/dive-common/components/ActionEditors/ActionEditor.vue

@@ -4,17 +4,21 @@ import {
   defineComponent, ref, Ref, PropType,
 } from 'vue';
 import {
-  DIVEAction, TrackSelectAction,
+  CreateTrackAction, DIVEAction, TrackSelectAction, CreateFullFrameTrackAction,
 } from 'dive-common/use/useActions';
 import {
   useAttributes, useTrackStyleManager,
 } from 'vue-media-annotator/provides';
 import TrackFilter from './TrackFilter.vue';
+import CreateTrackActionEditor from './CreateTrackActionEditor.vue';
+import CreateFullFrameTrackActionEditor from './CreateFullFrameTrackActionEditor.vue';
 
 export default defineComponent({
   name: 'ActionEditorSettings',
   components: {
     TrackFilter,
+    CreateTrackActionEditor,
+    CreateFullFrameTrackActionEditor,
   },
   props: {
     value: {
@@ -26,13 +30,13 @@ export default defineComponent({
     const typeStylingRef = useTrackStyleManager().typeStyling;
     const attributesList = useAttributes();
     const editingAction: Ref<DIVEAction> = ref(props.value);
-    const addEditActionType: Ref<'TrackSelection' | 'GoToFrame'> = ref(props.value.action.type);
+    const addEditActionType: Ref<'TrackSelection' | 'GoToFrame' | 'CreateTrackAction' | 'CreateFullFrameTrackAction'> = ref(props.value.action.type);
 
-    const saveAction = (action: TrackSelectAction, type: DIVEAction['action']['type']) => {
+    const saveAction = (action: TrackSelectAction | CreateTrackAction | CreateFullFrameTrackAction, type: DIVEAction['action']['type']) => {
       let diveAction: DIVEAction = {
         action,
       };
-      if (type === 'GoToFrame' && action) {
+      if (type === 'GoToFrame' && action.type === 'TrackSelection') {
         diveAction = {
           action: {
             track: action,
@@ -62,6 +66,27 @@ export default defineComponent({
           },
         };
       }
+      if (addEditActionType.value === 'CreateTrackAction') {
+        editingAction.value = {
+          action: {
+            type: 'CreateTrackAction',
+            geometryType: 'rectangle',
+            editableType: true,
+            selectTrackAfter: false,
+          },
+        };
+      }
+      if (addEditActionType.value === 'CreateFullFrameTrackAction') {
+        editingAction.value = {
+          action: {
+            type: 'CreateFullFrameTrackAction',
+            geometryType: 'rectangle',
+            trackType: 'unknown',
+            useExisting: true,
+            selectTrackAfter: true,
+          },
+        };
+      }
     };
 
     const getAttributeColor = (item: string) => {
@@ -103,10 +128,10 @@ export default defineComponent({
     <v-card-text>
       <div>
         <h2>Create/Edit Action</h2>
-        <v-row>
+        <v-row class="pt-4">
           <v-select
             v-model="addEditActionType"
-            :items="['GoToFrame', 'TrackSelection']"
+            :items="['GoToFrame', 'TrackSelection', 'CreateTrackAction', 'CreateFullFrameTrackAction']"
             label="Action Type"
             @change="changeType"
           />
@@ -127,6 +152,20 @@ export default defineComponent({
             @cancel="$emit('cancel')"
           />
         </v-row>
+        <v-row v-else-if="addEditActionType === 'CreateTrackAction' && editingAction.action.type === 'CreateTrackAction'">
+          <CreateTrackActionEditor
+            :action="editingAction.action"
+            @update:action="saveAction($event, addEditActionType)"
+            @cancel="$emit('cancel')"
+          />
+        </v-row>
+        <v-row v-else-if="addEditActionType === 'CreateFullFrameTrackAction' && editingAction.action.type === 'CreateFullFrameTrackAction'">
+          <CreateFullFrameTrackActionEditor
+            :action="editingAction.action"
+            @update:action="saveAction($event, addEditActionType)"
+            @cancel="$emit('cancel')"
+          />
+        </v-row>
       </div>
     </v-card-text>
   </v-card>

client/dive-common/components/ActionEditors/ActionEditorSettings.vue

@@ -44,7 +44,7 @@ export default defineComponent({
     const typeStylingRef = useTrackStyleManager().typeStyling;
     const attributesList = useAttributes();
     const editingAction: Ref<null | DIVEAction> = ref(null);
-    const addEditActionType: Ref<'TrackSelection' | 'GoToFrame'> = ref('TrackSelection');
+    const addEditActionType: Ref<'TrackSelection' | 'GoToFrame' | 'CreateTrackAction' | 'CreateFullFrameTrackAction'> = ref('TrackSelection');
     const editAction = (index?: number) => {
       addEditAction.value = true;
       if (index !== undefined) {
@@ -97,6 +97,27 @@ export default defineComponent({
           },
         };
       }
+      if (addEditActionType.value === 'CreateTrackAction') {
+        editingAction.value = {
+          action: {
+            type: 'CreateTrackAction',
+            geometryType: 'rectangle',
+            editableType: true,
+            selectTrackAfter: true,
+          },
+        };
+      }
+      if (addEditActionType.value === 'CreateFullFrameTrackAction') {
+        editingAction.value = {
+          action: {
+            type: 'CreateFullFrameTrackAction',
+            trackType: 'unknown',
+            geometryType: 'rectangle',
+            useExisting: true,
+            selectTrackAfter: true,
+          },
+        };
+      }
     };
 
     const removeAction = (index: number) => {
@@ -172,9 +193,11 @@ export default defineComponent({
               :key="`ActionItem_${index}`"
               dense
               style="border: 1px gray solid; margin:2px"
+              align="center"
+              justify="center"
             >
-              <v-col cols="2">
-                {{ item.action.type }}
+              <v-col cols="3">
+                <span style="font-size: 10px">{{ item.action.type }}</span>
               </v-col>
               <v-col v-if="item.action.type === 'TrackSelection'">
                 <v-row
@@ -191,6 +214,26 @@ export default defineComponent({
                   {{ trackType }}
                 </v-row>
               </v-col>
+              <v-col v-if="item.action.type === 'CreateFullFrameTrackAction'">
+                <v-row dense>
+                  <span class="mr-2">{{ item.action.trackType }}:</span>
+                  <div
+                    class="type-color-box"
+                    :style="{
+                      backgroundColor: typeStylingRef.color(item.action.trackType),
+                    }"
+                  />
+                </v-row>
+                <v-row dense>
+                  <span>Geometry: {{ item.action.geometryType }}</span>
+                </v-row>
+              </v-col>
+              <v-col v-if="item.action.type === 'CreateFullFrameTrackAction'">
+                <span class="mr-1"> Use Existing: </span>
+                <v-icon> {{ item.action.useExisting ? 'mdi-checkbox-outline' : 'mdi-checkobx-blank-outline' }}</v-icon>
+                <span class="ml-3 mr-1"> Select Track After: </span>
+                <v-icon> {{ item.action.selectTrackAfter ? 'mdi-checkbox-outline' : 'mdi-checkobx-blank-outline' }}</v-icon>
+              </v-col>
               <v-col v-if="item.action.type === 'GoToFrame' && item.action.track">
                 <v-row
                   v-for="trackType in item.action.track.typeFilter"
@@ -221,6 +264,7 @@ export default defineComponent({
                   {{ data.name }}: {{ data.opVal }}
                 </v-row>
               </v-col>
+              <v-spacer />
               <v-col cols="1">
                 <v-icon @click="editAction(index)">
                   mdi-pencil

client/dive-common/components/ActionEditors/ActionShortcuts.vue

@@ -49,7 +49,7 @@ export default defineComponent({
     const typeStylingRef = useTrackStyleManager().typeStyling;
     const attributesList = useAttributes();
     const editingShortcut: Ref<null | DIVEActionShortcut> = ref(null);
-    const addEditActionType: Ref<'TrackSelection' | 'GoToFrame'> = ref('TrackSelection');
+    const addEditActionType: Ref<'TrackSelection' | 'GoToFrame' | 'CreateTrackAction' | 'CreateFullFrameTrackAction'> = ref('TrackSelection');
     const actionList: Ref<DIVEAction[]> = ref([]);
     const updateActionList = () => {
       actionList.value = editingShortcut.value?.actions || [];
@@ -160,10 +160,9 @@ export default defineComponent({
 
     const saveShortcutDisabled = computed(() => {
       if (editingShortcut.value) {
-        const { key } = editingShortcut.value.shortcut;
         const { description } = editingShortcut.value;
         const actionLength = editingShortcut.value.actions.length;
-        return !(key && description && actionLength);
+        return !(description && actionLength);
       }
       return false;
     });
@@ -216,18 +215,58 @@ export default defineComponent({
         <v-card-title>Action Shortcut Editor</v-card-title>
         <v-card-text>
           <div v-if="!addEditShortcut">
-            <v-row dnese>
+            <v-row dense class="pb-3">
               <v-btn @click="editShortcut()">
                 Add Shortcut
               </v-btn>
             </v-row>
+            <v-row dense style="border-bottom: 1px solid gray;">
+              <v-col>
+                <span>
+                  <v-icon class="mr-2">mdi-keyboard-outline</v-icon><b>Keyboard</b>
+                </span>
+              </v-col>
+              <v-col>
+                <span>
+                  <v-icon class="mr-2">mdi-button-cursor</v-icon><b>Button</b>
+                </span>
+              </v-col>
+              <v-col>
+                <span>
+                  <b>Description</b>
+                </span>
+              </v-col>
+              <v-col>
+                <span>
+                  <b>Actions</b>
+                </span>
+              </v-col>
+              <v-col cols="1">
+                <span>
+                  <b>Edit</b>
+                </span>
+              </v-col>
+            </v-row>
+
             <v-row
               v-for="item, index in shortcutList"
               :key="`shortcut_${item.shortcut.key}_${index}`"
               dense
+              align="center"
+              justify="center"
             >
               <v-col>
-                {{ item.shortcut.key }}{{ item.shortcut.modifiers && item.shortcut.modifiers.length ? `+${item.shortcut.modifiers.join('+')}` : '' }}
+                <span v-if="item.shortcut.key">
+                  <v-icon class="mr-2">mdi-keyboard-outline</v-icon>{{ item.shortcut.key }}{{ item.shortcut.modifiers && item.shortcut.modifiers.length ? `+${item.shortcut.modifiers.join('+')}` : '' }}
+                </span>
+              </v-col>
+              <v-col>
+                <span v-if="item.button">
+                  <v-icon class="mr-2">mdi-button-cursor</v-icon>
+                  <v-icon v-if="item.button.iconPrepend">{{ item.button.iconPrepend }}</v-icon>
+                  <span v-if="item.button.buttonText">{{ item.button.buttonText }}</span>
+                  <v-icon v-if="item.button.iconAppend">{{ item.button.iconAppend }}</v-icon>
+                </span>
               </v-col>
               <v-col>
                 {{ item.description }}
@@ -272,7 +311,7 @@ export default defineComponent({
                 dense
                 style="border: 1px gray solid; margin:2px"
               >
-                <v-col cols="2">
+                <v-col cols="3">
                   {{ item.action.type }}
                 </v-col>
                 <v-col v-if="item.action.type === 'TrackSelection'">
@@ -320,6 +359,33 @@ export default defineComponent({
                     {{ data.name }}: {{ data.opVal }}
                   </v-row>
                 </v-col>
+                <v-col v-if="item.action.type === 'CreateTrackAction'">
+                  <div v-if="item.action.editableType">
+                    <b class="mr-2">Editable Type:</b><v-icon v-if="item.action.editableType" color="success">
+                      mdi-check
+                    </v-icon><v-icon v-else color="error">
+                      mdi-close
+                    </v-icon>
+                  </div>
+                  <div v-if="item.action.editableTypeList?.length">
+                    <b class="mr-2">Types:</b><span>{{ item.action.editableTypeList.join(', ') }}</span>
+                  </div>
+                  <div v-if="item.action.trackType">
+                    <b class="mr-2">Type:</b><span>{{ item.action.trackType }}</span>
+                  </div>
+                  <div v-if="item.action.geometryType">
+                    <b class="mr-2">Geometry:</b><span>{{ item.action.geometryType }}</span>
+                  </div>
+
+                  <div>
+                    <b class="mr-2">Select Track After:</b><v-icon v-if="item.action.selectTrackAfter" color="success">
+                      mdi-check
+                    </v-icon><v-icon v-else color="error">
+                      mdi-close
+                    </v-icon>
+                  </div>
+                </v-col>
+                <v-spacer />
                 <v-col cols="1">
                   <v-icon @click="editAction(index)">
                     mdi-pencil
@@ -380,18 +446,22 @@ export default defineComponent({
           </v-row>
         </v-card-text>
         <v-card-actions>
-          <v-btn
-            x-small
-            @click="generalDialog = false; editingShortcut = null; addEditShortcut = false"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            color="primary"
-            @click="save()"
-          >
-            Save
-          </v-btn>
+          <v-row dense>
+            <v-spacer />
+            <v-btn
+              class="mx-2"
+              @click="generalDialog = false; editingShortcut = null; addEditShortcut = false"
+            >
+              Cancel
+            </v-btn>
+            <v-btn
+              class="mx-2"
+              color="primary"
+              @click="save()"
+            >
+              Save
+            </v-btn>
+          </v-row>
         </v-card-actions>
       </v-card>
     </v-dialog>