wanda-editer/src/components/edit/right_toolbar.vue

<template>
  <div id="right_toolbar">
    <!-- 右侧侧编辑器 -->
    <a-tabs class="atabless" default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="属性">
        <div class="property">
          <ul class="position">
            <li v-for="(item,i) in msgList" :key="i">
              <a-input
                :disabled="item.disable"
                @change="changeStatus(item)"
                size="small"
                v-model="item.msg"
                placeholder
                :suffix="item.unit"
              />
            </li>
            <li @click="lockItem" :title="isLock?'锁定':'解锁'">
              <Icon style="vertical-align: middle;" :name="isLock?'lock':'unlock'" />
            </li>
          </ul>
          <attrSelect v-show="attrType" :type="attrType" :focusItemList="focusItemList" />
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="元素" force-render>
        <div class="element">
          <a-input-search
            placeholder="搜索"
            style="margin-bottom: 12px;"
            v-model="key"
            @search="onSearch"
          />
          <ul class="element-list">
            <li
              v-for="ele in elementData"
              :key="ele.id"
              @click="clickElement(ele)"
              v-show="key?ele.name.search(key) != -1:true"
            >
              <el-image
                style="width: 45px; height: 26px; margin-top: 6px;"
                :src="ele.data.Properties.IconUrl"
                fit="contain"
              ></el-image>
              <span class="element-name">{{ele.name}}</span>
            </li>
          </ul>
        </div>
      </a-tab-pane>
    </a-tabs>
    <div class="right_toolbar_mask"  v-show="isCopy=='true'"></div>
  </div>
