update 0.6.0
This commit is contained in:
@@ -3,6 +3,13 @@ title: CHANGELOG
|
|||||||
order: 1
|
order: 1
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## 0.6.0
|
||||||
|
|
||||||
|
已支持编辑模式使用Iframe!
|
||||||
|
|
||||||
|
修复选中条件。
|
||||||
|
|
||||||
|
|
||||||
## 0.5.1
|
## 0.5.1
|
||||||
|
|
||||||
修复右侧选中不能取消选中问题。
|
修复右侧选中不能取消选中问题。
|
||||||
|
@@ -2,7 +2,7 @@
|
|||||||
* @Author: yehuozhili
|
* @Author: yehuozhili
|
||||||
* @Date: 2021-07-17 10:12:11
|
* @Date: 2021-07-17 10:12:11
|
||||||
* @LastEditors: yehuozhili
|
* @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
|
* @FilePath: \dooringx\packages\dooringx-example\src\pages\iframeTest.tsx
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@@ -15,13 +15,12 @@ import {
|
|||||||
IframeContainerWrapper,
|
IframeContainerWrapper,
|
||||||
Control,
|
Control,
|
||||||
useIframeHook,
|
useIframeHook,
|
||||||
|
IframeTarget,
|
||||||
} from 'dooringx-lib';
|
} from 'dooringx-lib';
|
||||||
import { useContext, useState } from 'react';
|
import { useContext } from 'react';
|
||||||
import { configContext } from '@/layouts';
|
import { configContext } from '@/layouts';
|
||||||
import { useCallback } from 'react';
|
import { useCallback } from 'react';
|
||||||
import { PREVIEWSTATE } from '@/constant';
|
import { PREVIEWSTATE } from '@/constant';
|
||||||
import { useEffect } from 'react';
|
|
||||||
import { useRef } from 'react';
|
|
||||||
|
|
||||||
export const HeaderHeight = '40px';
|
export const HeaderHeight = '40px';
|
||||||
|
|
||||||
@@ -36,21 +35,9 @@ export default function IndexPage() {
|
|||||||
|
|
||||||
const [state] = useStoreState(config, subscribeFn, everyFn);
|
const [state] = useStoreState(config, subscribeFn, everyFn);
|
||||||
useIframeHook(`${location.origin}/container`, config);
|
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 (
|
return (
|
||||||
<div {...innerContainerDragUp(config, 'iframe')}>
|
<div {...innerContainerDragUp(config, true)}>
|
||||||
<div style={{ height: HeaderHeight }}>
|
<div style={{ height: HeaderHeight }}>
|
||||||
head
|
head
|
||||||
<button
|
<button
|
||||||
@@ -90,25 +77,12 @@ export default function IndexPage() {
|
|||||||
></Control>
|
></Control>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div
|
<IframeTarget
|
||||||
style={{
|
config={config}
|
||||||
width: state.container.width * scaleState.value,
|
iframeProps={{
|
||||||
height: state.container.height * scaleState.value + 1,
|
src: '/container',
|
||||||
position: 'relative',
|
|
||||||
}}
|
}}
|
||||||
>
|
></IframeTarget>
|
||||||
<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>
|
|
||||||
</IframeContainerWrapper>
|
</IframeContainerWrapper>
|
||||||
<div className="rightrender" style={{ height: '100%' }}>
|
<div className="rightrender" style={{ height: '100%' }}>
|
||||||
<RightConfig state={state} config={config}></RightConfig>
|
<RightConfig state={state} config={config}></RightConfig>
|
||||||
|
@@ -2,7 +2,7 @@
|
|||||||
* @Author: yehuozhili
|
* @Author: yehuozhili
|
||||||
* @Date: 2021-05-15 12:49:28
|
* @Date: 2021-05-15 12:49:28
|
||||||
* @LastEditors: yehuozhili
|
* @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
|
* @FilePath: \dooringx\packages\dooringx-example\src\pages\index.tsx
|
||||||
*/
|
*/
|
||||||
import {
|
import {
|
||||||
@@ -13,7 +13,6 @@ import {
|
|||||||
LeftConfig,
|
LeftConfig,
|
||||||
ContainerWrapper,
|
ContainerWrapper,
|
||||||
Control,
|
Control,
|
||||||
postMessage,
|
|
||||||
} from 'dooringx-lib';
|
} from 'dooringx-lib';
|
||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
import { configContext } from '@/layouts';
|
import { configContext } from '@/layouts';
|
||||||
|
@@ -2,7 +2,7 @@
|
|||||||
* @Author: yehuozhili
|
* @Author: yehuozhili
|
||||||
* @Date: 2021-01-31 20:44:16
|
* @Date: 2021-01-31 20:44:16
|
||||||
* @LastEditors: yehuozhili
|
* @LastEditors: yehuozhili
|
||||||
* @LastEditTime: 2021-07-18 16:38:07
|
* @LastEditTime: 2021-07-20 16:15:34
|
||||||
* @FilePath: \dooringx\packages\dooringx-lib\README.md
|
* @FilePath: \dooringx\packages\dooringx-lib\README.md
|
||||||
-->
|
-->
|
||||||
|
|
||||||
@@ -10,6 +10,13 @@
|
|||||||
## changelog
|
## changelog
|
||||||
|
|
||||||
|
|
||||||
|
## 0.6.0
|
||||||
|
|
||||||
|
已支持编辑模式使用Iframe!
|
||||||
|
|
||||||
|
修复选中条件。
|
||||||
|
|
||||||
|
|
||||||
## 0.5.1
|
## 0.5.1
|
||||||
|
|
||||||
修复右侧选中不能取消选中问题。
|
修复右侧选中不能取消选中问题。
|
||||||
|
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"version": "0.5.1",
|
"version": "0.6.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"main": "dist/index.js",
|
"main": "dist/index.js",
|
||||||
"module": "dist/dooringx-lib.esm.js",
|
"module": "dist/dooringx-lib.esm.js",
|
||||||
|
@@ -2,7 +2,7 @@
|
|||||||
* @Author: yehuozhili
|
* @Author: yehuozhili
|
||||||
* @Date: 2021-02-21 22:17:29
|
* @Date: 2021-02-21 22:17:29
|
||||||
* @LastEditors: yehuozhili
|
* @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
|
* @FilePath: \dooringx\packages\dooringx-lib\src\components\IframeWrapperMove\event.ts
|
||||||
*/
|
*/
|
||||||
import { RefObject } from 'react';
|
import { RefObject } from 'react';
|
||||||
@@ -35,7 +35,6 @@ export const wrapperRefState: WrapperMoveRef = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const wrapperEvent = (ref: RefObject<HTMLDivElement>, config: UserConfig) => {
|
export const wrapperEvent = (ref: RefObject<HTMLDivElement>, config: UserConfig) => {
|
||||||
const scale = config.getScaleState().value;
|
|
||||||
const store = config.getStore();
|
const store = config.getStore();
|
||||||
return {
|
return {
|
||||||
onMouseDown: (e: React.MouseEvent) => {
|
onMouseDown: (e: React.MouseEvent) => {
|
||||||
@@ -57,8 +56,8 @@ export const wrapperEvent = (ref: RefObject<HTMLDivElement>, config: UserConfig)
|
|||||||
if (wrapperMoveState.isDrag) {
|
if (wrapperMoveState.isDrag) {
|
||||||
const diffX = e.clientX - wrapperMoveState.startX;
|
const diffX = e.clientX - wrapperMoveState.startX;
|
||||||
const diffY = e.clientY - wrapperMoveState.startY;
|
const diffY = e.clientY - wrapperMoveState.startY;
|
||||||
wrapperMoveState.needX = wrapperMoveState.needX + diffX / scale;
|
wrapperMoveState.needX = wrapperMoveState.needX + diffX;
|
||||||
wrapperMoveState.needY = wrapperMoveState.needY + diffY / scale;
|
wrapperMoveState.needY = wrapperMoveState.needY + diffY;
|
||||||
wrapperMoveState.startX = e.clientX;
|
wrapperMoveState.startX = e.clientX;
|
||||||
wrapperMoveState.startY = e.clientY;
|
wrapperMoveState.startY = e.clientY;
|
||||||
|
|
||||||
|
@@ -2,7 +2,7 @@
|
|||||||
* @Author: yehuozhili
|
* @Author: yehuozhili
|
||||||
* @Date: 2021-03-14 04:29:09
|
* @Date: 2021-03-14 04:29:09
|
||||||
* @LastEditors: yehuozhili
|
* @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
|
* @FilePath: \dooringx\packages\dooringx-lib\src\components\IframeWrapperMove\index.tsx
|
||||||
*/
|
*/
|
||||||
import { AllHTMLAttributes, CSSProperties, PropsWithChildren, ReactNode, useRef } from 'react';
|
import { AllHTMLAttributes, CSSProperties, PropsWithChildren, ReactNode, useRef } from 'react';
|
||||||
@@ -11,7 +11,6 @@ import { onWheelEvent } from '../../core/scale';
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Ticker from './ticker';
|
import Ticker from './ticker';
|
||||||
import UserConfig from '../../config';
|
import UserConfig from '../../config';
|
||||||
import { containerResizer } from '../../core/resizeHandler/containerResizer';
|
|
||||||
|
|
||||||
export interface ContainerWrapperProps extends AllHTMLAttributes<HTMLDivElement> {
|
export interface ContainerWrapperProps extends AllHTMLAttributes<HTMLDivElement> {
|
||||||
config: UserConfig;
|
config: UserConfig;
|
||||||
@@ -42,6 +41,7 @@ function ContainerWrapper(props: PropsWithChildren<ContainerWrapperProps>) {
|
|||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
|
userSelect: 'none',
|
||||||
...style,
|
...style,
|
||||||
}}
|
}}
|
||||||
{...wrapperEvent(ref, props.config)}
|
{...wrapperEvent(ref, props.config)}
|
||||||
@@ -51,32 +51,12 @@ function ContainerWrapper(props: PropsWithChildren<ContainerWrapperProps>) {
|
|||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
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,
|
width: state.container.width * scaleState.value,
|
||||||
height: state.container.height * scaleState.value,
|
height: state.container.height * scaleState.value,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{children}
|
{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>
|
</div>
|
||||||
{extra && extra}
|
{extra && extra}
|
||||||
{ticker && <Ticker config={props.config}></Ticker>}
|
{ticker && <Ticker config={props.config}></Ticker>}
|
||||||
|
@@ -11,6 +11,7 @@ interface BlockProps {
|
|||||||
data: IBlockType;
|
data: IBlockType;
|
||||||
context: 'edit' | 'preview';
|
context: 'edit' | 'preview';
|
||||||
config: UserConfig;
|
config: UserConfig;
|
||||||
|
iframe?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -128,6 +129,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
|
|||||||
height: props.data.height,
|
height: props.data.height,
|
||||||
zIndex: props.data.zIndex,
|
zIndex: props.data.zIndex,
|
||||||
display: props.data.display,
|
display: props.data.display,
|
||||||
|
opacity: props.iframe ? 0 : 1,
|
||||||
}}
|
}}
|
||||||
{...innerDragData}
|
{...innerDragData}
|
||||||
onContextMenu={(e) => {
|
onContextMenu={(e) => {
|
||||||
@@ -184,6 +186,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
|
|||||||
state,
|
state,
|
||||||
props.context,
|
props.context,
|
||||||
props.data,
|
props.data,
|
||||||
|
props.iframe,
|
||||||
props.config,
|
props.config,
|
||||||
innerDragData,
|
innerDragData,
|
||||||
animatecss,
|
animatecss,
|
||||||
|
@@ -2,7 +2,7 @@
|
|||||||
* @Author: yehuozhili
|
* @Author: yehuozhili
|
||||||
* @Date: 2021-07-17 10:08:08
|
* @Date: 2021-07-17 10:08:08
|
||||||
* @LastEditors: yehuozhili
|
* @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
|
* @FilePath: \dooringx\packages\dooringx-lib\src\components\iframeContainer.tsx
|
||||||
*/
|
*/
|
||||||
import { containerDragResolve } from '../core/crossDrag';
|
import { containerDragResolve } from '../core/crossDrag';
|
||||||
@@ -19,7 +19,6 @@ import styles from '../index.less';
|
|||||||
import { getRealHeight } from '../core/transfer';
|
import { getRealHeight } from '../core/transfer';
|
||||||
import { WrapperMoveStateProps } from './IframeWrapperMove/event';
|
import { WrapperMoveStateProps } from './IframeWrapperMove/event';
|
||||||
import { onWheelEventIframe } from '../core/scale';
|
import { onWheelEventIframe } from '../core/scale';
|
||||||
import { selectRangeMouseUp } from '../core/selectRange';
|
|
||||||
interface ContainerProps {
|
interface ContainerProps {
|
||||||
context: 'edit' | 'preview';
|
context: 'edit' | 'preview';
|
||||||
config: UserConfig;
|
config: UserConfig;
|
||||||
@@ -78,21 +77,15 @@ function Container(props: PropsWithChildren<ContainerProps>) {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fn = (e: any) => {
|
const fn = (e: any) => {
|
||||||
console.log(e, 'ccccccccccccccc');
|
|
||||||
if (typeof e.data !== 'object') {
|
if (typeof e.data !== 'object') {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (!e.data.store) {
|
if (!e.data.store) {
|
||||||
if (e.data.type === 'event') {
|
// 后续通信待定
|
||||||
if (e.data.column === 'select') {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const data: IframeInnerState = e.data;
|
const data: IframeInnerState = e.data;
|
||||||
console.log(data, 'kkkkkkkkkk', !e.data.store, e.data.store);
|
|
||||||
|
|
||||||
setMessage(data);
|
setMessage(data);
|
||||||
props.config.resetData([data.store]);
|
props.config.resetData([data.store]);
|
||||||
@@ -103,25 +96,18 @@ function Container(props: PropsWithChildren<ContainerProps>) {
|
|||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener('message', fn);
|
window.removeEventListener('message', fn);
|
||||||
};
|
};
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
}, [props.config]);
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{props.context === 'edit' && (
|
{props.context === 'edit' && (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
style={{ display: 'flex' }}
|
style={{
|
||||||
onMouseUp={(e) => {
|
display: 'flex',
|
||||||
selectRangeMouseUp(e, props.config);
|
transform: `scale(${scaleState.value})`,
|
||||||
// props.config.sendParent({
|
transformOrigin: 'left top',
|
||||||
// type: 'event',
|
position: 'absolute',
|
||||||
// column: 'select',
|
|
||||||
// data: null,
|
|
||||||
// });
|
|
||||||
}}
|
|
||||||
onMouseLeave={(e) => {
|
|
||||||
selectRangeMouseUp(e, props.config);
|
|
||||||
}}
|
}}
|
||||||
{...onWheelEventIframe(props.config, scaleState)}
|
{...onWheelEventIframe(props.config, scaleState)}
|
||||||
>
|
>
|
||||||
@@ -129,11 +115,12 @@ function Container(props: PropsWithChildren<ContainerProps>) {
|
|||||||
id="yh-container"
|
id="yh-container"
|
||||||
className={styles.yh_container}
|
className={styles.yh_container}
|
||||||
style={{
|
style={{
|
||||||
height: `${state.container.height * scaleState.value}px`,
|
height: `${state.container.height}px`,
|
||||||
width: `${state.container.width * scaleState.value}px`,
|
width: `${state.container.width}px`,
|
||||||
backgroundColor: bgColor(),
|
backgroundColor: bgColor(),
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
|
|
||||||
...editContainerStyle,
|
...editContainerStyle,
|
||||||
}}
|
}}
|
||||||
{...(props.context === 'edit' ? containerDragResolve(props.config) : null)}
|
{...(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
|
* @Author: yehuozhili
|
||||||
* @Date: 2021-03-14 04:29:09
|
* @Date: 2021-03-14 04:29:09
|
||||||
* @LastEditors: yehuozhili
|
* @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
|
* @FilePath: \dooringx\packages\dooringx-lib\src\components\wrapperMove\index.tsx
|
||||||
*/
|
*/
|
||||||
import { AllHTMLAttributes, CSSProperties, PropsWithChildren, useRef } from 'react';
|
import { AllHTMLAttributes, CSSProperties, PropsWithChildren, useRef } from 'react';
|
||||||
@@ -35,6 +35,7 @@ function ContainerWrapper(props: PropsWithChildren<ContainerWrapperProps>) {
|
|||||||
flex: 1,
|
flex: 1,
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
|
userSelect: 'none',
|
||||||
...style,
|
...style,
|
||||||
}}
|
}}
|
||||||
{...wrapperEvent(ref, props.config)}
|
{...wrapperEvent(ref, props.config)}
|
||||||
|
@@ -2,7 +2,7 @@
|
|||||||
* @Author: yehuozhili
|
* @Author: yehuozhili
|
||||||
* @Date: 2021-03-14 04:29:09
|
* @Date: 2021-03-14 04:29:09
|
||||||
* @LastEditors: yehuozhili
|
* @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
|
* @FilePath: \dooringx\packages\dooringx-lib\src\core\crossDrag\index.ts
|
||||||
*/
|
*/
|
||||||
import { DragEvent, ReactNode } from 'react';
|
import { DragEvent, ReactNode } from 'react';
|
||||||
|
@@ -2,7 +2,7 @@
|
|||||||
* @Author: yehuozhili
|
* @Author: yehuozhili
|
||||||
* @Date: 2021-03-14 04:29:09
|
* @Date: 2021-03-14 04:29:09
|
||||||
* @LastEditors: yehuozhili
|
* @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
|
* @FilePath: \dooringx\packages\dooringx-lib\src\core\focusHandler\index.tsx
|
||||||
*/
|
*/
|
||||||
import { innerDragState } from '../innerDrag/state';
|
import { innerDragState } from '../innerDrag/state';
|
||||||
|
@@ -103,16 +103,13 @@ export const innerContainerDrag = function (config: UserConfig) {
|
|||||||
onMouseMove,
|
onMouseMove,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
export const innerContainerDragUp = function (config: UserConfig, mode = 'normal') {
|
export const innerContainerDragUp = function (config: UserConfig, iframe = false) {
|
||||||
const store = config.getStore();
|
const store = config.getStore();
|
||||||
const onMouseUp = (e: React.MouseEvent) => {
|
const onMouseUp = (e: React.MouseEvent) => {
|
||||||
// e.preventDefault(); 这个会导致无法取消选中
|
// e.preventDefault(); 这个会导致无法取消选中
|
||||||
iframeWrapperMove(config);
|
iframeWrapperMove(config);
|
||||||
wrapperMoveMouseUp(config);
|
wrapperMoveMouseUp(config);
|
||||||
selectRangeMouseUp(e, config);
|
selectRangeMouseUp(e, config, iframe);
|
||||||
if (mode !== 'normal') {
|
|
||||||
console.log('ggogogogogogo');
|
|
||||||
}
|
|
||||||
if (innerDragState.ref && innerDragState.ref.current) {
|
if (innerDragState.ref && innerDragState.ref.current) {
|
||||||
innerDragState.ref.current.style.cursor = 'default';
|
innerDragState.ref.current.style.cursor = 'default';
|
||||||
innerDragState.ref.current.style.willChange = 'auto';
|
innerDragState.ref.current.style.willChange = 'auto';
|
||||||
|
@@ -2,7 +2,7 @@
|
|||||||
* @Author: yehuozhili
|
* @Author: yehuozhili
|
||||||
* @Date: 2021-03-09 15:19:36
|
* @Date: 2021-03-09 15:19:36
|
||||||
* @LastEditors: yehuozhili
|
* @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
|
* @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\containerResizer.ts
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@@ -29,7 +29,7 @@ export const containerResizer = {
|
|||||||
const scaleState = config.getScaleState();
|
const scaleState = config.getScaleState();
|
||||||
const store = config.getStore();
|
const store = config.getStore();
|
||||||
const scale = scaleState.value;
|
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 clonedata: IStoreData = deepCopy(store.getData());
|
||||||
const height = clonedata.container.height;
|
const height = clonedata.container.height;
|
||||||
let tmpHeight =
|
let tmpHeight =
|
||||||
|
@@ -1,5 +1,5 @@
|
|||||||
import { IStoreData } from '../store/storetype';
|
import { IStoreData } from '../store/storetype';
|
||||||
import { deepCopy, postMessage } from '../utils';
|
import { deepCopy } from '../utils';
|
||||||
import style from '../../index.less';
|
import style from '../../index.less';
|
||||||
import UserConfig from '../../config';
|
import UserConfig from '../../config';
|
||||||
export interface SelectDataProps {
|
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.top = e.clientY + 'px';
|
||||||
selectData.selectDiv.style.position = 'fixed';
|
selectData.selectDiv.style.position = 'fixed';
|
||||||
document.body.appendChild(selectData.selectDiv);
|
document.body.appendChild(selectData.selectDiv);
|
||||||
if (iframe) {
|
selectData.selectDiv.onmouseup = (e) => selectRangeMouseUp(e, config, 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);
|
selectData.selectDiv.onmousemove = (e) => selectRangeMouseMove(e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -76,7 +64,7 @@ function selectFocus(left: number, top: number, width: number, height: number, c
|
|||||||
blocks.forEach((v) => {
|
blocks.forEach((v) => {
|
||||||
const l = v.left;
|
const l = v.left;
|
||||||
const t = v.top;
|
const t = v.top;
|
||||||
if (l >= left && l <= maxleft && t >= top && t <= maxtop) {
|
if ((l >= left && l <= maxleft) || (t >= top && t <= maxtop)) {
|
||||||
change = true;
|
change = true;
|
||||||
v.focus = true;
|
v.focus = true;
|
||||||
focusState.blocks.push(v);
|
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) {
|
if (selectData.selectDiv) {
|
||||||
// 这里需要判定区域
|
// 这里需要判定区域
|
||||||
// 如果是react触发 ,left和top就是起始值和终止值的最小值
|
// 如果是react触发 ,left和top就是起始值和终止值的最小值
|
||||||
@@ -106,35 +98,10 @@ export function selectRangeMouseUp(e: React.MouseEvent | MouseEvent, config: Use
|
|||||||
left = selectData.startX - wwidth;
|
left = selectData.startX - wwidth;
|
||||||
top = selectData.startY - wheight;
|
top = selectData.startY - wheight;
|
||||||
}
|
}
|
||||||
selectFocus(left, top, wwidth, wheight, config);
|
if (iframe) {
|
||||||
selectData.selectDiv.parentNode!.removeChild(selectData.selectDiv);
|
left = left / scale;
|
||||||
selectData.selectDiv = null;
|
top = top / scale;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
selectFocus(left, top, wwidth, wheight, config);
|
||||||
selectData.selectDiv.parentNode!.removeChild(selectData.selectDiv);
|
selectData.selectDiv.parentNode!.removeChild(selectData.selectDiv);
|
||||||
selectData.selectDiv = null;
|
selectData.selectDiv = null;
|
||||||
|
@@ -2,14 +2,14 @@
|
|||||||
* @Author: yehuozhili
|
* @Author: yehuozhili
|
||||||
* @Date: 2021-04-21 22:59:57
|
* @Date: 2021-04-21 22:59:57
|
||||||
* @LastEditors: yehuozhili
|
* @LastEditors: yehuozhili
|
||||||
* @LastEditTime: 2021-07-07 19:50:12
|
* @LastEditTime: 2021-07-20 16:19:21
|
||||||
* @FilePath: \DooringV2\packages\dooringx-lib\src\core\transfer\index.ts
|
* @FilePath: \dooringx\packages\dooringx-lib\src\core\transfer\index.ts
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
*
|
*
|
||||||
* @export 这里的转换可能有问题,需要都使用mobileWidth去转换
|
* @export
|
||||||
* @param {number} top
|
* @param {number} top
|
||||||
* @param {number} left
|
* @param {number} left
|
||||||
* @param {(string | number | undefined)} height
|
* @param {(string | number | undefined)} height
|
||||||
|
@@ -2,7 +2,7 @@
|
|||||||
* @Author: yehuozhili
|
* @Author: yehuozhili
|
||||||
* @Date: 2021-03-14 05:35:15
|
* @Date: 2021-03-14 05:35:15
|
||||||
* @LastEditors: yehuozhili
|
* @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
|
* @FilePath: \dooringx\packages\dooringx-lib\src\hooks\index.ts
|
||||||
*/
|
*/
|
||||||
import { useEffect, useMemo, useState } from 'react';
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
@@ -157,7 +157,6 @@ export function useIframeHook(origin: string, config: UserConfig) {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
//@ts-ignore
|
//@ts-ignore
|
||||||
const fn = (e: MessageEvent<any>) => {
|
const fn = (e: MessageEvent<any>) => {
|
||||||
console.log(e, '收到');
|
|
||||||
if (e.data === 'ready') {
|
if (e.data === 'ready') {
|
||||||
setIframeReady(true);
|
setIframeReady(true);
|
||||||
fnx();
|
fnx();
|
||||||
@@ -170,21 +169,12 @@ export function useIframeHook(origin: string, config: UserConfig) {
|
|||||||
config.refreshIframe();
|
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);
|
window.addEventListener('message', fn);
|
||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener('message', fn);
|
window.removeEventListener('message', fn);
|
||||||
window.removeEventListener('mousemove', parentMove);
|
|
||||||
};
|
};
|
||||||
}, [config, fnx]);
|
}, [config, fnx]);
|
||||||
}
|
}
|
||||||
|
@@ -2,7 +2,7 @@
|
|||||||
* @Author: yehuozhili
|
* @Author: yehuozhili
|
||||||
* @Date: 2021-03-14 04:22:18
|
* @Date: 2021-03-14 04:22:18
|
||||||
* @LastEditors: yehuozhili
|
* @LastEditors: yehuozhili
|
||||||
* @LastEditTime: 2021-07-19 21:24:13
|
* @LastEditTime: 2021-07-20 10:44:35
|
||||||
* @FilePath: \dooringx\packages\dooringx-lib\src\index.tsx
|
* @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 IframeContainer } from './components/iframeContainer';
|
||||||
export { default as IframeContainerWrapper } from './components/IframeWrapperMove';
|
export { default as IframeContainerWrapper } from './components/IframeWrapperMove';
|
||||||
export { useIframePostMessage, useIframeHook } from './hooks';
|
export { useIframePostMessage, useIframeHook } from './hooks';
|
||||||
|
export { IframeTarget } from './components/iframeTarget';
|
||||||
|
Reference in New Issue
Block a user