should change method

packages/dooringx-example/src/pages/iframeTest.tsx

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-07-17 10:12:11
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-17 22:13:20
+ * @LastEditTime: 2021-07-19 21:36:27
  * @FilePath: \dooringx\packages\dooringx-example\src\pages\iframeTest.tsx
  */
 
@@ -14,14 +14,14 @@ import {
 	LeftConfig,
 	IframeContainerWrapper,
 	Control,
-	postMessage,
+	useIframeHook,
-	useIframePostMessage,
 } from 'dooringx-lib';
 import { useContext, useState } from 'react';
 import { configContext } from '@/layouts';
 import { useCallback } from 'react';
 import { PREVIEWSTATE } from '@/constant';
 import { useEffect } from 'react';
+import { useRef } from 'react';
 
 export const HeaderHeight = '40px';
 
@@ -35,33 +35,20 @@ export default function IndexPage() {
 	}, [config]);
 
 	const [state] = useStoreState(config, subscribeFn, everyFn);
-
+	useIframeHook(`${location.origin}/container`, config);
-	const [iframeReady, setIframeReady] = useState(false);
-	const [fnx] = useIframePostMessage(`${location.origin}/container`, config, iframeReady);
-	useEffect(() => {
-		const fn = (e: MessageEvent<any>) => {
-			console.log(e, '收到');
-			if (e.data === 'ready') {
-				setIframeReady(true);
-				fnx();
-			}
-			if (typeof e.data === 'object') {
-				if (e.data.type === 'update') {
-					if (e.data.column === 'scale') {
-						config.scaleState = e.data.data;
-						config.getStore().forceUpdate();
-						config.refreshIframe();
-					}
-				}
-			}
-		};
-		window.addEventListener('message', fn);
-		return () => {
-			window.removeEventListener('message', fn);
-		};
-	}, []);
-
 	const scaleState = config.getScaleState();
