feat(架构调整): playground

playground/src/demos/basic.vue

@@ -1,24 +1,33 @@
 <script setup lang="ts">
 import { onMounted, inject } from 'vue'
 const __sdk: any = inject('__sdk')
+const onModeChange = (mode: string) => {
+  __sdk.Camera[mode]()
+}
 onMounted(() => {
   __sdk.mount('#scene').render()
 })
 </script>
 
 <template>
+  <div id="tools">
+    <button @click="onModeChange('panorama')">漫游</button>
+    <button @click="onModeChange('floorplan')">平面</button>
+    <button @click="onModeChange('dollhouse')">三维</button>
+  </div>
   <div id="scene"></div>
 </template>
 
 <style scoped>
-#scene {
-  width: 100vw;
-  height: 100vh;
-}
-#scene-front {
+#tools {
   position: absolute;
   left: 0;
   top: 0;
-  z-index: 2;
+  width: 100%;
+  z-index: 1000;
+}
+#scene {
+  width: 100%;
+  height: 100vh;
 }
 </style>

playground/src/demos/filter.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { onMounted, inject, reactive } from 'vue'
+const __sdk: any = inject('__sdk')
+const options = reactive([
+  {
+    type: 'brightness',
+    title: '亮度',
+    value: 0,
+  },
+  {
+    type: 'contrast',
+    title: '对比度',
+    value: 0,
+  },
+  {
+    type: 'temperature',
+    title: '色温',
+    value: 0,
+  },
+  {
+    type: 'saturation',
+    title: '饱和度',
+    value: 0,
+  },
+])
+const onChange = (option: any) => {
+  __sdk.FilterManager.edit[option.type](option.value / 20)
+}
+const onReset = () => {
+  options.forEach((option) => {
+    option.value = 0
+    onChange(option)
+  })
+}
+onMounted(() => {
+  __sdk.FilterManager.on('FilterManager.updateCurrentFilter', (info: any) => {
+    console.log(info)
+  })
+  __sdk.Scene.on('loaded', () => {
+    __sdk.FilterManager.edit.enter()
+  })
+  __sdk.mount('#scene').render()
+})
+</script>
+
+<template>
+  <div id="tools">
+    <ul>
+      <li v-for="option in options">
+        <label for="">{{ option.title }}</label>
+        <input
+          type="range"
+          min="-20"
+          max="20"
+          v-model="option.value"
+          @input="onChange(option)"
+        />
+      </li>
+      <li><button @click="onReset()">恢复默认</button></li>
+    </ul>
+  </div>
+  <div id="scene"></div>
+</template>
+
+<style scoped>
+#tools {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+}
+#scene {
+  width: 100%;
+  height: 100vh;
+}
+</style>

playground/src/demos/floorlogo.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { onMounted, inject, ref } from 'vue'
+const __sdk: any = inject('__sdk')
+const logo = ref(0)
+const size = ref(100)
+const getImageURL = (name: number) => {
+  return __sdk.resource.getAppURL(`images/floorlogos/${name}.png`)
+}
+const onClick = (name: number) => {
+  logo.value = name
+  __sdk.Scene.setFloorLogo({ url: getImageURL(name) })
+}
+const onSizeChange = () => {
+  console.log(size.value)
+  __sdk.Scene.setFloorLogo({ size: size.value })
+}
+onMounted(() => {
+  __sdk.mount('#scene').render()
+})
+</script>
+
+<template>
+  <div id="tools">
+    <div
+      v-for="(item, name) in 3"
+      :style="{ backgroundImage: `url(${getImageURL(name)})` }"
+      @click="onClick(name)"
+      :class="{ active: name == logo }"
+    ></div>
+    <input
+      type="range"
+      min="20"
+      max="180"
+      v-model="size"
+      @input="onSizeChange()"
+    />
+  </div>
+  <div id="scene"></div>
+</template>
+
+<style scoped lang="scss">
+#tools {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  > div {
+    cursor: pointer;
+    width: 128px;
+    height: 128px;
+    margin-left: 10px;
+    border: solid 1px rgba($color: #000000, $alpha: 0.6);
+    background-repeat: no-repeat;
+    background-size: 100%;
+    &.active {
+      border-color: aqua;
+    }
+  }
+}
+#scene {
+  width: 100%;
+  height: 100vh;
+}
+</style>

