update 0.6.0
This commit is contained in:
@@ -3,6 +3,13 @@ title: CHANGELOG
|
||||
order: 1
|
||||
---
|
||||
|
||||
## 0.6.0
|
||||
|
||||
已支持编辑模式使用Iframe!
|
||||
|
||||
修复选中条件。
|
||||
|
||||
|
||||
## 0.5.1
|
||||
|
||||
修复右侧选中不能取消选中问题。
|
||||
|
@@ -2,7 +2,7 @@
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-07-17 10:12:11
|
||||
* @LastEditors: yehuozhili
|
||||
* @LastEditTime: 2021-07-19 21:36:27
|
||||
* @LastEditTime: 2021-07-20 16:16:33
|
||||
* @FilePath: \dooringx\packages\dooringx-example\src\pages\iframeTest.tsx
|
||||
*/
|
||||
|
||||
@@ -15,13 +15,12 @@ import {
|
||||
IframeContainerWrapper,
|
||||
Control,
|
||||
useIframeHook,
|
||||
IframeTarget,
|
||||
} from 'dooringx-lib';
|
||||
import { useContext, useState } from 'react';
|
||||
import { useContext } 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';
|
||||
|
||||
@@ -36,21 +35,9 @@ export default function IndexPage() {
|
||||
|
||||
const [state] = useStoreState(config, subscribeFn, everyFn);
|
||||
useIframeHook(`${location.origin}/container`, config);
|
||||
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 {...innerContainerDragUp(config, true)}>
|
||||
<div style={{ height: HeaderHeight }}>
|
||||
head
|
||||
<button
|
||||
@@ -90,25 +77,12 @@ export default function IndexPage() {
|
||||
></Control>
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: state.container.width * scaleState.value,
|
||||
height: state.container.height * scaleState.value + 1,
|
||||
position: 'relative',
|
||||
<IframeTarget
|
||||
config={config}
|
||||
iframeProps={{
|
||||
src: '/container',
|
||||
}}
|
||||
>
|
||||
<div ref={ref} style={{ width: '100%', height: '100%', position: 'absolute' }}></div>
|
||||
<iframe
|
||||
id="yh-container-iframe"
|
||||
style={{
|
||||
width: state.container.width * scaleState.value,
|
||||
height: state.container.height * scaleState.value + 1,
|
||||
border: 'none',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
src="/container"
|
||||
></iframe>
|
||||
</div>
|
||||
></IframeTarget>
|
||||
</IframeContainerWrapper>
|
||||
<div className="rightrender" style={{ height: '100%' }}>
|
||||
<RightConfig state={state} config={config}></RightConfig>
|
||||
|
@@ -2,7 +2,7 @@
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-05-15 12:49:28
|
||||
* @LastEditors: yehuozhili
|
||||
* @LastEditTime: 2021-07-17 10:12:53
|
||||
* @LastEditTime: 2021-07-20 16:30:12
|
||||
* @FilePath: \dooringx\packages\dooringx-example\src\pages\index.tsx
|
||||
*/
|
||||
import {
|
||||
@@ -13,7 +13,6 @@ import {
|
||||
LeftConfig,
|
||||
ContainerWrapper,
|
||||
Control,
|
||||
postMessage,
|
||||
} from 'dooringx-lib';
|
||||
import { useContext } from 'react';
|
||||
import { configContext } from '@/layouts';
|
||||
|
@@ -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
|
||||
|
||||
修复右侧选中不能取消选中问题。
|
||||
|
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.5.1",
|
||||
"version": "0.6.0",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/dooringx-lib.esm.js",
|
||||
|
@@ -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;
|
||||
|
||||
|
@@ -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>}
|
||||
|
@@ -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,
|
||||
|
@@ -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)}
|
||||
|
104
packages/dooringx-lib/src/components/iframeTarget.tsx
Normal file
104
packages/dooringx-lib/src/components/iframeTarget.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
@@ -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)}
|
||||
|
@@ -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';
|
||||
|
@@ -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';
|
||||
|
@@ -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';
|
||||
|
@@ -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 =
|
||||
|
@@ -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;
|
||||
|
@@ -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
|
||||
|
@@ -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]);
|
||||
}
|
||||
|
@@ -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';
|
||||
|
Reference in New Issue
Block a user