muntadas-app/src/components/objects/Project.vue

<template>
  <div>
    <object3d ref="block3d" name="Project" :obj="walls3dObj" :position="wallsPos" />
    <object3d ref="top" :obj="top3dObj" :position="topPos" />
    <object3d ref="floor" :obj="floor3dObj" :position="floorPos" />
    <object3d ref="levels" :obj="levels3dObj" :position="levelsPos" />
    <mesh ref="label3d" name="Label" :position="label_position">
      <geometry type="Plane" :args="[label_size.x, label_size.y]" />
      <material type="MeshLambert" :options="label_opts">
        <texture :options="label_texture_opts" />
      </material>
    </mesh>
    <div v-if="isOpened">
      <ContentBlock
        v-for="(item, i) in contents.visibles"
        :key="i"
        type="visible"
        :prtId="id"
        :data="item"
        />
      <ContentBlock
        v-for="(item, i) in contents.contexts"
        :key="i"
        type="context"
        :prtId="id"
        :data="item"
        />
      <ContentBlock
        v-for="(item, i) in contents.processes"
        :key="i"
        type="process"
        :prtId="id"
        :data="item"
        />
      <ContentBlock
        v-for="(item, i) in contents.concepts"
        :key="i"
        type="concept"
        :prtId="id"
        :data="item"
        />
      <div class="elevator">
        <ul>
          <li :class="{ active: levelVisibles }">
            <a
              class="btn-level"
              href="#visibles"
              @click.stop="onClickLevel('visibles', $event)"
              @keyup.enter="onClickLevel('visibles')"
            >Visible</a>
          </li>
          <li :class="{ active: levelContexts }">
            <a
              class="btn-level"
              href="#contexts"
              @click.stop="onClickLevel('contexts', $event)"
              @keyup.enter="onClickLevel('contexts')"
            >Context</a>
          </li>
          <li :class="{ active: levelProcesses }">
            <a
              class="btn-level"
              href="#processes"
              @click.stop="onClickLevel('processes', $event)"
              @keyup.enter="onClickLevel('processes')"
            >Process</a>
          </li>
          <li :class="{ active: levelConcepts }">
            <a
              class="btn-level"
              href="#concepts"
              @click.stop="onClickLevel('concepts', $event)"
              @keyup.enter="onClickLevel('concepts')"
            >Concept</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

import { mapInstanceState, mapInstanceActions, mapInstanceMutations } from '@urbn/vuex-helpers'

import * as THREE from 'three'
// import { ThreeBSP } from 'three-js-csg-es6'

import mixins from 'components/mixins'

import ContentBlock from 'components/objects/ContentBlock'

// import BgVertex from 'assets/glsl/BgVertex'
// import BuildingFragment from 'assets/glsl/BuildingFragment'

// We'll determine our module based on the moduleName prop on this component
// https://www.npmjs.com/package/@urbn/vuex-helpers
const getModuleName = cmp => `project:${cmp.id}`

export default {
  name: 'Project',
  components: {
    ContentBlock
  },
  mixins: [mixins],
  props: { id: Number },
  data () {
    console.log('Project data()')
    return {
      isOpened: false,
      block3d: null,
      label3d: null,
      label_opts: {
        side: THREE.DoubleSide,
        transparent: true
        // wireframe: false,
        // opacity: 0.6
        // renderOrder: 0
      },
      label_canvas: null,
      label_size: null,
      label_position: { x: 0, y: 0, z: 0 }
      // level_mesh: levelMesh,
      // level_position: { ...position },
    }
  },
  computed: {
    ...mapInstanceState(getModuleName, {
      title: state => state.Titre,
      size: state => state.size,
      position: state => state.position,
      walls3dObj: state => state.walls3dObj,
      wallsPos: state => state.wallsPos,
      top3dObj: state => state.top3dObj,
      topPos: state => state.topPos,
      topColor: state => state.topColor,
      floor3dObj: state => state.floor3dObj,
      floorPos: state => state.floorPos,
      levels3dObj: state => state.levels3dObj,
      levelsPos: state => state.levelsPos,
      contents: state => state.contents,
      activeLevel: state => state.activeLevel
    }),
    label_texture_opts () {
      return {
        canvas: this.label_canvas,
        minFilter: THREE.LinearFilter,
        wrapS: THREE.ClampToEdgeWrapping,
        wrapT: THREE.ClampToEdgeWrapping
      }
    },
    levelVisibles () {
      return this.activeLevel === 'visibles'
    },
    levelContexts () {
      return this.activeLevel === 'contexts'
    },
    levelProcesses () {
      return this.activeLevel === 'processes'
    },
    levelConcepts () {
      return this.activeLevel === 'concepts'
    }
  },
  created () {
    this.label_canvas = this.createLabelCanvas(this.title.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', this.topColor)
    this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 1
    this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 1
    this.label_position.z = this.position.z + this.size.z / 2 + 0.5
    console.log('this.label_position', this.label_position)
  },
  mounted () {
    console.log('project mounted', this)
    // record self references
    this.block3d = this.$refs.block3d.curObj
    this.block3d.userData.vnode = this
    this.block3d.userData.position = this.position
    this.label3d = this.$refs.label3d.curObj
  },
  methods: {
    ...mapInstanceActions(getModuleName, {
      getContents: 'getContents'
    }),
    ...mapInstanceMutations(getModuleName, {
      setActiveLevel: 'setActiveLevel'
    }),
    open () {
      if (!this.isOpened) {
        this.isOpened = true
        this.getContents()
      }
    },
    onClickLevel (level, e) {
      // e.stopPropagation()
      e.preventDefault()
      console.log('onclickLevel', level)
      this.setActiveLevel(level)
      let toPos = { ...this.position }
      switch (level) {
        case 'visibles':
          toPos.y = 2
          break
        case 'contexts':
          toPos.y = -1 * this.size.y * 0.25 + 2
          break
        case 'processes':
          toPos.y = -2 * this.size.y * 0.25 + 2
          break
        case 'concepts':
          toPos.y = -3 * this.size.y * 0.25 + 2
          break
      }
      this.$emit('lift', toPos)
    }
  }
}
</script>