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

<template>
  <div class="props">
    <t-tabs v-model="data.tab">
      <t-tab-panel :value="1" :label="$t('外观')">
        <t-space direction="vertical" class="py-16 w-full">
          <div class="px-16 flex between" style="margin-bottom:2px;">
            <label>{{$t('选中了')}}{{ selections.pens.length }}{{$t( '个图元' )}}</label>
            <div class="icons">
              <t-tooltip class="mr-4" v-if="!data.locked" placement="top" :content="$t('可编辑')">
                <svg class="l-icon" aria-hidden="true" @click="lock(1)">
                  <use xlink:href="#l-unlock"></use>
                </svg>
              </t-tooltip>
              <t-tooltip class="mr-4" v-else-if="data.locked == 1" placement="top" :content="$t('禁止编辑')">
                <svg class="l-icon" aria-hidden="true" @click="lock(2)">
                  <use xlink:href="#l-lock"></use>
                </svg>
              </t-tooltip>
              <t-tooltip class="mr-4" v-else-if="data.locked == 2" placement="top" :content="$t('禁止编辑和移动')">
                <svg class="l-icon" aria-hidden="true" @click="lock(10)">
                  <use xlink:href="#l-wufayidong"></use>
                </svg>
              </t-tooltip>
              <t-tooltip class="mr-4" v-else-if="data.locked == 10" placement="top" :content="$t('禁止所有事件')">
                <svg class="l-icon" aria-hidden="true" @click="lock(0)">
                  <use xlink:href="#l-jinyong"></use>
                </svg>
              </t-tooltip>
              <browse-icon v-if="data.visible !== false" @click="visible(false)" class="ml-8"></browse-icon>
              <browse-off-icon v-else @click="visible(true)" class="ml-8"></browse-off-icon>
              <!-- <t-icon
                v-if="data.visible !== false"
                name="browse"
                @click="visible(false)"
                class="ml-8"
              />
              <t-icon
                v-else
                name="browse-off"
                @click="visible(true)"
                class="ml-8"
              /> -->
            </div>
          </div>
          <div class="form-item px-16" style="margin-top: -12px">
            <label style="width: 50px">{{$t( '分组' )}}</label>
            <t-select-input
              v-model:inputValue="data.inputTag"
              :value="data.tags"
              allow-input
              :placeholder="$t('请输入或选择分组')"
              multiple
              @tag-change="onChangeInputTag"
              @focus="data.tagPopupVisible = true"
              @blur="data.tagPopupVisible = false"
              :tag-input-props="{ excessTagsDisplayType: 'break-line' }"
            >
              <template #panel>
                <ul style="padding: 8px 12px">
                  <li
                    v-for="item in data.groups"
                    :key="item"
                    @click="onSelectTag(item)"
                  >
                    {{ item }}
                  </li>
                </ul>
              </template>
            </t-select-input>
          </div>
          <div class="form-item px-16" style="margin-top: -12px">
            <label style="width: 50px">{{$t('画布层')}}</label>
            <t-select v-model="data.canvasLayer" @change="changeValue('canvasLayer')">
              <t-option :key="4" :disabled="!allImg" :value="4" :label="$t('上层图片层')"> {{$t('上层图片层')}} </t-option>
              <t-option :key="3" :disabled="hasDom" :value="3" :label="$t('主画布层')"> {{$t('主画布层')}} </t-option>
              <t-option :key="2" :disabled="!allImg" :value="2" :label="$t('下层图片层')"> {{$t('下层图片层')}} </t-option>
              <t-option :key="1" :disabled="hasDom" :value="1" :label="$t('模板层')"> {{$t('模板层')}} </t-option>
            </t-select>
          </div>
          <t-collapse :defaultValue="['1', '2', '3', '4']" expandIconPlacement="right" :borderless="true">
            <t-collapse-panel value="1" :header="$t('对齐')">
              <t-space direction="vertical" size="small" class="w-full">
                <div style="color: var(--color); margin-bottom: 2px">
                  {{$t('大屏对齐')}}
                </div>
                <div class="icons">
                  <t-tooltip
                    v-for="item in vAligns"
                    :content="item.label"
                    placement="top"
                  >
                    <svg
                      class="l-icon btn"
                      aria-hidden="true"
                      @mouseenter="previewAlign(1,item.value)"
                      @mouseleave="recoverAlign()"
                      @click="alignV(item.value)"
                    >
                      <use :xlink:href="item.icon"></use>
                    </svg>
                  </t-tooltip>
                </div>
              </t-space>
              <t-divider
                style="margin: 16px -16px 12px -16px; width: calc(100% + 32px)"
              />
              <t-space direction="vertical" size="small" class="w-full">
                <div style="color: var(--color); margin-bottom: 2px">
                  {{$t('区域对齐')}}
                </div>
                <div class="icons">
                  <t-tooltip
                    v-for="item in aligns"
                    :content="item.label"
                    placement="top"
                  >
                    <svg
                      class="l-icon btn"
                      aria-hidden="true"
                      @mouseenter="previewAlign(2,item.value)"
                      @mouseleave="recoverAlign(item.value)"
                      @click="align(item.value)"
                    >
                      <use :xlink:href="item.icon"></use>
                    </svg>
                  </t-tooltip>
                </div>
              </t-space>
              <t-divider
                style="margin: 16px -16px 12px -16px; width: calc(100% + 32px)"
              />
              <t-space direction="vertical" size="small" class="w-full">
                <div style="color: var(--color); margin-bottom: 2px">
                  {{$t('以最后选中图元对齐')}}
                </div>
                <div class="icons">
                  <t-tooltip
                    v-for="item in aligns2"
                    :content="item.label"
                    placement="top"
                  >
                    <svg
                      class="l-icon btn"
                      aria-hidden="true"
                      @mouseenter="previewAlign(3,item.value)"
                      @mouseleave="recoverAlign()"
                      @click="align2(item.value)"
                    >
                      <use :xlink:href="item.icon"></use>
                    </svg>
                  </t-tooltip>
                </div>
              </t-space>
            </t-collapse-panel>
            <t-collapse-panel value="2" :header="$t('外观')">
              <t-space direction="vertical" size="small" class="w-full">
                <div class="form-item">
                  <t-color-picker class="simple mt-8 mr-4" format="CSS" :enable-alpha="true" :recent-colors="null" :swatch-colors="defaultPureColor" :color-modes="['monochrome']" :show-primary-color-preview="false" :clearable="true" v-model="data.color" @change="changeValue('color')"></t-color-picker>
                  <label style="width: 64px">{{$t('前景颜色')}}</label>

                  <t-color-picker class="simple mt-8 mr-4" format="CSS" :enable-alpha="true" :recent-colors="null" :swatch-colors="defaultPureColor" :color-modes="['monochrome']" :show-primary-color-preview="false" v-model="data.hoverColor" @change="changeValue('hoverColor')"></t-color-picker>
                  <label style="width: 64px">{{$t('悬停颜色')}}</label>

                  <t-color-picker class="simple mt-8 mr-4" format="CSS" :enable-alpha="true" :recent-colors="null" :swatch-colors="defaultPureColor" :color-modes="['monochrome']" :show-primary-color-preview="false" v-model="data.activeColor" @change="changeValue('activeColor')"></t-color-picker>
                  <label style="width: 64px">{{$t('选中颜色')}}</label>
                </div>

                <div class="form-item">
                  <label style="width: 32px">{{$t('线条')}} </label>
                  <t-select v-model="data.dash" @change="changeValue('dash')" style="width: 80px" :placeholder="$t('线条样式')">
                    <template #valueDisplay="{ value }">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        version="1.1"
                        style="width: 100%; height: 20px"
                      >
                        <g fill="none" stroke="var(--color)" stroke-width="1">
                          <path v-if="value === 0" d="M0 9 l85 0" />
                          <path
                            v-else-if="value === 1"
                            stroke-dasharray="5 5"
                            d="M0 9 l85 0"
                          />
                          <path
                            v-else-if="value === 2"
                            stroke-dasharray="10 10"
                            d="M0 9 l85 0"
                          />
                          <path
                            v-else-if="value === 3"
                            stroke-dasharray="10 10 2 10"
                            d="M0 9 l85 0"
                          />
                        </g>
                      </svg>
                    </template>
                    <t-option :key="0" :value="0">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        version="1.1"
                        style="width: 80px; height: 14px"
                      >
                        <g fill="none" stroke="var(--color)" stroke-width="1">
                          <path d="M0 9 l85 0" />
                        </g>
                      </svg>
                    </t-option>
                    <t-option :key="1" :value="1">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        version="1.1"
                        style="width: 80px; height: 14px"
                      >
                        <g fill="none" stroke="var(--color)" stroke-width="1">
                          <path stroke-dasharray="5 5" d="M0 9 l85 0" />
                        </g>
                      </svg>
                    </t-option>
                    <t-option :key="2" :value="2">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        version="1.1"
                        style="width: 80px; height: 14px"
                      >
                        <g fill="none" stroke="var(--color)" stroke-width="1">
                          <path stroke-dasharray="10 10" d="M0 9 l85 0" />
                        </g>
                      </svg>
                    </t-option>
                    <t-option :key="3" :value="3">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        version="1.1"
                        style="width: 80px; height: 14px"
                      >
                        <g fill="none" stroke="var(--color)" stroke-width="1">
                          <path stroke-dasharray="10 10 2 10" d="M0 9 l85 0" />
                        </g>
                      </svg>
                    </t-option>
                  </t-select>
                  <t-input-number
                    theme="normal"
                    :placeholder="$t('线条宽度')"
                    v-model="data.lineWidth"
                    :min="1"
                    :decimalPlaces="0"
                    @change="changeValue('lineWidth')"
                    class="ml-4"
                    style="width: 40px"
                  />
                  <t-tooltip :content="$t('线条渐变')" placement="top">
                    <div class="flex middle ml-8">
                      <t-checkbox
                        v-model="data.strokeType"
                        @change="changeValue('strokeType')"
                        style="width: 22px"
                      />

                      <t-color-picker
                        v-if="data.strokeType"
                        class="simple mr-4"
                        format="CSS"
                        :color-modes="['linear-gradient']"
                        :show-primary-color-preview="false"
                        :clearable="true"
                        :enableAlpha="true"
                        :recent-colors="null"
                        :swatch-colors="defaultGradientColor"
                        v-model="data.lineGradientColors"
                        @change="changeValue('lineGradientColors')"
                        :placeholder="$t('无')"
                      />
                    </div>
                  </t-tooltip>
                </div>
                <div class="flex" style="margin-left: 40px">
                  <div class="flex column middle">
                    <t-radio-group
                      size="small"
                      v-model="data.lineCap"
                      default-value="butt"
                      @change="changeValue('lineCap')"
                    >
                      <t-radio-button value="butt">
                        <t-tooltip :content="$t('默认')" placement="top">
                          <svg class="l-icon" aria-hidden="true">
                            <use xlink:href="#l-duandian1"></use>
                          </svg>
                        </t-tooltip>
                      </t-radio-button>
                      <t-radio-button value="round">
                        <t-tooltip :content="$t('圆形')" placement="top">
                          <svg class="l-icon" aria-hidden="true">
                            <use xlink:href="#l-duandian2"></use>
                          </svg>
                        </t-tooltip>
                      </t-radio-button>
                      <t-radio-button value="square">
                        <t-tooltip placement="top" :content="$t('方形')">
                          <svg class="l-icon" aria-hidden="true">
                            <use xlink:href="#l-duandian3"></use>
                          </svg>
                        </t-tooltip>
                      </t-radio-button>
                    </t-radio-group>
                    <div class="mt-4" style="font-size: 12px">{{$t('末端样式')}}</div>
                  </div>
                  <div class="flex column middle ml-16">
                    <t-radio-group
                      size="small"
                      v-model="data.lineJoin"
                      default-value="miter"
                      @change="changeValue('lineJoin')"
                    >
                      <t-radio-button value="miter">
                        <t-tooltip placement="top" :content="$t('默认')">
                          <svg class="l-icon" aria-hidden="true">
                            <use xlink:href="#l-jiedian1"></use>
                          </svg>
                        </t-tooltip>
                      </t-radio-button>
                      <t-radio-button value="round">
                        <t-tooltip placement="top" :content="$t('圆形')">
                          <svg class="l-icon" aria-hidden="true">
                            <use xlink:href="#l-jiedian2"></use>
                          </svg>
                        </t-tooltip>
                      </t-radio-button>
                      <t-radio-button value="bevel">
                        <t-tooltip placement="top" :content="$t('斜角')">
                          <svg class="l-icon" aria-hidden="true">
                            <use xlink:href="#l-jiedian3"></use>
                          </svg>
                        </t-tooltip>
                      </t-radio-button>
                    </t-radio-group>
                    <div class="mt-4" style="font-size: 12px">{{$t('连接样式')}}</div>
                  </div>
                </div>
                <div class="form-item">
                  <label style="width: 32px">{{$t('背景')}}</label>
                  <div class="ml-8">
                    <t-radio-group size="small" v-model="data.bkType" :default-value="0" @change="changeValue('bkType')">
                      <t-radio-button :value="0"> {{$t('纯色')}} </t-radio-button>
                      <t-radio-button :value="1"> {{$t('线性渐变')}} </t-radio-button>
                      <t-radio-button :value="2"> {{$t('径向渐变')}} </t-radio-button>
                    </t-radio-group>
                    <div v-if="data.bkType === 0" class="mt-8 -ml-8">
                      <t-color-picker
                        class="w-full"
                        format="CSS"
                        :enable-alpha="true"
                        :recent-colors="null"
                        :swatch-colors="defaultPureColor"
                        :color-modes="['monochrome']"
                        :show-primary-color-preview="false"
                        v-model="data.background"
                        @change="changeValue('background')"
                      />
                    </div>
                    <div
                      v-else-if="data.bkType === 1"
                      class="mt-8 -ml-8"
                      style="width: 200px"
                    >
                      <t-color-picker
                        class="w-full"
                        format="CSS"
                        :enable-alpha="true"
                        :recent-colors="null"
                        :swatch-colors="defaultGradientColor"
                        :color-modes="['linear-gradient']"
                        :show-primary-color-preview="false"
                        v-model="data.gradientColors"
                        @change="changeValue('gradientColors')"
                      />
                    </div>
                    <div v-else-if="data.bkType === 2" class="mt-8 flex middle">
                      <t-color-picker
                        class="simple"
                        format="CSS"
                        :enable-alpha="true"
                        :recent-colors="null"
                        :swatch-colors="defaultGradientColor"
                        :color-modes="['linear-gradient']"
                        :show-primary-color-preview="false"
                        v-model="data.gradientColors"
                        @change="changeValue('gradientColors')"
                      />

                      <t-input-number
                        theme="column"
                        :placeholder="$t('渐变半径')"
                        v-model="data.gradientRadius"
                        :min="0"
                        :max="1"
                        :step="0.1"
                        @change="changeValue('gradientRadius')"
                        class="ml-8"
                        style="width: 100px"
                      />
                    </div>
                  </div>
                </div>
                <div class="form-item">
                  <label style="width: 32px">{{$t('阴影')}} </label>
                  <div class="flex middle ml-8">
                    <t-checkbox
                      v-model="data.shadow"
                      @change="changeValue('shadow')"
                      style="width: 22px"
                    />
                    <t-color-picker
                      v-if="data.shadow"
                      class="simple"
                      format="CSS"
                      :enable-alpha="true"
                      :recent-colors="null"
                      :swatch-colors="defaultPureColor"
                      :color-modes="['monochrome']"
                      :show-primary-color-preview="false"
                      v-model="data.shadowColor"
                      @change="changeValue('shadowColor')"
                    />
                  </div>
                  <label v-if="data.shadow" style="width: 50px; margin-left: 25px">{{$t('文字阴影')}}
                  </label>
                  <div v-if="data.shadow" class="flex middle ml-8">
                    <t-checkbox
                      v-model="data.textHasShadow"
                      @change="changeValue('textHasShadow')"
                      style="width: 22px"
                    />
                  </div>
                </div>
                <div class="form-item" v-if="data.shadow">
                  <label style="width: 28px"></label>
                  <div class="flex" style="margin-top: -8px">
                    <t-input class="ml-4" label="X" placeholder="0" v-model.number="data.shadowOffsetX" style="width: 60px" @change="changeValue('x')" :title="$t('X偏移')"></t-input>
                    <t-input class="ml-4" label="Y" placeholder="0" v-model.number="data.shadowOffsetY" style="width: 60px" @change="changeValue('shadowOffsetY')" :title="$t('Y偏移')"></t-input>
                    <t-input class="ml-4" placeholder="0" v-model.number="data.shadowBlur" style="width: 64px" @change="changeValue('shadowBlur')" :label="$t('模糊')" :title="$t('模糊大小')"></t-input>
                  </div>
                </div>
              </t-space>
            </t-collapse-panel>
            <t-collapse-panel value="3" :header="$t('文字')">
              <t-space direction="vertical" size="small" class="w-full">
                <div class="form-item">
                  <div class="flex middle" style="margin-left: -10px">
                    <t-select-input
                      :value="data.fontFamily"
                      :popup-visible="data.fontFamilyPopupVisible"
                      :placeholder="$t('字体名')"
                      allow-input
                      style="width: 170px"
                      @change="changeValue('fontFamily')"
                      @enter="changeValue('fontFamily')"
                      @blur="changeValue('fontFamily')"
                      @popup-visible-change="onFontPopupVisible"
                      :popup-props="{
                        overlayInnerStyle: { width: 'auto' },
                      }"
                    >
                      <template #panel>
                        <ul style="padding: 12px">
                          <li
                            v-for="item in fonts"
                            :key="item"
                            @click="onFontFamily(item)"
                          >
                            {{ item }}
                          </li>
                        </ul>
                      </template>
                      <template #suffixIcon>
                        <chevron-down-icon />
                        <!-- <t-icon name="chevron-down" /> -->
                      </template>
                    </t-select-input>

                    <t-input class="ml-8" v-model.number="data.fontSize" style="width: 80px" :format="decimalRound" @change="changeValue('fontSize')" :placeholder="$t('字体大小')"></t-input>
                  </div>
                </div>
                <div class="flex middle">
                  <t-radio-group
                    size="small"
                    v-model="data.textAlign"
                    default-value="center"
                    @change="changeValue('textAlign')"
                  >
                    <t-radio-button value="left">
                      <t-tooltip placement="top" :content="$t('居左')">
                        <format-vertical-align-left-icon></format-vertical-align-left-icon>
                        <!-- <t-icon name="format-vertical-align-left" /> -->
                      </t-tooltip>
                    </t-radio-button>
                    <t-radio-button value="center">
                      <t-tooltip placement="top" :content="$t('居中')">
                        <format-vertical-align-center-icon></format-vertical-align-center-icon>
                        <!-- <t-icon name="format-vertical-align-center" /> -->
                      </t-tooltip>
                    </t-radio-button>
                    <t-radio-button value="right">
                      <t-tooltip placement="top" :content="$t('居右')">
                        <format-vertical-align-right-icon></format-vertical-align-right-icon>
                        <!-- <t-icon name="format-vertical-align-right" /> -->
                      </t-tooltip>
                    </t-radio-button>
                  </t-radio-group>
                  <t-radio-group
                    class="ml-8"
                    size="small"
                    v-model="data.textBaseline"
                    default-value="top"
                    @change="changeValue('textBaseline')"
                  >
                    <t-radio-button value="top">
                      <t-tooltip placement="top" :content="$t('顶部对齐')">
                        <format-horizontal-align-top-icon></format-horizontal-align-top-icon>
                        <!-- <t-icon name="format-horizontal-align-top" /> -->
                      </t-tooltip>
                    </t-radio-button>
                    <t-radio-button value="middle">
                      <t-tooltip placement="middle" :content="$t('垂直居中')">
                        <format-horizontal-align-center-icon></format-horizontal-align-center-icon>
                        <!-- <t-icon name="format-horizontal-align-center" /> -->
                      </t-tooltip>
                    </t-radio-button>
                    <t-radio-button value="bottom">
                      <t-tooltip placement="top" :content="$t('底部对齐')">
                        <format-horizontal-align-bottom-icon></format-horizontal-align-bottom-icon>
                        <!-- <t-icon name="format-horizontal-align-bottom" /> -->
                      </t-tooltip>
                    </t-radio-button>
                  </t-radio-group>

                  <t-button
                    :class="{ active: data.fontWeight === 'bold' }"
                    class="ml-8 icon"
                    shape="rectangle"
                    variant="text"
                    @click="
                      data.fontWeight === 'bold'
                        ? (data.fontWeight = 'normal')
                        : (data.fontWeight = 'bold');
                      changeValue('fontWeight');
                    "
                  >
                    B
                  </t-button>

                  <t-button
                    :class="{ active: data.fontStyle === 'italic' }"
                    class="ml-4 icon"
                    shape="rectangle"
                    variant="text"
                    @click="
                      data.fontStyle === 'italic'
                        ? (data.fontStyle = 'normal')
                        : (data.fontStyle = 'italic');
                      changeValue('fontStyle');
                    "
                    style="font-style: italic; font-family: serif"
                    >I</t-button
                  >
                </div>
                <div class="form-item">
                  <t-color-picker
                    class="simple mt-8 mr-4"
                    format="CSS"
                    :enable-alpha="true"
                    :recentColors="null"
                    :swatch-colors="defaultPureColor"
                    :color-modes="['monochrome']"
                    :show-primary-color-preview="false"
                    v-model="data.textColor"
                    @change="changeValue('textColor')"
                  />
                  <label style="width: 44px">{{$t( '前景' )}}</label>
                  <t-color-picker
                    class="simple mt-8 mr-4"
                    :enable-alpha="true"
                    :recent-colors="null"
                    format="CSS"
                    :swatch-colors="defaultPureColor"
                    :color-modes="['monochrome']"
                    :show-primary-color-preview="false"
                    v-model="data.textBackground"
                    @change="changeValue('textBackground')"
                  />
                  <label style="width: 44px">{{$t( '背景' )}}</label>

                  <t-color-picker class="simple mt-8 mr-4" :enable-alpha="true" :recent-colors="null" format="CSS" :swatch-colors="defaultPureColor" :color-modes="['monochrome']" :show-primary-color-preview="false" v-model="data.hoverTextColor" @change="changeValue('hoverTextColor')"></t-color-picker>
                  <label style="width: 44px">{{$t('悬停')}}</label>

                  <t-color-picker class="simple mt-8 mr-4" format="CSS" :enable-alpha="true" :recent-colors="null" :swatch-colors="defaultPureColor" :color-modes="['monochrome']" :show-primary-color-preview="false" v-model="data.activeTextColor" @change="changeValue('activeTextColor')"></t-color-picker>
                  <label style="width: 44px">{{$t('选中')}}</label>
                </div>
                <div class="form-item">
                  <t-checkbox v-model="data.whiteSpace" @change="changeValue('whiteSpace')" style="width: 64px">
                    {{$t('换行')}}
                  </t-checkbox>
                  <t-checkbox v-model="data.ellipsis" @change="changeValue('ellipsis')" style="width: 68px">
                    {{$t('省略号')}}
                  </t-checkbox>
                  <t-tooltip :content="$t('行高')">
                    <t-input v-model.number="data.lineHeight" style="width: 40px" @change="changeValue('lineHeight')" :placeholder="$t('行高')"></t-input>
                  </t-tooltip>
                  <t-tooltip :content="$t('显示时保留小数位数')">
                    <t-input class="ml-4" v-model.number="data.keepDecimal" style="width: 60px" @change="changeValue('keepDecimal')" :placeholder="$t('小数')"></t-input>
                  </t-tooltip>
                </div>
                <div class="form-item" style="margin-top: -4px">
                  <t-tooltip :content="$t('水平偏移')">
                    <t-input placeholder="X" v-model.number="data.textLeft" style="width: 60px; margin-left: -8px" @change="changeValue('textLeft')"></t-input>
                  </t-tooltip>
                  <t-tooltip :content="$t('垂直偏移')">
                    <t-input class="ml-4" placeholder="Y" v-model.number="data.textTop" style="width: 60px" @change="changeValue('textTop')"></t-input>
                  </t-tooltip>
                  <t-tooltip :content="$t('宽')">
                    <t-input class="ml-4" v-model.number="data.textWidth" style="width: 60px" @change="changeValue('textWidth')" :placeholder="$t('宽')"></t-input>
                  </t-tooltip>
                  <t-tooltip :content="$t('高')">
                    <t-input class="ml-4" v-model.number="data.textHeight" style="width: 60px" @change="changeValue('textHeight')" :placeholder="$t('高')"></t-input>
                  </t-tooltip>
                </div>
                <div class="flex middle">
                  <t-checkbox v-model="data.disableInput" @change="changeValue('disableInput')" style="width: 64px">
                    {{$t('只读')}}
                  </t-checkbox>

                  <t-checkbox v-model="data.hiddenText" @change="changeValue('hiddenText')" style="width: 90px">
                    {{$t('隐藏文字')}}
                  </t-checkbox>
                </div>
              </t-space>
            </t-collapse-panel>
          </t-collapse>
        </t-space>
        <t-divider style="margin-top: -8px" />
        <div class="form-item p-16">
          <t-checkbox v-model="data.flipX" @change="changeValue('flipX')" style="width: 90px">
            {{$t('水平翻转')}}
          </t-checkbox>
          <t-checkbox v-model="data.flipY" @change="changeValue('flipY')" style="width: 90px">
            {{$t('垂直翻转')}}
          </t-checkbox>

          <label style="width: 50px">{{$t('锚点半径')}}</label>
          <input class="ml-4" v-model.number="data.anchorRadius" style="width: 20px" @change="changeValue('anchorRadius')" placeholder="4">
        </div>
        <t-divider />
        <div class="form-item p-16" style="margin-bottom: 20px">
          <t-checkbox v-model="data.disableRotate" @change="changeValue('disableRotate')" style="width: 90px">
            {{$t('禁止旋转')}}
          </t-checkbox>
          <t-checkbox v-model="data.disableSize" @change="changeValue('disableSize')" style="width: 90px">
            {{$t('禁止缩放')}}
          </t-checkbox>
          <t-checkbox v-model="data.disableAnchor" @change="changeValue('disableAnchor')" style="width: 90px">
            {{$t('禁用锚点')}}
          </t-checkbox>
        </div>
      </t-tab-panel>
    </t-tabs>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, onUnmounted, reactive, ref, computed,getCurrentInstance } from 'vue';

