visualization-design/src/views/components/PenProps.vue

<template>
  <div class="props">
    <t-tabs v-model="data.tab">
      <t-tab-panel :value="1" label="外观">
        <t-space direction="vertical" class="panel">
          <div class="form-item">
            <t-input-number
              label="X"
              v-model="data.rect.x"
              placeholder="x"
              theme="normal"
              style="width: 80px"
              @change="changeRect"
            />
            <t-icon name="link" class="hidden ml-4" />
            <t-input-number
              class="ml-8"
              label="Y"
              placeholder="y"
              theme="normal"
              v-model="data.rect.y"
              style="width: 80px"
              @change="changeRect"
            />

            <t-input
              class="ml-8"
              v-model="data.pen.rotate"
              placeholder="旋转"
              style="width: 72px"
              @change="changeValue"
            >
              <template #prefix-icon>
                <svg class="l-icon" aria-hidden="true">
                  <use xlink:href="#l-rotate"></use>
                </svg>
              </template>
            </t-input>
          </div>
          <div class="form-item hover-icons" style="margin-top: -12px">
            <t-input-number
              label="W"
              v-model="data.rect.width"
              placeholder="宽"
              theme="normal"
              min="1"
              style="width: 80px"
              @change="changeRect(1)"
            />
            <t-tooltip v-if="data.pen.ratio" content="固定比例" placement="top">
              <t-icon
                name="link"
                class="ml-4 hover"
                @click="data.pen.ratio = !data.pen.ratio"
              />
            </t-tooltip>
            <t-tooltip v-else content="不固定比例" placement="top">
              <t-icon
                name="link-unlink"
                class="ml-4 hover icon"
                @click="data.pen.ratio = !data.pen.ratio"
              />
            </t-tooltip>

            <t-input-number
              class="ml-8"
              label="H"
              placeholder="高"
              theme="normal"
              min="1"
              v-model="data.rect.height"
              style="width: 80px"
              @change="changeRect(2)"
            />

            <t-input
              class="ml-8"
              v-model.number="data.pen.borderRadius"
              placeholder="圆角"
              style="width: 72px"
              @change="changeValue"
            >
              <template #prefix-icon>
                <svg class="l-icon" aria-hidden="true">
                  <use xlink:href="#l-border-radius"></use>
                </svg>
              </template>
            </t-input>
          </div>
          <t-divider style="margin: -8px 0" />
          <div class="form-item" style="margin-top: -12px">
            <label>不透明度</label>
            <t-slider
              v-model="data.pen.globalAlpha"
              :min="0"
              :max="1"
              :step="0.01"
              @change="changeValue"
            />
            <span class="ml-16" style="width: 50px; line-height: 30px">
              {{ data.pen.globalAlpha }}
            </span>
          </div>
          <div class="form-item" style="margin-top: -12px">
            <label>不透明度</label>
            <t-slider
              v-model="data.pen.globalAlpha"
              :min="0"
              :max="1"
              :step="0.01"
              @change="changeValue"
            />
            <span class="ml-16" style="width: 50px; line-height: 30px">
              {{ data.pen.globalAlpha }}
            </span>
          </div>
        </t-space>
      </t-tab-panel>
      <t-tab-panel :value="2" label="事件"> </t-tab-panel>
      <t-tab-panel :value="3" label="动画"> </t-tab-panel>
      <t-tab-panel :value="4" label="数据"> </t-tab-panel>
    </t-tabs>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, onUnmounted, reactive } from 'vue';
import { getCookie } from '@/services/cookie';
import { useSelection } from '@/services/selections';

const headers = {
  Authorization: 'Bearer ' + (localStorage.token || getCookie('token') || ''),
};
const updataData = { directory: '/项目' };

const data = reactive<any>({
  tab: 1,
  pen: {},
  rect: {},
});

const { selections } = useSelection();

onBeforeMount(() => {
  data.pen = selections.pen;
  getRect();
  meta2d.on('translatePens', getRect);
  meta2d.on('resizePens', getRect);
  meta2d.on('rotatePens', getRect);
});

const getRect = () => {
  data.rect = meta2d.getPenRect(data.pen);
};

const changeRect = (mode?: number) => {
  //宽高比锁定
  if (data.pen.ratio) {
    if (mode === 1) {
      data.rect.height = (data.rect.width / data.pen.width) * data.pen.height;
    } else if (mode === 2) {
      data.rect.width = (data.rect.height / data.pen.height) * data.pen.width;
    }
  }

  meta2d.setPenRect(data.pen, data.rect, true);
};

const changeValue = (mode?: number) => {
  switch (mode) {
    case 1:
      break;
  }
  meta2d.render();
};

onUnmounted(() => {
  meta2d.off('translatePens', getRect);
  meta2d.off('resizePens', getRect);
  meta2d.off('rotatePens', getRect);
});
</script>
<style lang="postcss" scoped>
.props {
}
</style>