guoshujing/dooring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update 0.6.0

Browse Source
This commit is contained in:
hufeixiong
2021-07-20 16:33:23 +08:00
parent 44429607d2
commit 79de48da66
19 changed files with 177 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/dooringx-lib/src/components/IframeWrapperMove/event.ts
View File

@@ -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;

26
packages/dooringx-lib/src/components/IframeWrapperMove/index.tsx
View File

@@ -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>}

3
packages/dooringx-lib/src/components/blocks.tsx
View File

@@ -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,

35
packages/dooringx-lib/src/components/iframeContainer.tsx
View File

@@ -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
View 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>
);
}

3
packages/dooringx-lib/src/components/wrapperMove/index.tsx
View File

@@ -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)}