import { LockState, Pen, isDomShapes } from '@meta2d/core';

import { updatePen } from './pen';

import { useSelection } from '@/services/selections';
import { fonts, setChildrenVisible } from '@/services/common';
import { defaultGradientColor, defaultPureColor } from '@/services/defaults';
import { BrowseIcon, BrowseOffIcon, ChevronDownIcon, FormatVerticalAlignLeftIcon, FormatHorizontalAlignCenterIcon, FormatVerticalAlignCenterIcon, FormatVerticalAlignRightIcon, FormatHorizontalAlignTopIcon, FormatHorizontalAlignBottomIcon  } from 'tdesign-icons-vue-next';

const { selections } = useSelection();
const { proxy } = getCurrentInstance();
const $t = proxy.$t
const data = reactive<any>({
  tab: 1,
  locked: 0,
  lineWidth: 1,
});

const vAligns = [
  {
    value: 'left',
    label: $t('左对齐'),
    icon: '#l-align-left',
  },
  {
    value: 'center',
    label: $t('垂直居中对齐'),
    icon: '#l-align-center',
  },
  {
    value: 'right',
    label: $t('右对齐'),
    icon: '#l-align-right',
  },
  {
    value: 'top',
    label: $t('顶部对齐'),
    icon: '#l-align-top',
  },
  {
    value: 'middle',
    label: $t('水平居中对齐'),
    icon: '#l-align-middle',
  },
  {
    value: 'bottom',
    label: $t('底部对齐'),
    icon: '#l-align-bottom',
  }
];