playground/src/demos/roam.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { onMounted, inject } from 'vue'
+const __sdk: any = inject('__sdk')
+const onSave = () => {
+  __sdk.WalkManager.edit.save((data: any, confirm: any) => {
+    console.log(data)
+    confirm()
+  })
+}
+onMounted(() => {
+  __sdk.Scene.on('loaded', () => {
+    __sdk.Scene.hideFloorCadImage()
+    __sdk.WalkManager.edit.enter()
+  })
+  __sdk.mount('#scene').render()
+})
+</script>
+
+<template>
+  <div id="tools">
+    <button @click="onSave">保存</button>
+  </div>
+  <div id="scene"></div>
+</template>
+
+<style scoped>
+#tools {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+}
+#scene {
+  width: 100%;
+  height: 100vh;
+}
+</style>

playground/src/demos/space/image.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { onMounted, inject } from 'vue'
+const __sdk: any = inject('__sdk')
+const onAdd = () => {
+  __sdk.VideoManager.BoxVideo.edit.add()
+}
+onMounted(() => {
+  __sdk.Scene.on('loaded', () => {
+    __sdk.VideoManager.BoxVideo.edit.enter()
+    setTimeout(() => {
+      __sdk.Scene.Decoration.edit.enterModule()
+    }, 3000)
+  })
+  __sdk.mount('#scene').render()
+})
+</script>
+
+<template>
+  <div id="tools">
+    <button @click="onAdd()">添加图片</button>
+  </div>
+  <div id="scene"></div>
+</template>
+
+<style scoped>
+#tools {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+}
+#scene {
+  width: 100%;
+  height: 100vh;
+}
+</style>

playground/src/demos/space/video.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { onMounted, inject } from 'vue'
+const __sdk: any = inject('__sdk')
+const onAdd = () => {
+  __sdk.VideoManager.BoxVideo.edit.add()
+}
+onMounted(() => {
+  __sdk.Scene.on('loaded', () => {
+    __sdk.Scene.Decoration.edit.enterModule()
+  })
+  __sdk.mount('#scene').render()
+})
+</script>
+
+<template>
+  <div id="tools">
+    <button @click="onAdd()">添加视频</button>
+  </div>
+  <div id="scene"></div>
+</template>
+
+<style scoped>
+#tools {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+}
+#scene {
+  width: 100%;
+  height: 100vh;
+}
+</style>

playground/src/demos/tag-delete.vue

@@ -1,27 +1,28 @@
 <script setup lang="ts">
-import { onMounted, inject, ref } from 'vue'
-
+import { onMounted, inject } from 'vue'
 const __sdk: any = inject('__sdk')
-const tags = ref<Array<Tag>>([])
 const onEnter = () => {
   __sdk.Plugins.TagEditor.enter()
 }
 const onLeave = () => {
   __sdk.Plugins.TagEditor.exit()
 }
+const onConfirm = () => {
+  const tag = __sdk.Plugins.TagEditor.confirm()
+  __sdk.TagManager.add(tag)
+}
 onMounted(() => {
   __sdk.use('TagView')
   __sdk.use('TagEditor')
-  __sdk.TagManager.on('loaded', (data: Array<Tag>) => (tags.value = data))
   __sdk.mount('#scene').render()
 })
 </script>
 
 <template>
   <div id="tools">
-    <ul>
-      <li v-for="tag in tags">{{ tag.title }}<button>删除</button></li>
-    </ul>
+    <button @click="onEnter">进入</button>
+    <button @click="onLeave">退出</button>
+    <button @click="onConfirm">确认</button>
   </div>
   <div id="scene"></div>
 </template>
@@ -29,24 +30,10 @@ onMounted(() => {
 <style scoped>
 #tools {
   position: absolute;
-  top: 20px;
-  right: 20px;
-  bottom: 20px;
-  width: 200px;
+  left: 50%;
+  top: 0;
   z-index: 1000;
-  border-radius: 8px;
-  background-color: rgba(0, 0, 0, 0.3);
-  border: solid 3px rgba(0, 0, 0, 0.6);
-}
-#tools ul {
-  margin: 0;
-  padding: 10px;
-}
-#tools li {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 10px;
+  transform: translateX(-50%);
 }
 #scene {
   width: 100vw;

