dySdDesignerVue_DesignModule/src/views/Editor/CanvasLeft/Menu/components/FrontEditorPool.vue

<template>
  <div>
    <el-scrollbar>
      <!--        背景-->
      <el-card v-if="backGroundObject.permissionsConfig && (backGroundObject.permissionsConfig.length > 0)"
               :body-style="{background: '#f8f8f8'}"
               style="max-width: 100%; border-radius: 8px">

        <el-row style="margin-bottom: 10px">
          <el-col :span="22">
            <span class="eleTitle">编辑背景</span>
          </el-col>
        </el-row>

        <el-row class="permRow" :gutter="20">
          <el-col :span="10">
            <span class="eleLabel">显示背景</span>
          </el-col>
          <el-col :span="14">
            <el-switch
                v-model="backGroundObject.visible"
                :active-value="true"
                :inactive-value="false"
                @change="setBackGroudVisible"
            />
          </el-col>
        </el-row>

        <template v-for="(perm) in backGroundObject.permissionsConfig">
          <el-row class="permRow" v-if="perm == '0'">
            <el-row>
              <span class="eleLabel">选择颜色</span>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="4" v-for="color in backGroundObject.userSelectableColors">
                <el-button class="colorButton" :color="color" @click="updateBackground({color: color, fill: color})"/>
              </el-col>
            </el-row>
          </el-row>

          <el-row class="permRow" v-if="perm == '1'">
            <el-row>
              <span class="eleLabel">背景尺寸</span>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input
                    v-model="canvasWidth"
                    :value="pageSizeWidth"
                    @change="changeTemplateWidth"
                    oninput="value=value.replace(/[^\d.]/g,'')"
                >
                  <template #prepend>宽</template>
                </el-input>
              </el-col>
              <el-col :span="2"/>
              <el-col :span="11">
                <el-input
                    v-model="canvasHeight"
                    :value="pageSizeHeight"
                    @change="changeTemplateHeight"
                    oninput="value=value.replace(/[^\d.]/g,'')"
                >
                  <template #prepend>高</template>
                </el-input>
              </el-col>
            </el-row>
          </el-row>
        </template>
      </el-card>

      <!--      文本-->
      <el-card v-if="textPermDisplay"
               :body-style="{background: '#f8f8f8'}"
               style="max-width: 100%; border-radius: 8px">

        <el-row style="margin-bottom: 10px">
          <el-col :span="24">
            <span class="eleTitle">编辑文本</span>
          </el-col>
          <el-col :span="24">
            <el-tabs v-model="activeTextTabIndex">
              <el-tab-pane v-for="(text,index) in textObjects" :label="text.itemName" :name="index">
                <template v-for="(perm) in text.permissionsConfig">
                  <!--                  文本内容-->
                  <el-row class="permRow" v-if="perm == '0'">
                    <el-col :span="4">
                      <span class="eleLabel">文本</span>
                    </el-col>
                    <el-col :span="20">
                      <el-select
                          v-model="text.text"
                          filterable
                          allow-create
                          default-first-option
                          @change="eleTextChange(text, $event)">
                        <el-option v-for="str in text.userPresetTexts"
                                   :key="str.text"
                                   :label="str.text"
                                   :value="str.text"/>
                      </el-select>
                    </el-col>
                  </el-row>

                  <!--                  字号-->
                  <el-row class="permRow" v-if="perm == '1'">
                    <el-col :span="4">
                      <span class="eleLabel">字号</span>
                    </el-col>
                    <!--                    <el-col :span="20">-->
                    <!--                      <el-button-group class="full-group">-->
                    <!--                        <el-tooltip placement="top" content="增大字号" :hide-after="0">-->
                    <!--                          <el-button class="font-size" @click="handleElementFontsize(text.id,'+')">-->
                    <!--                            <IconFontSize/>-->
                    <!--                            +-->
                    <!--                          </el-button>-->
                    <!--                        </el-tooltip>-->

                    <!--                        <el-tooltip placement="top" content="减小字号" :hide-after="0">-->
                    <!--                          <el-button @click="handleElementFontsize(text.id,'-')">-->
                    <!--                            <IconFontSize/>-->
                    <!--                            - -->
                    <!--                          </el-button>-->
                    <!--                        </el-tooltip>-->
                    <!--                      </el-button-group>-->
                    <!--                    </el-col>-->

                    <el-col :span="20">
                      <el-select
                          v-model="text.fontSize"
                          filterable
                          allow-create
                          default-first-option
                          placement="left"
                          @change="handleElementFontSize(text.id,$event)"
                      >
                        <el-option v-for="item in FontSizeLibs" :key="item" :label="item" :value="item"></el-option>
                      </el-select>
                    </el-col>
                  </el-row>

                  <!--                  字体-->
                  <el-row class="permRow" v-if="perm == '2'">
                    <el-col :span="4">
                      <span class="eleLabel">字体</span>
                    </el-col>
                    <el-col :span="20">
                      <el-select v-model="text.fontFamily" placement="left"
                                 @change="handleElementFontFamily(text.id, $event)">
                        <el-option-group v-for="group in fontOptionGroups" :key="group.label" :label="group.label">
                          <template v-if="group.type == 0">
                            <el-option v-for="item in group.options" :key="item" :value="item.value" :label="item.label"
                                       :style="{fontFamily: item.value}"></el-option>
                          </template>
                          <template v-else>
                            <el-option v-for="item in group.options" :key="item.id" :value="item.fontFamily"
                                       :label="item.fontName">
                              <el-image style="height: 18px; width: 90px" :src="item.fontThumbUrl"></el-image>
                            </el-option>
                          </template>
                        </el-option-group>
                      </el-select>
                    </el-col>
                  </el-row>

                  <!--曲线文字需要调整曲率-->
                  <el-row class="permRow" v-if="text.type.toLowerCase() === ElementNames.ARCTEXT && perm == '0'">
                    <el-col :span="4">
                      <span class="eleLabel">曲率</span>
                    </el-col>
                    <el-col :span="1"></el-col>
                    <el-col :span="19" class="flex-align">
                      <el-slider :min="1" :max="1000" :step="1" v-model="text.radius"
                                 @change="changeArcTextRadius(text.id, $event)" size="small"></el-slider>
                    </el-col>
                  </el-row>


                  <!--                  颜色-->
                  <el-row class="permRow" v-if="perm == '3'">
                    <el-row>
                      <span class="eleLabel">选择颜色</span>
                    </el-row>
                    <el-row :gutter="10">
                      <el-col :span="4" v-for="color in text.userSelectableColors">
                        <el-button class="colorButton" :color="color" @click="updateFontColor(text.id,color)"/>
                      </el-col>
                    </el-row>
                  </el-row>

                  <!--                  字间距-->
                  <el-row class="permRow" v-if="perm == '4'">
                    <el-col :span="4">
                      <span class="eleLabel">缩进</span>
                    </el-col>
                    <el-col :span="20">
                      <el-button-group class="full-group">
                        <el-tooltip placement="top" content="减小缩进" :hide-after="0">
                          <el-button @click="handleElementCharSpacing(text.id,'-')">
                            <IconIndentLeft/>
                          </el-button>
                        </el-tooltip>
                        <el-tooltip placement="top" content="增大缩进" :hide-after="0">
                          <el-button @click="handleElementCharSpacing(text.id,'+')">
                            <IconIndentRight/>
                          </el-button>
                        </el-tooltip>
                      </el-button-group>
                    </el-col>
                  </el-row>

                  <!--                  尺寸及位置-->
                  <el-row class="permRow" v-if="perm == '5'">
                    <el-col :span="4">
                      <span class="eleLabel">尺寸</span>
                    </el-col>
                    <el-col :span="20">
                      <el-tag effect="dark" type="info">请拖拽右侧元素更改元素尺寸</el-tag>
                    </el-col>
                  </el-row>
                  <el-row class="permRow" v-if="perm == '6'">
                    <el-col :span="4">
                      <span class="eleLabel">位置</span>
                    </el-col>
                    <el-col :span="20">
                      <el-tag effect="dark" type="info">请拖拽右侧元素更改元素位置</el-tag>
                    </el-col>
                  </el-row>
                </template>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-card>

      <!--      图片-->
      <el-card v-if="imgPermDisplay"
               :body-style="{background: '#f8f8f8'}"
               style="max-width: 100%; border-radius: 8px;">

        <el-row style="margin-bottom: 10px">
          <el-col :span="24">
            <span class="eleTitle">编辑图片</span>
          </el-col>
          <el-col :span="24">
            <el-tabs v-model="activeImgTabIndex">
              <el-tab-pane v-for="(img,index) in imgObjects" :label="img.itemName" :name="index">
                <template v-for="(perm) in img.permissionsConfig">
                  <!--                  上传图片-->
                  <el-row class="permRow" v-if="perm == '0'">
                    <el-col :span="4">
                      <span class="eleLabel">上传</span>
                    </el-col>
                    <el-col :span="20">
                      <FileInput class="full-width-btn" @change="(files: FileList) => replaceImage(img.id,files)">
                        <el-button class="full-btn">
                          <IconTransform class="btn-icon"/>
                        </el-button>
                      </FileInput>
                    </el-col>
                  </el-row>
                  <!--                  尺寸及位置-->
                  <el-row class="permRow" v-if="perm == '1'">
                    <el-col :span="4">
                      <span class="eleLabel">尺寸</span>
                    </el-col>
                    <el-col :span="20">
                      <el-tag effect="dark" type="info">请拖拽右侧元素更改元素尺寸</el-tag>
                    </el-col>
                  </el-row>
                  <el-row class="permRow" v-if="perm == '2'">
                    <el-col :span="4">
                      <span class="eleLabel">位置</span>
                    </el-col>
                    <el-col :span="20">
                      <el-tag effect="dark" type="info">请拖拽右侧元素更改元素位置</el-tag>
                    </el-col>
                  </el-row>
                </template>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-card>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import useCanvas from "@/views/Canvas/useCanvas";
