yvan-rcs-web/src/editor/widgets/property/PropertyView.vue

<template>
  <div class="title">
    属性面板
    <el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
      <template #prefix>
        <component :is="renderIcon('element Search')"></component>
      </template>
    </el-input>
    <span class="close" @click="closeMe()">
      <component :is="renderIcon('element Close')" />
    </span>
  </div>
  <div class="calc-right-panel">
    <el-form
      label-position="right"
      label-width="60"
      class="property-panel-form"
      size="default"
      @submit.native.prevent
    >
      <template v-for="(itemMeta, idx) in selectedObjectMeta">
        <el-divider v-if="itemMeta.editor === '-'" />

        <TextInput
          v-else-if="itemMeta.editor === 'TextInput'"
          :prop="itemMeta"
          :viewport="viewport"
        />

        <Transform
          v-else-if="itemMeta.editor === 'TransformEditor'"
          :prop="itemMeta"
          :viewport="viewport"
        />

        <SwitchItem
          v-else-if="itemMeta.editor === 'Switch'"
          :prop="itemMeta"
          :viewport="viewport"
        />

        <ColorItem v-else-if="itemMeta.editor === 'Color'" :prop="itemMeta" :viewport="viewport" />

        <UUIDItem v-else-if="itemMeta.editor === 'UUID'" :prop="itemMeta" :viewport="viewport" />

        <NumberInput
          v-else-if="itemMeta.editor === 'Number'"
          :prop="itemMeta"
          :viewport="viewport"
        />

        <template v-else> 未知编辑器: {{ itemMeta.editor }} </template>
      </template>
    </el-form>
  </div>
</template>
<script>
import IWidgets from '../IWidgets.js'
import TextInput from '../../propEditors/TextInput.vue'
import Transform from '../../propEditors/Transform.vue'
import SwitchItem from '../../propEditors/SwitchItem.vue'
import ColorItem from '../../propEditors/ColorItem.vue'
import UUIDItem from '../../propEditors/UUIDItem.vue'
import NumberInput from '../../propEditors/NumberInput.vue'
import EventBus from '../../../runtime/EventBus.js'

export default {
  name: 'PropertyView',
  components: {
    NumberInput,
    UUIDItem,
    ColorItem,
    SwitchItem,
    TextInput, Transform
  },
  mixins: [IWidgets],
  data() {

    return {
      itemTypeMeta: null,
      searchKeyword: ''
    }
  },
  computed: {
    selectedObject() {
      return this.state?.selectedObject
    },
    selectedObjectMeta() {
      return this.state?.selectedObjectMeta
    }
  },
  methods: {
    selectedObjectChanged(state) {
      const data = state.selectedItem;
      console.log("selectedObjectChanged data", data)
      if(data) {
        this.viewport.stateManager.beginStateUpdate()
        const item = _.find(this.viewport.stateManager.vdata.items, item => item.id === data.id)
        // item.tf[0][0] = item.tf[0][0] / 2;
        console.log("selectedObjectChanged item", item)
        // _.extend(item, data)
        this.viewport.stateManager.endStateUpdate()
      }
    },
  },
  mounted() {
    EventBus.on("selectedObjectChanged", this.selectedObjectChanged);
  },
  unmounted() {
    EventBus.off("selectedObjectChanged", this.selectedObjectChanged);
  },
}
</script>
<style lang="less">
.property-panel-form {
  margin: 0;
  font-size: 14px;
  color: #606266;
  .el-form-item--default {
    margin: 5px 3px 0 0;
    .el-form-item__label {
      height: 20px;
      line-height: 22px;
    }
  }
  .gui-toolbar {
    color: #333;
    background: #ffffff;
    border-top: 1px solid #dcdcdc;
    margin-top: 5px;

    .el-input-number.is-without-controls .el-input__wrapper {
      padding-left: 2px;
      padding-right: 2px;
    }

    .gui-row {
      display: flex;
      flex-direction: row;
      gap: 3px;
      padding: 3px 3px 3px 0;

      .gui-item-name {
        width: 26px;
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;

        .el-icon {
          font-size: 16px;
        }
      }

      .gui-item {
        flex: 1;
        text-align: center;
        font-size: 12px;

        .el-input-number {
          width: 100%;

          .el-input__wrapper {
            background-color: #efefef;
            box-shadow: none;
          }
        }
      }
    }
  }
  .el-divider {
    margin: 5px 0;
  }
}
</style>