fuse-code/src/views/registration/index.vue

<template>
  <template v-if="model && sceneModel">
    <ControlPanl
      :group="[{ items: options }]"
      v-model="selectOptions"
      ref="selectExpose"
    />
    <ui-floating
      v-if="selectOptions.some(({ key }) => key === 'opacity')"
      :refer="opacityOptionEl"
      class="opacity-range"
      isTransform
      dire="right-center"
    >
      <div class="right-range floating-range strengthen">
        <div class="range-content">
          <div class="range-layout">
            <ui-input
              type="range"
              v-model="model.opacity"
              v-bind="modelRange.opacityRange"
              :moveCallback="changeRange"
              :ctrl="false"
              :input="false"
              width="100%"
            />
            <span class="num" :style="{ left: `${model.opacity}%` }"
              >{{ parseInt(model.opacity.toString()) }}%</span
            >
          </div>
        </div>
      </div>
      <!-- <div class="floating-range strengthen">
        <div class="range-content">
          <ui-input 
            type="range" 
            v-model="model.opacity"
            v-bind="modelRange.opacityRange" 
            :ctrl="false" 
            :input="false"
            width="100%"
          />
          <span class="num" :style="{left: `${model.opacity}%`}">{{parseInt(model.opacity.toString())}}%</span>
        </div>
      </div> -->
    </ui-floating>

    <!-- <div class="right-range floating-range strengthen">
      <div class="range-content">
        <span class="fun-ctrl" @click="model!.bottom += modelRange.bottomRange.step">+</span>
        <ui-input 
          type="range" 
          v-model="model.bottom"
          v-bind="modelRange.bottomRange" 
          :moveCallback="changeRange"
          :ctrl="false" 
          :input="false"
          width="100%"
        />
        <span class="fun-ctrl" @click="model!.bottom -= modelRange.bottomRange.step">-</span>
      </div>
    </div> -->

    <div class="ui-message tip-left">{{ $t("fuse.vre") }}</div>
    <div class="ui-message tip-right">{{ $t("fuse.hre") }}</div>
  </template>
</template>

<script setup lang="ts">
import { ref, computed, watch, watchEffect } from "vue";
import { ControlPanl } from "@/components/control-panl/";
import { modelRange, getSceneModel, sdk } from "@/sdk";
import { diffArrayChange, together, togetherCallback } from "@/utils";
import { useViewStack } from "@/hook";
import { autoSaveFuseModels, getFuseModel, leave } from "@/store";
import { router, RoutesName } from "@/router";
import {
  currentModelStack,
  custom,
  showMeasuresStack,
  showPathsStack,
  showPathStack,
  showTaggingsStack,
} from "@/env";

import type { ControlExpose } from "@/components/control-panl";

const isCurrent = computed(
  () => router.currentRoute.value.name === RoutesName.registration
);

const model = computed(() => {
  const modelId = router.currentRoute.value.params.id as string;
  if (isCurrent.value && modelId) {
    return getFuseModel(modelId);
  }
});

const sceneModel = computed(() => model.value && getSceneModel(model.value));
const options = [
  { desc: $t("fuse.move"), icon: "move", key: "move" },
  { desc: $t("fuse.flip"), icon: "flip", key: "rotate" },
  { desc: $t("fuse.opacity1"), icon: "transparency", key: "opacity" },
];
const selectOptions = ref<typeof options>([]);
const selectExpose = ref<ControlExpose>();
const opacityOptionEl = computed(() =>
  selectExpose.value?.dom?.querySelector('div[data-key="opacity"]')
);

const changeRange = (
  sp: ScreenLocalPos,
  cp: ScreenLocalPos,
  info: { start: number; locusWidth: number }
) => info.start + (sp.y - cp.y) / info.locusWidth;

watch(
  selectOptions,
  (nOptions, oOptions = []) => {
    const { added, deleted } = diffArrayChange(nOptions, oOptions);
    const setKeys = ["move", "rotate"];
    const addOptions = added.filter((option) => setKeys.includes(option.key));
    const delOptions = deleted.filter((option) => setKeys.includes(option.key));

    if (sceneModel.value) {
      if (!addOptions.length && delOptions.length) {
        sceneModel.value.leaveTransform();
      } else if (addOptions.length) {
        if (addOptions[0].key === "move") {
          sceneModel.value.enterMoveMode();
        } else {
          sceneModel.value.enterRotateMode();
        }
      }
    }
  },
  { immediate: true }
);

watchEffect((onCleanup) => {
  const smodel = sceneModel.value;
  if (smodel) {
    smodel.enterAlignment();
    const pop = currentModelStack.push(model as any);
    onCleanup(
      togetherCallback([
        currentModelStack.push(model as any),
        showPathStack.push(ref(undefined)),
        showPathsStack.push(ref(false)),
        showTaggingsStack.push(ref(false)),
        () => {
          smodel.leaveTransform();
          smodel.leaveAlignment();
        },
      ])
    );

    selectOptions.value = [options[0]];

    // onCleanup(() => {
    //   smodel.leaveTransform();
    //   smodel.leaveAlignment();
    //   showPathsStack.pop();
    //   showPathStack.pop();
    //   showTaggingsStack.pop();
    //   pop();
    // });
  } else if (isCurrent.value) {
    leave();
  }
});

useViewStack(() => {
  showMeasuresStack.push(ref(false));
  sdk.showGrid();

  return () => {
    showMeasuresStack.pop();
    if (selectOptions.value.length) {
      selectOptions.value = [];
    }
    sdk.hideGrid();
  };
});
useViewStack(autoSaveFuseModels);
</script>

<style lang="scss" scoped>
.floating-range {
  margin-left: 20px;
  transform: translateY(-50%);
  width: 162px;
  height: 32px;
  background: rgba(27, 27, 28, 0.8);
  box-shadow: inset 0px 0px 0px 2px rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 0 10px;
  .range-content {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 15px;
    .range-layout {
      height: 100%;
      width: 100%;
      position: relative;
      padding: 5px 0;
    }

    .num {
      position: absolute;
      color: #fff;
      top: 100%;
      transform: translateX(calc(-50% - 10px)) rotate(90deg);
      background: #000000;
      border-radius: 4px;
      padding: 2px 6px;
      font-size: 12px;
      pointer-events: none;
      white-space: nowrap;
    }
  }
}

.right-range {
  position: absolute;
  padding: 0;
  width: 220px;
  border-radius: 20px;
  height: 40px;
  right: 10px;
  top: 50%;
  z-index: 2;
  transform: translateX(40%) rotate(-90deg);

  .range-content {
    align-items: center;

    span {
      margin: 0 10px;
      font-size: 16px;
      transform: rotate(90deg);
      flex: none;
      color: #fff;
    }
  }
}

.tip-left,
.tip-right {
  top: calc(var(--editor-head-height) + var(--header-top) + 11px);
  z-index: 2;
}

.tip-left {
  left: 25%;
  transform: translateX(-50%);
}
.tip-right {
  left: 75%;
  transform: translateX(-50%);
}
</style>

<style>
.floating-range .ui-input .range .range-content {
  --slideSize: calc(var(--height) + 8px) !important;
}
.opacity-range {
  margin-left: 70px;
}
</style>