import {computed, ref} from "vue";
import {MaxSize, MinSize, TransparentFill} from "@/configs/background";
import {WorkSpaceElement} from "@/types/canvas";
import {storeToRefs} from "pinia";
import {useFabricStore, useMainStore, useTemplatesStore} from "@/store";
import {propertiesToInclude, WorkSpaceDrawType} from "@/configs/canvas";
import {Image, Pattern, Textbox, util} from "fabric";
import useHandleBackground from "@/hooks/useHandleBackground";
import {mm2px, px2mm} from "@/utils/image";
import {ElMessage} from "element-plus";
import useI18n from "@/hooks/useI18n";
import {ArcText} from "@/extension/object/ArcText";
import {ElementNames, FontGroupOption} from "@/types/elements";
import {FontSizeLibs} from "@/configs/texts";

const {t} = useI18n();
const mainStore = useMainStore();
const {sizeMode, unitMode} = storeToRefs(mainStore);
const {canvasObject, systemFonts, onlineFonts} = storeToRefs(mainStore)
const [canvas] = useCanvas();
const templatesStore = useTemplatesStore();
const {setBackgroudImage} = useHandleBackground();
const {currentTemplate} = storeToRefs(templatesStore);
const fabricStore = useFabricStore();
const {clip, safe, zoom, opacity} = storeToRefs(fabricStore);


