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

update 0.3.0

Browse Source
This commit is contained in:
hufeixiong
2021-07-12 21:01:11 +08:00
parent 740d3661d2
commit e18ce0f635
23 changed files with 349 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -61,8 +61,8 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
const ref = useRef<HTMLDivElement>(null);
const innerDragData = useMemo(() => {
return { ...innerDrag(props.data, ref) };
}, [props.data]);
return { ...innerDrag(props.data, ref, props.config) };
}, [props.data, props.config]);
useEffect(() => {
const fn = () => {
@@ -133,7 +133,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
{...innerDragData}
onContextMenu={(e) => {
if (props.data.name !== 'modalMask') {
contextMenuEvent(e, ref);
contextMenuEvent(e, ref, props.config);
}
}}
>

15
packages/dooringx-lib/src/components/container.tsx
View File

@@ -2,7 +2,6 @@ import { containerDragResolve } from '../core/crossDrag';
import { containerFocusRemove } from '../core/focusHandler';
import { innerContainerDrag } from '../core/innerDrag';
import { NormalMarkLineRender } from '../core/markline';
import { scaleState } from '../core/scale/state';
import { IStoreData } from '../core/store/storetype';
import { wrapperMoveState } from './wrapperMove/event';
import { CSSProperties, PropsWithChildren, useMemo } from 'react';
@@ -22,14 +21,14 @@ interface ContainerProps {
}
function Container(props: PropsWithChildren<ContainerProps>) {
const { editContainerStyle, previewContainerStyle } = props;
const scaleState = props.config.getScaleState();
const transform = useMemo(() => {
if (props.context === 'edit') {
return `scale(${scaleState.value}) translate(${wrapperMoveState.needX}px, ${wrapperMoveState.needY}px)`;
} else {
return undefined;
}
}, [props.context]);
}, [props.context, scaleState]);
const bgColor = () => {
const isEdit = props.config.getStoreChanger().isEdit();
@@ -63,11 +62,13 @@ function Container(props: PropsWithChildren<ContainerProps>) {
overflow: 'hidden',
...editContainerStyle,
}}
{...(props.context === 'edit' ? containerDragResolve : null)}
{...(props.context === 'edit' ? innerContainerDrag() : null)}
{...(props.context === 'edit' ? containerFocusRemove() : null)}
{...(props.context === 'edit' ? containerDragResolve(props.config) : null)}
{...(props.context === 'edit' ? innerContainerDrag(props.config) : null)}
{...(props.context === 'edit' ? containerFocusRemove(props.config) : null)}
>
{props.context === 'edit' && <NormalMarkLineRender></NormalMarkLineRender>}
{props.context === 'edit' && (
<NormalMarkLineRender config={props.config}></NormalMarkLineRender>
)}
{props.state.block.map((v) => {
return (
<Blocks

10
packages/dooringx-lib/src/components/leftConfig.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-02-04 10:32:45
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-12 15:21:27
* @LastEditTime: 2021-07-12 17:12:35
* @FilePath: \dooringx\packages\dooringx-lib\src\components\leftConfig.tsx
*/
import React, { ReactNode, useEffect, useMemo, useState } from 'react';
@@ -144,8 +144,8 @@ function LeftConfig(props: LeftConfigProps) {
}
}, [menuSelect, props.config, leftMapRenderListCategory, search]);
const [isCollapse, setCollapse] = useState(false);
const [renderCollapse, setRenderCollaspe] = useState(false);
const [isCollapse, setCollapse] = useState(props.config.getCollapse());
const [renderCollapse, setRenderCollaspe] = useState(props.config.getCollapse());
return (
<div style={{ display: 'flex', height: '100%' }}>
@@ -164,11 +164,15 @@ function LeftConfig(props: LeftConfigProps) {
setCollapse((pre) => {
if (pre) {
setTimeout(() => {
props.config.collapsed = false;
setRenderCollaspe(false);
props.config.getStore().forceUpdate();
}, 300);
return !pre;
} else {
props.config.collapsed = true;
setRenderCollaspe(true);
props.config.getStore().forceUpdate();
return !pre;
}
})

10
packages/dooringx-lib/src/components/rightConfig.tsx
View File

@@ -2,12 +2,11 @@
* @Author: yehuozhili
* @Date: 2021-03-14 05:42:13
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-10 16:06:33
* @FilePath: \DooringV2\packages\dooringx-lib\src\components\rightConfig.tsx
* @LastEditTime: 2021-07-12 20:36:30
* @FilePath: \dooringx\packages\dooringx-lib\src\components\rightConfig.tsx
*/
import { CreateOptionsRes } from '../core/components/formTypes';
import { IBlockType, IStoreData } from '../core/store/storetype';
import { store } from '../runtime/store';
import { PropsWithChildren, useEffect, useMemo, useState } from 'react';
import React from 'react';
import { Tabs, Input, Row, Col, Checkbox } from 'antd';
@@ -33,6 +32,9 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
const rightMapRenderListCategory = useMemo(() => {
return props.config.getConfig().rightRenderListCategory;
}, [props.config]);
const store = props.config.getStore();
useEffect(() => {
const fn = () => {
let item: IBlockType | undefined;
@@ -52,7 +54,7 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
return () => {
unregist();
};
}, []);
}, [store]);
const render = useMemo(() => {
return (type: string, current: IBlockType) => {
const fn = () => props.config.getComponentRegister().getComp(current.name);

15
packages/dooringx-lib/src/components/wrapperMove/event.ts
View File

@@ -2,13 +2,13 @@
* @Author: yehuozhili
* @Date: 2021-02-21 22:17:29
* @LastEditors: yehuozhili
* @LastEditTime: 2021-04-05 18:24:27
* @FilePath: \dooringv2\src\components\wrapperMove\event.ts
* @LastEditTime: 2021-07-12 20:33:14
* @FilePath: \dooringx\packages\dooringx-lib\src\components\wrapperMove\event.ts
*/
import { store } from '../../runtime/store';
import { RefObject } from 'react';
import { containerResizer } from '../../core/resizeHandler/containerResizer';
import { contextMenuState } from '../../core/contextMenu';
import UserConfig from '../../config';
export interface WrapperMoveStateProps {
isDrag: boolean;
@@ -28,7 +28,9 @@ export const wrapperMoveState: WrapperMoveStateProps = {
ref: null,
};
export const wrapperEvent = (ref: RefObject<HTMLDivElement>) => {
export const wrapperEvent = (ref: RefObject<HTMLDivElement>, config: UserConfig) => {
const scale = config.getScaleState().value;
const store = config.getStore();
return {
onMouseDown: (e: React.MouseEvent) => {
// e.preventDefault();// 不能使用preventDefault 否则弹窗输入框焦点无法触发
@@ -49,10 +51,11 @@ export const wrapperEvent = (ref: RefObject<HTMLDivElement>) => {
if (wrapperMoveState.isDrag) {
const diffX = e.clientX - wrapperMoveState.startX;
const diffY = e.clientY - wrapperMoveState.startY;
wrapperMoveState.needX = wrapperMoveState.needX + diffX;
wrapperMoveState.needY = wrapperMoveState.needY + diffY;
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);

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

@@ -2,15 +2,18 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-12 15:24:29
* @LastEditTime: 2021-07-12 19:47:39
* @FilePath: \dooringx\packages\dooringx-lib\src\components\wrapperMove\index.tsx
*/
import { AllHTMLAttributes, CSSProperties, PropsWithChildren, useRef } from 'react';
import { wrapperEvent } from './event';
import { onWheelEvent } from '../../core/scale';
import React from 'react';
import Ticker from './ticker';
import UserConfig from '../../config';
export interface ContainerWrapperProps extends AllHTMLAttributes<HTMLDivElement> {
config: UserConfig;
classNames?: string;
style?: CSSProperties;
}
@@ -33,11 +36,12 @@ function ContainerWrapper(props: PropsWithChildren<ContainerWrapperProps>) {
overflow: 'hidden',
...style,
}}
{...wrapperEvent(ref)}
{...onWheelEvent}
{...wrapperEvent(ref, props.config)}
{...onWheelEvent(props.config)}
{...rest}
>
{children}
<Ticker config={props.config}></Ticker>
</div>
);
}

147
packages/dooringx-lib/src/components/wrapperMove/ticker.tsx Normal file
View File

@@ -0,0 +1,147 @@
/*
* @Author: yehuozhili
* @Date: 2021-07-12 15:54:35
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-12 19:21:35
* @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<HTMLDivElement>(null);
const leftRef = useRef<HTMLDivElement>(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 (
<>
<div
ref={topRef}
style={{
position: 'absolute',
top: 0,
left: indent,
width: '100%',
height: width,
display: 'flex',
justifyContent: 'space-between',
}}
>
{Array(topRender)
.fill(1)
.map((_, i) => {
if (i % 10 === 0) {
return (
<div
key={i}
style={{
background: 'rgb(204, 204, 204)',
width: '1px',
height: '12px',
position: 'relative',
}}
>
<div
style={{
position: 'absolute',
top: '20px',
fontSize: '10px',
left: '-2px',
userSelect: 'none',
}}
>
{i}
</div>
</div>
);
} else {
return (
<div
key={i}
style={{ background: 'rgb(204, 204, 204)', width: '1px', height: '6px' }}
></div>
);
}
})}
</div>
<div
ref={leftRef}
style={{
position: 'absolute',
top: indent,
left: 0,
width: width,
height: '100%',
display: 'flex',
justifyContent: 'space-between',
flexDirection: 'column',
}}
>
{Array(leftRender)
.fill(1)
.map((_, i) => {
if (i % 10 === 0) {
return (
<div
key={i}
style={{
background: 'rgb(204, 204, 204)',
width: '12px',
height: '1px',
position: 'relative',
}}
>
<div
style={{
position: 'absolute',
left: '20px',
fontSize: '10px',
top: '-2px',
userSelect: 'none',
}}
>
{i}
</div>
</div>
);
} else {
return (
<div
key={i}
style={{ background: 'rgb(204, 204, 204)', width: '6px', height: '1px' }}
></div>
);
}
})}
</div>
</>
);
}
export default Ticker;