</template>
<script>
import attrSelect from "@/components/edit/attr_select";
import bus from "@/bus";
import bus2 from "@/bus2";
import { SImageMarkerItem } from "@/lib/items/SImageMarkerItem";
import { SImageLegendItem } from "@/lib/items/SImageLegendItem";
import { mapState } from "vuex";
const msgList = [
  {
    msg: "",
    disable: false,
    name: "X",
    unit: "x"
  },
  {
    msg: "",
    disable: false,
    name: "Y",
    unit: "y"
  },
  {
    msg: "0",
    disable: true,
    name: "Angle",
    unit: "°"
  },
  {
    msg: "",
    disable: true,
    name: "Width",
    unit: "w"
  },
  {
    msg: "",
    disable: true,
    name: "Height",
    unit: "h"
  }
];
// import Select from "@/components/Select/Select.vue";
export default {
  props: {
    focusItemList: {
      type: Object,
      default: function() {
        return [];
      },
      required: false
    }
  },
  components: {
    attrSelect
  },
   computed: {
    ...mapState({
      isCopy:'isCopy'
    })
  },
  created() {
    this.listenElementData()
  },
  data() {
    return {
      msgList,
      attrType: "",
      elementData: [],
      key: "",
      isLock: true,
      aspectRatio: 1, // 元素宽高比
    };
  },
  methods: {
    // 获取元素数据
    listenElementData() {
      bus2.$off("elementDataChange");
      bus2.$on("elementDataChange", val => {
        this.elementData = [];
        if (val.Nodes.length) {
          this.elementData = this.elementData.concat(val.Nodes);
        }
        if (val.Markers.length) {
          this.elementData = this.elementData.concat(val.Markers);
        }
        if (val.Relations.length) {
          this.elementData = this.elementData.concat(val.Relations);
        }
      });
    },
    callback(key) {
      console.log(key);
    },
    // 元素检索
    onSearch(key) {
      console.log(key);
    },
    // 切换锁状态
    lockItem() {
      this.isLock = !this.isLock;
      if (this.isLock) {
        let width, height;
        this.msgList.forEach(item => {
          if (item.name == "Width") {
            width = item.msg;
          } else if (item.name == "Height") {
            height = item.msg;
          }
        });
        this.aspectRatio = width / height;
      }
    },
    // 改变状态
    changeStatus(item) {
      if (item.name == "Width") {
        if (this.isLock) {
          const height = item.msg / this.aspectRatio;
          this.msgList.find(item => {
            return item.name == "Height";
          }).msg = height;
          bus.$emit("itemHeight", height);
        }
        bus.$emit("itemWidth", item.msg);
      } else if (item.name == "Height") {
        if (this.isLock) {
          const width = item.msg * this.aspectRatio;
          this.msgList.find(item => {
            return item.name == "Width";
          }).msg = width;
          bus.$emit("itemWidth", width);
        }
        bus.$emit("itemHeight", item.msg);
      } else if (item.name == "X" || item.name == "Y") {
        let x,
          y = "";
        this.msgList.forEach(t => {
          if (t.name == "X") {
            x = t.msg;
          } else if (t.name == "Y") {
            y = t.msg;
          }
        });
        bus.$emit("itemPositon", x, y);
      } else if (item.name == "Angle") {
        if (item.msg.length > 0 && !isNaN(Number(item.msg))) {
          if (item.msg > 360) {
            item.msg = 360;
          }
          if (item.msg < -360) {
            item.msg = -360;
          }
          bus.$emit("itemAngle", item.msg);
        }
      }
    },
    // 点击选中元素
    clickElement(ele) {
      bus.$emit("toggleItem", ele);
    }
  },
  watch: {
    focusItemList: function(newVal) {
      this.attrType = newVal.itemType;
      if (newVal.itemList.length !== 1) {
        this.msgList.forEach(item => {
          if (item.name == "X") {
            item.msg = 0;
          }
          if (item.name == "Y") {
            item.msg = 0;
          }
          if (item.name == "Width") {
            item.msg = 0;
          }
          if (item.name == "Height") {
            item.msg = 0;
          }
          if (item.name == "Angle") {
            item.msg = "0";
          }
        });
        this.aspectRatio = 1;
      } else {
        // 属性输入框宽高显示的数值
        let inputW, inputH;
        this.msgList.forEach(item => {
          const Item = newVal.itemList[0];
          const width = Item.boundingRect().width;
          const height = Item.boundingRect().height;
          if (item.name == "X") {
            item.msg = Item.mapToScene(
              Item.boundingRect().left,
              Item.boundingRect().top
            ).x;
          }
          if (item.name == "Y") {
            item.msg = Item.mapToScene(
              Item.boundingRect().left,
              Item.boundingRect().top
            ).y;
          }
          if (item.name == "Width") {
            item.msg = width;
            // Icon显示图片宽
            if (Item instanceof SImageLegendItem) {
              item.msg = Item.img.width;
            }
            // 针对图片及Icon
            if (
              Item instanceof SImageMarkerItem
            ) {
              item.disable = false;
            } else {
              item.disable = true;
            }
            inputW = item.msg;
          }
          if (item.name == "Height") {
            item.msg = height;
            // Icon显示图片高
            if (Item instanceof SImageLegendItem) {
              item.msg = Item.img.height;
            }
            // 针对图片及Icon
            if (
              Item instanceof SImageMarkerItem
            ) {
              item.disable = false;
            } else {
              item.disable = true;
            }
            inputH = item.msg;
          }
          if (item.name == "Angle") {
            if (Item instanceof SImageLegendItem) {
              item.disable = false;
              item.msg = Item.img.rotate;
            } else {
              item.disable = true;
              item.msg = 0;
            }
          }
        });
        this.aspectRatio = inputW / inputH;
      }
    }
  }
};
</script>
<style lang="less" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#right_toolbar {
  width: 280px;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.11);
  position: relative;
  .atabless {
    height: 100%;
    width: 100%;
  }
  .property {
    width: 100%;
    height: 100%;
    .formatting {
      display: flex;
      height: 50px;
      padding: 0 12px 0 12px;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-around;
      li {
        width: 16px;
        height: 16px;
        cursor: pointer;
        img {
          width: 16px;
          height: 16px;
        }
      }
    }
    .position {
      display: flex;
      padding: 0 12px 30px 12px;
      box-sizing: border-box;
      display: flex;
      border-bottom: 1px solid #c3c7cb;
      flex-wrap: wrap;
      li {
        margin-top: 10px;
        width: 30%;
        margin-right: 8px;
        .lock {
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
    }
  }
  .element {
    margin: 0 12px 0 12px;
    height: 100%;
    .element-list {
      height: calc(100% - 44px);
      overflow-y: auto;
      box-sizing: border-box;
      li {
        width: 100%;
        height: 38px;
        line-height: 38px;
        padding-left: 12px;
        box-sizing: border-box;
        color: #1f2429;
        cursor: pointer;
        .element-name {
          display: inline-block;
          vertical-align: top;
          line-height: 38px;
          width: calc(100% - 45px);
          height: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        &:hover {
          background: #f5f6f7;
        }
      }
    }
  }
  .right_toolbar_mask{
    width: 280px;
    height: 100%;
    background: rgba(0, 0, 0, 0.11);
    cursor:not-allowed;
    position: absolute;
    left: 0;
    top: 0;
  }
}
/deep/ .ant-tabs .ant-tabs-top-content.ant-tabs-content-animated {
  height: calc(100% - 60px);
}
</style>