const objects = canvas.getObjects().filter((object) => !["WorkSpaceMaskType", "WorkSpaceClipType", "WorkSpaceSafeType", "WorkSpaceClipType"].includes(object.id));


// const objects = computed(() => {
//   return /*canvas == null ? [] :*/ canvas.getObjects().filter((object) => !["WorkSpaceMaskType", "WorkSpaceClipType", "WorkSpaceSafeType", "WorkSpaceClipType"].includes(object.id));
// })
// const backGroundObject = computed(() => {
//   const backGround = canvas.getObjects().filter((item) => item.id === WorkSpaceDrawType)[0];
//   return /*canvas == null ? {} :*/ backGround ? backGround : {};
// })
// const textObjects = computed(() => {
//   const textObjectList = canvas.getObjects().filter((item) => item.name === 'textbox')
//   return /*canvas == null ? [] :*/ textObjectList.length > 0 ? textObjectList : [];
// })
// const imgObjects = computed(() => {
//   const imgList = canvas.getObjects().filter((item) => item.name === 'image')
//   return /*canvas == null ? [] :*/ imgList.length > 0 ? imgList : [];
// })

const backGroundObject = canvas.getObjects().filter((item) => item.id === WorkSpaceDrawType)[0];
const textObjects = currentTemplate.value.objects.filter((item) => item.name === 'textbox');
const imgObjects = currentTemplate.value.objects.filter((item) => item.name === 'image');

const textPermDisplay = computed(() => {
  let result = false;
  textObjects.forEach(x => {
    if (x.permissionsConfig && (x.permissionsConfig.length > 0)) {
      result = true;
      return;
    }
  })
  return result;
})

const imgPermDisplay = computed(() => {
  let result = false;
  imgObjects.forEach(x => {
    if (x.permissionsConfig && (x.permissionsConfig.length > 0)) {
      result = true;
      return;
    }
  })
  return result;
})

