index.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. <template>
  2. <RightPano
  3. v-if="custom.currentModel && active && custom.showMode === 'fuse'"
  4. class="merge-layout"
  5. >
  6. <div class="actions-group">
  7. <Actions :items="actionItems" v-model:current="currentItem" />
  8. <Actions class="merge-action" :items="othActions" single />
  9. </div>
  10. <ui-group>
  11. <ui-group-option label="等比缩放">
  12. <template #icon>
  13. <ui-icon
  14. class="set-prop"
  15. ctrl
  16. :class="{ disabled: isOld || currentItem }"
  17. @click="router.push({
  18. name: RoutesName.proportion,
  19. params: { id: custom.currentModel!.id, save: '1' },
  20. })"
  21. type="ratio"
  22. tip="设置比例"
  23. />
  24. </template>
  25. <ui-input
  26. type="number"
  27. class="scale-input"
  28. v-model="custom.currentModel.scale"
  29. v-bind="modelRange.scaleRange"
  30. :ctrl="false"
  31. width="100%"
  32. >
  33. <template #preIcon><ui-icon type="a-1b1" /></template>
  34. <template #icon>%</template>
  35. </ui-input>
  36. </ui-group-option>
  37. <ui-group-option label="不透明度">
  38. <ui-input
  39. type="range"
  40. v-model="custom.currentModel.opacity"
  41. v-bind="modelRange.opacityRange"
  42. :ctrl="false"
  43. width="100%"
  44. >
  45. <template #icon>%</template>
  46. </ui-input>
  47. </ui-group-option>
  48. </ui-group>
  49. </RightPano>
  50. </template>
  51. <script lang="ts" setup>
  52. import { RoutesName, router } from "@/router";
  53. import { RightPano } from "@/layout";
  54. import { autoSaveFuseModels, defaultFuseModelAttrs, isOld } from "@/store";
  55. import { togetherCallback } from "@/utils";
  56. import { sdk, getSceneModel, modelRange, getFuseModel } from "@/sdk";
  57. import { useViewStack, useActive } from "@/hook";
  58. import {
  59. showLeftPanoStack,
  60. custom,
  61. modelsChangeStoreStack,
  62. showRightPanoStack,
  63. } from "@/env";
  64. import { ref, nextTick, watchEffect, computed, watch, reactive } from "vue";
  65. import { Dialog } from "bill/expose-common";
  66. import Actions from "@/components/actions-merge/index.vue";
  67. import type { ActionsProps, ActionsItem } from "@/components/actions/index.vue";
  68. import { listener } from "@/components/drawing/hook";
  69. import { clickListener, getOffset } from "@/utils/event";
  70. import { useRMenus } from "@/components/right-menu";
  71. const active = useActive();
  72. const actionItems: ActionsProps["items"] = [
  73. {
  74. icon: "move",
  75. text: "移动",
  76. action: () => {
  77. getSceneModel(custom.currentModel)?.enterMoveMode();
  78. return () => getSceneModel(custom.currentModel)?.leaveTransform();
  79. },
  80. },
  81. {
  82. icon: "a-rotate",
  83. text: "旋转",
  84. action: () => {
  85. getSceneModel(custom.currentModel)?.enterRotateMode();
  86. return () => {
  87. getSceneModel(custom.currentModel)?.leaveTransform();
  88. };
  89. },
  90. },
  91. {
  92. icon: "a-zoom",
  93. text: "缩放",
  94. action: () => {
  95. getSceneModel(custom.currentModel)?.enterScaleMode();
  96. return () => {
  97. getSceneModel(custom.currentModel)?.leaveTransform();
  98. };
  99. },
  100. },
  101. ];
  102. const othActions = reactive([
  103. {
  104. icon: "rectification",
  105. text: "配准",
  106. disabled: isOld,
  107. single: true,
  108. action: () => {
  109. router.push({
  110. name: RoutesName.registration,
  111. params: { id: custom.currentModel!.id, save: "1" },
  112. });
  113. },
  114. },
  115. {
  116. icon: "reset",
  117. text: "恢复默认",
  118. single: true,
  119. action: () => {
  120. reset();
  121. },
  122. },
  123. ]);
  124. const currentItem = ref<ActionsItem | null>(null);
  125. watchEffect(() => {
  126. if (!custom.currentModel) {
  127. currentItem.value = null;
  128. }
  129. });
  130. watch(
  131. () => custom.currentModel,
  132. () => {
  133. currentItem.value = null;
  134. }
  135. );
  136. const reset = async () => {
  137. if (custom.currentModel && (await Dialog.confirm("确定恢复默认?此操作无法撤销"))) {
  138. const rotation = getSceneModel(custom.currentModel)!.getDefaultRotation();
  139. Object.assign(custom.currentModel, {
  140. ...defaultFuseModelAttrs,
  141. rotation: {
  142. x: rotation.x,
  143. y: rotation.y,
  144. z: rotation.z,
  145. },
  146. });
  147. await nextTick();
  148. custom.currentModel && (custom.currentModel.bottom = 0);
  149. }
  150. };
  151. let unMount: (() => void) | null = null;
  152. useViewStack(() =>
  153. togetherCallback([
  154. showLeftPanoStack.push(ref(true)),
  155. showRightPanoStack.push(computed(() => !!custom.currentModel)),
  156. modelsChangeStoreStack.push(ref(true)),
  157. clickListener(
  158. document.querySelector("#layout-app") as HTMLDivElement,
  159. (pixel) => {
  160. const pos = sdk.getPositionByScreen(pixel);
  161. if (!custom.currentModel) return;
  162. unMount && unMount();
  163. setTimeout(() => {
  164. unMount = useRMenus(pixel, [
  165. {
  166. label: "移动到这里",
  167. icon: "close",
  168. handler() {
  169. getSceneModel(custom.currentModel!)?.moveModelTo(pixel, pos?.worldPos);
  170. },
  171. },
  172. ]);
  173. });
  174. },
  175. 2
  176. ),
  177. () => (currentItem.value = null),
  178. ])
  179. );
  180. useViewStack(autoSaveFuseModels);
  181. useViewStack(() => {
  182. const stopWatch = watchEffect(() => {
  183. if (custom.showMode === "pano") {
  184. sdk.hideGrid();
  185. } else {
  186. sdk.showGrid();
  187. }
  188. });
  189. return () => {
  190. sdk.hideGrid();
  191. stopWatch();
  192. };
  193. });
  194. </script>
  195. <style lang="scss" scoped>
  196. .actions-group {
  197. position: absolute;
  198. bottom: 100%;
  199. left: 0;
  200. width: 100%;
  201. margin-bottom: 10px;
  202. gap: 10px;
  203. display: flex;
  204. }
  205. .model-header {
  206. display: flex;
  207. justify-content: space-between;
  208. align-items: center;
  209. margin-bottom: 10px;
  210. p {
  211. font-size: 14px;
  212. color: #fff;
  213. }
  214. }
  215. .model-desc {
  216. color: rgba(255, 255, 255, 0.6);
  217. line-height: 18px;
  218. font-size: 12px;
  219. }
  220. .model-action {
  221. display: flex;
  222. align-items: center;
  223. > * {
  224. margin-left: 20px;
  225. }
  226. }
  227. </style>
  228. <style lang="scss">
  229. .merge-layout {
  230. position: relative;
  231. overflow: initial !important;
  232. top: calc(var(--editor-head-height) + var(--header-top) + 70px) !important;
  233. .ui-input .text.suffix input {
  234. padding-left: 5px;
  235. padding-right: 15px;
  236. }
  237. .ui-input .text.suffix .retouch {
  238. right: 5px;
  239. }
  240. }
  241. .set-prop {
  242. cursor: pointer;
  243. }
  244. .scale-input input {
  245. text-align: right;
  246. padding-right: 20px !important;
  247. }
  248. </style>