const aligns = [
  {
    value: 'left',
    label: $t('左对齐'),
    icon: '#l-align-left',
  },
  {
    value: 'center',
    label: $t('垂直居中对齐'),
    icon: '#l-align-center',
  },
  {
    value: 'right',
    label: $t('右对齐'),
    icon: '#l-align-right',
  },
  {
    value: 'top',
    label: $t('顶部对齐'),
    icon: '#l-align-top',
  },
  {
    value: 'middle',
    label: $t('水平居中对齐'),
    icon: '#l-align-middle',
  },
  {
    value: 'bottom',
    label: $t('底部对齐'),
    icon: '#l-align-bottom',
  },
  {
    value: 'h-distribute',
    label: $t('水平等距'),
    icon: '#l-horizontal-between',
  },
  {
    value: 'v-distribute',
    label: $t('垂直等距'),
    icon: '#l-vertical-between',
  },
];

const aligns2 = [
  {
    value: 'left',
    label: $t('左对齐'),
    icon: '#l-align-left',
  },
  {
    value: 'center',
    label: $t('垂直居中对齐'),
    icon: '#l-align-center',
  },
  {
    value: 'right',
    label: $t('右对齐'),
    icon: '#l-align-right',
  },
  {
    value: 'top',
    label: $t('顶部对齐'),
    icon: '#l-align-top',
  },
  {
    value: 'middle',
    label: $t('水平居中对齐'),
    icon: '#l-align-middle',
  },
  {
    value: 'bottom',
    label: $t('底部对齐'),
    icon: '#l-align-bottom',
  },
  {
    value: 'same-size',
    label: $t('相同大小'),
    icon: '#l-same-size',
  },
];

