update 0.7.0

CHANGELOG.md

@@ -1,5 +1,11 @@
 ## changelog
 
+## 0.7.0
+
+已支持组件旋转！
+
+修复拖拽参考线等优化逻辑。
+
 ## 0.6.0
 
 已支持编辑模式使用Iframe！

packages/dooringx-doc/src/changelog/1.1.md

@@ -6,6 +6,12 @@ order: 1
 
 ## changelog
 
+## 0.7.0
+
+已支持组件旋转！
+
+修复拖拽参考线等优化逻辑。
+
 ## 0.6.0
 
 已支持编辑模式使用Iframe！

packages/dooringx-doc/src/docs/1.3.md

@@ -18,6 +18,8 @@ dooringx-lib在编辑时提供两种容器，可以根据需要选择使用。
 
 使用普通容器即在编辑时为普通的div并非iframe，而使用iframe则编辑时看见的为iframe内容。在预览时，使用preview组件，preview可以放到任何容器，包括去使用iframe查看。
 
+iframe容器由于使用postmessage通信，所以在操作上可能会有略微延迟。如果对样式隔离要求不高可以使用普通容器，预览的样式正常即可。
+
 普通容器使用参考demo:
 
 ```js

packages/dooringx-doc/src/docs/3.3.md

@@ -73,6 +73,12 @@ export default MButton;
 
 第四个参数会配置组件的初始值，特别注意的是，制作组件必须要有初始宽度（非由内容撑开），否则会在适配时产生问题。
 
+这个初始值里有很多有用的属性，比如fixed代表使用固定定位，可以结合配置项更改该值，使得组件可以fixed定位。
+
+还有canDrag类似于锁定命令，锁定的元素不可拖拽。
+
+初始值里的rotate需要个对象，value代表旋转角度，canRotate 代表是否可以操作旋转。（0.7.0版本开始支持）
+
 第五个参数是个函数，你将获得配置项中的receive属性（暂且都默认该配置为receive）传来的配置，比如上例中receive的是text，则该函数中data里会收到该字段。
 
 context一般只有preview和edit，用来进行环境判断。

packages/dooringx-lib/README.md

@@ -2,90 +2,10 @@
  * @Author: yehuozhili
  * @Date: 2021-01-31 20:44:16
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-20 16:15:34
+ * @LastEditTime: 2021-07-27 14:57:23
  * @FilePath: \dooringx\packages\dooringx-lib\README.md
 -->
 
 ## Dooringx-lib 
-## changelog
 
-
+开发中，即将开源
-## 0.6.0
-
-已支持编辑模式使用Iframe！
-
-修复选中条件。
-
-
-## 0.5.1
-
-修复右侧选中不能取消选中问题。
-
-## 0.5.0
-
-修复control组件宽度不够问题。
-
-移除antd自定义icon，容器底部icon可配置。
-
-## 0.4.2
-
-修复animate错误初始值。
-
-修改markline样式。
-
-全局设置增加容器高度。
-## 0.4.1
-
-去除lib自动导入样式。
-
-## 0.4.0
-
-去除runtime导出，所有属性从config中获取。
-
-## 0.3.1
-
-1、由uuid更换为nanoid。
-
-2、control组件增加标尺控制。
-
-## 0.3.0 
-
-1、增加标尺，ContainerWrapper需要传递config才可使用。
-
-2、修改容器最小拖动667。修复画布缩放下拖拽时与鼠标距离不一致。
-
-3、innerContainerDragUp需要传递config。
-
-## 0.2.0 
-
-commander的传递进行修改，可以获得config了，commander不再从index中导出 ，需要使用时从config中获取。增加左侧类名，方便自定义。
-
-## 0.1.10 
-
-修改eslint依赖推荐
-
-
-## 0.1.9 
-
-增加全局body设置
-
-## 0.1.8 
-
-增加弹窗设置，移除modalContainer
-
-## 0.1.7 
-
-修改预览特殊条件显示，删除console
-## 0.1.6 
-
-调整初始缩放，画布初始比例，增加回正画布功能。
-## 0.1.5 
-
-删除未作按钮，增加fixed配置
-## 0.1.4 
-
-基础功能
-
-## todo
-
-1、重构拖拽，优化性能与config传递。

packages/dooringx-lib/package.json

@@ -1,5 +1,5 @@
 {
-	"version": "0.6.0",
+	"version": "0.7.0",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/dooringx-lib.esm.js",

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 (

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

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

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();
 	};

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';

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;

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 }) {
+export function NormalMarkLineRender(props: { config: UserConfig; iframe: boolean }) {
-	const lines = marklineCalRender(props.config);
+	const lines = marklineCalRender(props.config, props.iframe);
 	const render = useMemo(() => {
 		return (
 			<>

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
+ * @LastEditTime: 2021-07-27 15:09:33
- * @FilePath: \dooring-v2\src\core\markline\marklineConfig.ts
+ * @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,

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);
 }

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;

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(
+export function selectRangeMouseUp(e: React.MouseEvent | MouseEvent, config: UserConfig) {
-	e: React.MouseEvent | MouseEvent,
-	config: UserConfig,
-	iframe = false
-) {
 	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;

packages/dooringx-lib/src/index.less

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