+
+	const ref = useRef<HTMLDivElement>(null);
+	useEffect(() => {
+		if (ref.current) {
+			ref.current.addEventListener('mousedown', (e) => {
+				console.log('mousedown');
+			});
+			ref.current.addEventListener('mouseup', (e) => {
+				console.log('mouseup,ss');
+			});
+		}
+	}, []);
 	return (
 		<div {...innerContainerDragUp(config, 'iframe')}>
 			<div style={{ height: HeaderHeight }}>
@@ -103,7 +90,14 @@ export default function IndexPage() {
 						></Control>
 					}
 				>
-					<>
+					<div
+						style={{
+							width: state.container.width * scaleState.value,
+							height: state.container.height * scaleState.value + 1,
+							position: 'relative',
+						}}
+					>
+						<div ref={ref} style={{ width: '100%', height: '100%', position: 'absolute' }}></div>
 						<iframe
 							id="yh-container-iframe"
 							style={{
@@ -114,7 +108,7 @@ export default function IndexPage() {
 							}}
 							src="/container"
 						></iframe>
-					</>
+					</div>
 				</IframeContainerWrapper>
 				<div className="rightrender" style={{ height: '100%' }}>
 					<RightConfig state={state} config={config}></RightConfig>

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-17 11:24:59
+ * @LastEditTime: 2021-07-19 10:11:14
  * @FilePath: \dooringx\packages\dooringx-lib\src\components\IframeWrapperMove\event.ts
  */
 import { RefObject } from 'react';
@@ -53,7 +53,7 @@ export const wrapperEvent = (ref: RefObject<HTMLDivElement>, config: UserConfig)
 			}
 		},
 		onMouseMove: (e: React.MouseEvent) => {
-			e.preventDefault();
+			//e.preventDefault();
 			if (wrapperMoveState.isDrag) {
 				const diffX = e.clientX - wrapperMoveState.startX;
 				const diffY = e.clientY - wrapperMoveState.startY;

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-17 22:13:51
+ * @LastEditTime: 2021-07-19 17:36:44
  * @FilePath: \dooringx\packages\dooringx-lib\src\components\iframeContainer.tsx
  */
 import { containerDragResolve } from '../core/crossDrag';
@@ -138,7 +138,7 @@ 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) : null)}
+							{...(props.context === 'edit' ? containerFocusRemove(props.config, true) : null)}
 						>
 							{props.context === 'edit' && (
 								<NormalMarkLineRender config={props.config}></NormalMarkLineRender>

packages/dooringx-lib/src/components/wrapperMove/event.ts

@@ -47,7 +47,7 @@ export const wrapperEvent = (ref: RefObject<HTMLDivElement>, config: UserConfig)
 			}
 		},
 		onMouseMove: (e: React.MouseEvent) => {
-			e.preventDefault();
+			//e.preventDefault();
 			if (wrapperMoveState.isDrag) {
 				const diffX = e.clientX - wrapperMoveState.startX;
 				const diffY = e.clientY - wrapperMoveState.startY;

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-13 14:43:14
+ * @LastEditTime: 2021-07-19 17:34:54
  * @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) {
+export function containerFocusRemove(config: UserConfig, iframe = false) {
 	const store = config.getStore();
 
 	const onMouseDown = (e: React.MouseEvent) => {
@@ -25,7 +25,7 @@ export function containerFocusRemove(config: UserConfig) {
 		focusState.blocks = [];
 		store.setData({ ...clonedata, block: newBlock });
 		if (!innerDragState.item) {
-			selectRangeMouseDown(e, config);
+			selectRangeMouseDown(e, config, iframe);
 		}
 		unmountContextMenu();
 	};

packages/dooringx-lib/src/core/innerDrag/index.ts

@@ -53,7 +53,7 @@ export const innerContainerDrag = function (config: UserConfig) {
 	const store = config.getStore();
 	const scaleState = config.getScaleState();
 	const onMouseMove = (e: React.MouseEvent) => {
-		e.preventDefault();
+		//e.preventDefault();
 		if (isMac() && contextMenuState.state) {
 			//mac有bug
 			return;
@@ -111,6 +111,7 @@ export const innerContainerDragUp = function (config: UserConfig, mode = 'normal
 		wrapperMoveMouseUp(config);
 		selectRangeMouseUp(e, config);
 		if (mode !== 'normal') {
+			console.log('ggogogogogogo');
 		}
 		if (innerDragState.ref && innerDragState.ref.current) {
 			innerDragState.ref.current.style.cursor = 'default';

packages/dooringx-lib/src/core/selectRange/index.ts

@@ -18,7 +18,7 @@ export const selectData: SelectDataProps = {
 	startY: 0,
 };
 
-export function selectRangeMouseDown(e: React.MouseEvent, config: UserConfig) {
+export function selectRangeMouseDown(e: React.MouseEvent, config: UserConfig, iframe: boolean) {
 	if (!selectData.selectDiv) {
 		selectData.selectDiv = document.createElement('div');
 	}
@@ -32,6 +32,18 @@ export function selectRangeMouseDown(e: React.MouseEvent, config: UserConfig) {
 		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.onmousemove = (e) => selectRangeMouseMove(e);
 	}

packages/dooringx-lib/src/core/utils/index.ts

@@ -281,10 +281,12 @@ export const changeUserValueRecord = (
 };
 
 export function postMessage(value: any, src: string, target = 'yh-container-iframe') {
-	const iframe = document.querySelector(`#${target}`) as HTMLIFrameElement;
+	const search = '#' + target;
+	const iframe = document.querySelector(search) as HTMLIFrameElement;
+
 	if (iframe) {
 		iframe.contentWindow?.postMessage(value, src);
 	} else {
-		console.warn('can not find iframe');
+		console.warn(`can not find iframe ${search}`);
 	}
 }

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-17 20:59:26
+ * @LastEditTime: 2021-07-19 21:28:23
  * @FilePath: \dooringx\packages\dooringx-lib\src\hooks\index.ts
  */
 import { useEffect, useMemo, useState } from 'react';
@@ -150,3 +150,41 @@ export function useIframePostMessage(
 
 	return [fn];
 }
+
+export function useIframeHook(origin: string, config: UserConfig) {
+	const [iframeReady, setIframeReady] = useState(false);
+	const [fnx] = useIframePostMessage(origin, config, iframeReady);
+	useEffect(() => {
+		//@ts-ignore
+		const fn = (e: MessageEvent<any>) => {
+			console.log(e, '收到');
+			if (e.data === 'ready') {
+				setIframeReady(true);
+				fnx();
+			}
+			if (typeof e.data === 'object') {
+				if (e.data.type === 'update') {
+					if (e.data.column === 'scale') {
+						config.scaleState = e.data.data;
+						config.getStore().forceUpdate();
+						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]);
+}

packages/dooringx-lib/src/index.tsx

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:22:18
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-17 16:38:22
+ * @LastEditTime: 2021-07-19 21:24:13
  * @FilePath: \dooringx\packages\dooringx-lib\src\index.tsx
  */
 
@@ -57,4 +57,4 @@ export { specialCoList } from './core/utils/special';
 // iframe
 export { default as IframeContainer } from './components/iframeContainer';
 export { default as IframeContainerWrapper } from './components/IframeWrapperMove';
-export { useIframePostMessage } from './hooks';
+export { useIframePostMessage, useIframeHook } from './hooks';