update 0.7.0

2021-07-27 15:38:29 +08:00
parent a0f469c9a0
commit 0619bdfc81
18 changed files with 67 additions and 128 deletions
--- a/packages/dooringx-lib/src/components/container.tsx
+++ b/packages/dooringx-lib/src/components/container.tsx
@@ -67,7 +67,7 @@ function Container(props: PropsWithChildren<ContainerProps>) {
 								{...(props.context === 'edit' ? containerFocusRemove(props.config) : null)}
 							>
 								{props.context === 'edit' && (
-									<NormalMarkLineRender config={props.config}></NormalMarkLineRender>
+									<NormalMarkLineRender config={props.config} iframe={false}></NormalMarkLineRender>
 								)}
 								{props.state.block.map((v) => {
 									return (
--- a/packages/dooringx-lib/src/components/iframeContainer.tsx
+++ b/packages/dooringx-lib/src/components/iframeContainer.tsx
@@ -2,13 +2,12 @@
 * @Author: yehuozhili
 * @Date: 2021-07-17 10:08:08
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-20 16:26:24
+ * @LastEditTime: 2021-07-27 14:42:00
 * @FilePath: \dooringx\packages\dooringx-lib\src\components\iframeContainer.tsx
 */
 import { containerDragResolve } from '../core/crossDrag';
 import { containerFocusRemove } from '../core/focusHandler';
 import { innerContainerDrag } from '../core/innerDrag';
-import { NormalMarkLineRender } from '../core/markline';
 import { IStoreData } from '../core/store/storetype';
 import { wrapperMoveState } from './IframeWrapperMove/event';
 import { CSSProperties, PropsWithChildren, useEffect, useMemo, useState } from 'react';
@@ -125,11 +124,8 @@ function Container(props: PropsWithChildren<ContainerProps>) {
 							}}
 							{...(props.context === 'edit' ? containerDragResolve(props.config) : null)}
 							{...(props.context === 'edit' ? innerContainerDrag(props.config) : null)}
-							{...(props.context === 'edit' ? containerFocusRemove(props.config, true) : null)}
+							{...(props.context === 'edit' ? containerFocusRemove(props.config) : null)}
 						>
-							{props.context === 'edit' && (
-								<NormalMarkLineRender config={props.config}></NormalMarkLineRender>
-							)}
 							{state.block.map((v) => {
 								return (
 									<Blocks
--- a/packages/dooringx-lib/src/components/iframeTarget.tsx
+++ b/packages/dooringx-lib/src/components/iframeTarget.tsx
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-07-20 10:36:55
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-20 16:13:07
+ * @LastEditTime: 2021-07-27 15:13:35
 * @FilePath: \dooringx\packages\dooringx-lib\src\components\iframeTarget.tsx
 */
 import React from 'react';
@@ -10,6 +10,7 @@ import UserConfig from '../config';
 import { containerDragResolve } from '../core/crossDrag';
 import { containerFocusRemove } from '../core/focusHandler';
 import { innerContainerDrag } from '../core/innerDrag';
+import { NormalMarkLineRender } from '../core/markline';
 import { containerResizer } from '../core/resizeHandler/containerResizer';
 import Blocks from './blocks';

@@ -35,7 +36,7 @@ export function IframeTarget(props: IframeTargetProps) {
 			<div
 				{...containerDragResolve(props.config)}
 				{...innerContainerDrag(props.config)}
-				{...containerFocusRemove(props.config, true)}
+				{...containerFocusRemove(props.config)}
 				style={{
 					width: state.container.width * scaleState.value,
 					height: state.container.height * scaleState.value,
@@ -64,6 +65,7 @@ export function IframeTarget(props: IframeTargetProps) {
 							></Blocks>
 						);
 					})}
+					{<NormalMarkLineRender config={props.config} iframe={true}></NormalMarkLineRender>}
 				</div>
 			</div>
 			<iframe
--- a/packages/dooringx-lib/src/core/focusHandler/index.tsx
+++ b/packages/dooringx-lib/src/core/focusHandler/index.tsx
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 04:29:09
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-20 15:39:47
+ * @LastEditTime: 2021-07-27 14:36:07
 * @FilePath: \dooringx\packages\dooringx-lib\src\core\focusHandler\index.tsx
 */
 import { innerDragState } from '../innerDrag/state';
@@ -12,7 +12,7 @@ import { selectRangeMouseDown } from '../selectRange';
 import { unmountContextMenu } from '../contextMenu';
 import UserConfig from '../../config';

-export function containerFocusRemove(config: UserConfig, iframe = false) {
+export function containerFocusRemove(config: UserConfig) {
 	const store = config.getStore();

 	const onMouseDown = (e: React.MouseEvent) => {
@@ -25,7 +25,7 @@ export function containerFocusRemove(config: UserConfig, iframe = false) {
 		focusState.blocks = [];
 		store.setData({ ...clonedata, block: newBlock });
 		if (!innerDragState.item) {
-			selectRangeMouseDown(e, config, iframe);
+			selectRangeMouseDown(e, config);
 		}
 		unmountContextMenu();
 	};
--- a/packages/dooringx-lib/src/core/innerDrag/index.ts
+++ b/packages/dooringx-lib/src/core/innerDrag/index.ts
@@ -105,13 +105,13 @@ export const innerContainerDrag = function (config: UserConfig) {
 		onMouseMove,
 	};
 };
-export const innerContainerDragUp = function (config: UserConfig, iframe = false) {
+export const innerContainerDragUp = function (config: UserConfig) {
 	const store = config.getStore();
 	const onMouseUp = (e: React.MouseEvent) => {
 		// e.preventDefault(); 这个会导致无法取消选中
 		iframeWrapperMove(config);
 		wrapperMoveMouseUp(config);
-		selectRangeMouseUp(e, config, iframe);
+		selectRangeMouseUp(e, config);
 		if (innerDragState.ref && innerDragState.ref.current) {
 			innerDragState.ref.current.style.cursor = 'default';
 			innerDragState.ref.current.style.willChange = 'auto';
--- a/packages/dooringx-lib/src/core/markline/calcRender.ts
+++ b/packages/dooringx-lib/src/core/markline/calcRender.ts
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 04:29:09
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-27 11:18:48
+ * @LastEditTime: 2021-07-27 15:33:35
 * @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\calcRender.ts
 */
 import { innerDragState } from '../innerDrag/state';
@@ -56,7 +56,7 @@ export function getComponentRotatedStyle(
 	return style;
 }

-export function marklineCalRender(config: UserConfig): LinesTypes {
+export function marklineCalRender(config: UserConfig, iframe: boolean): LinesTypes {
 	const store = config.getStore();
 	//focus可能好几个，做对比的是拖拽那个
 	const lines: LinesTypes = { x: [], y: [] };
@@ -121,6 +121,11 @@ export function marklineCalRender(config: UserConfig): LinesTypes {
 				}
 			}
 		}
+
+		// 如果是iframe 需要刷给iframe
+		if (iframe) {
+			config.refreshIframe();
+		}
 	}

 	return lines;
--- a/packages/dooringx-lib/src/core/markline/index.tsx
+++ b/packages/dooringx-lib/src/core/markline/index.tsx
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 04:29:09
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-26 15:01:06
+ * @LastEditTime: 2021-07-27 15:14:34
 * @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\index.tsx
 */
 import React from 'react';
@@ -41,8 +41,8 @@ export function MarklineY(props: any) {
 	);
 }

-export function NormalMarkLineRender(props: { config: UserConfig }) {
-	const lines = marklineCalRender(props.config);
+export function NormalMarkLineRender(props: { config: UserConfig; iframe: boolean }) {
+	const lines = marklineCalRender(props.config, props.iframe);
 	const render = useMemo(() => {
 		return (
 			<>
--- a/packages/dooringx-lib/src/core/markline/marklineConfig.ts
+++ b/packages/dooringx-lib/src/core/markline/marklineConfig.ts
@@ -2,8 +2,8 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 11:49:13
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-03-14 11:49:31
- * @FilePath: \dooring-v2\src\core\markline\marklineConfig.ts
+ * @LastEditTime: 2021-07-27 15:09:33
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\marklineConfig.ts
 */
 import { IBlockType } from '../store/storetype';

@@ -18,7 +18,7 @@ export interface MarklineConfigType {

 // 间隔距离执行吸附
 export const marklineConfig: MarklineConfigType = {
-	indent: 2,
+	indent: 5,
 	isAbsorb: true,
 	mode: 'normal',
 	gridIndent: 50,
--- a/packages/dooringx-lib/src/core/markline/normalMode.ts
+++ b/packages/dooringx-lib/src/core/markline/normalMode.ts
@@ -99,9 +99,9 @@ export function newMarklineDisplay(
 		diffX = l + w / 2 - left - width;
 	}
 	// 头对尾
-	else if (Math.abs((l + w - left) / 2) < marklineConfig.indent) {
+	else if (Math.abs(l + w - left) < marklineConfig.indent) {
 		lines.y.push(l + w);
-		diffX = (l + w - left) / 2;
+		diffX = l + w - left;
 	}
 	// 中对尾
 	else if (Math.abs(l + w - left - width / 2) < marklineConfig.indent) {
@@ -109,9 +109,9 @@ export function newMarklineDisplay(
 		diffX = l + w - left - width / 2;
 	}
 	// 尾对尾
-	else if (Math.abs((l + w - left - width) / 2) < marklineConfig.indent) {
+	else if (Math.abs(l + w - left - width) < marklineConfig.indent) {
 		lines.y.push(l + w);
-		diffX = (l + w - left - width) / 2;
+		diffX = l + w - left - width;
 	}
 	focus.left = Math.round(focus.left + diffX);
 }
--- a/packages/dooringx-lib/src/core/rotateHandler/index.tsx
+++ b/packages/dooringx-lib/src/core/rotateHandler/index.tsx
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-07-21 20:51:58
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-22 20:51:08
+ * @LastEditTime: 2021-07-27 14:53:15
 * @FilePath: \dooringx\packages\dooringx-lib\src\core\rotateHandler\index.tsx
 */
 import React from 'react';
@@ -11,6 +11,7 @@ import UserConfig from '../../config';
 import { IBlockType } from '../store/storetype';
 import styles from '../../index.less';
 import { deepCopy } from '../utils';
+import { ReloadOutlined } from '@ant-design/icons';

 interface rotateStateType {
 	startX: number;
@@ -96,7 +97,13 @@ export function RotateResizer(props: RotateResizerProps) {
 						onMouseDown(e, props.data, props.rect, props.config);
 					}}
 					className={styles.rotate}
-				></div>
+				>
+					<ReloadOutlined
+						style={{
+							color: '#2196f3',
+						}}
+					/>
+				</div>
 			);
 		} else {
 			return null;
--- a/packages/dooringx-lib/src/core/selectRange/index.ts
+++ b/packages/dooringx-lib/src/core/selectRange/index.ts
@@ -19,7 +19,7 @@ export const selectData: SelectDataProps = {
 	startY: 0,
 };

-export function selectRangeMouseDown(e: React.MouseEvent, config: UserConfig, iframe: boolean) {
+export function selectRangeMouseDown(e: React.MouseEvent, config: UserConfig) {
 	if (!selectData.selectDiv) {
 		selectData.selectDiv = document.createElement('div');
 	}
@@ -33,7 +33,7 @@ export function selectRangeMouseDown(e: React.MouseEvent, config: UserConfig, if
 		selectData.selectDiv.style.top = e.clientY + 'px';
 		selectData.selectDiv.style.position = 'fixed';
 		document.body.appendChild(selectData.selectDiv);
-		selectData.selectDiv.onmouseup = (e) => selectRangeMouseUp(e, config, iframe);
+		selectData.selectDiv.onmouseup = (e) => selectRangeMouseUp(e, config);
 		selectData.selectDiv.onmousemove = (e) => selectRangeMouseMove(e);
 	}
 }
@@ -92,11 +92,7 @@ function selectFocus(left: number, top: number, width: number, height: number, c
 	}
 }

-export function selectRangeMouseUp(
-	e: React.MouseEvent | MouseEvent,
-	config: UserConfig,
-	iframe = false
-) {
+export function selectRangeMouseUp(e: React.MouseEvent | MouseEvent, config: UserConfig) {
 	if (selectData.selectDiv) {
 		// 这里需要判定区域
 		// 如果是react触发 ，left和top就是起始值和终止值的最小值
@@ -115,10 +111,6 @@ export function selectRangeMouseUp(
 			left = selectData.startX - wwidth;
 			top = selectData.startY - wheight;
 		}
-		if (iframe) {
-			left = left / scale;
-			top = top / scale;
-		}
 		selectFocus(left, top, wwidth, wheight, config);
 		selectData.selectDiv.parentNode!.removeChild(selectData.selectDiv);
 		selectData.selectDiv = null;
--- a/packages/dooringx-lib/src/index.less
+++ b/packages/dooringx-lib/src/index.less
@@ -174,11 +174,8 @@

 .rotate {
 	position: absolute;
-	top: -30px;
-	left: calc(50% - 6px);
-	height: 12px;
-	width: 12px;
-	border-radius: 50%;
-	background-color: #2196f3;
+	top: -35px;
+	left: calc(50% - 10px);
 	cursor: grab;
+	font-size: 20px;
 }