refactor(属性 hook): 封装通用hook属性修改方法

Author: nihaojob

.eslintrc-auto-import.json

@@ -64,4 +64,4 @@
     "watchPostEffect": true,
     "watchSyncEffect": true
   }
-}
+}

src/components/align.vue

@@ -2,12 +2,12 @@
  * @Author: 秦少卫
  * @Date: 2022-09-03 19:16:55
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-07-16 15:17:28
+ * @LastEditTime: 2024-10-07 17:26:59
  * @Description: 组合元素对齐
 -->
 
 <template>
-  <div v-if="mixinState.mSelectMode === 'multiple'" class="attr-item-box">
+  <div v-if="isMultiple" class="attr-item-box">
     <!-- <h3>对齐</h3> -->
     <Divider plain orientation="left"><h4>对齐</h4></Divider>
     <div class="bg-item">
@@ -74,7 +74,7 @@ import syIcon from '@/assets/icon/sy.svg';
 import centerxIcon from '@/assets/icon/centerx.svg';
 import centeryIcon from '@/assets/icon/centery.svg';
 
-const { mixinState, canvasEditor } = useSelect();
+const { canvasEditor, isMultiple } = useSelect();
 
 // 左对齐
 const left = () => {

src/components/attribute.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="box" v-if="mixinState.mSelectMode === 'one'">
+  <div class="box" v-if="isOne">
     <!-- 通用属性 -->
-    <div v-show="baseType.includes(mixinState.mSelectOneType)">
+    <div v-show="isMatchType">
       <Divider plain orientation="left">{{ $t('attributes.exterior') }}</Divider>
       <!-- 多边形边数 -->
-      <Row v-if="mixinState.mSelectOneType === 'polygon'" :gutter="12">
+      <Row v-if="selectType === 'polygon'" :gutter="12">
         <Col flex="0.5">
           <InputNumber
             v-model="baseAttr.points.length"
@@ -29,15 +29,7 @@ import useSelect from '@/hooks/select';
 import colorSelector from '@/components/colorSelector.vue';
 import { getPolygonVertices } from '@/utils/math';
 import InputNumber from '@/components/inputNumber';
-import { Spin } from 'view-ui-plus';
 
-const update = getCurrentInstance();
-const { mixinState, canvasEditor } = useSelect();
-
-const fontsList = ref([]);
-canvasEditor.getFontList().then((list) => {
-  fontsList.value = list;
-});
 // 通用元素
 const baseType = [
   'text',
@@ -53,6 +45,15 @@ const baseType = [
   'arrow',
   'thinTailArrow',
 ];
+
+const update = getCurrentInstance();
+const { selectType, canvasEditor, isOne, isMatchType } = useSelect(baseType);
+
+const fontsList = ref([]);
+canvasEditor.getFontList().then((list) => {
+  fontsList.value = list;
+});
+
 // 文字元素
 // 通用属性
 const baseAttr = reactive({

src/components/attributeBarcode.vue

@@ -2,17 +2,12 @@
  * @Author: 秦少卫
  * @Date: 2024-06-06 16:27:21
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-06-07 21:26:22
+ * @LastEditTime: 2024-10-07 17:30:43
  * @Description: 条形码插件
 -->
 
 <template>
-  <div
-    class="box attr-item-box"
-    v-if="
-      mixinState.mSelectMode === 'one' && textType.includes(mixinState.mSelectOneType) && isBarcode
-    "
-  >
+  <div class="box attr-item-box" v-if="isOne && isMatchType && isBarcode">
     <!-- <h3>字体属性</h3> -->
     <Divider plain orientation="left"><h4>条形码属性</h4></Divider>
     <div>
@@ -114,10 +109,9 @@ import InputNumber from '@/components/inputNumber';
 import { toRaw } from 'vue';
 
 const update = getCurrentInstance();
-const { mixinState, canvasEditor } = useSelect();
+const { isOne, canvasEditor, isMatchType } = useSelect(['image']);
 
 // 文字元素
-const textType = ['image'];
 const extensionType = ref('');
 
 const isBarcode = computed(() => extensionType.value === 'barcode');
@@ -150,11 +144,7 @@ const getObjectAttr = (e) => {
   // 不是当前obj，跳过
   if (e && e.target && e.target !== activeObject) return;
   extensionType.value = activeObject?.extensionType || '';
-  if (
-    activeObject &&
-    textType.includes(activeObject.type) &&
-    activeObject?.extensionType === 'barcode'
-  ) {
+  if (activeObject && isMatchType && activeObject?.extensionType === 'barcode') {
     baseAttr.value = activeObject.get('extension').value;
     baseAttr.format = activeObject.get('extension').format;
     baseAttr.text = activeObject.get('extension').text;

src/components/attributeBorder.vue

@@ -2,11 +2,11 @@
  * @Author: 秦少卫
  * @Date: 2024-05-21 10:18:57
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-26 22:59:26
+ * @LastEditTime: 2024-10-07 17:31:43
  * @Description: 边框
 -->
 <template>
-  <div class="box attr-item-box" v-if="mixinState.mSelectMode === 'one' && !isGroup">
+  <div class="box attr-item-box" v-if="isOne && !isGroup">
     <!-- <h3>边框</h3> -->
     <Divider plain orientation="left"><h4>边框</h4></Divider>
     <!-- 通用属性 -->
@@ -61,7 +61,7 @@ import useSelect from '@/hooks/select';
 import InputNumber from '@/components/inputNumber';
 
 const update = getCurrentInstance();
-const { mixinState, canvasEditor } = useSelect();
+const { isOne, isGroup, canvasEditor } = useSelect();
 
 const groupType = ['group'];
 // 属性值
@@ -146,7 +146,6 @@ const strokeDashList = [
   },
 ];
 
-const isGroup = computed(() => groupType.includes(mixinState.mSelectOneType));
 // 属性获取
 const getObjectAttr = (e) => {
   const activeObject = canvasEditor.canvas.getActiveObject();

src/components/attributeColor.vue

@@ -1,20 +1,13 @@
 <!--
  * @Author: 秦少卫
  * @Date: 2024-05-21 10:59:48
- * @LastEditors: June 1601745371@qq.com
- * @LastEditTime: 2024-06-20 17:46:45
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2024-10-07 17:32:19
  * @Description: 渐变
 -->
 
 <template>
-  <div
-    class="box attr-item-box"
-    v-if="
-      mixinState.mSelectMode === 'one' &&
-      mixinState.mSelectOneType !== 'image' &&
-      mixinState.mSelectOneType !== 'group'
-    "
-  >
+  <div class="box attr-item-box" v-if="isOne && selectType !== 'image' && selectType !== 'group'">
     <Divider plain orientation="left"><h4>颜色</h4></Divider>
     <!-- 通用属性 -->
     <div class="bg-item">
@@ -40,7 +33,7 @@ import colorPicker from './color-picker';
 import { toRaw } from 'vue';
 
 const update = getCurrentInstance();
-const { fabric, mixinState, canvasEditor } = useSelect();
+const { fabric, selectType, canvasEditor, isOne } = useSelect();
 const angleKey = 'gradientAngle';
 // 属性值
 const baseAttr = reactive({
@@ -52,7 +45,7 @@ const getObjectAttr = (e) => {
   const activeObject = canvasEditor.canvas.getActiveObject();
   // 不是当前obj，跳过
   if (e && e.target && e.target !== activeObject) return;
-  if (activeObject && mixinState.mSelectMode === 'one') {
+  if (activeObject && isOne) {
     const fill = activeObject.get('fill');
     if (typeof fill === 'string') {
       baseAttr.fill = fill;

src/components/attributeFont.vue

@@ -2,15 +2,12 @@
  * @Author: 秦少卫
  * @Date: 2024-05-21 10:35:12
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-21 15:43:48
+ * @LastEditTime: 2024-10-07 17:32:41
  * @Description: 字体属性
 -->
 
 <template>
-  <div
-    class="box attr-item-box"
-    v-if="mixinState.mSelectMode === 'one' && textType.includes(mixinState.mSelectOneType)"
-  >
+  <div class="box attr-item-box" v-if="isOne && isMatchType">
     <!-- <h3>字体属性</h3> -->
     <Divider plain orientation="left"><h4>字体属性</h4></Divider>
     <div>
@@ -134,10 +131,11 @@ import { Spin } from 'view-ui-plus';
 import InputNumber from '@/components/inputNumber';
 
 const update = getCurrentInstance();
-const { mixinState, canvasEditor } = useSelect();
 
 // 文字元素
 const textType = ['i-text', 'textbox', 'text'];
+const { canvasEditor, isMatchType, isOne } = useSelect(textType);
+
 // 属性值
 const baseAttr = reactive({
   fontSize: 0,
@@ -173,7 +171,7 @@ const getObjectAttr = (e) => {
   const activeObject = canvasEditor.canvas.getActiveObject();
   // 不是当前obj，跳过
   if (e && e.target && e.target !== activeObject) return;
-  if (activeObject && textType.includes(activeObject.type)) {
+  if (activeObject && isMatchType) {
     baseAttr.fontSize = activeObject.get('fontSize');
     baseAttr.fontFamily = activeObject.get('fontFamily');
     baseAttr.lineHeight = activeObject.get('lineHeight');

src/components/attributeId.vue

@@ -2,12 +2,12 @@
  * @Author: 秦少卫
  * @Date: 2024-05-21 09:53:33
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-21 15:36:36
+ * @LastEditTime: 2024-10-07 17:33:27
  * @Description: file content
 -->
 
 <template>
-  <div class="box attr-item-box" v-if="mixinState.mSelectMode === 'one'">
+  <div class="box attr-item-box" v-if="isOne">
     <!-- <h3>数据</h3> -->
     <Divider plain orientation="left"><h4>数据</h4></Divider>
 
@@ -46,7 +46,7 @@
 import useSelect from '@/hooks/select';
 
 const update = getCurrentInstance();
-const { mixinState, canvasEditor } = useSelect();
+const { canvasEditor, isOne } = useSelect();
 
 // 属性值
 const baseAttr = reactive({

src/components/attributePostion.vue

@@ -2,15 +2,15 @@
  * @Author: 秦少卫
  * @Date: 2024-05-21 09:23:36
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-21 15:37:27
+ * @LastEditTime: 2024-10-07 17:33:41
  * @Description: file content
 -->
 <template>
-  <div class="box attr-item-box" v-if="mixinState.mSelectMode === 'one'">
+  <div class="box attr-item-box" v-if="isOne">
     <!-- <h3>位置信息</h3> -->
     <Divider plain orientation="left"><h4>位置信息</h4></Divider>
     <!-- 通用属性 -->
-    <div v-show="baseType.includes(mixinState.mSelectOneType)">
+    <div v-show="isMatchType">
       <Row :gutter="10">
         <Col flex="1">
           <InputNumber
@@ -52,7 +52,6 @@ import useSelect from '@/hooks/select';
 import InputNumber from '@/components/inputNumber';
 
 const update = getCurrentInstance();
-const { mixinState, canvasEditor } = useSelect();
 
 // 可修改的元素
 const baseType = [
@@ -69,6 +68,7 @@ const baseType = [
   'arrow',
   'thinTailArrow',
 ];
+const { isMatchType, canvasEditor, isOne } = useSelect(baseType);
 
 // 属性值
 const baseAttr = reactive({
@@ -85,7 +85,7 @@ const getObjectAttr = (e) => {
   const activeObject = canvasEditor.canvas.getActiveObject();
   // 不是当前obj，跳过
   if (e && e.target && e.target !== activeObject) return;
-  if (activeObject && baseType.includes(activeObject.type)) {
+  if (activeObject && isMatchType) {
     baseAttr.opacity = activeObject.get('opacity') * 100;
     baseAttr.left = activeObject.get('left');
     baseAttr.top = activeObject.get('top');

src/components/attributeQrCode.vue

@@ -2,17 +2,12 @@
  * @Author: 秦少卫
  * @Date: 2024-06-06 20:04:48
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-06-07 20:56:55
+ * @LastEditTime: 2024-10-07 17:34:37
  * @Description: 二维码组件
 -->
 
 <template>
-  <div
-    class="box attr-item-box"
-    v-if="
-      mixinState.mSelectMode === 'one' && textType.includes(mixinState.mSelectOneType) && isQrcode
-    "
-  >
+  <div class="box attr-item-box" v-if="isOne && isMatchType && isQrcode">
     <!-- <h3>字体属性</h3> -->
     <Divider plain orientation="left"><h4>二位码属性</h4></Divider>
     <div>
@@ -145,10 +140,9 @@ import InputNumber from '@/components/inputNumber';
 import { toRaw } from 'vue';
 
 const update = getCurrentInstance();
-const { mixinState, canvasEditor } = useSelect();
+const { canvasEditor, isOne, isMatchType } = useSelect(['image']);
 
 // 文字元素
-const textType = ['image'];
 const extensionType = ref('');
 
 const isQrcode = computed(() => extensionType.value === 'qrcode');
@@ -174,11 +168,7 @@ const getObjectAttr = (e) => {
   // 不是当前obj，跳过
   if (e && e.target && e.target !== activeObject) return;
   extensionType.value = activeObject?.extensionType || '';
-  if (
-    activeObject &&
-    textType.includes(activeObject.type) &&
-    activeObject?.extensionType === 'qrcode'
-  ) {
+  if (activeObject && isMatchType && activeObject?.extensionType === 'qrcode') {
     const extension = activeObject.get('extension');
     Object.keys(extension).forEach((key) => {
       baseAttr[key] = extension[key];

src/components/attributeRounded.vue

@@ -2,14 +2,11 @@
  * @Author: 秦少卫
  * @Date: 2024-05-21 10:18:57
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-26 22:59:26
+ * @LastEditTime: 2024-10-07 17:35:31
  * @Description: 圆角
 -->
 <template>
-  <div
-    class="box attr-item-box"
-    v-if="mixinState.mSelectMode === 'one' && rectType.includes(mixinState.mSelectOneType)"
-  >
+  <div class="box attr-item-box" v-if="isOne && isMatchType">
     <!-- <h3>圆角</h3> -->
     <Divider plain orientation="left"><h4>圆角</h4></Divider>
     <!-- 通用属性 -->
@@ -44,10 +41,7 @@
 import useSelect from '@/hooks/select';
 
 const update = getCurrentInstance();
-const { mixinState, canvasEditor } = useSelect();
-
-// 矩形元素
-const rectType = ['rect'];
+const { canvasEditor, isOne, isMatchType } = useSelect(['rect']);
 
 // 属性值
 const baseAttr = reactive({