@realsee/dnalogel 2.1.0-alpha.4 → 2.1.0-alpha.5

package/libs/ModelItemLabelPlugin/ItemLabelItem.svelte

@@ -0,0 +1,100 @@
+<script>import "./events.type";
+import classNames from 'classnames';
+export let itemLabel;
+export let hooks;
+function onClick() {
+    console.log('__onclick___: ', itemLabel);
+    hooks.emit('onLabelClick', itemLabel);
+}
+</script>
+
+<div
+		class={classNames("item-label-item", { visible: itemLabel.visible })}
+		style:z-index="{itemLabel.zIndex}"
+		style:transform="{itemLabel.transform}"
+>
+	<div
+			class="item-label-item__text-wrap"
+			style="top: {`-${itemLabel.strokeLength + 26}px`}"
+	>
+			<span
+					class="item-label-item__text"
+					on:click="{onClick}"
+			>{itemLabel.name.length > 6 ? `${itemLabel.name.slice(0, 6)}...` : itemLabel.name}</span>
+	</div>
+	<div
+			class="item-label-item__bar"
+			style="height: {`${itemLabel.strokeLength}px`}">
+	</div>
+</div>
+
+<style>
+    .item-label-item {
+        position: absolute;
+        z-index: 0;
+        transform: none;
+        cursor: pointer;
+        pointer-events: none;
+        user-select: none;
+        opacity: 0;
+    }
+
+    .item-label-item.visible {
+        opacity: 1;
+        animation: fadeIn .3s ease-in;
+    }
+
+    .item-label-item__text-wrap::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, .3);
+        filter: blur(16px);
+        z-index: -1;
+    }
+
+    .item-label-item__text-wrap {
+        padding: 6px 6px 0;
+        position: absolute;
+        height: 20px;
+        pointer-events: all;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        white-space: nowrap;
+        line-height: 10px;
+        font-size: 11px;
+        font-weight: bold;
+        color: #FFEAC0;
+        transform: translate(-50%, 0);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .item-label-item__text {
+        padding-bottom: 4px;
+        border-top: 0 solid;
+        border-left: 0 solid;
+        border-right: 0 solid;
+        border-bottom: 1px solid;
+        border-image: linear-gradient(to right, rgba(234, 208, 154, 0), rgba(234, 208, 154, 100), rgba(234, 208, 154, 0)) 4.5 1 4.5;
+    }
+
+    .item-label-item__bar {
+        position: absolute;
+        bottom: 0;
+        width: 1px;
+        background-image: linear-gradient(to bottom, rgba(234, 208, 154, 0), rgba(234, 208, 154, 1));
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0
+        }
+        to {
+            opacity: 1
+        }
+    }
+</style>
+

package/libs/ModelItemLabelPlugin/ModelItemLabelPlugin.js

@@ -1,5 +1,5 @@
 import { Five, Subscribe } from "@realsee/five";
