From f1a3d98bcb6d06ae57fa3739fc011811ec4d9403 Mon Sep 17 00:00:00 2001 From: hufeixiong <673632758@qq.com> Date: Sat, 17 Jul 2021 22:15:30 +0800 Subject: [PATCH] start iframe --- packages/dooringx-example/.umirc.ts | 4 +- .../src/pages/container/index.tsx | 22 +++ .../dooringx-example/src/pages/iframeTest.tsx | 125 ++++++++++++ packages/dooringx-example/src/pages/index.tsx | 3 +- packages/dooringx-lib/package.json | 2 +- .../src/components/IframeWrapperMove/event.ts | 77 ++++++++ .../components/IframeWrapperMove/index.tsx | 86 ++++++++ .../components/IframeWrapperMove/ticker.tsx | 156 +++++++++++++++ .../dooringx-lib/src/components/container.tsx | 1 + .../src/components/iframeContainer.tsx | 184 ++++++++++++++++++ packages/dooringx-lib/src/config/index.tsx | 20 +- .../dooringx-lib/src/core/innerDrag/index.ts | 6 +- packages/dooringx-lib/src/core/scale/index.ts | 47 ++++- .../src/core/selectRange/index.ts | 31 ++- packages/dooringx-lib/src/core/utils/index.ts | 9 + packages/dooringx-lib/src/hooks/index.ts | 55 +++++- packages/dooringx-lib/src/index.tsx | 8 +- 17 files changed, 825 insertions(+), 11 deletions(-) create mode 100644 packages/dooringx-example/src/pages/container/index.tsx create mode 100644 packages/dooringx-example/src/pages/iframeTest.tsx create mode 100644 packages/dooringx-lib/src/components/IframeWrapperMove/event.ts create mode 100644 packages/dooringx-lib/src/components/IframeWrapperMove/index.tsx create mode 100644 packages/dooringx-lib/src/components/IframeWrapperMove/ticker.tsx create mode 100644 packages/dooringx-lib/src/components/iframeContainer.tsx diff --git a/packages/dooringx-example/.umirc.ts b/packages/dooringx-example/.umirc.ts index dd1e5e1..cebd780 100644 --- a/packages/dooringx-example/.umirc.ts +++ b/packages/dooringx-example/.umirc.ts @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-07-07 11:11:52 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-12 13:58:33 + * @LastEditTime: 2021-07-17 10:15:46 * @FilePath: \dooringx\packages\dooringx-example\.umirc.ts */ import { defineConfig } from 'umi'; @@ -26,6 +26,8 @@ export default defineConfig({ component: '@/layouts/index', routes: [ { path: '/', component: '@/pages/index' }, + { path: '/iframeTest', component: '@/pages/iframeTest' }, + { path: '/container', component: '@/pages/container' }, { path: '/preview', component: '@/pages/preview' }, { path: '/iframe', component: '@/pages/iframe' }, ], diff --git a/packages/dooringx-example/src/pages/container/index.tsx b/packages/dooringx-example/src/pages/container/index.tsx new file mode 100644 index 0000000..61a3c7a --- /dev/null +++ b/packages/dooringx-example/src/pages/container/index.tsx @@ -0,0 +1,22 @@ +/* + * @Author: yehuozhili + * @Date: 2021-07-16 20:55:50 + * @LastEditors: yehuozhili + * @LastEditTime: 2021-07-17 14:02:12 + * @FilePath: \dooringx\packages\dooringx-example\src\pages\container\index.tsx + */ + +import { configContext } from '@/layouts'; +import { useContext } from 'react'; +import { IframeContainer } from '../../../../dooringx-lib/dist'; + +function ContainerPage() { + const config = useContext(configContext); + return ( +
+ +
+ ); +} + +export default ContainerPage; diff --git a/packages/dooringx-example/src/pages/iframeTest.tsx b/packages/dooringx-example/src/pages/iframeTest.tsx new file mode 100644 index 0000000..92a156c --- /dev/null +++ b/packages/dooringx-example/src/pages/iframeTest.tsx @@ -0,0 +1,125 @@ +/* + * @Author: yehuozhili + * @Date: 2021-07-17 10:12:11 + * @LastEditors: yehuozhili + * @LastEditTime: 2021-07-17 22:13:20 + * @FilePath: \dooringx\packages\dooringx-example\src\pages\iframeTest.tsx + */ + +import { + RightConfig, + Container, + useStoreState, + innerContainerDragUp, + LeftConfig, + IframeContainerWrapper, + Control, + postMessage, + 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'; + +export const HeaderHeight = '40px'; + +export default function IndexPage() { + const config = useContext(configContext); + + const everyFn = () => {}; + + const subscribeFn = useCallback(() => { + localStorage.setItem(PREVIEWSTATE, JSON.stringify(config.getStore().getData())); + }, [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); + }; + }, []); + + const scaleState = config.getScaleState(); + return ( +
+
+ head + + +
+
+
+ +
+ + + } + > + <> + + + +
+ +
+
+
+ ); +} diff --git a/packages/dooringx-example/src/pages/index.tsx b/packages/dooringx-example/src/pages/index.tsx index 2a812ee..a9b996b 100644 --- a/packages/dooringx-example/src/pages/index.tsx +++ b/packages/dooringx-example/src/pages/index.tsx @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-05-15 12:49:28 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-12 20:19:38 + * @LastEditTime: 2021-07-17 10:12:53 * @FilePath: \dooringx\packages\dooringx-example\src\pages\index.tsx */ import { @@ -13,6 +13,7 @@ import { LeftConfig, ContainerWrapper, Control, + postMessage, } from 'dooringx-lib'; import { useContext } from 'react'; import { configContext } from '@/layouts'; diff --git a/packages/dooringx-lib/package.json b/packages/dooringx-lib/package.json index 15e08d7..cb4dbf0 100644 --- a/packages/dooringx-lib/package.json +++ b/packages/dooringx-lib/package.json @@ -1,5 +1,5 @@ { - "version": "0.5.0", + "version": "0.6.0", "license": "MIT", "main": "dist/index.js", "module": "dist/dooringx-lib.esm.js", diff --git a/packages/dooringx-lib/src/components/IframeWrapperMove/event.ts b/packages/dooringx-lib/src/components/IframeWrapperMove/event.ts new file mode 100644 index 0000000..8563fa7 --- /dev/null +++ b/packages/dooringx-lib/src/components/IframeWrapperMove/event.ts @@ -0,0 +1,77 @@ +/* + * @Author: yehuozhili + * @Date: 2021-02-21 22:17:29 + * @LastEditors: yehuozhili + * @LastEditTime: 2021-07-17 11:24:59 + * @FilePath: \dooringx\packages\dooringx-lib\src\components\IframeWrapperMove\event.ts + */ +import { RefObject } from 'react'; +import { containerResizer } from '../../core/resizeHandler/containerResizer'; +import { contextMenuState } from '../../core/contextMenu'; +import UserConfig from '../../config'; + +export interface WrapperMoveStateProps { + isDrag: boolean; + startX: number; + startY: number; + needX: number; + needY: number; +} + +export interface WrapperMoveRef { + ref: null | RefObject; +} + +export const wrapperMoveState: WrapperMoveStateProps = { + isDrag: false, + startX: 0, + startY: 0, + needX: 0, + needY: 0, +}; + +export const wrapperRefState: WrapperMoveRef = { + ref: null, +}; + +export const wrapperEvent = (ref: RefObject, config: UserConfig) => { + const scale = config.getScaleState().value; + const store = config.getStore(); + return { + onMouseDown: (e: React.MouseEvent) => { + // e.preventDefault();// 不能使用preventDefault 否则弹窗输入框焦点无法触发 + contextMenuState.unmountContextMenu(); + if (e.target !== ref.current) { + } else { + wrapperMoveState.isDrag = true; + wrapperMoveState.startX = e.clientX; + wrapperMoveState.startY = e.clientY; + if (ref.current) { + ref.current.style.cursor = 'grab'; + wrapperRefState.ref = ref; + } + } + }, + onMouseMove: (e: React.MouseEvent) => { + e.preventDefault(); + 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.startX = e.clientX; + wrapperMoveState.startY = e.clientY; + + store.forceUpdate(); + } + containerResizer.onMouseMove(e, config); + }, + }; +}; +export const wrapperMoveMouseUp = (config: UserConfig) => { + if (wrapperRefState.ref && wrapperRefState.ref.current) { + wrapperRefState.ref.current.style.cursor = 'default'; + } + containerResizer.onMouseUp(config); + wrapperMoveState.isDrag = false; +}; diff --git a/packages/dooringx-lib/src/components/IframeWrapperMove/index.tsx b/packages/dooringx-lib/src/components/IframeWrapperMove/index.tsx new file mode 100644 index 0000000..03c187b --- /dev/null +++ b/packages/dooringx-lib/src/components/IframeWrapperMove/index.tsx @@ -0,0 +1,86 @@ +/* + * @Author: yehuozhili + * @Date: 2021-03-14 04:29:09 + * @LastEditors: yehuozhili + * @LastEditTime: 2021-07-17 22:13:37 + * @FilePath: \dooringx\packages\dooringx-lib\src\components\IframeWrapperMove\index.tsx + */ +import { AllHTMLAttributes, CSSProperties, PropsWithChildren, ReactNode, useRef } from 'react'; +import { wrapperEvent } from './event'; +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 { + config: UserConfig; + classNames?: string; + style?: CSSProperties; + extra?: ReactNode; +} + +function ContainerWrapper(props: PropsWithChildren) { + const { children, style, classNames, config, extra, ...rest } = props; + const ref = useRef(null); + const ticker = props.config.ticker; + const wrapperMoveState = config.getWrapperMove().iframe; + const scaleState = config.getScaleState(); + const state = props.config.getStore().getData(); + + return ( +
+
+ {children} + +
+
containerResizer.onMousedown(e, props.config)} + > + {props.config.getConfig().containerIcon} +
+
+
+ {extra && extra} + {ticker && } +
+ ); +} +export default ContainerWrapper; diff --git a/packages/dooringx-lib/src/components/IframeWrapperMove/ticker.tsx b/packages/dooringx-lib/src/components/IframeWrapperMove/ticker.tsx new file mode 100644 index 0000000..a38eadf --- /dev/null +++ b/packages/dooringx-lib/src/components/IframeWrapperMove/ticker.tsx @@ -0,0 +1,156 @@ +/* + * @Author: yehuozhili + * @Date: 2021-07-12 15:54:35 + * @LastEditors: yehuozhili + * @LastEditTime: 2021-07-13 21:07:22 + * @FilePath: \dooringx\packages\dooringx-lib\src\components\wrapperMove\ticker.tsx + */ +import React, { useEffect, useRef, useState } from 'react'; +import UserConfig from '../../config'; + +const width = '20px'; +const indent = 50; + +function Ticker(props: { config: UserConfig }) { + const topRef = useRef(null); + const leftRef = useRef(null); + const [topRender, setTopRender] = useState(0); + const [leftRender, setLeftRender] = useState(0); + + const scale = props.config.getScaleState().value; + + useEffect(() => { + const timer = setTimeout(() => { + if (topRef.current) { + const width = topRef.current.getBoundingClientRect().width; + const renderWidth = Math.ceil(width / 10 / scale); + setTopRender(renderWidth); + } + // left可以不用放，但为了更新统一 + if (leftRef.current) { + const height = leftRef.current.getBoundingClientRect().height; + const renderHeight = Math.ceil(height / 10 / scale); + setLeftRender(renderHeight); + } + }, 300); + + return () => { + clearTimeout(timer); + }; + }, [props.config, props.config.collapsed, scale]); + + return ( + <> +
+ {Array(topRender) + .fill(1) + .map((_, i) => { + if (i % 10 === 0) { + return ( +
+
+ {i} +
+
+ ); + } else { + return ( +
+ ); + } + })} +
+
+ {Array(leftRender) + .fill(1) + .map((_, i) => { + if (i % 10 === 0) { + return ( +
+
+ {i} +
+
+ ); + } else { + return ( +
+ ); + } + })} +
+ + ); +} + +export default Ticker; diff --git a/packages/dooringx-lib/src/components/container.tsx b/packages/dooringx-lib/src/components/container.tsx index 8e9c3f8..7392690 100644 --- a/packages/dooringx-lib/src/components/container.tsx +++ b/packages/dooringx-lib/src/components/container.tsx @@ -37,6 +37,7 @@ function Container(props: PropsWithChildren) { return props.state.globalState.containerColor; } }; + return ( <> {props.context === 'edit' && ( diff --git a/packages/dooringx-lib/src/components/iframeContainer.tsx b/packages/dooringx-lib/src/components/iframeContainer.tsx new file mode 100644 index 0000000..a7a4d2d --- /dev/null +++ b/packages/dooringx-lib/src/components/iframeContainer.tsx @@ -0,0 +1,184 @@ +/* + * @Author: yehuozhili + * @Date: 2021-07-17 10:08:08 + * @LastEditors: yehuozhili + * @LastEditTime: 2021-07-17 22:13:51 + * @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'; +import Blocks from './blocks'; +import React from 'react'; +import UserConfig, { defaultStore } from '../config'; +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; + editContainerStyle?: CSSProperties; + previewContainerStyle?: CSSProperties; +} +interface IframeInnerState { + store: IStoreData; + scaleState: { + value: number; + maxValue: number; + minValue: number; + }; + isEdit: boolean; + origin: null | IStoreData[]; + wrapperState: { + data: any; + iframe: WrapperMoveStateProps; + }; +} + +function Container(props: PropsWithChildren) { + const { editContainerStyle, previewContainerStyle } = props; + + const [message, setMessage] = useState({ + store: defaultStore, + scaleState: { + value: 0, + maxValue: 0, + minValue: 0, + }, + isEdit: false, + wrapperState: props.config.getWrapperMove(), + origin: null, + }); + + const state = message.store; + const scaleState = message.scaleState; + const isEdit = message.isEdit; + + const bgColor = () => { + if (isEdit) { + return 'rgba(255,255,255,1)'; + } else { + return state.globalState.containerColor; + } + }; + + const transform = useMemo(() => { + if (props.context === 'edit') { + return `scale(${scaleState.value}) translate(${wrapperMoveState.needX}px, ${wrapperMoveState.needY}px)`; + } else { + return undefined; + } + }, [props.context, scaleState.value]); + + 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]); + props.config.scaleState = data.scaleState; + }; + window.addEventListener('message', fn); + window.parent.postMessage('ready', '*'); + return () => { + window.removeEventListener('message', fn); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + <> + {props.context === 'edit' && ( + <> +
{ + selectRangeMouseUp(e, props.config); + // props.config.sendParent({ + // type: 'event', + // column: 'select', + // data: null, + // }); + }} + onMouseLeave={(e) => { + selectRangeMouseUp(e, props.config); + }} + {...onWheelEventIframe(props.config, scaleState)} + > +
+ {props.context === 'edit' && ( + + )} + {state.block.map((v) => { + return ( + + ); + })} +
+
+ + )} + {props.context === 'preview' && ( +
+ {state.block.map((v) => { + return ( + + ); + })} +
+ )} + + ); +} +export default Container; diff --git a/packages/dooringx-lib/src/config/index.tsx b/packages/dooringx-lib/src/config/index.tsx index 318b8f2..206a1ed 100644 --- a/packages/dooringx-lib/src/config/index.tsx +++ b/packages/dooringx-lib/src/config/index.tsx @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-02-25 21:16:58 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-16 20:22:47 + * @LastEditTime: 2021-07-17 20:57:16 * @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx */ import React from 'react'; @@ -31,7 +31,8 @@ import ComponentRegister from '../core/components'; import { StoreChanger } from '../core/storeChanger'; import Store from '../core/store'; import { VerticalAlignMiddleOutlined } from '@ant-design/icons'; - +import { wrapperMoveState } from '../components/wrapperMove/event'; +import { wrapperMoveState as iframeWrapperMoveState } from '../components/IframeWrapperMove/event'; // 组件部分 /** @@ -344,6 +345,14 @@ export class UserConfig { public focusState = focusState; public collapsed = false; public ticker = true; + public wrapperMoveState = wrapperMoveState; + public iframeWrapperMoveState = iframeWrapperMoveState; + public refreshIframe = () => {}; + public sendParent = (message: any) => { + window.parent.postMessage(message, '*'); + }; + public iframeOrigin = ''; + public iframeId = 'yh-container-iframe'; constructor(initConfig?: Partial) { const mergeConfig = userConfigMerge(defaultConfig, initConfig); this.initConfig = mergeConfig; @@ -410,6 +419,13 @@ export class UserConfig { this.toRegist(); } + getWrapperMove() { + return { + data: this.wrapperMoveState, + iframe: this.iframeWrapperMoveState, + }; + } + getFocusState() { return this.focusState; } diff --git a/packages/dooringx-lib/src/core/innerDrag/index.ts b/packages/dooringx-lib/src/core/innerDrag/index.ts index 2632d2c..230d4af 100644 --- a/packages/dooringx-lib/src/core/innerDrag/index.ts +++ b/packages/dooringx-lib/src/core/innerDrag/index.ts @@ -6,6 +6,7 @@ import { selectRangeMouseMove, selectData, selectRangeMouseUp } from '../selectR import { IBlockType } from '../store/storetype'; import { deepCopy, isMac } from '../utils'; import { wrapperMoveMouseUp } from '../../components/wrapperMove/event'; +import { wrapperMoveMouseUp as iframeWrapperMove } from '../../components/IframeWrapperMove/event'; import { contextMenuState } from '../contextMenu'; import { innerDragState } from './state'; import UserConfig from '../../config'; @@ -102,12 +103,15 @@ export const innerContainerDrag = function (config: UserConfig) { onMouseMove, }; }; -export const innerContainerDragUp = function (config: UserConfig) { +export const innerContainerDragUp = function (config: UserConfig, mode = 'normal') { const store = config.getStore(); const onMouseUp = (e: React.MouseEvent) => { e.preventDefault(); + iframeWrapperMove(config); wrapperMoveMouseUp(config); selectRangeMouseUp(e, config); + if (mode !== 'normal') { + } if (innerDragState.ref && innerDragState.ref.current) { innerDragState.ref.current.style.cursor = 'default'; innerDragState.ref.current.style.willChange = 'auto'; diff --git a/packages/dooringx-lib/src/core/scale/index.ts b/packages/dooringx-lib/src/core/scale/index.ts index fa2cdbb..85dd3a0 100644 --- a/packages/dooringx-lib/src/core/scale/index.ts +++ b/packages/dooringx-lib/src/core/scale/index.ts @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-03-14 04:29:09 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-12 20:04:17 + * @LastEditTime: 2021-07-17 17:05:13 * @FilePath: \dooringx\packages\dooringx-lib\src\core\scale\index.ts */ import UserConfig from '../../config'; @@ -23,6 +23,7 @@ export const onWheelEvent = (config: UserConfig) => { if (scale.value < scale.maxValue) { scale.value = scale.value + 0.1; store.forceUpdate(); + config.refreshIframe(); } } else { scaleCancelFn(); @@ -30,6 +31,7 @@ export const onWheelEvent = (config: UserConfig) => { if (scale.value > scale.minValue) { scale.value = scale.value - 0.1; store.forceUpdate(); + config.refreshIframe(); } } }, @@ -44,6 +46,7 @@ export const scaleFn = { scaleCancelFn(); scaleState.value = scaleState.value + number; store.forceUpdate(); + config.refreshIframe(); } return scaleState.value; }, @@ -54,7 +57,49 @@ export const scaleFn = { if (scaleState.value > scaleState.minValue) { scaleState.value = scaleState.value - number; store.forceUpdate(); + config.refreshIframe(); } return scaleState.value; }, }; + +export const onWheelEventIframe = ( + config: UserConfig, + scale: { + value: number; + maxValue: number; + minValue: number; + } +) => { + return { + onWheel: (e: React.WheelEvent) => { + const dom = document.querySelector('.ant-modal-mask'); + if (dom) { + //出现弹窗禁止滚动 + return; + } + if (e.deltaY > 0) { + scaleCancelFn(); + if (scale.value < scale.maxValue) { + scale.value = scale.value + 0.1; + config.sendParent({ + type: 'update', + column: 'scale', + data: scale, + }); + } + } else { + scaleCancelFn(); + //往上滚缩小 + if (scale.value > scale.minValue) { + scale.value = scale.value - 0.1; + config.sendParent({ + type: 'update', + column: 'scale', + data: scale, + }); + } + } + }, + }; +}; diff --git a/packages/dooringx-lib/src/core/selectRange/index.ts b/packages/dooringx-lib/src/core/selectRange/index.ts index 24b0466..c3bfcbd 100644 --- 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 } from '../utils'; +import { deepCopy, postMessage } from '../utils'; import style from '../../index.less'; import UserConfig from '../../config'; export interface SelectDataProps { @@ -99,3 +99,32 @@ export function selectRangeMouseUp(e: React.MouseEvent | MouseEvent, config: Use 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; + selectFocus(left, top, wwidth, wheight, config); + selectData.selectDiv.parentNode!.removeChild(selectData.selectDiv); + selectData.selectDiv = null; + } +} diff --git a/packages/dooringx-lib/src/core/utils/index.ts b/packages/dooringx-lib/src/core/utils/index.ts index 13f5229..d01e37b 100644 --- a/packages/dooringx-lib/src/core/utils/index.ts +++ b/packages/dooringx-lib/src/core/utils/index.ts @@ -279,3 +279,12 @@ export const changeUserValueRecord = ( return {}; } }; + +export function postMessage(value: any, src: string, target = 'yh-container-iframe') { + const iframe = document.querySelector(`#${target}`) as HTMLIFrameElement; + if (iframe) { + iframe.contentWindow?.postMessage(value, src); + } else { + console.warn('can not find iframe'); + } +} diff --git a/packages/dooringx-lib/src/hooks/index.ts b/packages/dooringx-lib/src/hooks/index.ts index 0296c2e..57bd02c 100644 --- a/packages/dooringx-lib/src/hooks/index.ts +++ b/packages/dooringx-lib/src/hooks/index.ts @@ -2,13 +2,14 @@ * @Author: yehuozhili * @Date: 2021-03-14 05:35:15 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-12 15:52:06 + * @LastEditTime: 2021-07-17 20:59:26 * @FilePath: \dooringx\packages\dooringx-lib\src\hooks\index.ts */ import { useEffect, useMemo, useState } from 'react'; import UserConfig from '../config'; import { ComponentRenderConfigProps } from '../core/components/componentItem'; import { registCommandFn, unRegistCommandFn } from '../core/command/runtime'; +import { postMessage } from '../core/utils'; export function useStoreState( config: UserConfig, @@ -97,3 +98,55 @@ export function useDynamicAddEventCenter( }, [displayName, eventCenter, eventName, props.data.eventMap, props.data.id, props.store]); return; } + +/** + * + * + * @export + * @param {string} origin iframe地址 + * @param {UserConfig} config + * @param {boolean} sign iframe onload + * @param {string} [target] iframeid 默认是yh-container-iframe + * @return {*} + */ +export function useIframePostMessage( + origin: string, + config: UserConfig, + sign: boolean, + target?: string +) { + const store = config.getStore(); + + const fn = useMemo(() => { + config.iframeId = target || config.iframeId; + config.iframeOrigin = origin; + return () => { + const data = { + store: store.getData(), + scaleState: config.getScaleState(), + origin: config.getStoreChanger().getOrigin(), + isEdit: config.getStoreChanger().isEdit(), + wrapperState: config.getWrapperMove().iframe, + }; + + postMessage(data, origin, target); + }; + }, [config, origin, store, target]); + + useEffect(() => { + let unRegister = () => {}; + if (sign) { + config.refreshIframe = fn; + unRegister = store.subscribe(() => { + // dom等无法传递 + // config由context带去，传递store和必要state + fn(); + }); + } + return () => { + unRegister(); + }; + }, [config.refreshIframe, fn, sign, store]); + + return [fn]; +} diff --git a/packages/dooringx-lib/src/index.tsx b/packages/dooringx-lib/src/index.tsx index a825332..dc4cc59 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-13 14:57:13 + * @LastEditTime: 2021-07-17 16:38:22 * @FilePath: \dooringx\packages\dooringx-lib\src\index.tsx */ @@ -52,5 +52,9 @@ export { defaultStore } from './config'; //state export { focusState } from './core/focusHandler/state'; //utils -export { deepCopy, rgba2Obj, swap, createUid, arrayMove } from './core/utils'; +export { deepCopy, rgba2Obj, swap, createUid, arrayMove, postMessage } from './core/utils'; 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';