const activeTextTabIndex = ref(0)
const activeImgTabIndex = ref(0)

const pageSizeWidth = computed(() => {
  return Math.round(templateWidth.value * 100) / 100
})
const pageSizeHeight = computed(() => {
  return Math.round(templateHeight.value * 100) / 100
})
const templateWidth = computed(() => {
  const workWidth = currentTemplate.value.width / currentTemplate.value.zoom;
  return unitMode.value === 0 ? px2mm(workWidth) : workWidth;
});

const templateHeight = computed(() => {
  const workHeight = currentTemplate.value.height / currentTemplate.value.zoom;
  return unitMode.value === 0 ? px2mm(workHeight) : workHeight;
});

const canvasWidth = ref<number>(templateWidth.value);
const canvasHeight = ref<number>(templateHeight.value);

const background = computed(() => {
  if (!currentTemplate.value) {
    return {
      fillType: 0,
      fill: TransparentFill,
      backgroundColor: "#fff",
    } as WorkSpaceElement;
  }
  if (!currentTemplate.value.workSpace) {
    return {
      fillType: 0,
      fill: TransparentFill,
      backgroundColor: "#fff",
    } as WorkSpaceElement;
  }
  return currentTemplate.value.workSpace;
});

const fontOptionGroups = ref<FontGroupOption[]>([
  {
    type: 0,
    label: '系统字体',
    options: systemFonts.value
  },
  {
    type: 1,
    label: '在线字体',
    options: onlineFonts.value
  }
])


// 固定宽高
const isFixed = ref(false);
// 设置背景
const updateBackground = (props: Partial<WorkSpaceElement>) => {
  const [canvas] = useCanvas();
  const workSpaceDraw = canvas.getObjects().filter((item) => item.id === WorkSpaceDrawType)[0];
  if (!workSpaceDraw) return;
  workSpaceDraw.set({...props});
  if (props.fill instanceof Pattern) {
    props.fill = props.fill.toObject() as Pattern
  }
  templatesStore.updateWorkSpace({workSpace: {...background.value, ...props}});
  const workProps = workSpaceDraw.toObject(propertiesToInclude as any[]);
  templatesStore.updateElement({id: workSpaceDraw.id, props: {...workProps, ...props}});
  canvas.renderAll();
};

// 设置背景可见
const setBackGroudVisible = (val) => {
  templatesStore.modifedElement(backGroundObject, {visible: val})
}

// 修改上传背景
const changeBackgroundImage = async (imageURL: string) => {
  if (background.value.imageSize === "repeat") {
    const backgroundImage = await util.loadImage(imageURL);
    const workSpacePattern = new Pattern({
      source: backgroundImage,
      repeat: "repeat",
    });
    updateBackground({fill: workSpacePattern, imageURL});
  } else {
    setBackgroudImage(imageURL);
    updateBackground({fill: TransparentFill, imageURL});
  }
};

// 获取画布尺寸
const getCanvasSize = () => {
  let width =
      unitMode.value === 0 ? mm2px(canvasWidth.value) : canvasWidth.value;
  let height =
      unitMode.value === 0 ? mm2px(canvasHeight.value) : canvasHeight.value;
  width = width * zoom.value;
  height = height * zoom.value;
  return {width, height};
};

// 修改画布宽度
const changeTemplateWidth = () => {
  const [canvas] = useCanvas();
  const workSpaceDraw = canvas
      .getObjects()
      .filter((item) => item.id === WorkSpaceDrawType)[0];
  if (!workSpaceDraw) return;
  const ratio = currentTemplate.value.height / currentTemplate.value.width;
  let {width, height} = getCanvasSize();
  if (width / zoom.value < mm2px(MinSize)) {
    ElMessage({
      message: t("style.minimumSizeLimit") + MinSize,
      type: "warning",
    });
    width = mm2px(MinSize) * zoom.value;
  }
  if (width / zoom.value > mm2px(MaxSize)) {
    ElMessage({
      message: t("style.maximumSizeLimit") + MaxSize,
      type: "warning",
    });
    width = mm2px(MaxSize) * zoom.value;
  }
  height = isFixed.value ? width * ratio : height;
  workSpaceDraw.set({width: width / zoom.value, height: height / zoom.value});
  templatesStore.setSize(width, height, zoom.value);
  sizeMode.value = 2;
  canvas.renderAll();
  // resetCanvas()
  // addHistorySnapshot();
};

