gs-bim-air 3.0.3 → 3.0.5

package/src/viewerWrapper/commands/showPathRoam/showPathRoam.vue

@@ -1,573 +0,0 @@
-<template>
-  <div class="showPathRoam">
-    <div v-if="!isEditPath" class="part-one">
-      <div style="margin: 10px">
-        <el-button type="primary" round size="mini" :disabled="animationState === 1" @click="addPathRoamClick">
-          <i class="el-icon-plus"></i>
-          创建路径
-        </el-button>
-      </div>
-      <gs-divider style="width: calc(100% - 20px); margin-left: 10px" />
-      <div class="roam-list-wrapper">
-        <div style="text-align: center; padding: 10px; color: #aaa" v-if="roamList.length === 0">
-          <i class="el-icon-warning-outline" style="padding-right: 10px"></i>
-          请添加路径
-        </div>
-        <div
-          v-for="(item, index) in roamList"
-          class="roam-item"
-          :class="activeRoamIndex === index ? 'isActive' : 'notActive'"
-          @click="activeRoamIndex = index"
-          :key="index">
-          <div class="name">
-            <i
-              style="padding-right: 10px; cursor: pointer"
-              :class="
-                animationState === 1 && activeRoamIndex === index
-                  ? 'GSBimAir icon-24gf-stopCircle'
-                  : 'GSBimAir icon-bofang'
-              "
-              @click="playPathRoamToggleClick(index, false)" />
-            {{ item.name }}
-          </div>
-          <div class="operate">
-            <!-- <el-button
-              size="mini"
-              type="text"
-              @click="playPathRoamToggleClick(index)"
-            >
-              <i
-                style="padding-right: 10px"
-                :class="
-                  animationState === 0 && activeRoamIndex === index
-                    ? 'GSBimAir icon-bofang'
-                    : 'GSBimAir icon-24gf-stopCircle'
-                "
-              />
-            </el-button>
-
-            <el-button
-              size="mini"
-              type="text"
-              v-if="animationState !== 0"
-              @click="playPauseToggleClick(index)"
-            >
-              <i
-                style="padding-right: 10px"
-                :class="
-                  animationState === 1 && activeRoamIndex === index
-                    ? 'GSBimAir icon-zanting'
-                    : 'GSBimAir icon-bofang'
-                "
-              />
-            </el-button> -->
-            <el-button
-              size="mini"
-              type="text"
-              :disabled="animationState === 1"
-              @click.stop.prevent="editRoamPathClick(index)">
-              编辑
-            </el-button>
-            <el-button
-              size="mini"
-              type="text"
-              :disabled="animationState === 1"
-              @click.stop.prevent="deleteRoamPathClick(item.id)">
-              删除
-            </el-button>
-          </div>
-        </div>
-      </div>
-      <gs-divider style="width: calc(100% - 20px); margin-left: 10px"></gs-divider>
-      <div class="bottom-button">
-        <el-button size="mini" type="info" round :disabled="animationState === 1" @click="deleteAllRoamClick">
-          删除全部
-        </el-button>
-      </div>
-    </div>
-
-    <div v-else class="part-two">
-      <div style="margin: 5px 0">
-        <el-button type="text" size="mini" :disabled="animationState === 1" @click="returnPathListClick">
-          <i class="el-icon-arrow-left"></i>
-          返回
-        </el-button>
-      </div>
-      <gs-divider></gs-divider>
-      <div class="roam-form">
-        <div class="row">
-          <div class="label">路径名称:</div>
-          <div class="input">
-            <el-input
-              size="mini"
-              v-model="roamForm.name"
-              :disabled="animationState === 1"
-              @blur="nameChange"></el-input>
-          </div>
-        </div>
-        <div class="row">
-          <div class="label">漫游时间:</div>
-          <div class="input">
-            <el-input size="mini" v-model="roamForm.roamTime" :disabled="animationState === 1" @blur="timeChange">
-              <div slot="suffix" style="line-height: 28px; font-size: 16px">s</div>
-            </el-input>
-          </div>
-        </div>
-      </div>
-
-      <gs-divider></gs-divider>
-      <div style="padding: 8px 0">
-        <el-button size="mini" type="primary" round :disabled="animationState === 1" @click="addRoamPointClick">
-          <i class="el-icon-plus"></i>
-          添加漫游点
-        </el-button>
-        <el-button
-          size="mini"
-          type="info"
-          round
-          :disabled="animationState === 1 || roamForm.paths?.length == 0"
-          @click="deleteAllRoamPointClick">
-          <i class="el-icon-delete"></i>
-          删除全部
-        </el-button>
-      </div>
-      <gs-divider></gs-divider>
-      <div class="roam-list-wrapper">
-        <div style="text-align: center; padding: 10px; color: #a4a4a4" v-if="roamForm.paths?.length === 0">
-          <i class="el-icon-warning-outline" style="padding-right: 10px"></i>
-          请添加漫游点
-        </div>
-        <div
-          v-for="(item, index) in roamForm?.paths"
-          class="roam-item"
-          :key="index"
-          @click.stop.prevent="setCameraClick(index)"
-          :disabled="animationState === 1">
-          <div class="name">漫游点{{ index }}</div>
-          <div class="operate">
-            <el-button
-              size="mini"
-              type="text"
-              v-if="index !== roamForm.paths?.length - 1"
-              :disabled="animationState === 1"
-              @click.stop="playRoamPointClick(index)">
-              播放
-            </el-button>
-            <el-button
-              size="mini"
-              type="text"
-              :disabled="animationState === 1"
-              @click.stop="deleteRoamPointClick(index)">
-              删除
-            </el-button>
-          </div>
-        </div>
-      </div>
-      <gs-divider></gs-divider>
-
-      <div class="bottom-button">
-        <el-button
-          size="mini"
-          type="text"
-          @click="playPathRoamToggleClick(activeRoamIndex, false)"
-          :disabled="roamForm.paths?.length <= 1">
-          <i
-            style="padding-right: 10px"
-            :class="animationState === 0 ? 'GSBimAir icon-bofang' : 'GSBimAir icon-24gf-stopCircle'" />
-          {{ animationState === 0 ? "播放" : "停止" }}
-        </el-button>
-
-        <el-button size="mini" type="text" v-if="animationState !== 0" @click="playPauseToggleClick(activeRoamIndex)">
-          <i
-            style="padding-right: 10px"
-            :class="animationState === 1 ? 'GSBimAir icon-zanting' : 'GSBimAir icon-bofang'" />
-          {{ animationState === 1 ? "暂停" : "继续" }}
-        </el-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { MessageBox } from "element-ui";
-import * as Longan from "gs-longan";
-import { Component, Inject, Prop, Vue } from "vue-property-decorator";
-import GsDivider from "../../../components/gs/gsDivider/gs-divider.vue";
-import { AnimationState } from "gs-bim-air-core/gsDevFx/managers/animationManager";
-import { PathRoam, RoamObject } from "gs-bim-air-core/gsDevFx/objects/roamObject";
-import CommandShowPathRoam from "../showPathRoam/commandShowPathRoam";
-import { Viewer } from "gs-bim-air-core/gsDevFx/viewer";
-import store from "../../../store";
-import getRelatedIds from "../../../viewerWrapper/module/getRelatedIds";
-
-@Component({
-  components: { GsDivider },
-})
-export default class ShowPathRoam extends Vue {
-  @Prop() componentData;
-  @Inject() getViewer;
-  defaultCommandData: RoamObject[] = [];
-  isEditPath = false;
-  // 当前正在编辑的索引
-  // activeRoamIndex = -1;
-  commandShowPathRoam: CommandShowPathRoam;
-  // isPlaying = false;
-  // isPausing = false;
-  animationState: AnimationState = AnimationState.stop;
-
-  get roamForm(): PathRoam {
-    return (
-      this.componentData || {
-        id: "",
-        name: "路径" + (this.roamList.length + 1),
-        roamTime: 20,
-        paths: [],
-      }
-    );
-  }
-
-  get viewer(): Viewer {
-    return this.getViewer();
-  }
-
-  get roamList(): PathRoam[] {
-    // return this.componentData || this.defaultCommandData;
-    return this.viewer.pathRoamManager.pathRoams;
-  }
-
-  get activeRoamId() {
-    return this.viewer.pathRoamManager.activeRoamId;
-  }
-
-  get activeRoamIndex() {
-    return this.viewer.pathRoamManager.activeRoamIndex;
-  }
-
-  set activeRoamIndex(val: number) {
-    this.viewer.pathRoamManager.activeRoamIndex = val;
-  }
-
-  addPathRoamClick() {
-    this.isEditPath = true;
-    // console.log("this.roamForm", this.roamForm);
-    this.viewer.pathRoamManager
-      .addPathRoam({
-        id: "",
-        name: "路径" + (this.roamList.length + 1),
-        roamTime: 20,
-        paths: [],
-      })
-      .then((data) => {
-        if (data) {
-          this.commandShowPathRoam.commandData = data;
-          this.commandShowPathRoam.updateCommandData();
-          console.log("addPathRoamClick", this.roamForm);
-        }
-      });
-  }
-
-  editRoamPathClick(roamPathIndex) {
-    this.isEditPath = true;
-    this.commandShowPathRoam.commandData = this.roamList[roamPathIndex];
-    this.commandShowPathRoam.updateCommandData();
-
-    this.viewer.pathRoamManager.activeRoamIndex = this.activeRoamIndex;
-  }
-
-  deleteRoamPathClick(id) {
-    MessageBox.confirm(`确定删除路径？`)
-      .then(() => {
-        this.viewer.pathRoamManager.deletePathRoam(id);
-      })
-      .catch(() => {});
-  }
-
-  deleteAllRoamPointClick() {
-    MessageBox.confirm(`确定删除全部漫游点？`)
-      .then(() => {
-        this.viewer.pathRoamManager.deleteAllRoamPoint(this.roamForm);
-      })
-      .catch(() => {});
-  }
-
-  /**
-   * @reDrawCurved 结束后是否重绘可视化路径.
-   */
-  playPathRoamToggleClick(index: number = 0, reDrawCurved: boolean) {
-    if (this.animationState === AnimationState.stop) {
-      this.animationState = AnimationState.running;
-    } else {
-      this.animationState = AnimationState.stop;
-    }
-    // this.isPlaying = !this.isPlaying;
-    // this.activeRoamIndex = index;
-    // this.commandShowPathRoam.activeRoamIndex = index;
-    if (this.animationState === AnimationState.running) {
-      // // if pausing
-      // if (this.isPausing) {
-      //   this.commandShowPathRoam.pathRoam.run([
-      //     this.commandShowPathRoam.animeId,
-      //   ]);
-      //   this.isPausing = false;
-      // } else {
-      // is stopping.
-      let success = this.commandShowPathRoam.playPathRoam(
-        this.roamForm,
-        () => {
-          // this.isPlaying = false;
-          this.animationState = AnimationState.stop;
-
-          this.commandShowPathRoam.stopPathRoam(this.commandShowPathRoam.animeId, reDrawCurved);
-        },
-        index
-      );
-      if (!success) {
-        this.animationState = AnimationState.stop;
-      }
-
-      // }
-    } else {
-      // if playing
-      this.commandShowPathRoam.stopPathRoam(this.commandShowPathRoam.animeId, reDrawCurved);
-      // this.isPlaying = false;
-      // this.animationState = AnimationState.running;
-    }
-  }
-
-  playPauseToggleClick(index) {
-    // this.isPlaying = !this.isPlaying;
-    if (this.animationState === AnimationState.pause) {
-      this.animationState = AnimationState.running;
-    } else {
-      this.animationState = AnimationState.pause;
-    }
-    // this.activeRoamIndex = index;
-
-    if (this.animationState === AnimationState.running) {
-      this.commandShowPathRoam.pathRoamAnimation.run([this.commandShowPathRoam.animeId]);
-    } else {
-      this.commandShowPathRoam.pathRoamAnimation.pauseAnime(this.commandShowPathRoam.animeId);
-      // this.isPlaying = false;
-      // this.isPausing = true;
-    }
-  }
-
-  playRoamPointClick(roamPointIndex) {
-    // this.isPlaying = true;
-    this.animationState = AnimationState.running;
-    let success = this.commandShowPathRoam.playPathRoam(
-      this.roamForm,
-      () => {
-        // this.isPlaying = false;
-        this.animationState = AnimationState.stop;
-
-        this.commandShowPathRoam.stopPathRoam(this.commandShowPathRoam.animeId);
-      },
-      roamPointIndex
-    );
-
-    if (!success) {
-      // this.isPlaying = false;
-      this.animationState = AnimationState.stop;
-    }
-  }
-
-  returnPathListClick() {
-    this.isEditPath = false;
-    this.commandShowPathRoam.commandData = {
-      id: "",
-      name: "路径" + this.roamList.length,
-      roamTime: 20,
-      paths: [],
-    };
-    this.commandShowPathRoam.updateCommandData();
-
-    // if (this.isPausing) {
-    //   this.isPausing = false;
-    // }
-    this.animationState = AnimationState.stop;
-
-    this.commandShowPathRoam.clearCurved(this.viewer);
-  }
-
-  setCameraClick(index) {
-    console.log("index:", index);
-    if (this.animationState === AnimationState.running) {
-      return;
-    }
-    let camera = this.viewer.camera;
-
-    let positionVec = this.roamForm.paths[index].position;
-    let targetVec = this.roamForm.paths[index].target;
-
-    let position = new Float64Array([positionVec.x, positionVec.y, positionVec.z]);
-    let target = new Float64Array([targetVec.x, targetVec.y, targetVec.z]);
-
-    let dir = Longan.DPoint.subtract(target, position);
-    Longan.DVector.normalize(dir);
-
-    let z_Axis: Float64Array = new Float64Array([0, 0, 1]);
-    if (Longan.DVector.angle(dir, z_Axis) === 0 || Longan.DVector.angle(dir, z_Axis) === Math.PI) {
-      z_Axis = new Float64Array([1, 0, 0]);
-    }
-    let newUp = Longan.DVector.cross(Longan.DVector.cross(dir, z_Axis), dir);
-    Longan.DVector.normalize(newUp);
-
-    camera.position = new Longan.Vector3(...position);
-    camera.target = new Longan.Vector3(...target);
-    camera.upVector = new Longan.Vector3(...newUp);
-    camera.update();
-  }
-
-  nameChange() {
-    this.viewer.pathRoamManager.editPathRoam(this.roamForm);
-  }
-
-  timeChange() {
-    this.viewer.pathRoamManager.editPathRoam(this.roamForm);
-  }
-
-  addRoamPointClick() {
-    this.viewer.pathRoamManager.addRoamPoint(this.roamForm);
-    console.log("this.roamForm: ", this.roamForm);
-  }
-
-  deleteRoamPointClick(index) {
-    MessageBox.confirm(`确定删除点:${"漫游点" + index}？`)
-      .then(() => {
-        this.viewer.pathRoamManager.deleteRoamPoint(this.roamForm, index);
-      })
-      .catch(() => {});
-  }
-
-  deleteAllRoamClick() {
-    MessageBox.confirm(`确定删除全部漫游路径？`)
-      .then(() => {
-        this.viewer.pathRoamManager.deleteAllPathRoam();
-      })
-      .catch(() => {});
-  }
-
-  setData() {
-    this.$emit("setData", {
-      icon: "path",
-      title: "路径漫游",
-      width: "300px",
-      bottom: "10px",
-      right: "10px",
-    });
-  }
-
-  mounted() {
-    this.setData();
-
-    let commandShowPathRoam = this.viewer.process.commandManager.currentCommand as CommandShowPathRoam;
-    if (commandShowPathRoam.typeName === "CommandShowPathRoam") {
-      this.commandShowPathRoam = commandShowPathRoam;
-    }
-    // this.activeRoamIndex = 0;
-    this.viewer.pathRoamManager.getPathRoams();
-    // this.addPathRoamClick();
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../../assets/scss/site";
-@import "../../../assets/theme/handle.scss";
-
-.showPathRoam {
-  // width: 300px;
-  // min-height: 400px;
-  text-align: left;
-  // padding: 10px 0;
-  font-size: 12px;
-  // background: $model-theme-light;
-  background: transparent;
-}
-
-.part-one,
-.part-two {
-  display: flex;
-  flex-direction: column;
-  height: 300px;
-  padding: 0 10px;
-  :deep(.el-input__inner) {
-    background: transparent;
-    border: 1px solid #aaa;
-    border-radius: 4px;
-    color: $gs-primary-fontColor;
-  }
-}
-.part-one {
-  padding: 0px;
-}
-.roam-form {
-  .row {
-    display: flex;
-    margin-bottom: 4px;
-    margin: 10px;
-    .label {
-      line-height: 28px;
-      flex: 1;
-    }
-
-    .input {
-      flex: 2;
-    }
-  }
-}
-
-.roam-list-wrapper {
-  flex: 1;
-  overflow: auto;
-  // background: $gs-primary-background4;
-
-  .roam-item {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 10px;
-    align-items: center;
-    height: 35px;
-    line-height: 35px;
-    cursor: pointer;
-    //border-bottom: 2px solid $model-theme;
-
-    &:hover {
-      background: $gs-primary-background4;
-      .operate {
-        display: inline-block;
-        line-height: 38px;
-      }
-    }
-
-    &:active {
-      color: $web-theme;
-    }
-
-    .name {
-      line-height: 38px;
-    }
-
-    .operate {
-      display: none;
-      line-height: 38px;
-    }
-  }
-  .isActive {
-    color: $gs-primary-active;
-  }
-  .notActive {
-    color: $gs-primary-fontColor;
-  }
-}
-
-.bottom-button {
-  display: flex;
-  justify-content: flex-end;
-  padding: 10px;
-}
-.el-button--text {
-  color: $gs-primary-active;
-}
-</style>