function previewAlign(type,alignValue) {
  switch (type) {
    case 1:
      meta2d.alignNodesV(alignValue, meta2d.store.active)
      break;
    case 2:
      align(alignValue)
      break;
    case 3:
      align2(alignValue)
  }
  meta2d.render()
}
function recoverAlign(align?) {
  if(align && (align === 'h-distribute' || align === 'v-distribute') && meta2d.store.active.length <= 2) return
  meta2d.undo()
}

onBeforeMount(() => {
  const d = meta2d.store.data as any;
  if (!d.groups) {
    d.groups = [];
  }
  data.groups = d.groups;

  if (!data.tags) {
    data.tags = [];
  }
  let tags = selections.pens[0].tags;
  if(tags.length){
    tags.forEach((tag: string) => {
      let common = selections.pens.every((item: Pen) => {
        return item.tags.includes(tag);
      });
      if (common) {
        data.tags.push(tag);
      }
    });
  }
});

const lock = (v: LockState) => {
  data.locked = v;
  for (const item of selections.pens) {
    meta2d.setValue({
      id: item.id,
      locked: v,
    });
  }
};

const visible = (v: boolean) => {
  data.visible = v;
  for (const item of selections.pens) {
    meta2d.setVisible(item as any, v);
  }
};

const align = (align: string) => {
  if (align === 'h-distribute') {
    meta2d.spaceBetween(meta2d.store.active);
  } else if (align === 'v-distribute') {
    meta2d.spaceBetweenColumn(meta2d.store.active);
  } else {
    meta2d.alignNodes(align, meta2d.store.active);
  }
};