// 修改画布高度
const changeTemplateHeight = () => {
  const [canvas] = useCanvas();
  const workSpaceDraw = canvas
      .getObjects()
      .filter((item) => item.id === WorkSpaceDrawType)[0];
  if (!workSpaceDraw) return;
  const ratio = currentTemplate.value.height / currentTemplate.value.width;
  let {width, height} = getCanvasSize();
  if (height / zoom.value < mm2px(MinSize)) {
    ElMessage({
      message: t("style.minimumSizeLimit") + MinSize,
      type: "warning",
    });
    height = mm2px(MinSize) * zoom.value;
  }
  if (height / zoom.value > mm2px(MaxSize)) {
    ElMessage({
      message: t("style.maximumSizeLimit") + MaxSize,
      type: "warning",
    });
    height = mm2px(MaxSize) * zoom.value;
  }
  width = isFixed.value ? height / ratio : width;
  workSpaceDraw.set({width: width / zoom.value, height: height / zoom.value});
  templatesStore.setSize(width, height, zoom.value);
  sizeMode.value = 2;
  canvas.renderAll();
  // resetCanvas()
  // addHistorySnapshot();
};

//查找目标元素
const findObject = (objId: string) => {
  return objects.find((item) => item.id === objId);
}

// 文字核心调整函数0-默认
function adjustFontDefault(textbox, maxHeight, maxWidth) {
  const textWidth = textbox.calcTextWidth();

  const scaleWidth = textWidth > maxWidth ? textWidth : maxWidth

  if (textbox.isEditing) {
    textbox.setSelectionStyles({width: scaleWidth})
  } else {
    templatesStore.modifedElement(textbox, {width: scaleWidth})
  }
}

// 文字核心调整函数1-尺寸
function adjustFontSize(textbox, maxHeight, maxWidth) {
  let currentSize = textbox.fontSize;
  const maxFontSize = 80
  const minFontSize = 6

  console.log("宽" + maxWidth + "高" + maxHeight)
  // 若空间有余，尝试恢复最大字号
  while (/*textbox.width <= maxWidth*/ textbox.height < maxHeight && currentSize < maxFontSize) {
    currentSize += 1;
    const fontSize = currentSize
    if (textbox.isEditing) {
      textbox.setSelectionStyles({fontSize})
    } else {
      templatesStore.modifedElement(textbox, {fontSize})
    }
  }

  // 检测是否超出边界
  while (/*(textbox.width > maxWidth ||*/ textbox.height > maxHeight && currentSize > minFontSize) {
    currentSize -= 1;
    const fontSize = currentSize
    if (textbox.isEditing) {
      textbox.setSelectionStyles({fontSize})
    } else {
      templatesStore.modifedElement(textbox, {fontSize})
    }
  }

}

// 文字核心调整函数2-缩放
function adjustFontScale(textbox, maxHeight, maxWidth, originScaleX) {
  let scaleX = originScaleX;

  // console.log('width ' + maxWidth);
  const textWidth = textbox.calcTextWidth();

  const scaleWidth = textWidth > maxWidth ? textWidth : maxWidth
  // console.log('textWidth ' + textWidth);
  scaleX *= maxWidth / scaleWidth;
  // console.log('scaleX ' + scaleX);

  if (textbox.isEditing) {
    textbox.setSelectionStyles({scaleX})
    textbox.setSelectionStyles({width: maxWidth})
    // textbox.setSelectionStyles({height: maxHeight})
  } else {
    templatesStore.modifedElement(textbox, {scaleX})
    templatesStore.modifedElement(textbox, {width: maxWidth})
    // templatesStore.modifedElement(textbox, {height: maxHeight})
  }
}

//修改文字信息
const eleTextChange = (obj, text) => {
  const handleElement = findObject(obj.id) as Textbox | ArcText;

  const maxHeight = obj.objOriginHeight
  const maxWidth = obj.objOriginWidth
  const originScaleX = obj.objOriginScaleX

  if (handleElement.isEditing) {
    handleElement.setSelectionStyles({text})
  } else {
    templatesStore.modifedElement(handleElement, {text})
  }
  // canvas.renderAll()

  // 读取预设的缩放行为
  let scaleType = 0
  if (obj.textScaleType >= 0)
    scaleType = obj.textScaleType

  if (scaleType == 0)
    adjustFontDefault(handleElement, maxHeight, maxWidth)
  else if (scaleType == 1)
    adjustFontSize(handleElement, maxHeight, maxWidth)
  else if (scaleType == 2)
    adjustFontScale(handleElement, maxHeight, maxWidth, originScaleX)
}

