update 0.6.0

2021-07-20 16:33:23 +08:00
parent 44429607d2
commit 79de48da66
19 changed files with 177 additions and 161 deletions
--- a/packages/dooringx-lib/README.md
+++ b/packages/dooringx-lib/README.md
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-01-31 20:44:16
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-18 16:38:07
+ * @LastEditTime: 2021-07-20 16:15:34
 * @FilePath: \dooringx\packages\dooringx-lib\README.md
 -->

@@ -10,6 +10,13 @@
 ## changelog


+## 0.6.0
+
+已支持编辑模式使用Iframe！
+
+修复选中条件。
+
+
 ## 0.5.1

 修复右侧选中不能取消选中问题。
--- a/packages/dooringx-lib/package.json
+++ b/packages/dooringx-lib/package.json
@@ -1,5 +1,5 @@
 {
-	"version": "0.5.1",
+	"version": "0.6.0",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/dooringx-lib.esm.js",
--- a/packages/dooringx-lib/src/components/IframeWrapperMove/event.ts
+++ b/packages/dooringx-lib/src/components/IframeWrapperMove/event.ts
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-02-21 22:17:29
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-19 10:11:14
+ * @LastEditTime: 2021-07-20 11:33:12
 * @FilePath: \dooringx\packages\dooringx-lib\src\components\IframeWrapperMove\event.ts
 */
 import { RefObject } from 'react';
@@ -35,7 +35,6 @@ export const wrapperRefState: WrapperMoveRef = {
 };

 export const wrapperEvent = (ref: RefObject<HTMLDivElement>, config: UserConfig) => {
-	const scale = config.getScaleState().value;
 	const store = config.getStore();
 	return {
 		onMouseDown: (e: React.MouseEvent) => {
@@ -57,8 +56,8 @@ export const wrapperEvent = (ref: RefObject<HTMLDivElement>, config: UserConfig)
 			if (wrapperMoveState.isDrag) {
 				const diffX = e.clientX - wrapperMoveState.startX;
 				const diffY = e.clientY - wrapperMoveState.startY;
-				wrapperMoveState.needX = wrapperMoveState.needX + diffX / scale;
-				wrapperMoveState.needY = wrapperMoveState.needY + diffY / scale;
+				wrapperMoveState.needX = wrapperMoveState.needX + diffX;
+				wrapperMoveState.needY = wrapperMoveState.needY + diffY;
 				wrapperMoveState.startX = e.clientX;
 				wrapperMoveState.startY = e.clientY;

--- a/packages/dooringx-lib/src/components/IframeWrapperMove/index.tsx
+++ b/packages/dooringx-lib/src/components/IframeWrapperMove/index.tsx
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 04:29:09
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-17 22:13:37
+ * @LastEditTime: 2021-07-20 11:24:39
 * @FilePath: \dooringx\packages\dooringx-lib\src\components\IframeWrapperMove\index.tsx
 */
 import { AllHTMLAttributes, CSSProperties, PropsWithChildren, ReactNode, useRef } from 'react';
@@ -11,7 +11,6 @@ import { onWheelEvent } from '../../core/scale';
 import React from 'react';
 import Ticker from './ticker';
 import UserConfig from '../../config';
-import { containerResizer } from '../../core/resizeHandler/containerResizer';

 export interface ContainerWrapperProps extends AllHTMLAttributes<HTMLDivElement> {
 	config: UserConfig;
@@ -42,6 +41,7 @@ function ContainerWrapper(props: PropsWithChildren<ContainerWrapperProps>) {
 				flexDirection: 'column',
 				position: 'relative',
 				overflow: 'hidden',
+				userSelect: 'none',
 				...style,
 			}}
 			{...wrapperEvent(ref, props.config)}
@@ -51,32 +51,12 @@ function ContainerWrapper(props: PropsWithChildren<ContainerWrapperProps>) {
 			<div
 				style={{
 					position: 'absolute',
-					transform: `scale(${scaleState.value}) translate(${wrapperMoveState.needX}px, ${wrapperMoveState.needY}px)`,
+					transform: `translate(${wrapperMoveState.needX}px, ${wrapperMoveState.needY}px)`,
 					width: state.container.width * scaleState.value,
 					height: state.container.height * scaleState.value,
 				}}
 			>
 				{children}
-
-				<div
-					style={{
-						height: '50px',
-						display: 'flex',
-						justifyContent: 'center',
-						alignItems: 'center',
-						width: state.container.width * scaleState.value,
-					}}
-				>
-					<div
-						style={{
-							fontSize: '20px',
-							cursor: 's-resize',
-						}}
-						onMouseDown={(e) => containerResizer.onMousedown(e, props.config)}
-					>
-						{props.config.getConfig().containerIcon}
-					</div>
-				</div>
 			</div>
 			{extra && extra}
 			{ticker && <Ticker config={props.config}></Ticker>}
--- a/packages/dooringx-lib/src/components/blocks.tsx
+++ b/packages/dooringx-lib/src/components/blocks.tsx
@@ -11,6 +11,7 @@ interface BlockProps {
 	data: IBlockType;
 	context: 'edit' | 'preview';
 	config: UserConfig;
+	iframe?: boolean;
 }

 /**
@@ -128,6 +129,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 						height: props.data.height,
 						zIndex: props.data.zIndex,
 						display: props.data.display,
+						opacity: props.iframe ? 0 : 1,
 					}}
 					{...innerDragData}
 					onContextMenu={(e) => {
@@ -184,6 +186,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 		state,
 		props.context,
 		props.data,
+		props.iframe,
 		props.config,
 		innerDragData,
 		animatecss,
--- a/packages/dooringx-lib/src/components/iframeContainer.tsx
+++ b/packages/dooringx-lib/src/components/iframeContainer.tsx
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-07-17 10:08:08
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-19 17:36:44
+ * @LastEditTime: 2021-07-20 16:26:24
 * @FilePath: \dooringx\packages\dooringx-lib\src\components\iframeContainer.tsx
 */
 import { containerDragResolve } from '../core/crossDrag';
@@ -19,7 +19,6 @@ import styles from '../index.less';
 import { getRealHeight } from '../core/transfer';
 import { WrapperMoveStateProps } from './IframeWrapperMove/event';
 import { onWheelEventIframe } from '../core/scale';
-import { selectRangeMouseUp } from '../core/selectRange';
 interface ContainerProps {
 	context: 'edit' | 'preview';
 	config: UserConfig;
@@ -78,21 +77,15 @@ function Container(props: PropsWithChildren<ContainerProps>) {

 	useEffect(() => {
 		const fn = (e: any) => {
-			console.log(e, 'ccccccccccccccc');
 			if (typeof e.data !== 'object') {
 				return;
 			}
 			if (!e.data.store) {
-				if (e.data.type === 'event') {
-					if (e.data.column === 'select') {
-					}
-				}
-
+				// 后续通信待定
 				return;
 			}

 			const data: IframeInnerState = e.data;
-			console.log(data, 'kkkkkkkkkk', !e.data.store, e.data.store);

 			setMessage(data);
 			props.config.resetData([data.store]);
@@ -103,25 +96,18 @@ function Container(props: PropsWithChildren<ContainerProps>) {
 		return () => {
 			window.removeEventListener('message', fn);
 		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
+	}, [props.config]);

 	return (
 		<>
 			{props.context === 'edit' && (
 				<>
 					<div
-						style={{ display: 'flex' }}
-						onMouseUp={(e) => {
-							selectRangeMouseUp(e, props.config);
-							// props.config.sendParent({
-							// 	type: 'event',
-							// 	column: 'select',
-							// 	data: null,
-							// });
-						}}
-						onMouseLeave={(e) => {
-							selectRangeMouseUp(e, props.config);
+						style={{
+							display: 'flex',
+							transform: `scale(${scaleState.value})`,
+							transformOrigin: 'left top',
+							position: 'absolute',
 						}}
 						{...onWheelEventIframe(props.config, scaleState)}
 					>
@@ -129,11 +115,12 @@ function Container(props: PropsWithChildren<ContainerProps>) {
 							id="yh-container"
 							className={styles.yh_container}
 							style={{
-								height: `${state.container.height * scaleState.value}px`,
-								width: `${state.container.width * scaleState.value}px`,
+								height: `${state.container.height}px`,
+								width: `${state.container.width}px`,
 								backgroundColor: bgColor(),
 								position: 'relative',
 								overflow: 'hidden',
+
 								...editContainerStyle,
 							}}
 							{...(props.context === 'edit' ? containerDragResolve(props.config) : null)}
--- a/packages/dooringx-lib/src/components/iframeTarget.tsx
+++ b/packages/dooringx-lib/src/components/iframeTarget.tsx
@@ -0,0 +1,104 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-07-20 10:36:55
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-07-20 16:13:07
+ * @FilePath: \dooringx\packages\dooringx-lib\src\components\iframeTarget.tsx
+ */
+import React from 'react';
+import UserConfig from '../config';
+import { containerDragResolve } from '../core/crossDrag';
+import { containerFocusRemove } from '../core/focusHandler';
+import { innerContainerDrag } from '../core/innerDrag';
+import { containerResizer } from '../core/resizeHandler/containerResizer';
+import Blocks from './blocks';
+
+interface IframeTargetProps {
+	config: UserConfig;
+	iframeProps?: React.DetailedHTMLProps<
+		React.IframeHTMLAttributes<HTMLIFrameElement>,
+		HTMLIFrameElement
+	>;
+}
+
+export function IframeTarget(props: IframeTargetProps) {
+	const scaleState = props.config.getScaleState();
+	const state = props.config.getStore().getData();
+	return (
+		<div
+			style={{
+				width: state.container.width * scaleState.value,
+				height: state.container.height * scaleState.value + 1,
+				position: 'relative',
+			}}
+		>
+			<div
+				{...containerDragResolve(props.config)}
+				{...innerContainerDrag(props.config)}
+				{...containerFocusRemove(props.config, true)}
+				style={{
+					width: state.container.width * scaleState.value,
+					height: state.container.height * scaleState.value,
+					position: 'absolute',
+				}}
+			>
+				<div
+					id="yh-container-iframe-mask"
+					style={{
+						display: 'flex',
+						transform: `scale(${scaleState.value})`,
+						transformOrigin: 'left top',
+						position: 'absolute',
+						width: state.container.width,
+						height: state.container.height,
+					}}
+				>
+					{state.block.map((v) => {
+						return (
+							<Blocks
+								config={props.config}
+								key={v.id}
+								data={v}
+								context={'edit'}
+								iframe={true}
+							></Blocks>
+						);
+					})}
+				</div>
+			</div>
+			<iframe
+				title="editor"
+				id="yh-container-iframe"
+				scrolling="no"
+				style={{
+					width: state.container.width * scaleState.value,
+					height: state.container.height * scaleState.value,
+					border: 'none',
+					userSelect: 'none',
+				}}
+				{...props.iframeProps}
+			></iframe>
+			<div
+				style={{
+					height: '50px',
+					display: 'flex',
+					justifyContent: 'center',
+					alignItems: 'center',
+					transform: `scale(${scaleState.value})`,
+					width: '100%',
+					transformOrigin: 'top',
+				}}
+			>
+				<div
+					style={{
+						fontSize: '20px',
+						cursor: 's-resize',
+					}}
+					onMouseDown={(e) => containerResizer.onMousedown(e, props.config)}
+				>
+					{props.config.getConfig().containerIcon}
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/packages/dooringx-lib/src/components/wrapperMove/index.tsx
+++ b/packages/dooringx-lib/src/components/wrapperMove/index.tsx
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 04:29:09
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-13 14:34:00
+ * @LastEditTime: 2021-07-20 11:25:31
 * @FilePath: \dooringx\packages\dooringx-lib\src\components\wrapperMove\index.tsx
 */
 import { AllHTMLAttributes, CSSProperties, PropsWithChildren, useRef } from 'react';
@@ -35,6 +35,7 @@ function ContainerWrapper(props: PropsWithChildren<ContainerWrapperProps>) {
 				flex: 1,
 				position: 'relative',
 				overflow: 'hidden',
+				userSelect: 'none',
 				...style,
 			}}
 			{...wrapperEvent(ref, props.config)}
--- a/packages/dooringx-lib/src/core/crossDrag/index.ts
+++ b/packages/dooringx-lib/src/core/crossDrag/index.ts
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 04:29:09
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-12 20:11:56
+ * @LastEditTime: 2021-07-20 16:12:55
 * @FilePath: \dooringx\packages\dooringx-lib\src\core\crossDrag\index.ts
 */
 import { DragEvent, ReactNode } from 'react';
--- 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-19 17:34:54
+ * @LastEditTime: 2021-07-20 15:39:47
 * @FilePath: \dooringx\packages\dooringx-lib\src\core\focusHandler\index.tsx
 */
 import { innerDragState } from '../innerDrag/state';
--- a/packages/dooringx-lib/src/core/innerDrag/index.ts
+++ b/packages/dooringx-lib/src/core/innerDrag/index.ts
@@ -103,16 +103,13 @@ export const innerContainerDrag = function (config: UserConfig) {
 		onMouseMove,
 	};
 };
-export const innerContainerDragUp = function (config: UserConfig, mode = 'normal') {
+export const innerContainerDragUp = function (config: UserConfig, iframe = false) {
 	const store = config.getStore();
 	const onMouseUp = (e: React.MouseEvent) => {
 		// e.preventDefault(); 这个会导致无法取消选中
 		iframeWrapperMove(config);
 		wrapperMoveMouseUp(config);
-		selectRangeMouseUp(e, config);
-		if (mode !== 'normal') {
-			console.log('ggogogogogogo');
-		}
+		selectRangeMouseUp(e, config, iframe);
 		if (innerDragState.ref && innerDragState.ref.current) {
 			innerDragState.ref.current.style.cursor = 'default';
 			innerDragState.ref.current.style.willChange = 'auto';
--- a/packages/dooringx-lib/src/core/resizeHandler/containerResizer.ts
+++ b/packages/dooringx-lib/src/core/resizeHandler/containerResizer.ts
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-03-09 15:19:36
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-13 14:28:17
+ * @LastEditTime: 2021-07-20 11:31:44
 * @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\containerResizer.ts
 */

@@ -29,7 +29,7 @@ export const containerResizer = {
 			const scaleState = config.getScaleState();
 			const store = config.getStore();
 			const scale = scaleState.value;
-			const diff = ((e.clientY - containerState.startY) / scale) * 2;
+			const diff = ((e.clientY - containerState.startY) / scale) * 2; //可以直接使用movementy
 			const clonedata: IStoreData = deepCopy(store.getData());
 			const height = clonedata.container.height;
 			let tmpHeight =
--- a/packages/dooringx-lib/src/core/selectRange/index.ts
+++ b/packages/dooringx-lib/src/core/selectRange/index.ts
@@ -1,5 +1,5 @@
 import { IStoreData } from '../store/storetype';
-import { deepCopy, postMessage } from '../utils';
+import { deepCopy } from '../utils';
 import style from '../../index.less';
 import UserConfig from '../../config';
 export interface SelectDataProps {
@@ -32,19 +32,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);
-		if (iframe) {
-			console.log('cxcxc');
-			window.parent.postMessage(
-				{
-					type: 'event',
-					column: 'mousedown',
-					data: null,
-				},
-				'*'
-			);
-		}
-
-		selectData.selectDiv.onmouseup = (e) => selectRangeMouseUp(e, config);
+		selectData.selectDiv.onmouseup = (e) => selectRangeMouseUp(e, config, iframe);
 		selectData.selectDiv.onmousemove = (e) => selectRangeMouseMove(e);
 	}
 }
@@ -76,7 +64,7 @@ function selectFocus(left: number, top: number, width: number, height: number, c
 	blocks.forEach((v) => {
 		const l = v.left;
 		const t = v.top;
-		if (l >= left && l <= maxleft && t >= top && t <= maxtop) {
+		if ((l >= left && l <= maxleft) || (t >= top && t <= maxtop)) {
 			change = true;
 			v.focus = true;
 			focusState.blocks.push(v);
@@ -87,7 +75,11 @@ function selectFocus(left: number, top: number, width: number, height: number, c
 	}
 }

-export function selectRangeMouseUp(e: React.MouseEvent | MouseEvent, config: UserConfig) {
+export function selectRangeMouseUp(
+	e: React.MouseEvent | MouseEvent,
+	config: UserConfig,
+	iframe = false
+) {
 	if (selectData.selectDiv) {
 		// 这里需要判定区域
 		// 如果是react触发 ，left和top就是起始值和终止值的最小值
@@ -106,35 +98,10 @@ export function selectRangeMouseUp(e: React.MouseEvent | MouseEvent, config: Use
 			left = selectData.startX - wwidth;
 			top = selectData.startY - wheight;
 		}
-		selectFocus(left, top, wwidth, wheight, config);
-		selectData.selectDiv.parentNode!.removeChild(selectData.selectDiv);
-		selectData.selectDiv = null;
-	}
-}
-
-export function iframeSelectRangeMouseUp(config: UserConfig) {
-	postMessage(
-		{
-			type: 'event',
-			column: 'select',
-			data: null,
-		},
-		config.iframeOrigin,
-		config.iframeId
-	);
-}
-
-export function forceRangeMouseLeave(config: UserConfig) {
-	if (selectData.selectDiv) {
-		let left = 0;
-		let top = 0;
-		const scaleState = config.getScaleState();
-		const { width, height } = selectData.selectDiv.getBoundingClientRect();
-		const scale = scaleState.value;
-		const wwidth = width / scale;
-		const wheight = height / scale;
-		left = selectData.startX;
-		top = selectData.startY;
+		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/core/transfer/index.ts
+++ b/packages/dooringx-lib/src/core/transfer/index.ts
@@ -2,14 +2,14 @@
 * @Author: yehuozhili
 * @Date: 2021-04-21 22:59:57
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-07 19:50:12
- * @FilePath: \DooringV2\packages\dooringx-lib\src\core\transfer\index.ts
+ * @LastEditTime: 2021-07-20 16:19:21
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\transfer\index.ts
 */

 /**
 *
 *
- * @export 这里的转换可能有问题，需要都使用mobileWidth去转换
+ * @export
 * @param {number} top
 * @param {number} left
 * @param {(string | number | undefined)} height
--- a/packages/dooringx-lib/src/hooks/index.ts
+++ b/packages/dooringx-lib/src/hooks/index.ts
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 05:35:15
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-19 21:28:23
+ * @LastEditTime: 2021-07-20 16:18:29
 * @FilePath: \dooringx\packages\dooringx-lib\src\hooks\index.ts
 */
 import { useEffect, useMemo, useState } from 'react';
@@ -157,7 +157,6 @@ export function useIframeHook(origin: string, config: UserConfig) {
 	useEffect(() => {
 		//@ts-ignore
 		const fn = (e: MessageEvent<any>) => {
-			console.log(e, '收到');
 			if (e.data === 'ready') {
 				setIframeReady(true);
 				fnx();
@@ -170,21 +169,12 @@ export function useIframeHook(origin: string, config: UserConfig) {
 						config.refreshIframe();
 					}
 				}
-				if (e.data.type === 'event') {
-					if (e.data.column === 'mousedown') {
-						// 发射mousedown
-					}
-				}
 			}
 		};
-		const parentMove = () => {
-			console.log('movessss');
-		};
-		window.addEventListener('mousemove', parentMove);
+
 		window.addEventListener('message', fn);
 		return () => {
 			window.removeEventListener('message', fn);
-			window.removeEventListener('mousemove', parentMove);
 		};
 	}, [config, fnx]);
 }
--- a/packages/dooringx-lib/src/index.tsx
+++ b/packages/dooringx-lib/src/index.tsx
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 04:22:18
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-19 21:24:13
+ * @LastEditTime: 2021-07-20 10:44:35
 * @FilePath: \dooringx\packages\dooringx-lib\src\index.tsx
 */

@@ -58,3 +58,4 @@ export { specialCoList } from './core/utils/special';
 export { default as IframeContainer } from './components/iframeContainer';
 export { default as IframeContainerWrapper } from './components/IframeWrapperMove';
 export { useIframePostMessage, useIframeHook } from './hooks';
+export { IframeTarget } from './components/iframeTarget';