[#164] Added 'zoomToCenter' function.

Author: salgum1114

src/components/canvas/handlers/WorkareaHandler.ts

@@ -2,6 +2,7 @@ import { fabric } from 'fabric';
 
 import Handler from './Handler';
 import { VideoObject } from '../objects/Video';
+import { FabricObject } from '../utils';
 
 class ZoomHandler {
 	handler?: Handler;
@@ -12,8 +13,9 @@ class ZoomHandler {
 
 	/**
 	 * Zoom to point
+	 *
 	 * @param {fabric.Point} point
-	 * @param {number} zoom
+	 * @param {number} zoom ex) 0 ~ 1. Not percentage value.
 	 */
 	public zoomToPoint = (point: fabric.Point, zoom: number) => {
 		const { minZoom, maxZoom } = this.handler;
@@ -44,6 +46,7 @@ class ZoomHandler {
 
 	/**
 	 * Zoom one to one
+	 *
 	 */
 	public zoomOneToOne = () => {
 		const center = this.handler.canvas.getCenter();
@@ -53,6 +56,7 @@ class ZoomHandler {
 
 	/**
 	 * Zoom to fit
+	 *
 	 */
 	public zoomToFit = () => {
 		let scaleX;
@@ -77,6 +81,7 @@ class ZoomHandler {
 
 	/**
 	 * Zoom in
+	 *
 	 */
 	public zoomIn = () => {
 		let zoomRatio = this.handler.canvas.getZoom();
@@ -87,13 +92,63 @@ class ZoomHandler {
 
 	/**
 	 * Zoom out
+	 *
 	 */
 	public zoomOut = () => {
 		let zoomRatio = this.handler.canvas.getZoom();
 		zoomRatio -= 0.05;
 		const center = this.handler.canvas.getCenter();
 		this.zoomToPoint(new fabric.Point(center.left, center.top), zoomRatio);
 	};
+
+	/**
+	 * Zoom to center with object
+	 *
+	 * @param {FabricObject} target If zoomFit true, rescaled canvas zoom.
+	 */
+	public zoomToCenterWithObject = (target: FabricObject, zoomFit?: boolean) => {
+		const { left: canvasLeft, top: canvasTop } = this.handler.canvas.getCenter();
+		const { left, top, width, height } = target;
+		const diffTop = canvasTop - (top + height / 2);
+		const diffLeft = canvasLeft - (left + width / 2);
+		if (zoomFit) {
+			let scaleX;
+			let scaleY;
+			scaleX = this.handler.canvas.getWidth() / width;
+			scaleY = this.handler.canvas.getHeight() / height;
+			if (height > width) {
+				scaleX = scaleY;
+				if (this.handler.canvas.getWidth() < width * scaleX) {
+					scaleX = scaleX * (this.handler.canvas.getWidth() / (width * scaleX));
+				}
+			} else {
+				scaleY = scaleX;
+				if (this.handler.canvas.getHeight() < height * scaleX) {
+					scaleX = scaleX * (this.handler.canvas.getHeight() / (height * scaleX));
+				}
+			}
+			this.handler.canvas.setViewportTransform([1, 0, 0, 1, diffLeft, diffTop]);
+			this.zoomToPoint(new fabric.Point(canvasLeft, canvasTop), scaleX);
+		} else {
+			const zoom = this.handler.canvas.getZoom();
+			this.handler.canvas.setViewportTransform([1, 0, 0, 1, diffLeft, diffTop]);
+			this.zoomToPoint(new fabric.Point(canvasLeft, canvasTop), zoom);
+		}
+	};
+
+	/**
+	 * Zoom to center with objects
+	 *
+	 * @param {boolean} [zoomFit] If zoomFit true, rescaled canvas zoom.
+	 * @returns
+	 */
+	public zoomToCenter = (zoomFit?: boolean) => {
+		const activeObject = this.handler.canvas.getActiveObject();
+		if (!activeObject) {
+			return;
+		}
+		this.zoomToCenterWithObject(activeObject, zoomFit);
+	};
 }
 
 export default ZoomHandler;

src/components/canvas/handlers/ZoomHandler.ts

@@ -4,7 +4,7 @@ import { Button, Table, Modal, Input, Form } from 'antd';
 import i18n from 'i18next';
 
 import Icon from '../icon/Icon';
-import { FlexBox } from '../flex';
+import { Flex } from '../flex';
 
 class EditTable extends Component {
 	static propTypes = {
@@ -176,15 +176,15 @@ class EditTable extends Component {
 			},
 		];
 		return (
-			<FlexBox flexDirection="column">
-				<FlexBox justifyContent="flex-end">
+			<Flex flexDirection="column">
+				<Flex justifyContent="flex-end">
 					<Button className="rde-action-btn" shape="circle" onClick={this.handleAdd}>
 						<Icon name="plus" />
 					</Button>
 					<Button className="rde-action-btn" shape="circle" onClick={this.handleClear}>
 						<Icon name="times" />
 					</Button>
-				</FlexBox>
+				</Flex>
 				<Table
 					size="small"
 					pagination={{
@@ -220,7 +220,7 @@ class EditTable extends Component {
 						/>
 					</Form.Item>
 				</Modal>
-			</FlexBox>
+			</Flex>
 		);
 	}
 }

src/components/common/EditTable.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import Item from './Item';
+
+export interface BoxProps extends React.HTMLAttributes<any> {
+	display?: 'flex' | 'inline-flex';
+	flexDirection?: 'column-reverse' | 'column' | 'row-reverse' | 'row';
+	flexWrap?: 'nowrap' | 'wrap-reverse' | 'wrap';
+	flexFlow?: string;
+	justifyContent?: 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly';
+	alignItems?: 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
+	alignContent?: 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch';
+	alignSelf?: 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
+	order?: number;
+	flexGrow?: number | string;
+	flexShrink?: number | string;
+	flexBasis?: number | string;
+	flex?: number | string;
+}
+
+class Flex extends Component<BoxProps> {
+	static Item: typeof Item;
+
+	render() {
+		const {
+			flexDirection,
+			flexWrap,
+			flexFlow,
+			justifyContent,
+			alignItems,
+			alignContent,
+			alignSelf,
+			order,
+			flexGrow,
+			flexShrink,
+			flexBasis,
+			flex,
+			style,
+			children,
+			...other
+		} = this.props;
+		const newStyle = Object.assign(
+			{},
+			{
+				display: 'flex',
+				flexDirection,
+				flexWrap,
+				flexFlow,
+				justifyContent,
+				alignItems,
+				alignContent,
+				alignSelf,
+				order,
+				flexGrow,
+				flexShrink,
+				flexBasis,
+				flex,
+			},
+			style,
+		) as any;
+		return (
+			<div
+				style={Object.keys(newStyle).reduce((prev, key) => {
+					if (newStyle[key]) {
+						return Object.assign(prev, { [key]: newStyle[key] });
+					}
+					return prev;
+				}, {})}
+				{...other}
+			>
+				{children}
+			</div>
+		);
+	}
+}
+
+Flex.Item = Item;
+
+export default Flex;

src/components/flex/Flex.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+export interface ItemProps extends React.HTMLAttributes<any> {
+	alignSelf?: 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
+	order?: number;
+	flexGrow?: number | string;
+	flexShrink?: number | string;
+	flexBasis?: number | string;
+	flex?: number | string;
+}
+
+const Item: React.SFC<ItemProps> = props => {
+	const { alignSelf, order, flexGrow, flexShrink, flexBasis, flex, style, children, ...other } = props;
+	const newStyle = Object.assign(
+		{},
+		{
+			alignSelf,
+			order,
+			flexGrow,
+			flexShrink,
+			flexBasis,
+			flex,
+		},
+		style,
+	) as any;
+	return (
+		<div
+			style={Object.keys(newStyle).reduce((prev, key) => {
+				if (newStyle[key]) {
+					return Object.assign(prev, { [key]: newStyle[key] });
+				}
+				return prev;
+			}, {})}
+			{...other}
+		>
+			{children}
+		</div>
+	);
+};
+
+export default Item;

src/components/flex/FlexBox.js

@@ -0,0 +1 @@
+export { default as Flex } from './Flex';