Работа над интерактивным обучением для дежурного и мед. сестры

resources/js/Components/Tour/TourOverlay.vue

@@ -5,16 +5,50 @@ const props = defineProps({
     rect: {
         type: Object,
         required: true
+    },
+    allowInteraction: {
+        type: Boolean,
+        default: true
     }
 })
 
-const style = computed(() => {
-    const r = props.rect
+const overlayStyle = computed(() => {
+
+    if (!props.rect) return null;
+
+    const { top, left, width, height } = props.rect
+
     return {
-        "--top": `${r.top}px`,
-        "--left": `${r.left}px`,
-        "--width": `${r.width}px`,
-        "--height": `${r.height}px`
+        top: {
+            top: 0,
+            left: 0,
+            width: '100vw',
+            height: `${top}px`
+        },
+        left: {
+            top: `${top}px`,
+            left: 0,
+            width: `${left}px`,
+            height: `${height}px`
+        },
+        right: {
+            top: `${top}px`,
+            left: `${left+width}px`,
+            width: `calc(100vw - ${left+width}px)`,
+            height: `${height}px`
+        },
+        bottom: {
+            top: `${top+height}px`,
+            left: 0,
+            width: "100vw",
+            height: `calc(100vh - ${top+height}px)`
+        },
+        highlight: {
+            top: `${top}px`,
+            left: `${left}px`,
+            width: `${width}px`,
+            height: `${height}px`
+        },
     }
 })
 </script>
@@ -24,10 +58,32 @@ const style = computed(() => {
 
 <Teleport to="body">
     <Transition name="tour-fade">
-        <div
-            class="tour-overlay"
-            :style="style"
-        />
+        <div v-if="rect && overlayStyle">
+            <div
+                class="tour-mask"
+                :style="overlayStyle.top"
+            />
+            <div
+                class="tour-mask"
+                :style="overlayStyle.left"
+            />
+            <div
+                class="tour-mask"
+                :style="overlayStyle.right"
+            />
+            <div
+                class="tour-mask"
+                :style="overlayStyle.bottom"
+            />
+            <div
+                class="tour-highlight"
+                :style="overlayStyle.highlight"
+            />
+            <div
+                v-if="!allowInteraction"
+                class="tour-blocker"
+            />
+        </div>
     </Transition>
 </Teleport>
 
@@ -35,28 +91,27 @@ const style = computed(() => {
 
 
 <style scoped>
+.tour-mask {
+    position: fixed;
+    z-index: 9998;
+    background: rgba(0,0,0,.55);
+    pointer-events: auto;
+}
 
-.tour-overlay {
+.tour-blocker {
     position: fixed;
     inset: 0;
     z-index: 9998;
-    pointer-events: none;
-    background: rgba(0,0,0,.55);
+    background: transparent;
+    pointer-events: auto;
+}
 
-    /*
-       вырезаем окно
-    */
-    mask:
-        linear-gradient(#000 0 0),
-        linear-gradient(#000 0 0);
-    mask-size:
-        100% 100%,
-        var(--width) var(--height);
-    mask-position:
-        0 0,
-        var(--left) var(--top);
-    mask-repeat:no-repeat;
-    mask-composite: exclude;
+.tour-highlight {
+    position: fixed;
+    z-index: 9998;
+    border: 2px solid white;
+    border-radius: 8px;
+    pointer-events: none;
 }
 
 .tour-fade-enter-active,
@@ -68,4 +123,4 @@ const style = computed(() => {
 .tour-fade-leave-to {
     opacity: 0;
 }
-</style>
+</style>