dm5-topicmap-panel.vue

<template>
  <div class="dm5-topicmap-panel" v-loading="loading">
    <dm5-toolbar :comp-defs="toolbarCompDefs"></dm5-toolbar>
    <component :is="topicmapRenderer" :object="object_" :writable="writable_" :show-inmap-details="showInmapDetails_"
      :detail-renderers="detailRenderers" :context-commands="contextCommands" :quill-config="quillConfig">
    </component>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {

  created () {
    // console.log('dm5-topicmap-panel created', this.topicmapTypes, this.$store)
    this.$store.registerModule('topicmapPanel', require('../topicmap-panel').default)
    this.$store.dispatch('_initTopicmapPanel', this)
  },

  mounted () {
    // console.log('dm5-topicmap-panel mounted')
  },

  mixins: [
    require('./mixins/object').default,
    require('./mixins/writable').default,
    require('./mixins/detail-renderers').default
  ],

  props: {
    showInmapDetails: Boolean,
    toolbarCompDefs: Object,
    topicmapTypes: Object,
    contextCommands: Object,
    quillConfig: Object
  },

  data () {
    return {
      topicmapRenderer: undefined,
      // mirror props (mirroring the *dynamic* props is sufficient)
      object_:           this.object,
      writable_:         this.writable,
      showInmapDetails_: this.showInmapDetails
      // toolbarCompDefs_:  this.toolbarCompDefs   // FIXME: needed?
    }
  },

  computed: mapState({
    loading: state => state.topicmapPanel.loading
  }),

  components: {
    'dm5-toolbar': require('./dm5-toolbar').default
  }
}
</script>