-import ItemLabelComponent from './ItemLabelComponent';
+import ItemLabelComponent from './ItemLabelComponent.svelte';
 import { DISPLAY_STRATEGY_TYPE } from "./typings";
 import { parseModelItemLabelPluginData } from "./utils/parseData";
 export const ModelItemLabelPlugin = (five, params) => {

package/libs/ModelItemLabelPlugin/typings.d.ts

@@ -1,6 +1,6 @@
 import type { Subscribe } from "@realsee/five";
 import type { PluginEvent } from "./events.type";
-import type ItemLabelComponent from './ItemLabelComponent';
+import type ItemLabelComponent from './ItemLabelComponent.svelte';
 export declare enum DISPLAY_STRATEGY_TYPE {
     SMALL = "small",
     MIDLLE = "middle",

package/libs/ModelRoomLabelPlugin/Controller.js

@@ -1,4 +1,4 @@
-import RoomLabelItems from './RoomLabelItems';
+import RoomLabelItems from './RoomLabelItems.svelte';
 import { parseModelRoomLabelPluginData } from './utils/parseData';
 export class ModelRoomLabelController {
     constructor(five) {

package/libs/ModelRoomLabelPlugin/RoomLabelItem.svelte

@@ -0,0 +1,63 @@
+<script>import { ROOM_LABEL_BG } from './Assets/roomLabelBg';
+export let five;
+export let roomLabel;
+function onClick() {
+    five.setState({ panoIndex: roomLabel.panoIndex, mode: 'Panorama', longitude: roomLabel.longitude });
+}
+</script>
+
+<div
+  class="room-label-item"
+  style:z-index="{roomLabel.zIndex}"
+  style:transform="{roomLabel.transform}"
+  style:opacity="{roomLabel.visible ? 1 : 0}"
+>
+  <span
+    class="room-label-item__text"
+    class:wide="{roomLabel.name.length > 3}"
+    style="background-image: url({ROOM_LABEL_BG})"
+    on:click="{onClick}">{roomLabel.name}</span
+  >
+  <div class="room-label-item__bar"></div>
+</div>
+
+<style>
+  .room-label-item {
+    position: absolute;
+    font-size: 8px;
+    z-index: 0;
+    transform: none;
+    cursor: pointer;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .room-label-item__text {
+    position: absolute;
+    left: 0;
+    top: -64px;
+    transform: translate(-50%, 0);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 20px;
+    min-width: 32px;
+    padding: 0 6px;
+    pointer-events: all;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    white-space: nowrap;
+  }
+
+  .room-label-item__bar {
+    position: absolute;
+    top: -44px;
+    height: 48px;
+    width: 1px;
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+  }
+
+  .wide {
+    font-size: 10px;
+  }
+</style>

package/libs/ModelRoomLabelPlugin/RoomLabelItems.svelte

@@ -0,0 +1,94 @@
+<script>import { onDestroy } from 'svelte';
+import { Raycaster, Vector3 } from 'three';
+import RoomLabelItem from './RoomLabelItem.svelte';
+export let five;
+export let roomLabels;
+let containerWidth;
+let containerHeight;
+let shownFloor = null;
+$: rendererSize = { x: containerWidth, y: containerHeight };
+$: {
+    // rendererSize 变化时，触发 reRender
+    roomLabels = getFormatedRoomLabels(rendererSize);
+}
+$: {
+    // shownFloor 变化时，更新 item visible
+    roomLabels = roomLabels.map((item) => {
+        const isLabelInFloor = shownFloor === null || item.floorIndex === shownFloor;
+        const visible = isLabelInFloor ? item.visible : false;
+        return Object.assign(Object.assign({}, item), { visible });
+    });
+}
+function getLabelVisible(item) {
+    const raycaster = new Raycaster();
+    const cameraPosition = five.camera.position.clone();
+    const position = new Vector3(item.position.x, item.position.y, item.position.z);
+    const vectorDistance = position.distanceTo(cameraPosition);
+    raycaster.set(cameraPosition.clone(), position.clone().sub(cameraPosition).normalize());
+    const [intersection] = five.model.intersectRaycaster(raycaster);
+    if (intersection && intersection.distance + 1 < vectorDistance)
+        return false;
+    return true;
+}
+function getLabelTransform(item, rendererSize) {
+    const position = new Vector3(item.position.x, item.position.y, item.position.z);
+    const mouse = position.clone().project(five.camera);
+    const xOffset = Math.ceil(((mouse.x + 1) / 2) * rendererSize.x);
+    const yOffset = Math.ceil(((-mouse.y + 1) / 2) * rendererSize.y);
+    return `translate(${xOffset}px, ${yOffset}px)`;
+}
+function getFormatedRoomLabels(rendererSize) {
+    // 因为 item distance 需要重复计算，所以缓存一下
+    const distanceMap = new Map();
+    function getItemDistance(item) {
+        const cacheDistance = distanceMap.get(item.id);
+        if (cacheDistance)
+            return cacheDistance;
+        const { x, y, z } = item.position;
+        const distance = new Vector3(x, y, z).clone().distanceTo(five.camera.position);
+        distanceMap.set(item.id, distance);
+        return distance;
+    }
+    const formatedItems = roomLabels.map((item) => {
+        const visible = getLabelVisible(item);
+        const transform = visible ? getLabelTransform(item, rendererSize) : item.transform;
+        const itemDistance = getItemDistance(item);
+        // visible === true 的 item 中，distance 比自己小的 item 个数
+        const minItemLen = roomLabels.filter((item) => item.visible && getItemDistance(item) < itemDistance).length;
+        const zIndex = minItemLen * 10;
+        return Object.assign(Object.assign({}, item), { visible, transform, zIndex });
+    });
+    return formatedItems;
+}
+function onFiveCameraUpdate() {
+    roomLabels = getFormatedRoomLabels(rendererSize);
+}
+function onFiveModelShownFloorChange(floorIndex) {
+    shownFloor = floorIndex;
+}
+five.on('cameraUpdate', onFiveCameraUpdate);
+five.on('modelShownFloorChange', onFiveModelShownFloorChange);
+onDestroy(() => {
+    five.off('cameraUpdate', onFiveCameraUpdate);
+    five.off('modelShownFloorChange', onFiveModelShownFloorChange);
+});
+</script>
+
+<div
+  class="room-labels-container"
+  bind:clientWidth="{containerWidth}"
+  bind:clientHeight="{containerHeight}"
+>
+  {#each roomLabels as roomLableItem (roomLableItem.id)}
+    <RoomLabelItem roomLabel="{roomLableItem}" five="{five}" />
+  {/each}
+</div>
+
+<style>
+  .room-labels-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    color: #fff;
+  }
+</style>

package/libs/PanoDoorLabelPlugin/Controller.js

@@ -1,6 +1,6 @@
 import { Euler, Quaternion, Raycaster, Vector3 } from 'three';
 import { BasePanoPluginController } from './BaseController';
-import DoorLabelItem from './DoorLabelItem';
+import DoorLabelItem from './DoorLabelItem.svelte';
 import { getCameraToward, getDistance, getToward, isTwoRectOverlaped } from './utils';
 const defaultBaseOptions = { userAction: true };
 /**

package/libs/PanoDoorLabelPlugin/DoorLabelItem.svelte

@@ -0,0 +1,200 @@
+<script>import classnames from 'classnames';
+export let props;
+export let onClick;
+let divElement;
+let { left, top, inSight, transform, panoIndex, cameraToward, name } = props;
+let prevPanoIndexRef = 0;
+const initPanoIndex = () => {
+    if (!left || !top || !inSight) {
+        return;
+    }
+    if (!divElement)
+        return;
+    const _width = (divElement.current.clientWidth / window.innerWidth) * 100;
+    const _height = (divElement.current.clientHeight / window.innerHeight) * 100;
+    if (left <= _width / 2 || left >= 100 - _width / 2) {
+        return;
+    }
+    if (top <= _height / 2 || top >= 100 - _height / 2) {
+        return;
+    }
+    const prevPanoIndex = prevPanoIndexRef;
+    if (panoIndex !== prevPanoIndex) {
+        // 触发埋点
+        console.log('panoDoorLabelPlugin', panoIndex, '触发埋点');
+        // 这里触发曝光埋点
+        prevPanoIndexRef = panoIndex;
+    }
+};
+$: {
+    initPanoIndex();
+}
+</script>
+
+<template>
+  <div
+    bind:this="{divElement}"
+    style="{`left: ${left || 0}%;top: ${top || 0}%;opacity: ${inSight ? 1 : 0}`}"
+    class="plugin-DoorLabelPlugin-item"
+  >
+    <div
+      class="{classnames('plugin-DoorLabelPlugin-cnt', props.toward)}"
+      style="{`transform: ${transform || 'initial'};pointer-events: ${
+        inSight ? 'auto' : 'none'
+      };opacity: ${inSight ? 1 : 0}`}"
+      data-camera-toward="{cameraToward}"
+      on:click="{(e) => {
+        if (onClick) onClick()
+      }}"
+    >
+      <span class="plugin-DoorLabelPlugin-txt">{name}</span>
+      <i class="plugin-DoorLabelPlugin-icon"></i>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+  .plugin-DoorLabelPlugin-item {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+  }
+
+  .plugin-DoorLabelPlugin-cnt {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: 2px;
+    background: rgba(0, 0, 0, 0.35);
+    line-height: 12px;
+    padding: 6px;
+    white-space: nowrap;
+    font-size: 12px;
+    font-style: normal;
+    // pointer-events: auto;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: transform ease 1s, background ease 0.3s, color ease 0.3s;
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      bottom: -1px;
+      right: -1px;
+      border-radius: 2px;
+      border: 1px solid rgba(0, 0, 0, 0);
+      border-image: url('//vrlab-image4.ljcdn.com/release/web/highlightCarouseal-border-image.14b51834.png')
+        4;
+      transition: opacity ease 0.3s;
+    }
+    &:active,
+    &:focus {
+      background: rgba(0, 0, 0, 0.5);
+      color: rgba(255, 255, 255, 0.5);
+    }
+  }
+
+  .plugin-DoorLabelPlugin-icon {
+    background: url('//vrlab-image4.ljcdn.com/release/web/DoorLabel-icon.de1304ae.svg') no-repeat;
+    background-size: 100%;
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin-left: 4px;
+    transform-origin: center;
+  }
+
+  .plugin-DoorLabelPlugin-cnt[data-camera-toward='forward'] {
+    &.left {
+      .plugin-DoorLabelPlugin-icon {
+        transform: rotate(90deg);
+      }
+    }
+    &.right {
+      .plugin-DoorLabelPlugin-txt {
+        order: 1;
+      }
+      .plugin-DoorLabelPlugin-icon {
+        transform: rotate(-90deg);
+        margin-left: 0;
+        margin-right: 4px;
+        order: 0;
+      }
+    }
+  }
+  .plugin-DoorLabelPlugin-cnt[data-camera-toward='right'] {
+    &.forward {
+      .plugin-DoorLabelPlugin-icon {
+        transform: rotate(90deg);
+      }
+    }
+    &.back {
+      .plugin-DoorLabelPlugin-txt {
+        order: 1;
+      }
+      .plugin-DoorLabelPlugin-icon {
+        transform: rotate(-90deg);
+        margin-left: 0;
+        margin-right: 4px;
+        order: 0;
+      }
+    }
+  }
+  .plugin-DoorLabelPlugin-cnt[data-camera-toward='left'] {
+    &.back {
+      .plugin-DoorLabelPlugin-icon {
+        transform: rotate(90deg);
+      }
+    }
+    &.forward {
+      .plugin-DoorLabelPlugin-txt {
+        order: 1;
+      }
+      .plugin-DoorLabelPlugin-icon {
+        transform: rotate(-90deg);
+        margin-left: 0;
+        margin-right: 4px;
+        order: 0;
+      }
+    }
+  }
+  .plugin-DoorLabelPlugin-cnt[data-camera-toward='back'] {
+    &.right {
+      .plugin-DoorLabelPlugin-icon {
+        transform: rotate(90deg);
+      }
+    }
+    &.left {
+      .plugin-DoorLabelPlugin-txt {
+        order: 1;
+      }
+      .plugin-DoorLabelPlugin-icon {
+        transform: rotate(-90deg);
+        margin-left: 0;
+        margin-right: 4px;
+        order: 0;
+      }
+    }
+  }
+
+  .plugin-DoorLabelPlugin-cnt--customBrand {
+    color: #f9eac1;
+    .plugin-DoorLabelPlugin-icon {
+      background: url('//vrlab-image4.ljcdn.com/release/web/arrow.6e8ec00e.svg') no-repeat;
+    }
+    &:active,
+    &:focus {
+      background: rgba(0, 0, 0, 0.5);
+      color: rgba(249, 234, 193, 0.5);
+    }
+  }
+</style>

package/libs/PanoRulerProPlugin/Controller.js

@@ -1,4 +1,4 @@
-import RulerItems from './RulerItems';
+import RulerItems from './RulerItems.svelte';
 export default class Controller {
     constructor(five, params) {
         var _a, _b;

package/libs/PanoRulerProPlugin/RulerItem.svelte

@@ -0,0 +1,166 @@
+<script>export let rulerItemProp;
+let _visible = true;
+let labelWidth;
+$: {
+    if (labelWidth >= rulerItemProp.width ||
+        labelWidth / 2 >= (rulerItemProp.labelOffset / 100) * rulerItemProp.width ||
+        labelWidth / 2 >= (1 - rulerItemProp.labelOffset / 100) * rulerItemProp.width) {
+        _visible = false;
+    }
+    else {
+        _visible = true;
+    }
+}
+let EM_DOTTED_BG = `data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjQiIHdpZHRoPSIxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGZpbHRlciBpZD0icHJlZml4X19hIiBoZWlnaHQ9IjQwMCUiIHdpZHRoPSIxMzcuNCUiIHg9Ii0xOC43JSIgeT0iLTE1MCUiPjxmZU1vcnBob2xvZ3kgaW49IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0iZGlsYXRlIiByYWRpdXM9Ii41IiByZXN1bHQ9InNoYWRvd1NwcmVhZE91dGVyMSIvPjxmZU9mZnNldCBpbj0ic2hhZG93U3ByZWFkT3V0ZXIxIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZU1vcnBob2xvZ3kgaW49IlNvdXJjZUFscGhhIiByYWRpdXM9IjEiIHJlc3VsdD0ic2hhZG93SW5uZXIiLz48ZmVPZmZzZXQgaW49InNoYWRvd0lubmVyIiByZXN1bHQ9InNoYWRvd0lubmVyIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIGluMj0ic2hhZG93SW5uZXIiIG9wZXJhdG9yPSJvdXQiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIgc3RkRGV2aWF0aW9uPSIuNSIvPjxmZUNvbG9yTWF0cml4IGluPSJzaGFkb3dCbHVyT3V0ZXIxIiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMiAwIi8+PC9maWx0ZXI+PHBhdGggaWQ9InByZWZpeF9fYiIgZD0iTS44ODkgMkgxMS41OCIvPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1kYXNoYXJyYXk9IjUgNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNwcmVmaXhfX2EpIiB4bGluazpocmVmPSIjcHJlZml4X19iIi8+PHVzZSBzdHJva2U9IiNmZmYiIHN0cm9rZS1vcGFjaXR5PSIuNCIgeGxpbms6aHJlZj0iI3ByZWZpeF9fYiIvPjwvZz48L3N2Zz4=`;
+$: vars = `--background-image: url(${EM_DOTTED_BG})`;
+</script>
+
+<div
+  class="PanoRulerPlugin-rule-line"
+  style:width="{rulerItemProp.width}px"
+  style:left="{rulerItemProp.left}px"
+  style:top="{rulerItemProp.top}px"
+  style:transform="rotate({rulerItemProp.rotateDeg}deg)"
+  style:display="{rulerItemProp.visible && _visible ? 'block' : 'none'}"
+>
+  {#if rulerItemProp.children.length === 0}
+    <em class="{rulerItemProp.state ? 'em-solid' : 'em-dotted'}" style="{vars}"></em>
+  {:else}
+    <div class="rule-mixed-line">
+      {#each rulerItemProp.children as child}
+        <div style:width="{child.width}px" class="{child.state ? 'em-solid' : 'em-dotted'}" style="{vars}"></div>
+      {/each}
+    </div>
+  {/if}
+  <div
+    class="PanoRulerPlugin-rule-label"
+    style:left="{rulerItemProp.labelOffset}%"
+  >
+    <div class="PanoRulerPlugin-rule-label-name" bind:offsetWidth="{labelWidth}">
+      {rulerItemProp.labelElement}
+    </div>
+  </div>
+</div>
+
+<style>
+  .PanoRulerPlugin-rule-line {
+    position: absolute;
+    transform-origin: left 0.0625rem;
+    width: 0;
+    height: 0.125rem;
+    pointer-events: none;
+  }
+
+  .PanoRulerPlugin-rule-line::after {
+    content: '';
+    position: absolute;
+    left: -0.125rem;
+    top: -0.1rem;
+    width: 0.25rem;
+    height: 0.25rem;
+    border-radius: 50%;
+    background: #fff;
+    z-index: 1;
+    animation: viewport-rule-point 0.1s 1s;
+    animation-fill-mode: both;
+  }
+
+  .PanoRulerPlugin-rule-line::before {
+    content: '';
+    position: absolute;
+    right: -0.125rem;
+    top: -0.1rem;
+    width: 0.25rem;
+    height: 0.25rem;
+    border-radius: 50%;
+    background: #fff;
+    z-index: 1;
+    animation: viewport-rule-point 0.1s 1.5s;
+    animation-fill-mode: both;
+  }
+
+  .PanoRulerPlugin-rule-line em {
+    display: block;
+    height: 0.0625rem;
+    animation: viewport-rule-line 0.5s ease 1s;
+    animation-fill-mode: both;
+    box-shadow: 0 0 0.25rem rgb(0 0 0 / 40%);
+    position: relative;
+  }
+
+  .rule-mixed-line {
+    display: flex;
+    height: 0.0625rem;
+    animation: viewport-rule-line 0.5s ease 1s;
+    animation-fill-mode: both;
+    align-items: center;
+  }
+
+  .em-solid {
+    height: 100%;
+    background: #ffffff;
+  }
+  .em-dotted {
+    height: 0.125rem;
+    background: var(--background-image);
+    background-position: center;
+    background-repeat: repeat;
+  }
+
+  .PanoRulerPlugin-rule-label {
+    position: absolute;
+    width: 0;
+    height: 0;
+    top: 0.0625rem;
+    pointer-events: none;
+  }
+
+  .PanoRulerPlugin-rule-label-name {
+    position: absolute;
+    padding: 0.1875rem 0.375rem;
+    background: rgba(195, 195, 195, 0.3);
+    backdrop-filter: blur(0.25rem);
+    -webkit-backdrop-filter: blur(0.25rem);
+    border-radius: 6.25rem;
+    border: 0.0625rem solid rgba(255, 255, 255, 0.6);
+    white-space: nowrap;
+    overflow: hidden;
+    color: #ffffff;
+    font-weight: 500;
+    font-size: 0.75rem;
+    line-height: 1;
+    -webkit-animation: viewport-rule-label 0.25s ease 1s;
+    animation: viewport-rule-label 0.25s ease 1s;
+    animation-fill-mode: both;
+    box-shadow: inset 0 0 0.625rem 0 rgba(255, 255, 255, 0.3);
+  }
+
+  @keyframes viewport-rule-line {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+
+  @keyframes viewport-rule-label {
+    0% {
+      opacity: 0;
+      transform: scaleX(0);
+    }
+    100% {
+      opacity: 1;
+      transform: translate(-50%, -50%) scaleX(1);
+    }
+  }
+
+  @keyframes viewport-rule-point {
+    0% {
+      transform: scaleX(0);
+    }
+    100% {
+      transform: scaleX(1);
+    }
+  }
+</style>