npm - @3cr/viewer-browser - Versions diffs - 0.0.86 → 0.0.92 - Mend

@3cr/viewer-browser 0.0.86 → 0.0.92

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/coverage/3cr-viewer-browser/index.html CHANGED Viewed

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-10T05:32:35.256Z
+                at 2024-04-10T07:23:57.146Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/3cr-viewer-browser/index.ts.html CHANGED Viewed

@@ -184,7 +184,7 @@ export async function loadViewer(
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-10T05:32:35.256Z
+                at 2024-04-10T07:23:57.146Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/3cr-viewer-browser/src/App.vue.html CHANGED Viewed

@@ -301,7 +301,7 @@ async function loadInstance(
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-10T05:32:35.256Z
+                at 2024-04-10T07:23:57.146Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/3cr-viewer-browser/src/components/WebGL3DR.vue.html CHANGED Viewed

@@ -427,7 +427,7 @@ function receiveMessageFromUnity(json: FrontEndPayload) {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-10T05:32:35.256Z
+                at 2024-04-10T07:23:57.146Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/3cr-viewer-browser/src/components/icons/index.html CHANGED Viewed

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-10T05:32:35.256Z
+                at 2024-04-10T07:23:57.146Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/3cr-viewer-browser/src/components/icons/liver.vue.html CHANGED Viewed

@@ -133,7 +133,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-10T05:32:35.256Z
+                at 2024-04-10T07:23:57.146Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/3cr-viewer-browser/src/components/index.html CHANGED Viewed

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-10T05:32:35.256Z
+                at 2024-04-10T07:23:57.146Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/3cr-viewer-browser/src/components/loading/LoadingSpinner.vue.html CHANGED Viewed

@@ -607,7 +607,7 @@ const props = withDefaults(defineProps&lt;Props&gt;(), {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-10T05:32:35.256Z
+                at 2024-04-10T07:23:57.146Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/3cr-viewer-browser/src/components/loading/index.html CHANGED Viewed

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-10T05:32:35.256Z
+                at 2024-04-10T07:23:57.146Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/3cr-viewer-browser/src/components/modal/MftpWebGL3DRModal.vue.html CHANGED Viewed

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             <div class='fl pad1y space-right2'>
-                <span class="strong">99.9% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>1051/1052</span>
+                <span class='fraction'>1011/1011</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">98.82% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>84/85</span>
+                <span class='fraction'>80/80</span>
             </div>
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>47/47</span>
+                <span class='fraction'>43/43</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">99.9% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>1051/1052</span>
+                <span class='fraction'>1011/1011</span>
             </div>
@@ -1074,48 +1074,7 @@
 <a name='L1009'></a><a href='#L1009'>1009</a>
 <a name='L1010'></a><a href='#L1010'>1010</a>
 <a name='L1011'></a><a href='#L1011'>1011</a>
-<a name='L1012'></a><a href='#L1012'>1012</a>
-<a name='L1013'></a><a href='#L1013'>1013</a>
-<a name='L1014'></a><a href='#L1014'>1014</a>
-<a name='L1015'></a><a href='#L1015'>1015</a>
-<a name='L1016'></a><a href='#L1016'>1016</a>
-<a name='L1017'></a><a href='#L1017'>1017</a>
-<a name='L1018'></a><a href='#L1018'>1018</a>
-<a name='L1019'></a><a href='#L1019'>1019</a>
-<a name='L1020'></a><a href='#L1020'>1020</a>
-<a name='L1021'></a><a href='#L1021'>1021</a>
-<a name='L1022'></a><a href='#L1022'>1022</a>
-<a name='L1023'></a><a href='#L1023'>1023</a>
-<a name='L1024'></a><a href='#L1024'>1024</a>
-<a name='L1025'></a><a href='#L1025'>1025</a>
-<a name='L1026'></a><a href='#L1026'>1026</a>
-<a name='L1027'></a><a href='#L1027'>1027</a>
-<a name='L1028'></a><a href='#L1028'>1028</a>
-<a name='L1029'></a><a href='#L1029'>1029</a>
-<a name='L1030'></a><a href='#L1030'>1030</a>
-<a name='L1031'></a><a href='#L1031'>1031</a>
-<a name='L1032'></a><a href='#L1032'>1032</a>
-<a name='L1033'></a><a href='#L1033'>1033</a>
-<a name='L1034'></a><a href='#L1034'>1034</a>
-<a name='L1035'></a><a href='#L1035'>1035</a>
-<a name='L1036'></a><a href='#L1036'>1036</a>
-<a name='L1037'></a><a href='#L1037'>1037</a>
-<a name='L1038'></a><a href='#L1038'>1038</a>
-<a name='L1039'></a><a href='#L1039'>1039</a>
-<a name='L1040'></a><a href='#L1040'>1040</a>
-<a name='L1041'></a><a href='#L1041'>1041</a>
-<a name='L1042'></a><a href='#L1042'>1042</a>
-<a name='L1043'></a><a href='#L1043'>1043</a>
-<a name='L1044'></a><a href='#L1044'>1044</a>
-<a name='L1045'></a><a href='#L1045'>1045</a>
-<a name='L1046'></a><a href='#L1046'>1046</a>
-<a name='L1047'></a><a href='#L1047'>1047</a>
-<a name='L1048'></a><a href='#L1048'>1048</a>
-<a name='L1049'></a><a href='#L1049'>1049</a>
-<a name='L1050'></a><a href='#L1050'>1050</a>
-<a name='L1051'></a><a href='#L1051'>1051</a>
-<a name='L1052'></a><a href='#L1052'>1052</a>
-<a name='L1053'></a><a href='#L1053'>1053</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L1012'></a><a href='#L1012'>1012</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -1862,16 +1821,6 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -1923,7 +1872,16 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -1946,13 +1904,13 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1104x</span>
-<span class="cline-any cline-yes">1104x</span>
-<span class="cline-any cline-yes">1104x</span>
-<span class="cline-any cline-yes">1401x</span>
-<span class="cline-any cline-yes">1401x</span>
-<span class="cline-any cline-yes">1104x</span>
-<span class="cline-any cline-yes">1104x</span>
+<span class="cline-any cline-yes">1056x</span>
+<span class="cline-any cline-yes">1056x</span>
+<span class="cline-any cline-yes">1056x</span>
+<span class="cline-any cline-yes">1393x</span>
+<span class="cline-any cline-yes">1393x</span>
+<span class="cline-any cline-yes">1056x</span>
+<span class="cline-any cline-yes">1056x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -1961,26 +1919,26 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">972x</span>
+<span class="cline-any cline-yes">964x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">972x</span>
+<span class="cline-any cline-yes">964x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">972x</span>
+<span class="cline-any cline-yes">964x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">972x</span>
+<span class="cline-any cline-yes">964x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">276x</span>
-<span class="cline-any cline-yes">276x</span>
-<span class="cline-any cline-yes">276x</span>
-<span class="cline-any cline-yes">206x</span>
-<span class="cline-any cline-yes">206x</span>
-<span class="cline-any cline-yes">206x</span>
-<span class="cline-any cline-yes">206x</span>
-<span class="cline-any cline-yes">206x</span>
-<span class="cline-any cline-yes">276x</span>
-<span class="cline-any cline-yes">276x</span>
+<span class="cline-any cline-yes">264x</span>
+<span class="cline-any cline-yes">264x</span>
+<span class="cline-any cline-yes">264x</span>
+<span class="cline-any cline-yes">207x</span>
+<span class="cline-any cline-yes">207x</span>
+<span class="cline-any cline-yes">207x</span>
+<span class="cline-any cline-yes">207x</span>
+<span class="cline-any cline-yes">207x</span>
+<span class="cline-any cline-yes">264x</span>
+<span class="cline-any cline-yes">264x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
@@ -2000,19 +1958,11 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -2029,31 +1979,6 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-yes">4x</span>
@@ -2160,13 +2085,6 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">&lt;!-- /* c8 ignore start */ --&gt;
 &lt;template&gt;
   &lt;DemoModal v-model:modal="m_demo" /&gt;
@@ -2341,7 +2259,7 @@
           height="36"
           style="min-width: 36px !important"
           :color="isLayout2x2 ? 'secondary' : 'primary'"
-          @click="layouts('lo_02')"
+          @click="payloadHandler.layouts(LayoutActions.lo02)"
           &gt;&lt;v-icon&gt;grid_view&lt;/v-icon&gt;&lt;/v-btn
         &gt;
         &lt;v-btn
@@ -2349,7 +2267,7 @@
           height="36"
           style="min-width: 36px !important"
           :color="isLayout1x3 ? 'secondary' : 'primary'"
-          @click="layouts('lo_03')"
+          @click="payloadHandler.layouts(LayoutActions.lo03)"
           &gt;&lt;v-icon style="rotate: -90deg"&gt;view_comfy&lt;/v-icon&gt;&lt;/v-btn
         &gt;
         &lt;v-btn class="" variant="flat" color="red" @click="alterValue(false)"
@@ -2371,7 +2289,6 @@
           &lt;div
             class="d-flex align-center pb-1"
             :class="drawerCollapsed ? 'py-2' : 'pa-2'"
-            @click="snap"
           &gt;
             &lt;img
               v-if="!drawerCollapsed"
@@ -2393,7 +2310,6 @@
           &lt;div
             class="text-center mx-auto pa-0 text-white sub-type"
             :style="drawerCollapsed ? 'font-size: 100%' : 'font-size: 140%'"
-            @click="snap"
           &gt;
             Online Viewer
           &lt;/div&gt;
@@ -2512,7 +2428,9 @@
                     closeOnContentClick: true,
                   }"
                   placeholder="Select a Density Preset"
-                  @change="setPreset(PresetsActions.pr01, $event)"
+                  @change="
+                    payloadHandler.setPreset(PresetsActions.pr01, $event)
+                  "
                 &gt;
                   &lt;template #item="{ props, item }"&gt;
                     &lt;v-list-item
@@ -2521,7 +2439,9 @@
                       :title="item.raw.Name"
                       lines="three"
                       @mousedown.prevent
-                      @click="setPreset(PresetsActions.pr01, item.raw)"
+                      @click="
+                        payloadHandler.setPreset(PresetsActions.pr01, item.raw)
+                      "
                     &gt;
                       &lt;template v-slot:prepend&gt;
                         &lt;v-icon
@@ -2559,7 +2479,9 @@
                   }"
                   placeholder="Select a Colour Preset"
                   return-object
-                  @update:modelValue="setPreset(PresetsActions.pr02, $event)"
+                  @update:modelValue="
+                    payloadHandler.setPreset(PresetsActions.pr02, $event)
+                  "
                 &gt;&lt;/v-select&gt;
               &lt;/v-card-actions&gt;
             &lt;/v-expansion-panel-text&gt;
@@ -2600,7 +2522,7 @@
           id="webgl-container"
           @on_payload="handleOnPayload"
           @instance_loaded="load"
-          @hover="hoverOverCanvas"
+          @hover="payloadHandler.hoverOverCanvas($event)"
         &gt;
           &lt;div
             class="bordered-event-window"
@@ -2640,7 +2562,7 @@
                     &lt;div v-if="scanState.Layout.PositionData.length === 1"&gt;
                       &lt;v-btn
                         color="transparent"
-                        @click="layouts(previousLayout)"
+                        @click="payloadHandler.layouts(previousLayout)"
                         :icon="true"
                       &gt;
                         &lt;v-icon color="white"&gt;fullscreen_exit&lt;/v-icon&gt;
@@ -2842,6 +2764,8 @@ import { generateDivStyleForLayout } from "@/helpers/layoutOverlayStyle";
 import {
   FileManagementActions,
   FrontEndInterfaces,
+  LayoutActions,
+  NotificationsActions,
   PositionData,
   PresetsActions,
   ScanMovementActions,
@@ -2877,6 +2801,7 @@ import {
   initialScanState,
   isLayout1x3,
   isLayout2x2,
+  previousLayout,
   scanState,
   setInitialScanStateFromPayload,
   setScanStateFromPayload,
@@ -2890,16 +2815,14 @@ import {
 } from "@/dataLayer/scanState";
 import { getIconForPreset } from "@/dataLayer/iconData";
 &nbsp;
-const emit = defineEmits&lt;{
-  instanceLoaded: [void];
-  snap: [void];
-}&gt;();
-&nbsp;
 export interface Props {
   payload?: LoadViewerPayload;
   options?: LoadViewerOptions;
 }
 &nbsp;
+const emit = defineEmits&lt;{
+  instanceLoaded: [void];
+}&gt;();
 const props = withDefaults(defineProps&lt;Props&gt;(), {
   payload: () =&gt; ({
     Url: "https://webgl-3dr.singular.health/test_scans/8bdddee1-e581-485d-827d-6aa12eef2fc8/Head+Axial+Axial.3vxl",
@@ -2913,27 +2836,12 @@ const props = withDefaults(defineProps&lt;Props&gt;(), {
 &nbsp;
 const web_gl = ref&lt;typeof WebGL3DR | null&gt;(null);
 const payloadHandler = new PayloadHandler(web_gl);
-&nbsp;
-function executeOption(key: keyof LoadViewerOptions) {
-  if (unref(isDemo)) <span class="branch-0 cbranch-no" title="branch not covered" >{</span>
-<span class="cstat-no" title="statement not covered" >    executeDemoOption(key);</span>
-  } else {
-    const functionToExecute = unref(props.options)[key];
-    if (functionToExecute !== undefined) {
-      functionToExecute();
-    }
-  }
-}
-&nbsp;
-const emptyPayload = { Version: "1.1.0" };
-&nbsp;
 const value = ref&lt;boolean&gt;(false);
 const drawer = ref&lt;boolean&gt;(true);
 const drawerCollapsed = ref&lt;boolean&gt;(true);
 const scanLoading = ref&lt;boolean&gt;(true);
 const instanceLoaded = ref&lt;boolean&gt;(true);
 const openPanels = ref&lt;number&gt;(0);
-const previousLayout = ref&lt;string&gt;("lo_02");
 const footerItems = ref([
   {
     text: "Reset Scan",
@@ -2963,7 +2871,6 @@ const footerItems = ref([
     click: async () =&gt; executeOption("OnScreenshot"),
   },
 ]);
-&nbsp;
 const miniMenu = ref([
   {
     icon: "display_settings",
@@ -2972,11 +2879,21 @@ const miniMenu = ref([
       "Tissue Density - Change the view of density within the scan, allowing you to see through a certain density of particles",
   },
 ]);
-&nbsp;
 const rotationDeg = ref&lt;number&gt;(0);
 const stateOverlay = ref&lt;boolean&gt;(false);
 const m_closeDialog = ref&lt;boolean&gt;(false);
 &nbsp;
+function executeOption(key: keyof LoadViewerOptions) {
+  if (unref(isDemo)) {
+    executeDemoOption(key);
+  } else {
+    const functionToExecute = unref(props.options)[key];
+    if (functionToExecute !== undefined) {
+      functionToExecute();
+    }
+  }
+}
+&nbsp;
 type WatchSlidersType = { [key in SlidersActions]: WatchSource&lt;number&gt; };
 const watchSliders: WatchSlidersType = {
   [SlidersActions.sl01]: () =&gt; scanState.value.Display.Brightness,
@@ -3048,17 +2965,9 @@ function getViewName(index: number) {
     })[index];
 }
 async function fullscreenLayout(view: ScanView) {
-  await layouts("lo_01");
+  await payloadHandler.layouts(LayoutActions.lo01);
   await payloadHandler.viewSelection(`vs_0${view + 1}` as ViewSelectionActions);
 }
-// async function scanMovementHandler(action: string, value: number) {
-//   if (unref(transactionStarted)) return;
-//   await scanMovement(action, value);
-// }
-// async function sliderHandler(action: string, value: number) {
-//   if (unref(transactionStarted)) return;
-//   await slider(action, value);
-// }
 &nbsp;
 function closeModal() {
   m_closeDialog.value = false;
@@ -3081,31 +2990,6 @@ async function load() {
   await sendPayload(web_gl, "file_management", "fm_01", props.payload);
 }
 &nbsp;
-async function layouts(action: string) {
-  if (action !== "lo_01") previousLayout.value = action;
-  await sendPayload(web_gl, FrontEndInterfaces.layout, action, emptyPayload);
-}
-async function snap() {
-  emit("snap");
-}
-&nbsp;
-async function setPreset(action: PresetsActions, preset: any) {
-  await sendPayload(web_gl, "presets", action, preset);
-  if (action === PresetsActions.pr02) {
-    currentColourPreset.value = preset;
-  }
-}
-&nbsp;
-async function hoverOverCanvas(isHovering: boolean) {
-  await sendPayload(web_gl, "interactivity", "in_01", {
-    Version: "0.0.1",
-    Value: isHovering,
-  });
-  await sendPayload(web_gl, "interactivity", "in_02", {
-    Version: "0.0.1",
-    Value: isHovering,
-  });
-}
 async function i_fileManagement(action: string, message: string) {
   if (action === FileManagementActions.fm02) {
     await setInitialScanStateFromPayload(action, message);
@@ -3114,7 +2998,7 @@ async function i_fileManagement(action: string, message: string) {
     transactionStarted.value = false;
     scanLoading.value = false;
     drawerCollapsed.value = false;
-    await hoverOverCanvas(false);
+    await payloadHandler.hoverOverCanvas(false);
   }
 }
 &nbsp;
@@ -3130,7 +3014,7 @@ function handleOnPayload(
     i_fileManagement(actionSet, message);
   }
   if (interfaceSet === FrontEndInterfaces.notifications) {
-    handleNotification(actionSet, message);
+    handleNotification(actionSet as NotificationsActions, message);
   }
 }
 &nbsp;
@@ -3140,23 +3024,16 @@ defineExpose({
   handleOnPayload,
   sendPayload,
   getIconForPreset,
-  cSlider,
-  sSlider,
-  tSlider,
   thresholdSlider,
   windowSlider,
   m_closeDialog,
   closeModal,
-  snap,
   scanState,
   initialScanState,
   footerItems,
-  // rotateByDeg,
   getCurrentActiveView,
   getViewName,
   fullscreenLayout,
-  layouts,
-  setPreset,
   value,
   transactionStarted,
 });
@@ -3226,7 +3103,7 @@ defineExpose({
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-10T05:32:35.256Z
+                at 2024-04-10T07:23:57.146Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>