From 44429607d250f9027876693c7961de6fa6c8dd68 Mon Sep 17 00:00:00 2001 From: hufeixiong <673632758@qq.com> Date: Mon, 19 Jul 2021 21:45:14 +0800 Subject: [PATCH] should change method --- .../dooringx-example/src/pages/iframeTest.tsx | 56 +++++++++---------- .../src/components/IframeWrapperMove/event.ts | 4 +- .../src/components/iframeContainer.tsx | 4 +- .../src/components/wrapperMove/event.ts | 2 +- .../src/core/focusHandler/index.tsx | 6 +- .../dooringx-lib/src/core/innerDrag/index.ts | 3 +- .../src/core/selectRange/index.ts | 14 ++++- packages/dooringx-lib/src/core/utils/index.ts | 6 +- packages/dooringx-lib/src/hooks/index.ts | 40 ++++++++++++- packages/dooringx-lib/src/index.tsx | 4 +- 10 files changed, 93 insertions(+), 46 deletions(-) diff --git a/packages/dooringx-example/src/pages/iframeTest.tsx b/packages/dooringx-example/src/pages/iframeTest.tsx index 92a156c..f6351ef 100644 --- a/packages/dooringx-example/src/pages/iframeTest.tsx +++ b/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, - useIframePostMessage, + useIframeHook, } 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); - - const [iframeReady, setIframeReady] = useState(false); - const [fnx] = useIframePostMessage(`${location.origin}/container`, config, iframeReady); - useEffect(() => { - const fn = (e: MessageEvent) => { - 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); - }; - }, []); - + useIframeHook(`${location.origin}/container`, config); const scaleState = config.getScaleState(); + + const ref = useRef(null); + useEffect(() => { + if (ref.current) { + ref.current.addEventListener('mousedown', (e) => { + console.log('mousedown'); + }); + ref.current.addEventListener('mouseup', (e) => { + console.log('mouseup,ss'); + }); + } + }, []); return (
@@ -103,7 +90,14 @@ export default function IndexPage() { > } > - <> +
+
- +
diff --git a/packages/dooringx-lib/src/components/IframeWrapperMove/event.ts b/packages/dooringx-lib/src/components/IframeWrapperMove/event.ts index 8563fa7..e8b760c 100644 --- 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-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, 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; diff --git a/packages/dooringx-lib/src/components/iframeContainer.tsx b/packages/dooringx-lib/src/components/iframeContainer.tsx index a7a4d2d..aa9a22c 100644 --- 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-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) { }} {...(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' && ( diff --git a/packages/dooringx-lib/src/components/wrapperMove/event.ts b/packages/dooringx-lib/src/components/wrapperMove/event.ts index 245a13c..c552b68 100644 --- a/packages/dooringx-lib/src/components/wrapperMove/event.ts +++ b/packages/dooringx-lib/src/components/wrapperMove/event.ts @@ -47,7 +47,7 @@ export const wrapperEvent = (ref: RefObject, 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; diff --git a/packages/dooringx-lib/src/core/focusHandler/index.tsx b/packages/dooringx-lib/src/core/focusHandler/index.tsx index 90e6ba7..7060fdb 100644 --- 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-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(); }; diff --git a/packages/dooringx-lib/src/core/innerDrag/index.ts b/packages/dooringx-lib/src/core/innerDrag/index.ts index 5021eea..6621038 100644 --- a/packages/dooringx-lib/src/core/innerDrag/index.ts +++ b/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'; diff --git a/packages/dooringx-lib/src/core/selectRange/index.ts b/packages/dooringx-lib/src/core/selectRange/index.ts index c3bfcbd..c57a44b 100644 --- a/packages/dooringx-lib/src/core/selectRange/index.ts +++ b/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); } diff --git a/packages/dooringx-lib/src/core/utils/index.ts b/packages/dooringx-lib/src/core/utils/index.ts index d01e37b..0f27eda 100644 --- a/packages/dooringx-lib/src/core/utils/index.ts +++ b/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}`); } } diff --git a/packages/dooringx-lib/src/hooks/index.ts b/packages/dooringx-lib/src/hooks/index.ts index 57bd02c..49cca44 100644 --- 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-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) => { + 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]); +} diff --git a/packages/dooringx-lib/src/index.tsx b/packages/dooringx-lib/src/index.tsx index dc4cc59..12d7b20 100644 --- 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-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';