From 5511e135d6d87955336a3787f62a1beb826947a4 Mon Sep 17 00:00:00 2001
From: salgum1114 <salgum1112@gmail.com>
Date: Wed, 17 Jan 2024 18:24:47 +0900
Subject: [PATCH] Added align middle

---
 package.json                                  |   2 +-
 src/canvas/handlers/AlignmentHandler.ts       | 125 ++++++++++--------
 src/editors/imagemap/ImageMapHeaderToolbar.js |  16 ++-
 src/locales/locale.constant-ko.json           |   1 +
 4 files changed, 85 insertions(+), 59 deletions(-)

diff --git a/package.json b/package.json
index e2899e7f..e5645821 100644
--- 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
index 909bb865..a7c2cbb6 100644
--- 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
index 18b5bf19..69809ef6 100644
--- 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
index 84c955fd..5c7d09a8 100644
--- 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": "그룹 해제",