playground/src/demos/tag/edit.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { onMounted, inject } from 'vue'
+const __sdk: any = inject('__sdk')
+const onEnter = () => {
+  __sdk.Plugins.TagEditor.enter()
+}
+const onLeave = () => {
+  __sdk.Plugins.TagEditor.exit()
+}
+onMounted(() => {
+  __sdk.use('TagView')
+  __sdk.use('TagEditor')
+  __sdk.mount('#scene').render()
+})
+</script>
+
+<template>
+  <div id="tools">
+    <button @click="onEnter">编辑</button>
+    <button @click="onLeave">退出</button>
+  </div>
+  <div id="scene"></div>
+</template>
+
+<style scoped>
+#tools {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  z-index: 1000;
+  transform: translateX(-50%);
+}
+#scene {
+  width: 100vw;
+  height: 100vh;
+}
+#scene-front {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+</style>

playground/src/demos/tour/record.vue

@@ -12,6 +12,9 @@ const p_progress = ref(0)
 const f_progress = ref(0)
 // 获取用户资源地址
 const getURL = (file: string) => {
+  if (file.indexOf('data:') === 0) {
+    return file
+  }
   return __sdk.resource.getUserResourceURL(file)
 }
 
@@ -34,7 +37,25 @@ const onSelect = (partId: number, frameId: number) => {
   }
 }
 
+const onAddPart = () => {}
+const onAddFrame = () => {
+  __sdk.Plugins.TourRecorder.addFrame()
+}
+const onClear = () => {
+  __sdk.Plugins.TourRecorder.clear()
+}
+
 onMounted(() => {
+  __sdk.use('TourRecorder').then((recorder: any) => {
+    recorder.on('change', (e: any) => {
+      if (e.action == 'add') {
+        if (e.type == 'frame') {
+          e.data.time = 3000
+        }
+      }
+    })
+  })
+
   __sdk.use('TourPlayer').then((player: any) => {
     player.on('play', () => (playing.value = true))
     player.on('pause', () => (playing.value = false))
@@ -95,9 +116,9 @@ onMounted(() => {
 
 <template>
   <div id="tools">
-    <!-- <button :disabled="playing" @click="addFrame">添加画面</button>
-    <button :disabled="playing" @click="addPart">添加片段</button>
-    <button :disabled="playing" @click="clear">清空</button> -->
+    <button :disabled="playing" @click="onAddPart">添加片段</button>
+    <button :disabled="playing" @click="onAddFrame">添加画面</button>
+    <button :disabled="playing" @click="onClear">清空</button>
     <button @click="onPlay">{{ playing ? '暂停' : '播放' }}</button>
   </div>
   <div id="tours">

playground/src/pages/Index.vue

@@ -11,13 +11,18 @@ interface MenuItem {
 
 const menu = ref<Array<MenuItem>>([
   { text: '基础用法', name: 'basic' },
+  { text: '固定截图', name: 'screenshot' },
+  { text: '动态截图', name: 'extract' },
+  { text: '场景滤镜', name: 'filter' },
+  { text: '漫游可行', name: 'roam' },
+  { text: '地面图标', name: 'floorlogo' },
   {
     text: '热点管理',
     name: 'tag',
     next: [
-      { text: '添加热点', name: 'tag-add' },
-      { text: '编辑热点', name: 'tag-add' },
-      { text: '删除热点', name: 'tag-delete' },
+      { text: '添加热点', name: 'tag/add' },
+      { text: '编辑热点', name: 'tag/edit' },
+      { text: '删除热点', name: 'tag/delete' },
     ],
   },
   {
@@ -28,8 +33,14 @@ const menu = ref<Array<MenuItem>>([
       { text: '播放导览', name: 'tour/play' },
     ],
   },
-  { text: '固定截图', name: 'screenshot' },
-  { text: '动态截图', name: 'extract' },
+  {
+    text: '空间装饰',
+    name: 'space',
+    next: [
+      { text: '添加视频', name: 'space/video' },
+      { text: '添加图片', name: 'space/image' },
+    ],
+  },
   { text: '户型图', name: 'cad/index' },
 ])
 
@@ -58,7 +69,6 @@ window.onhashchange = () => {
   menuSearch(undefined)
 }
 menuSearch(undefined)
-console.log(menu)
 let params = (window.location.hash || '').replace(/#\/?/, '')
 if (params.indexOf('app') === -1) {
   params = `app=${menu.value[0].name}`