refactor: 调整变量名、增加缩放模式枚举

Author: cyxofgithub

src/components/CanvasArea/Block/index.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from 'react';
 import './index.css';
-import registerConfig from '../../MaterialPanel/registerConfig';
+import registerConfig, { ScaleMode } from '../../MaterialPanel/registerConfig';
 import React from 'react';
 import { GlobalContext, IBlock } from '../../../store';
 
 //私有常量
-const scaleDotPoints = ['lt', 'rt', 'lb', 'rb']; // 放大缩小
-const scaleLinePoints = ['l', 'r', 't', 'b']; // 横纵伸缩
+const scaleDotPoints = ['lt', 'rt', 'lb', 'rb']; // 四角缩放
+const scaleLinePoints = ['l', 'r', 't', 'b']; // 横竖缩放
 
 const cursorPoints = {
     lt: 'nw',
@@ -203,7 +203,7 @@ let Block = (_props: IProps) => {
             {RenderComponent}
             {block.focus ? (
                 <div className="block-focus-shape">
-                    {block.focusShape === 'scaleLine'
+                    {block.scaleMode === ScaleMode.HorizontalVerticalScale
                         ? scaleLinePoints.map(point => (
                               <span
                                   key={point}

src/components/CanvasArea/index.tsx

@@ -76,7 +76,7 @@ let CanvasArea = (_props: IProps) => {
                 top: curTop,
                 zIndex: 1,
             },
-            focusShape: currentMaterial.focusShape,
+            scaleMode: currentMaterial.scaleMode,
         };
         // 3、将组件配置加入画布配置中
         currentSchema.blocks.push(config);

src/components/MaterialPanel/registerConfig.tsx

@@ -1,11 +1,18 @@
 import { CSSProperties } from 'react';
 
+export enum ScaleMode {
+    // 四个角度缩放
+    SquaringScale,
+    // 横纵伸缩
+    HorizontalVerticalScale,
+}
+
 export interface IComponent {
     label: string;
     preview: () => JSX.Element | string;
     render: () => JSX.Element | string;
     type: string;
-    focusShape: 'scaleDot' | 'scaleLine';
+    scaleMode: ScaleMode;
     style?: CSSProperties;
     focus?: boolean;
     element?: HTMLElement;
@@ -36,23 +43,23 @@ registerConfig.register({
     preview: () => <button style={{ display: 'inline-block', width: '100%', height: '100%' }}>四个角度缩放</button>,
     render: () => <button style={{ display: 'inline-block', width: '100%', height: '100%' }}>四个角度缩放</button>,
     type: 'text',
-    focusShape: 'scaleDot',
+    scaleMode: ScaleMode.SquaringScale,
 });
 
 registerConfig.register({
     label: '按钮',
     preview: () => <button style={{ display: 'inline-block', width: '100%', height: '100%' }}>横纵伸缩</button>,
     render: () => <button style={{ display: 'inline-block', width: '100%', height: '100%' }}>横纵伸缩</button>,
     type: 'button',
-    focusShape: 'scaleLine',
+    scaleMode: ScaleMode.HorizontalVerticalScale,
 });
 
 registerConfig.register({
     label: '输入框',
     preview: () => <input placeholder="预览输入框" />,
     render: () => <input placeholder="渲染输入框" />,
     type: 'input',
-    focusShape: 'scaleLine',
+    scaleMode: ScaleMode.SquaringScale,
 });
 
 export default registerConfig;

src/store/index.ts

@@ -16,7 +16,7 @@ export type IBlock = Pick<IComponent, 'type' | 'focus'> & {
         zIndex?: number;
     };
     focus: boolean;
-    focusShape: IComponent['focusShape'];
+    scaleMode: IComponent['scaleMode'];
 };
 interface ISchema {
     container: {