🚧切换内容视图同步更新属性面板;修复路由存在的问题

Author: webbery

CHANGELOG.md

@@ -3,9 +3,9 @@
 
 #### 主模块
 - 插件化内容视图
-- 
 #### 扩展模块
 - 优化原视图界面显示
+- 使用[Google model view](https://modelviewer.dev)构建3D模型展示插件，支持glb,gltf格式
 
 #### 通讯模块
 - 当前资源库信息同步功能

src/civet.d.ts

@@ -201,6 +201,8 @@ declare module 'civet' {
          * @param listener a listener is defined for reading html file and it's content should be return
          */
         onViewInitialize(listener: () => string): void;
+        onNextResourceDisplay(): void;
+        onPrevResourceDisplay(): void;
     }
 
     export namespace window {

src/renderer/App.vue

@@ -99,7 +99,7 @@ export default {
       if (resourceInfo !== null) {
         resourceInfo['id'] = resourceID
         console.info('onResourceShow:', resourceInfo)
-        this.$router.push({name: 'view-resource', params: resourceInfo, query: {name: resourceInfo.filename, cmd: 'display'}})
+        this.$router.push({name: 'view-resource', params: resourceInfo, query: {name: resourceInfo.filename || resourceInfo.name, cmd: 'display'}})
       }
     },
     onClassOpen(classpath) {

src/renderer/components/HeaderBar.vue

@@ -149,7 +149,7 @@ export default {
     // },
     onUpdateHeadNav(query) {
       this.viewDesc = query.name
-      console.info(query.cmd)
+      console.info('onUpdateHeadNav', query.cmd)
       switch (query.cmd) {
         case 'display-tag':
         case 'display-all':

src/renderer/components/ImageOperator.vue

@@ -18,6 +18,7 @@ export default {
   },
   methods: {
     onUpdateDisplayName(name) {
+      console.info('display resource name:', name)
       this.filename = name
     }
   }
@@ -26,6 +27,7 @@ export default {
 
 <style scoped>
 div{
-  align-content: center;
+  display: flex;
+  justify-content: center;
 }
 </style>

src/renderer/components/Panel/ContentPanel.vue

@@ -50,19 +50,24 @@ export default {
     if (this.resource.type) {
       this.$ipcRenderer.on(IPCRendererResponse.ON_EXTENSION_CONTENT_UPDATE, this.onContentViewUpdate)
       this.$ipcRenderer.send(IPCNormalMessage.RETRIEVE_CONTENT_VIEW, this.resource.type)
-      bus.emit(bus.EVENT_UPDATE_NAV_DESCRIBTION, {name: '图片显示', cmd: 'display'})
-      // for (let idx = 0; idx < this.candidates.length; ++idx) {
-      //   if (this.candidates[idx].id === this.image.id) {
-      //     this.index = idx
-      //     this.$nextTick(() => {
-      //       bus.emit(bus.EVENT_DISPLAY_FILE_NAME, this.candidates[idx].filename)
-      //     })
-      //     break
-      //   }
-      // }
+      bus.emit(bus.EVENT_UPDATE_NAV_DESCRIBTION, {name: '资源', cmd: 'display'})
+      for (let idx = 0; idx < this.candidates.length; ++idx) {
+        if (this.candidates[idx].id === this.resource.id) {
+          this.index = idx
+          break
+        }
+      }
     } else {
       // unkonw file type
     }
+    this.$nextTick(() => {
+      bus.emit(bus.EVENT_DISPLAY_FILE_NAME, this.resource.filename || this.resource.name)
+    })
+  },
+  watch: {
+    $route: function(to, from) {
+      console.info('content panel, to: ', to, 'from:', from.path)
+    }
   },
   async updated() {
     if (this.isUpdated) return
@@ -76,19 +81,22 @@ export default {
       return
     }
     const path = require('path')
-    events.emit('ContentView:' + contentView, 'load', path.normalize(this.resource._path))
+    events.emit('ContentView:' + contentView, 'load', path.normalize(this.candidates[this.index].path))
     this.isUpdated = true
   },
   methods: {
     onClickNext() {
-      console.info('next image')
+      console.info('next image', this.index)
       if (this.index > this.candidates.length) {
         this.index = this.candidates.length
         return
       }
       this.index += 1
       bus.emit(bus.EVENT_DISPLAY_FILE_NAME, this.candidates[this.index].filename)
-      bus.emit(bus.EVENT_SELECT_IMAGE, this.candidates[this.index].id)
+      const id = this.candidates[this.index].id
+      this.$ipcRenderer.send(IPCNormalMessage.GET_SELECT_CONTENT_ITEM_INFO, {id: [id]})
+      const type = this.candidates[this.index].type
+      this.$ipcRenderer.send(IPCNormalMessage.RETRIEVE_CONTENT_VIEW, type)
     },
     onClickPrev() {
       console.info('prev image')
@@ -98,7 +106,10 @@ export default {
       }
       this.index -= 1
       bus.emit(bus.EVENT_DISPLAY_FILE_NAME, this.candidates[this.index].filename)
-      bus.emit(bus.EVENT_SELECT_IMAGE, this.candidates[this.index].id)
+      const id = this.candidates[this.index].id
+      this.$ipcRenderer.send(IPCNormalMessage.GET_SELECT_CONTENT_ITEM_INFO, {id: [id]})
+      const type = this.candidates[this.index].type
+      this.$ipcRenderer.send(IPCNormalMessage.RETRIEVE_CONTENT_VIEW, type)
     },
     onContentViewUpdate(session, value) {
       console.debug('onContentViewUpdate:', value)

src/renderer/components/Panel/PropertyPanel.vue

@@ -98,7 +98,6 @@ export default {
     candidateClasses: state => state.Cache.classesName
   }),
   mounted() {
-    // bus.on(bus.EVENT_SELECT_IMAGE, this.displayProperty)
     this.event = this.$events.get('PropertyView')
     this.event.on('click', this.cleanProperty, this)
     this.$ipcRenderer.on('Property', this.onViewUpdate)

src/renderer/components/Panel/WebPanel.vue

@@ -46,6 +46,7 @@ export default {
     updateCurrentViewName(config.defaultView)
     // this.$ipcRenderer.send(IPCNormalMessage.REQUEST_UPDATE_RESOURCES)
     this.$ipcRenderer.send(IPCNormalMessage.RETRIEVE_OVERVIEW, config.defaultView)
+    bus.emit(bus.EVENT_UPDATE_NAV_DESCRIBTION, {name: '全部', cmd: 'display-all'})
   },
   watch: {
     $route: function(to, from) {

src/renderer/components/utils/Bus.js

@@ -12,7 +12,6 @@ export default {
   },
   EVENT_UPDATE_IMAGE_IMPORT_DIRECTORY: 'updateImportDirectory',
   EVENT_UPDATE_DISPLAY_IMAGE: 'updateDisplayImage',
-  EVENT_SELECT_IMAGE: 'selectImage',
   EVENT_DISPLAY_FILE_NAME: 'displayFileName',
   EVENT_REMOVE_FILES: 'removeFiles',
   EVENT_REMOVE_ITEM: 'removeTreeItem',

src/worker/view/extHostContentView.ts

@@ -55,6 +55,9 @@ class ExtContentView extends ExtHostWebView {
     this.html = html
     return this.getHtml()
   }
+
+  onNextResourceDisplay(): void {}
+  onPrevResourceDisplay(): void {}
 }
 
 @injectable