Skip to content

Commit 59c087f

Browse files
BryonLewisBryonLewis
committed
update CSS for multicam tools
1 parent e13da64 commit 59c087f

File tree

1 file changed

+87
-80
lines changed

1 file changed

+87
-80
lines changed

‎client/dive-common/components/MultiCamTools.vue‎

Lines changed: 87 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,19 @@
22
import { computed, defineComponent, ref } from 'vue';
33
import {
44
useCameraStore,
5-
useEditingMode, useHandler, useSelectedCamera,
6-
useSelectedTrackId, useTime, useTrackFilters,
5+
useEditingMode,
6+
useHandler,
7+
useSelectedCamera,
8+
useSelectedTrackId,
9+
useTime,
10+
useTrackFilters,
711
} from 'vue-media-annotator/provides';
812
import TooltipBtn from 'vue-media-annotator/components/TooltipButton.vue';
913
import { AnnotationId } from 'vue-media-annotator/BaseAnnotation';
1014
1115
interface CameraTrackData {
12-
trackExists: boolean;
13-
annotationExists: boolean;
16+
trackExists: boolean;
17+
annotationExists: boolean;
1418
}
1519
export default defineComponent({
1620
name: 'MultiCamTools',
@@ -33,28 +37,32 @@ export default defineComponent({
3337
const trackKeyPair: Record<string, CameraTrackData> = {};
3438
_depend(); // Used for remove detections/tracks from a camera
3539
/* EnabledTracksRef depedency triggers update when the sortedTracks updates based
36-
* on track links/unlinks. It doesn't work on same frame camera track deletions because
37-
* nothing is updated in the sortedTracks dependencies when that happens
38-
*/
39-
if (selectedTrackId.value !== null && selectedCamera.value
40-
&& enabledTracksRef.value.length > 0) {
40+
* on track links/unlinks. It doesn't work on same frame camera track deletions because
41+
* nothing is updated in the sortedTracks dependencies when that happens
42+
*/
43+
if (
44+
selectedTrackId.value !== null
45+
&& selectedCamera.value
46+
&& enabledTracksRef.value.length > 0
47+
) {
4148
cameraStore.camMap.value.forEach((camera, key) => {
4249
const trackExists = camera.trackStore.getPossible(selectedTrackId.value as AnnotationId);
43-
const completeTrackExists = (trackExists !== undefined
44-
&& trackExists.features.length > 0);
50+
const completeTrackExists = trackExists !== undefined && trackExists.features.length > 0;
4551
trackKeyPair[key] = {
4652
trackExists: completeTrackExists,
47-
annotationExists: completeTrackExists && camera.trackStore.get(
48-
selectedTrackId.value as AnnotationId,
49-
)?.getFeature(frame.value)[0] !== null,
53+
annotationExists:
54+
completeTrackExists
55+
&& camera.trackStore
56+
.get(selectedTrackId.value as AnnotationId)
57+
?.getFeature(frame.value)[0] !== null,
5058
};
5159
});
5260
}
5361
return trackKeyPair;
5462
});
55-
const existingCount = computed(() => Object.values(
56-
tracks.value,
57-
).filter((item) => item.trackExists).length);
63+
const existingCount = computed(
64+
() => Object.values(tracks.value).filter((item) => item.trackExists).length,
65+
);
5866
// Delete annotation for selected camera/frame
5967
const deleteAnnotation = async (camera: string, trackId: number) => {
6068
canary.value = !canary.value;
@@ -88,7 +96,7 @@ export default defineComponent({
8896
/** So for linking cameras we need to kick it out of the selectedTrack and choose a track within
8997
* the selected camera to merge with it. We need to make sure that the merged
9098
* track only exists on the sleected camera
91-
**/
99+
**/
92100
const startLinking = (camera: string) => {
93101
//We can't join the other track while in editing mode so we need to disable it
94102
if (inEditingMode.value) {
@@ -124,82 +132,81 @@ export default defineComponent({
124132
<v-divider class="my-3" />
125133
<v-divider class="my-3" />
126134
<div v-if="selectedTrackId !== null">
127-
<span> Selected Track: {{ selectedTrackId }} Frame: {{ frame }}</span>
135+
<span> Selected Track: {{ selectedTrackId }} Frame: {{ frame }}</span>
128136
<div>
129-
<div
130-
v-for="camera in cameras"
131-
:key="camera"
132-
>
137+
<div v-for="camera in cameras" :key="camera" class="pt-3">
133138
<v-row>
134139
<h2 :class="{ selected: camera === selectedCamera }">
135140
{{ camera }}
136141
</h2>
137142
</v-row>
138143
<v-divider />
139-
<v-row class="pl-2">
140-
<h3> Detection: </h3>
141-
<tooltip-btn
142-
icon="mdi-star"
143-
:disabled="!tracks[camera].annotationExists"
144-
:tooltip-text="`Delete detection for camera: ${camera}`"
145-
@click="deleteAnnotation(camera, selectedTrackId)"
146-
/>
147-
<tooltip-btn
148-
v-if="tracks[camera].annotationExists"
149-
icon="mdi-pencil-box-outline"
150-
:tooltip-text="`Edit detection for camera: ${camera}`"
151-
@click="editOrCreateAnnotation(camera)"
152-
/>
153-
<tooltip-btn
154-
v-else-if="!tracks[camera].annotationExists"
155-
icon="mdi-shape-square-plus"
156-
:tooltip-text="`Add detection for camera: ${camera}`"
157-
@click="editOrCreateAnnotation(camera)"
158-
/>
144+
<v-row align="center" justify="space-between" class="mt-4 mb-2">
145+
<h3 class="mb-0">Detection:</h3>
146+
<div class="d-flex gap-2">
147+
<tooltip-btn
148+
icon="mdi-star"
149+
:disabled="!tracks[camera].annotationExists"
150+
:tooltip-text="`Delete detection for camera: ${camera}`"
151+
@click="deleteAnnotation(camera, selectedTrackId)"
152+
/>
153+
<tooltip-btn
154+
v-if="tracks[camera].annotationExists"
155+
icon="mdi-pencil-box-outline"
156+
:tooltip-text="`Edit detection for camera: ${camera}`"
157+
@click="editOrCreateAnnotation(camera)"
158+
/>
159+
<tooltip-btn
160+
v-else
161+
icon="mdi-shape-square-plus"
162+
:tooltip-text="`Add detection for camera: ${camera}`"
163+
@click="editOrCreateAnnotation(camera)"
164+
/>
165+
</div>
159166
</v-row>
160-
<v-divider class="pl-2" />
161-
<v-row class="pl-2">
162-
<h3> Track: </h3>
163-
<tooltip-btn
164-
color="error"
165-
icon="mdi-delete"
166-
:disabled="!tracks[camera].trackExists"
167-
:tooltip-text="`Delete Track for camera: ${camera}`"
168-
@click="deleteTrack(camera, selectedTrackId)"
169-
/>
170-
<tooltip-btn
171-
v-if="tracks[camera].trackExists"
172-
color="error"
173-
icon="mdi-link-variant-minus"
174-
:disabled="existingCount === 1"
175-
:tooltip-text="`Unlink Track for camera: ${camera}`"
176-
@click="handler.unlinkCameraTrack(selectedTrackId, camera)"
177-
/>
178-
<tooltip-btn
179-
v-else-if="!tracks[camera].trackExists"
180-
icon="mdi-link-variant-plus"
181-
:tooltip-text="`Link Track to this camera: ${camera}`"
182-
@click="startLinking(camera)"
183-
/>
167+
168+
<v-divider class="my-2" />
169+
170+
<v-row align="center" justify="space-between" class="mt-2 mb-4">
171+
<h3 class="mb-0">Track:</h3>
172+
<div class="d-flex gap-2">
173+
<tooltip-btn
174+
color="error"
175+
icon="mdi-delete"
176+
:disabled="!tracks[camera].trackExists"
177+
:tooltip-text="`Delete Track for camera: ${camera}`"
178+
@click="deleteTrack(camera, selectedTrackId)"
179+
/>
180+
<tooltip-btn
181+
v-if="tracks[camera].trackExists"
182+
color="error"
183+
icon="mdi-link-variant-minus"
184+
:disabled="existingCount === 1"
185+
:tooltip-text="`Unlink Track for camera: ${camera}`"
186+
@click="handler.unlinkCameraTrack(selectedTrackId, camera)"
187+
/>
188+
<tooltip-btn
189+
v-else
190+
icon="mdi-link-variant-plus"
191+
:tooltip-text="`Link Track to this camera: ${camera}`"
192+
@click="startLinking(camera)"
193+
/>
194+
</div>
184195
</v-row>
196+
185197
<v-divider />
186198
</div>
187199
</div>
188200
</div>
189-
<div
190-
v-else
191-
class="text-body-2"
192-
>
201+
<div v-else class="text-body-2">
193202
<p>No track selected.</p>
194-
<p>
195-
This panel is used for:
196-
<ul>
197-
<li>Viewing which cameras have tracks/detections for the selected trackId</li>
198-
<li>Deleting detection and/or tracks from a camera </li>
199-
<li>Splitting off tracks from an existing camera</li>
200-
<li>Linking tracks from difference cameras to the same trackId</li>
201-
</ul>
202-
</p>
203+
<p>This panel is used for:</p>
204+
<ul>
205+
<li>Viewing which cameras have tracks/detections for the selected trackId</li>
206+
<li>Deleting detection and/or tracks from a camera</li>
207+
<li>Splitting off tracks from an existing camera</li>
208+
<li>Linking tracks from difference cameras to the same trackId</li>
209+
</ul>
203210
<p>Select a track to populate this editor.</p>
204211
</div>
205212
</div>

0 commit comments

Comments
 (0)