Added align middle

salgum1114 · Jan 17, 2024 · 5511e13 · 5511e13
1 parent 113818e
commit 5511e13
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "react-design-editor",
-	"version": "0.0.54",
+	"version": "0.0.55",
 	"description": "Design Editor Tools with React.js + ant.design + fabric.js",
 	"main": "dist/react-design-editor.min.js",
 	"typings": "lib/index.d.ts",

diff --git a/src/canvas/handlers/AlignmentHandler.ts b/src/canvas/handlers/AlignmentHandler.ts
@@ -1,63 +1,80 @@
 import Handler from './Handler';
 
 class AlignmentHandler {
-    handler: Handler;
-    constructor(handler: Handler) {
-        this.handler = handler;
-    }
+	handler: Handler;
+	constructor(handler: Handler) {
+		this.handler = handler;
+	}
 
-    /**
-     * Align left at selection
-     */
-    public left = () => {
-        const activeObject = this.handler.canvas.getActiveObject();
-        if (activeObject && activeObject.type === 'activeSelection') {
-            const activeSelection = activeObject as fabric.ActiveSelection;
-            const activeObjectLeft = -(activeObject.width / 2);
-            activeSelection.forEachObject(obj => {
-                obj.set({
-                    left: activeObjectLeft,
-                });
-                obj.setCoords();
-                this.handler.canvas.renderAll();
-            });
-        }
-    }
+	/**
+	 * Align left at selection
+	 */
+	public left = () => {
+		const activeObject = this.handler.canvas.getActiveObject();
+		if (activeObject && activeObject.type === 'activeSelection') {
+			const activeSelection = activeObject as fabric.ActiveSelection;
+			const activeObjectLeft = -(activeObject.width / 2);
+			activeSelection.forEachObject(obj => {
+				obj.set({
+					left: activeObjectLeft,
+				});
+				obj.setCoords();
+				this.handler.canvas.renderAll();
+			});
+		}
+	};
 
-    /**
-     * Align center at selection
-     */
-    public center = () => {
-        const activeObject = this.handler.canvas.getActiveObject();
-        if (activeObject && activeObject.type === 'activeSelection') {
-            const activeSelection = activeObject as fabric.ActiveSelection;
-            activeSelection.forEachObject(obj => {
-                obj.set({
-                    left: 0 - ((obj.width * obj.scaleX) / 2),
-                });
-                obj.setCoords();
-                this.handler.canvas.renderAll();
-            });
-        }
-    }
+	/**
+	 * Align center at selection
+	 */
+	public center = () => {
+		const activeObject = this.handler.canvas.getActiveObject();
+		if (activeObject && activeObject.type === 'activeSelection') {
+			const activeSelection = activeObject as fabric.ActiveSelection;
+			activeSelection.forEachObject(obj => {
+				obj.set({
+					left: 0 - (obj.width * obj.scaleX) / 2,
+				});
+				obj.setCoords();
+				this.handler.canvas.renderAll();
+			});
+		}
+	};
 
-    /**
-     * Align right at selection
-     */
-    public right = () => {
-        const activeObject = this.handler.canvas.getActiveObject();
-        if (activeObject && activeObject.type === 'activeSelection') {
-            const activeSelection = activeObject as fabric.ActiveSelection;
-            const activeObjectLeft = (activeObject.width / 2);
-            activeSelection.forEachObject(obj => {
-                obj.set({
-                    left: activeObjectLeft - (obj.width * obj.scaleX),
-                });
-                obj.setCoords();
-                this.handler.canvas.renderAll();
-            });
-        }
-    }
+	/**
+	 * Align center at selection
+	 */
+	public middle = () => {
+		const activeObject = this.handler.canvas.getActiveObject();
+		if (activeObject && activeObject.type === 'activeSelection') {
+			const activeSelection = activeObject as fabric.ActiveSelection;
+			activeSelection.forEachObject(obj => {
+				obj.set({
+					top: 0 - (obj.width * obj.scaleX) / 2,
+				});
+				obj.setCoords();
+				this.handler.canvas.renderAll();
+			});
+		}
+	};
+
+	/**
+	 * Align right at selection
+	 */
+	public right = () => {
+		const activeObject = this.handler.canvas.getActiveObject();
+		if (activeObject && activeObject.type === 'activeSelection') {
+			const activeSelection = activeObject as fabric.ActiveSelection;
+			const activeObjectLeft = activeObject.width / 2;
+			activeSelection.forEachObject(obj => {
+				obj.set({
+					left: activeObjectLeft - obj.width * obj.scaleX,
+				});
+				obj.setCoords();
+				this.handler.canvas.renderAll();
+			});
+		}
+	};
 }
 
 export default AlignmentHandler;
diff --git a/src/editors/imagemap/ImageMapHeaderToolbar.js b/src/editors/imagemap/ImageMapHeaderToolbar.js
@@ -1,11 +1,11 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import i18n from 'i18next';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
-import { Flex } from '../../components/flex';
-import ImageMapList from './ImageMapList';
 import { CommonButton } from '../../components/common';
+import { Flex } from '../../components/flex';
 import Icon from '../../components/icon/Icon';
+import ImageMapList from './ImageMapList';
 
 class ImageMapHeaderToolbar extends Component {
 	static propTypes = {
@@ -80,6 +80,14 @@ class ImageMapHeaderToolbar extends Component {
 						icon="align-center"
 						tooltipTitle={i18n.t('action.align-center')}
 					/>
+					<CommonButton
+						className="rde-action-btn"
+						shape="circle"
+						disabled={isCropping}
+						onClick={() => canvasRef.handler?.alignmentHandler.middle()}
+						icon="align-center"
+						tooltipTitle={i18n.t('action.align-middle')}
+					/>
 					<CommonButton
 						className="rde-action-btn"
 						shape="circle"

diff --git a/src/locales/locale.constant-ko.json b/src/locales/locale.constant-ko.json
@@ -115,6 +115,7 @@
 		"send-to-back": "맨 뒤로 보내기",
 		"align-left": "왼쪽으로 정렬",
 		"align-center": "가운데로 정렬",
+		"align-middle": "중앙으로 정렬",
 		"align-right": "오른쪽으로 정렬",
 		"object-group": "그룹",
 		"object-ungroup": "그룹 해제",