// 修改字体大小
const handleElementFontsize = (objId: string, mode: string) => {
  const handleElement = findObject(objId) as Textbox | ArcText;

  if (handleElement.fontSize <= 6) return
  const fontSize = mode === '+' ? Number(handleElement.fontSize) + 1 : Number(handleElement.fontSize) - 1
  if (handleElement.isEditing) {
    handleElement.setSelectionStyles({fontSize})
  } else {
    templatesStore.modifedElement(handleElement, {fontSize})
  }
  canvas.renderAll()
}

// 修改字体大小-直接输入
const handleElementFontSize = (objId: string, fontSize: string) => {
  const handleElement = findObject(objId) as Textbox | ArcText;

  fontSize = fontSize.replace(/[^\d]/g, '')
  if (!fontSize) return
  if (handleElement.isEditing) {
    handleElement.setSelectionStyles({fontSize})
  } else {
    templatesStore.modifedElement(handleElement, {fontSize})
  }
  canvas.renderAll()
}

// 修改字体族
const handleElementFontFamily = (objId: string, fontFamily: string) => {
  const handleElement = findObject(objId) as Textbox | ArcText;

  if (handleElement.isEditing) {
    handleElement.setSelectionStyles({fontFamily})
  } else {
    templatesStore.modifedElement(handleElement, {fontFamily})
  }
  canvas.renderAll()
}

// 修改字体颜色
const updateFontColor = (objId: string, fill: string) => {
  const handleElement = findObject(objId) as Textbox | ArcText;

  if (handleElement.isEditing) {
    handleElement.setSelectionStyles({fill})
  } else {
    templatesStore.modifedElement(handleElement, {fill, color: fill})
  }
}

//修改字体曲率
const changeArcTextRadius = (objId: string, val: number) => {
  const handleElement = findObject(objId) as Textbox | ArcText;

  (handleElement as ArcText).setRadius(val);
  templatesStore.modifedElement(handleElement, {radius: val});
}

// 修改缩进
const handleElementCharSpacing = (objId: string, mode: '+' | '-') => {
  const handleElement = findObject(objId) as Textbox | ArcText;

  const handleCharSpacing = handleElement.charSpacing
  const charSpacing = mode === '+' ? handleCharSpacing + 10 : handleCharSpacing - 10
  templatesStore.modifedElement(handleElement, {charSpacing})
}

// 替换图片（保持当前的样式）
const replaceImage = (objId: string, files: FileList) => {
  const handleElement = findObject(objId) as Image;

  const props = {src: files.fileLink};
  handleElement.setSrc(files.fileLink); //红就红吧type硬赋值了
  templatesStore.updateElement({id: handleElement.id, props});
};

onMounted(() => {
  // console.log('aaaaaaaaaaaaassssssssssssssss' + JSON.stringify(textObjects))

  //记录所有text的原始宽高,用于自动缩放字体
  textObjects.forEach(x => {
    const handleElement = findObject(x.id) as Textbox | ArcText;
    x.objOriginHeight = handleElement.height
    x.objOriginWidth = handleElement.width
    x.objOriginScaleX = handleElement.scaleX
  })
})

</script>

<style lang="scss" scoped>
:deep(.el-tabs__item) {
  padding: 0;
}

.layout-search {
  margin: 0 auto;
  width: 80%;
  padding: 20px 10px 10px;
}

.layout-upload {
  justify-content: center;
}

.layout-tabs {
  width: 90%;
  margin: 0 auto;
}

.layout-templates {
  display: flex;
  flex-wrap: wrap;
  padding: 2px;

  .thumbnail {
    display: flex;
    width: 124px;
    margin: 2px;
  }

  .thumbnail img {
    outline: 1px solid $borderColor;
    margin: 0 5px;
    cursor: pointer;

    &:hover {
      outline-color: $themeColor;
    }
  }
}

.col-img {
  height: 100px;

  img {
    max-height: 100%;
  }
}

.eleTitle {
  font-size: 1.0rem;
  font-weight: bold;
}

.eleLabel {
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

.colorButton {
  margin-bottom: 5px;
}

.permRow {
  margin-top: 10px;
}

</style>