@3cr/viewer-browser 0.0.247 → 0.0.292

package/src/components/navigation/mcad/McadFloating.vue

@@ -0,0 +1,193 @@
+<template>
+  <v-hover #default="{ isHovering, props }">
+    <v-card
+      id="drag-set"
+      :class="[state !== FloatingState.REGULAR ? 'px-1 pb-1 pt-2' : 'px-4 py-2']"
+      :max-width="state === FloatingState.VERTICAL_SQUASH ? 56 : state === FloatingState.HORIZONTAL_SQUASH ? 286 : 266"
+      v-bind="props"
+      class="position-relative d-flex"
+      style="
+        border-radius: 12px;
+        text-align: left;
+        z-index: 200;
+        box-shadow:
+          0px 2px 4px -2px rgba(29, 29, 73, 0.1),
+          0px 4px 6px -1px rgba(29, 29, 73, 0.1) !important;
+      "
+      :style="{
+        opacity: isHovering ? '1' : 0.9,
+        'flex-direction': state === FloatingState.HORIZONTAL_SQUASH ? 'row' : 'column',
+        ...style
+      }"
+    >
+      <v-card-actions
+        class="mb-0"
+        :class="[state !== FloatingState.REGULAR ? 'px-0 py-0' : 'py-1']"
+        style="min-height: 0px; gap: 0"
+      >
+        <v-spacer />
+        <v-icon style="transform: rotate(90deg)" class="drag-handler shark-400" icon="drag_indicator" size="32" />
+        <v-spacer />
+      </v-card-actions>
+      <v-divider
+        :class="[state === FloatingState.HORIZONTAL_SQUASH ? 'mx-2' : 'my-2']"
+        thickness="2"
+        v-if="state !== FloatingState.REGULAR"
+        :vertical="state === FloatingState.HORIZONTAL_SQUASH"
+      />
+      <v-tabs
+        :class="[state]"
+        fixed-tabs
+        :mandatory="false"
+        :model-value="activeIndex"
+        hide-slider
+        :show-arrows="false"
+        :direction="state === FloatingState.VERTICAL_SQUASH ? 'vertical' : 'horizontal'"
+      >
+        <template v-for="tab in tabs">
+          <v-tooltip location="bottom" open-delay="1000">
+            <template #activator="{ props }">
+              <v-tab v-bind="props" @click="tab.click">
+                <v-icon :icon="tab.icon" size="lg" />
+              </v-tab>
+            </template>
+            <span>{{ tab.tooltip }} {{ translateTooltipShortcut(tab.tooltipShortcut) }}</span>
+          </v-tooltip>
+        </template>
+      </v-tabs>
+    </v-card>
+  </v-hover>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, watch } from 'vue';
+import interact from 'interactjs';
+import { storeToRefs } from 'pinia';
+import { Interactable } from '@interactjs/core/Interactable';
+import { FloatingState, useMcadFloatingStore } from '@/stores/mcad-floating.store';
+import { useI18n } from 'vue-i18n';
+import { SHORTCUT_TEXT, translateTooltipShortcut } from '@/functions/translateTooltipShortcut';
+import { useToolStore } from '@/stores/tool.store';
+import { useToolGroup } from '@/composables/useToolGroup';
+
+let interactable: Interactable | null = null;
+
+const { t } = useI18n();
+const { x, y, style, state, isDragging } = storeToRefs(useMcadFloatingStore());
+const { mcadMoveTool, mcadRotateTool, mcadScaleTool, mcadSelectTool } = useToolStore();
+const { activeTool, activeIndex, toggleTool } = useToolGroup(mcadMoveTool, mcadRotateTool, mcadScaleTool);
+
+const tabs = computed(() => [
+  {
+    icon: 'drag_pan',
+    click: move,
+    tooltip: t('labels.mcadMove'),
+    tooltipShortcut: SHORTCUT_TEXT.m
+  },
+  {
+    icon: '3d_rotation',
+    click: rotate,
+    tooltip: t('labels.mcadRotate'),
+    tooltipShortcut: SHORTCUT_TEXT.r
+  }
+  // TODO: scale has not been implemented in 3CR
+  // {
+  //   icon: 'open_in_full',
+  //   click: scale,
+  //   tooltip: t('labels.mcadScale'),
+  //   tooltipShortcut: SHORTCUT_TEXT.s
+  // }
+]);
+
+watch([activeTool, mcadSelectTool.selected], ([activeTool, selected]) => {
+  if (activeTool) {
+    activeTool.selected.value = selected;
+  }
+});
+
+onMounted(async () => {
+  await nextTick();
+  interactable = interact('#drag-set')
+    .draggable({
+      allowFrom: '.drag-handler',
+      modifiers: [
+        interact.modifiers.snap({
+          targets: [interact.snappers.grid({ x: 1, y: 1 })],
+          range: Infinity,
+          relativePoints: [{ x: 0, y: 0 }]
+        }),
+        interact.modifiers.restrict({
+          restriction: 'parent',
+          elementRect: { top: 0, left: 0, bottom: 1, right: 1 },
+          endOnly: true
+        })
+      ],
+      inertia: true
+    })
+    .on('dragmove', function (event) {
+      x.value += event.dx;
+      y.value += event.dy;
+      isDragging.value = true;
+    })
+    .on('mousedown', function (event) {
+      isDragging.value = true;
+      if (event.target.classList.contains('drag-handler')) {
+        const hoverSelf = document.getElementById('hover-border');
+        if (hoverSelf) {
+          return;
+        }
+
+        const self = document.getElementById('drag-set');
+        const parent = self?.parentElement;
+        const element = document.createElement('div');
+        element.id = 'hover-border';
+
+        element.style.width = 'calc(100%)';
+        element.style.height = 'calc(100%)';
+        element.style.position = 'absolute';
+        element.style.top = '0';
+        element.style.left = '0';
+        element.style.transition = 'all 800ms ease-in-out';
+        element.style.boxShadow = '0 0 8px 1px inset rgb(var(--v-theme-minsk_500))';
+
+        element.style.border = '2px dashed rgb(var(--v-theme-minsk_500))';
+        element.style.borderRadius = '12px';
+
+        parent?.appendChild(element);
+      }
+    })
+    .on('mouseup', function (event) {
+      const hoverSelf = document.getElementById('hover-border');
+      if (hoverSelf) {
+        hoverSelf.remove();
+        return;
+      }
+      isDragging.value = false;
+    })
+    .on('dragend', function (event) {
+      const hoverSelf = document.getElementById('hover-border');
+      if (hoverSelf) {
+        hoverSelf.remove();
+        return;
+      }
+      isDragging.value = false;
+    });
+});
+
+onUnmounted(() => {
+  interactable?.unset();
+});
+
+function move(): void {
+  mcadSelectTool.isActive.value = toggleTool(mcadMoveTool);
+}
+
+function rotate(): void {
+  mcadSelectTool.isActive.value = toggleTool(mcadRotateTool);
+}
+
+// TODO: scale has not been implemented in 3CR
+// function scale(): void {
+//   mcadSelectTool.isActive.value = toggleTool(mcadScaleTool);
+// }
+</script>