const alignV = (align: string) => {
  meta2d.alignNodesV(align, meta2d.store.active);
  // getRect();
  meta2d.render();
};

const align2 = (align: string) => {
  if (align === 'same-size') {
    meta2d.beSameByLast(meta2d.store.active);
  } else {
    meta2d.alignNodesByLast(align, meta2d.store.active);
  }
};

const changeValue = (prop: string) => {
  for (const item of selections.pens) {
    data.id = item.id;
    updatePen(data, prop, false);
  }
  meta2d.render();
};

const onFontFamily = (fontFamily: string) => {
  data.fontFamily = fontFamily;
  data.fontFamilyPopupVisible = false;
  changeValue('fontFamily');
};

const onFontPopupVisible = (val: boolean) => {
  data.fontFamilyPopupVisible = val;
};

const decimalRound = (val: number) => {
  return Math.round(+val || 0);
};

const onSelectTag = (tag: string) => {
  data.tagPopupVisible = false;
  if (data.tags.includes(tag)) {
    return;
  }
  data.tags.push(tag);
  // changeValue('tags');
  selections.pens.forEach((pen: Pen) => {
    pen.tags.push(tag);
  });
};

const onChangeInputTag = (currentTags: any, context: any) => {
  const { trigger, index, item } = context;
  if (['tag-remove', 'backspace'].includes(trigger)) {
    data.tags.splice(index, 1);
    selections.pens.forEach((pen: Pen) => {
      pen.tags.splice(pen.tags.indexOf(item), 1);
    });
  }
  if (trigger === 'enter') {
    onSelectTag(item);
    const d = meta2d.store.data as any;
    if (!d.groups.includes(item)) {
      d.groups.push(item);
      data.groups = d.groups;
    }
    data.inputTag = '';
  }
  data.tagPopupVisible = false;
};

const hasDom = computed(() => {
  return selections.pens.some((item: Pen) => {
    return isDomShapes.includes(item.name) ||
      item.name.endsWith('Dom') ||
      meta2d.store.options.domShapes.includes(item.name);
  });
});

const allImg = computed(() => {
  return selections.pens.every((item: Pen) => {
    return item.name === 'image';
  });
});

</script>
<style lang="postcss" scoped>
.props {
  .icons {
    display: flex;

    svg:hover {
      cursor: pointer;
      color: var(--color-primary);
    }

    .btn {
      font-size: 16px;
      margin-right: 16px;
      color: var(--color);
    }
  }
}
</style>