package/src/components/navigation/mcad/McadIcon.vue

@@ -0,0 +1,34 @@
+<template>
+  <div :style="styles"></div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { rgbToHex } from '@/functions/colours';
+import { DataOverlayMcad } from '@3cr/viewer-types-ts';
+
+interface Props {
+  mcad: DataOverlayMcad;
+  size?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 12
+});
+
+const color = computed(() => {
+  const { R, G, B } = props.mcad.Colour;
+  const toByte = (n: number) => n * 255;
+  return rgbToHex(toByte(R), toByte(G), toByte(B));
+});
+
+const styles = computed(() => {
+  return {
+    display: 'inline-block',
+    'background-color': color.value,
+    width: '8px',
+    height: '8px',
+    'border-radius': '50px'
+  };
+});
+</script>

package/src/components/navigation/mcad/McadInvert.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <span class="text-caption" style="font-size: 12px !important; font-weight: 600">
+      {{ t('labels.mcadInvert') }}
+    </span>
+    <v-row align-content="space-around" no-gutters>
+      <v-col class="pt-2">
+        <v-checkbox
+          color="primary"
+          :model-value="x"
+          density="compact"
+          hide-details
+          label="X-axis"
+          style="font-weight: 500"
+          @update:model-value="invertX"
+        />
+      </v-col>
+      <v-col class="pt-2">
+        <v-checkbox
+          :model-value="y"
+          density="compact"
+          hide-details
+          label="Y-axis"
+          color="primary"
+          style="font-weight: 500"
+          @update:model-value="invertY"
+        />
+      </v-col>
+      <v-col class="pt-2">
+        <v-checkbox
+          color="primary"
+          :model-value="z"
+          density="compact"
+          hide-details
+          label="Z-axis"
+          style="font-weight: 500"
+          @update:model-value="invertZ"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { computed } from 'vue';
+import { ObjectInvert } from '@3cr/types-ts';
+import { useI18n } from 'vue-i18n';
+import { DataOverlayMcad } from '@3cr/viewer-types-ts';
+
+interface Props {
+  mcad: DataOverlayMcad;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+const viewer3cr = useViewer3cr();
+
+const x = computed(() => props.mcad.Inverted.InvertedSagittal);
+const y = computed(() => props.mcad.Inverted.InvertedCoronal);
+const z = computed(() => props.mcad.Inverted.InvertedTransverse);
+
+async function invertX(): Promise<void> {
+  const message = makeObjectInvert(!x.value, y.value, z.value);
+  await viewer3cr.invertMcadObject({ message });
+}
+
+async function invertY(): Promise<void> {
+  const message = makeObjectInvert(x.value, !y.value, z.value);
+  await viewer3cr.invertMcadObject({ message });
+}
+
+async function invertZ(): Promise<void> {
+  const message = makeObjectInvert(x.value, y.value, !z.value);
+  await viewer3cr.invertMcadObject({ message });
+}
+
+function makeObjectInvert(x: boolean, y: boolean, z: boolean): ObjectInvert {
+  return {
+    Version: '0.0.0',
+    Id: props.mcad.Id,
+    Inverted: {
+      Version: '0.0.0',
+      InvertedSagittal: x,
+      InvertedCoronal: y,
+      InvertedTransverse: z
+    }
+  };
+}
+</script>

package/src/components/navigation/mcad/McadLockBtn.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-tooltip location="bottom" open-delay="1000">
+    <template #activator="{ props }">
+      <v-btn
+        v-bind="mergeProps($attrs, props)"
+        data-testid="lock"
+        :icon="true"
+        size="24"
+        variant="text"
+        @click.stop="toggle"
+        color="rgba(146, 147, 158, 1)"
+      >
+        <v-icon :icon="icon" size="16" />
+      </v-btn>
+    </template>
+    <span>{{ text }}</span>
+  </v-tooltip>
+</template>
+
+<script setup lang="ts">
+import { computed, mergeProps } from 'vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useI18n } from 'vue-i18n';
+import { DataOverlayMcad } from '@3cr/viewer-types-ts';
+
+interface Props {
+  mcad: DataOverlayMcad;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+const viewer3cr = useViewer3cr();
+
+const icon = computed(() => {
+  return props.mcad.Locked ? 'lock' : 'lock_open';
+});
+
+const text = computed(() => {
+  return props.mcad.Locked ? t('labels.unlock') : t('labels.lock');
+});
+
+async function toggle(): Promise<void> {
+  if (props.mcad.Locked) {
+    await unlockMcad();
+  } else {
+    await lockMcad();
+  }
+}
+
+async function lockMcad(): Promise<void> {
+  const message = { Version: '0.0.0', Id: props.mcad.Id, Value: true };
+  await viewer3cr.lockMcad({ message });
+}
+
+async function unlockMcad(): Promise<void> {
+  const message = { Version: '0.0.0', Id: props.mcad.Id, Value: false };
+  await viewer3cr.lockMcad({ message });
+}
+
+defineOptions({ inheritAttrs: false });
+</script>

package/src/components/navigation/mcad/McadMenu.vue

@@ -0,0 +1,248 @@
+<template>
+  <v-menu v-model:model-value="m_open">
+    <template #activator="{ props: menu }">
+      <v-tooltip location="bottom" open-delay="1000">
+        <template #activator="{ props: tooltip }">
+          <v-btn v-bind="mergeProps(menu, tooltip)" data-testid="menu" :icon="true" size="24" variant="text">
+            <v-icon icon="more_vert" size="16" color="shark_400" />
+          </v-btn>
+        </template>
+        <span>{{ t('labels.moreActions') }}</span>
+      </v-tooltip>
+    </template>
+    <v-list id="mcad-menu">
+      <template v-for="option in dropdownOptions" :key="option.label">
+        <v-list-item
+          v-if="option.display"
+          class="px-4 py-2"
+          :data-testid="option.dataTestId"
+          :prepend-icon="option.icon"
+          @click="option.onClick"
+        >
+          <v-list-item-title>{{ option.label }}</v-list-item-title>
+          <v-spacer />
+          <v-list-item-subtitle class="ml-4">{{ option.hotkey }}</v-list-item-subtitle>
+        </v-list-item>
+      </template>
+    </v-list>
+  </v-menu>
+  <mcad-update-modal v-model="m_update" :mcad="mcad" />
+  <mcad-delete-modal v-model="m_delete" :mcad="mcad" />
+</template>
+
+<script setup lang="ts">
+import { computed, mergeProps, ref, watch } from 'vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { storeToRefs } from 'pinia';
+import { useViewerStore } from '@/stores/viewer.store';
+import { useToolStore } from '@/stores/tool.store';
+import { defineHotkeys, Hotkeys, HotkeyScope, resetScope } from '@/functions/HotkeyScope';
+import { useI18n } from 'vue-i18n';
+import { SHORTCUT_TEXT, translateTooltipShortcut } from '@/functions/translateTooltipShortcut';
+import { ObjectVisibility } from '@3cr/types-ts';
+import { useToolGroup } from '@/composables/useToolGroup';
+import { DataOverlayMcad } from '@3cr/viewer-types-ts';
+import { MaybePromise } from 'rollup';
+
+interface Props {
+  mcad: DataOverlayMcad;
+}
+
+interface DropdownOption {
+  dataTestId: string;
+  icon: string;
+  onClick: () => MaybePromise<void>;
+  label: string;
+  hotkey: string;
+  display: boolean;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+const { mcadMoveTool, mcadRotateTool, mcadScaleTool, mcadSelectTool } = useToolStore();
+const { toggleTool } = useToolGroup(mcadMoveTool, mcadRotateTool, mcadScaleTool);
+const viewer3cr = useViewer3cr();
+const { options } = storeToRefs(useViewerStore());
+
+const m_delete = ref<boolean>(false);
+const m_update = ref<boolean>(false);
+const m_open = ref<boolean>(false);
+
+const selected = computed(() => mcadSelectTool.selected.value);
+
+const showDownloadMcad = computed(() => {
+  return !!options.value.onDownloadMcad;
+});
+
+const dropdownOptions = computed<Array<DropdownOption>>(() => [
+  {
+    dataTestId: 'update',
+    icon: 'edit_square',
+    onClick: updateMcad,
+    label: t('labels.edit'),
+    hotkey: translateTooltipShortcut(SHORTCUT_TEXT.e),
+    display: true
+  },
+  {
+    dataTestId: 'move',
+    icon: 'drag_pan',
+    onClick: move,
+    label: t('labels.move'),
+    hotkey: translateTooltipShortcut(SHORTCUT_TEXT.m),
+    display: true
+  },
+  {
+    dataTestId: 'rotate',
+    icon: '360',
+    onClick: rotate,
+    label: t('labels.rotate'),
+    hotkey: translateTooltipShortcut(SHORTCUT_TEXT.r),
+    display: true
+  },
+  {
+    dataTestId: 'scale',
+    icon: 'open_in_full',
+    onClick: scale,
+    label: t('labels.scale'),
+    hotkey: translateTooltipShortcut(SHORTCUT_TEXT.s),
+    display: true
+  },
+  {
+    dataTestId: 'group',
+    icon: 'folder',
+    onClick: group,
+    label: t('labels.group'),
+    hotkey: translateTooltipShortcut(SHORTCUT_TEXT.g),
+    display: !!selected.value && props.mcad.Id !== selected.value.Id
+  },
+  {
+    dataTestId: 'show',
+    icon: 'visibility',
+    onClick: toggle,
+    label: t('labels.show'),
+    hotkey: translateTooltipShortcut(SHORTCUT_TEXT.h),
+    display: !props.mcad.Visibility || false
+  },
+  {
+    dataTestId: 'hide',
+    icon: 'visibility_off',
+    onClick: toggle,
+    label: t('labels.hide'),
+    hotkey: translateTooltipShortcut(SHORTCUT_TEXT.h),
+    display: props.mcad.Visibility || false
+  },
+  {
+    dataTestId: 'lock',
+    icon: 'lock',
+    onClick: lockMcad,
+    label: t('labels.lock'),
+    hotkey: translateTooltipShortcut(SHORTCUT_TEXT.l),
+    display: !props.mcad.Locked || false
+  },
+  {
+    dataTestId: 'unlock',
+    icon: 'lock_open',
+    onClick: unlockMcad,
+    label: t('labels.unlock'),
+    hotkey: translateTooltipShortcut(SHORTCUT_TEXT.l),
+    display: props.mcad.Locked || false
+  },
+  {
+    dataTestId: 'download',
+    icon: 'download',
+    onClick: downloadMcad,
+    label: t('labels.download'),
+    hotkey: translateTooltipShortcut(SHORTCUT_TEXT.q),
+    display: showDownloadMcad.value
+  },
+  {
+    dataTestId: 'delete',
+    icon: 'delete',
+    onClick: deleteMcad,
+    label: t('labels.delete'),
+    hotkey: translateTooltipShortcut(SHORTCUT_TEXT.d),
+    display: true
+  }
+]);
+
+watch(m_open, (isOpen: boolean) => {
+  if (isOpen) {
+    defineHotkeys(HotkeyScope.MCAD_MENU, {
+      [Hotkeys.CTRL_SHIFT_E]: () => updateMcad(),
+      [Hotkeys.CTRL_SHIFT_M]: () => move(),
+      [Hotkeys.CTRL_SHIFT_R]: () => rotate(),
+      [Hotkeys.CTRL_SHIFT_S]: () => scale(),
+      [Hotkeys.CTRL_SHIFT_G]: () => group(),
+      [Hotkeys.CTRL_SHIFT_L]: () => lockMcad(),
+      [Hotkeys.CTRL_SHIFT_D]: () => downloadMcad(),
+      [Hotkeys.CTRL_SHIFT_DEL]: () => deleteMcad(),
+      [Hotkeys.CTRL_SHIFT_H]: () => toggle(),
+      [Hotkeys.CTRL_SHIFT_Q]: () => downloadMcad()
+    });
+  } else {
+    resetScope(HotkeyScope.MCAD_MENU);
+  }
+});
+
+async function lockMcad(): Promise<void> {
+  const message = { Version: '0.0.0', Id: props.mcad.Id, Value: true };
+  await viewer3cr.lockMcad({ message });
+}
+
+async function toggle(): Promise<void> {
+  const message: ObjectVisibility = { Version: '0.0.0', Id: props.mcad.Id, Visibility: !props.mcad.Visibility };
+  await viewer3cr.setMcadObjectVisibility({ message });
+}
+
+async function unlockMcad(): Promise<void> {
+  const message = { Version: '0.0.0', Id: props.mcad.Id, Value: false };
+  await viewer3cr.lockMcad({ message });
+}
+
+async function group(): Promise<void> {
+  const ids = [props.mcad.Id, selected.value!.Id];
+  const message = { Version: '0.0.0', Parent: '', Children: ids };
+  await viewer3cr.groupMcad({ message });
+}
+
+async function downloadMcad(): Promise<void> {
+  if (options.value.onDownloadMcad) {
+    await options.value.onDownloadMcad(props.mcad.Key);
+  }
+}
+
+function move(): void {
+  toggleTool(mcadMoveTool);
+}
+
+function rotate(): void {
+  toggleTool(mcadRotateTool);
+}
+
+function scale(): void {
+  toggleTool(mcadScaleTool);
+}
+
+function deleteMcad(): void {
+  m_delete.value = true;
+}
+
+function updateMcad(): void {
+  m_update.value = true;
+}
+
+defineExpose({
+  dropdownOptions,
+  m_delete,
+  m_update
+});
+</script>
+
+<style scoped lang="scss">
+:deep(.v-list-item__content) {
+  display: flex;
+  align-items: baseline;
+  width: 100%;
+}
+</style>

package/src/components/navigation/mcad/McadOpacity.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <span class="text-caption">{{ t('labels.opacity') }}</span>
+    <v-slider
+      :model-value="opacity"
+      @update:model-value="setOpacity"
+      hide-details
+      min="0"
+      max="100"
+      thumb-color="primary"
+      :thumb-label="label"
+      thumb-size="16"
+      step="1"
+    >
+      <template #prepend>
+        <v-btn variant="text" icon="remove" density="compact" @click="decrement" />
+      </template>
+      <template #append>
+        <v-btn variant="text" icon="add" density="compact" @click="increment" />
+      </template>
+    </v-slider>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { clamp } from '@/functions/clamp';
+import { computed, ref } from 'vue';
+import { ObjectColour } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useI18n } from 'vue-i18n';
+import { DataOverlayMcad } from '@3cr/viewer-types-ts';
+
+interface Props {
+  mcad: DataOverlayMcad;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+const viewer3cr = useViewer3cr();
+
+const label = ref<boolean | 'always'>(true);
+const timeout = ref<NodeJS.Timeout>();
+
+const opacity = computed(() => Math.round(props.mcad.Colour.A * 100));
+
+async function increment(): Promise<void> {
+  await setOpacity(opacity.value + 1);
+  showLabel();
+}
+
+async function decrement(): Promise<void> {
+  await setOpacity(opacity.value - 1);
+  showLabel();
+}
+
+function showLabel(): void {
+  label.value = 'always';
+  if (timeout.value) {
+    clearTimeout(timeout.value);
+  }
+  timeout.value = setTimeout(() => (label.value = true), 1000);
+}
+
+async function setOpacity(value: number): Promise<void> {
+  const message: ObjectColour = {
+    Version: '0.0.0',
+    Id: props.mcad.Id,
+    Colour: {
+      Version: '0.0.0',
+      R: props.mcad.Colour.R,
+      G: props.mcad.Colour.G,
+      B: props.mcad.Colour.B,
+      A: clamp(value, 0, 100) / 100
+    }
+  };
+  await viewer3cr.setMcadObjectColour({ message });
+}
+</script>