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

8
packages/dooringx-example/src/pages/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-05-15 12:49:28
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-10 19:08:25
* @LastEditTime: 2021-07-12 20:19:38
* @FilePath: \dooringx\packages\dooringx-example\src\pages\index.tsx
*/
import {
@@ -33,7 +33,7 @@ export default function IndexPage() {
const [state] = useStoreState(config, subscribeFn, everyFn);
return (
<div {...innerContainerDragUp()}>
<div {...innerContainerDragUp(config)}>
<div style={{ height: HeaderHeight }}>
head
<button
@@ -64,11 +64,11 @@ export default function IndexPage() {
<LeftConfig config={config}></LeftConfig>
</div>
<ContainerWrapper>
<ContainerWrapper config={config}>
<>
<Control
config={config}
style={{ position: 'fixed', bottom: '60px', right: '450px' }}
style={{ position: 'fixed', bottom: '60px', right: '450px', zIndex: 100 }}
></Control>
<Container state={state} config={config} context="edit"></Container>
</>

7
packages/dooringx-lib/README.md
View File

@@ -2,13 +2,18 @@
* @Author: yehuozhili
* @Date: 2021-01-31 20:44:16
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-12 15:22:17
* @LastEditTime: 2021-07-12 21:00:48
* @FilePath: \dooringx\packages\dooringx-lib\README.md
-->
## Dooringx-lib
## changelog
- 0.3.0
1、增加标尺，ContainerWrapper需要传递config才可使用。
2、修改容器最小拖动667。修复画布缩放下拖拽时与鼠标距离不一致。
3、innerContainerDragUp需要传递config。
- 0.2.0 commander的传递进行修改，可以获得config了，commander不再从index中导出 ，需要使用时从config中获取。增加左侧类名，方便自定义。
- 0.1.10 修改eslint依赖推荐
- 0.1.9 增加全局body设置

2
packages/dooringx-lib/package.json
View File

@@ -1,5 +1,5 @@
{
"version": "0.2.0",
"version": "0.3.0",
"license": "MIT",
"main": "dist/index.js",
"typings": "dist/index.d.ts",

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;

7
packages/dooringx-lib/src/config/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-02-25 21:16:58
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-12 14:49:32
* @LastEditTime: 2021-07-12 16:49:46
* @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx
*/
import { IBlockType, IStoreData } from '../core/store/storetype';
@@ -321,6 +321,7 @@ export class UserConfig {
public eventCenter: EventCenter;
public dataCenter: DataCenter;
public scaleState = scaleState;
public collapsed = false;
constructor(initConfig?: Partial<InitConfig>) {
const mergeConfig = userConfigMerge(defaultConfig, initConfig);
this.initConfig = mergeConfig;
@@ -370,6 +371,10 @@ export class UserConfig {
this.toRegist();
}
getCollapse() {
return this.collapsed;
}
getStoreJSON() {
return JSON.stringify(this.store.getData());
}

10
packages/dooringx-lib/src/core/contextMenu/index.tsx
View File

@@ -2,14 +2,14 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-05 22:46:15
* @FilePath: \DooringV2\packages\dooring-v2-lib\src\core\contextMenu\index.tsx
* @LastEditTime: 2021-07-12 20:31:47
* @FilePath: \dooringx\packages\dooringx-lib\src\core\contextMenu\index.tsx
*/
import { Button } from 'antd';
import React, { RefObject, useState } from 'react';
import { ReactElement } from 'react';
import ReactDOM, { unmountComponentAtNode } from 'react-dom';
import { scaleState } from '../scale/state';
import UserConfig from '../../config';
import { isMac } from '../utils';
const ContextMenu = () => {
@@ -68,9 +68,11 @@ export const contextMenuState: ContextMenuStateProps = {
export function contextMenuEvent(
e: React.MouseEvent<HTMLDivElement, MouseEvent>,
ref: RefObject<HTMLDivElement>
ref: RefObject<HTMLDivElement>,
userConfig: UserConfig
) {
e.preventDefault();
const scaleState = userConfig.getScaleState();
contextMenuState.unmountContextMenu();
const config: MutationObserverInit = {
attributes: true,

81
packages/dooringx-lib/src/core/crossDrag/index.ts
View File

@@ -2,15 +2,14 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-10 18:34:40
* @LastEditTime: 2021-07-12 20:11:56
* @FilePath: \dooringx\packages\dooringx-lib\src\core\crossDrag\index.ts
*/
import { store } from '../../runtime/store';
import { componentRegister } from '../../runtime';
import { DragEvent, ReactNode } from 'react';
import { createBlock } from '../components/createBlock';
import { IBlockType } from '../store/storetype';
import { deepCopy } from '../utils';
import UserConfig from '../../config';
/**
*
@@ -43,42 +42,46 @@ export const dragEventResolve = function (item: LeftRegistComponentMapItem) {
};
};
export const containerDragResolve = {
onDragStart: () => {},
onDragOver: (e: DragEvent<HTMLDivElement>) => {
e.preventDefault();
},
onDrop: (e: DragEvent<HTMLDivElement>) => {
const offsetX = e.nativeEvent.offsetX;
const offestY = e.nativeEvent.offsetY;
//drop后修改store，
if (currentDrag) {
// 还需要拿到注册的组件状态
const origin = componentRegister.getComp(currentDrag.component);
if (!origin) {
console.log(currentDrag.component, 'wait the chunk pull compeletely and retry');
return;
}
const target = e.target as HTMLElement;
let newblock: IBlockType;
if (!origin.needPosition) {
newblock = createBlock(
origin.initData.top ?? offestY,
origin.initData.left ?? offsetX,
origin
);
} else {
if (target.id !== 'yh-container') {
newblock = createBlock(offestY + target.offsetTop, offsetX + target.offsetLeft, origin);
} else {
newblock = createBlock(offestY, offsetX, origin);
export const containerDragResolve = (config: UserConfig) => {
const store = config.getStore();
const componentRegister = config.getComponentRegister();
return {
onDragStart: () => {},
onDragOver: (e: DragEvent<HTMLDivElement>) => {
e.preventDefault();
},
onDrop: (e: DragEvent<HTMLDivElement>) => {
const offsetX = e.nativeEvent.offsetX;
const offestY = e.nativeEvent.offsetY;
//drop后修改store，
if (currentDrag) {
// 还需要拿到注册的组件状态
const origin = componentRegister.getComp(currentDrag.component);
if (!origin) {
console.log(currentDrag.component, 'wait the chunk pull compeletely and retry');
return;
}
const target = e.target as HTMLElement;
let newblock: IBlockType;
if (!origin.needPosition) {
newblock = createBlock(
origin.initData.top ?? offestY,
origin.initData.left ?? offsetX,
origin
);
} else {
if (target.id !== 'yh-container') {
newblock = createBlock(offestY + target.offsetTop, offsetX + target.offsetLeft, origin);
} else {
newblock = createBlock(offestY, offsetX, origin);
}
}
const data = deepCopy(store.getData());
data.block.push(newblock);
store.setData({ ...data });
}
const data = deepCopy(store.getData());
data.block.push(newblock);
store.setData({ ...data });
}
currentDrag = null;
},
onDragEnd: () => {},
currentDrag = null;
},
onDragEnd: () => {},
};
};

14
packages/dooringx-lib/src/core/focusHandler/index.tsx
View File

@@ -2,18 +2,19 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-03-14 12:10:16
* @FilePath: \dooring-v2\src\core\focusHandler\index.tsx
* @LastEditTime: 2021-07-12 20:48:04
* @FilePath: \dooringx\packages\dooringx-lib\src\core\focusHandler\index.tsx
*/
import { store } from '../../runtime/store';
import { innerDragState } from '../innerDrag/state';
import { IBlockType } from '../store/storetype';
import { deepCopy } from '../utils';
import { selectRangeMouseDown } from '../selectRange';
import { unmountContextMenu } from '../contextMenu';
import { focusState } from './state';
import UserConfig from '../../config';
export function containerFocusRemove() {
export function containerFocusRemove(config: UserConfig) {
const store = config.getStore();
const onMouseDown = (e: React.MouseEvent) => {
const clonedata = deepCopy(store.getData());
const newBlock = clonedata.block.map((v: IBlockType) => {
@@ -23,7 +24,7 @@ export function containerFocusRemove() {
focusState.blocks = [];
store.setData({ ...clonedata, block: newBlock });
if (!innerDragState.item) {
selectRangeMouseDown(e);
selectRangeMouseDown(e, config);
}
unmountContextMenu();
};
@@ -32,7 +33,8 @@ export function containerFocusRemove() {
};
}
export function blockFocus(e: React.MouseEvent, item: IBlockType) {
export function blockFocus(e: React.MouseEvent, item: IBlockType, config: UserConfig) {
const store = config.getStore();
const clonedata = deepCopy(store.getData());
if (e.shiftKey) {
const newBlock = clonedata.block.map((v: IBlockType) => {

21
packages/dooringx-lib/src/core/innerDrag/index.ts
View File

@@ -1,26 +1,30 @@
import { store } from '../../runtime/store';
import { RefObject } from 'react';
import { blockFocus, containerFocusRemove } from '../focusHandler';
import { marklineConfig } from '../markline/marklineConfig';
import { resizerMouseMove, resizerMouseUp } from '../resizeHandler';
import { scaleState } from '../scale/state';
import { selectRangeMouseMove, selectData, selectRangeMouseUp } from '../selectRange';
import { IBlockType } from '../store/storetype';
import { deepCopy, isMac } from '../utils';
import { wrapperMoveMouseUp } from '../../components/wrapperMove/event';
import { contextMenuState } from '../contextMenu';
import { innerDragState } from './state';
import UserConfig from '../../config';
export const innerDrag = function (item: IBlockType, ref: RefObject<HTMLDivElement>) {
export const innerDrag = function (
item: IBlockType,
ref: RefObject<HTMLDivElement>,
config: UserConfig
) {
const store = config.getStore();
return {
onMouseDown: (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
if (!item.canDrag) {
containerFocusRemove().onMouseDown(e);
containerFocusRemove(config).onMouseDown(e);
return;
}
blockFocus(e, item);
blockFocus(e, item, config);
if (item.id && innerDragState.lastClick && item.id !== innerDragState.lastClick.id) {
contextMenuState.unmountContextMenu();
}
@@ -43,8 +47,10 @@ export const innerDrag = function (item: IBlockType, ref: RefObject<HTMLDivEleme
};
};
export const innerContainerDrag = function () {
export const innerContainerDrag = function (config: UserConfig) {
let lastblock: null | IBlockType;
const store = config.getStore();
const scaleState = config.getScaleState();
const onMouseMove = (e: React.MouseEvent) => {
e.preventDefault();
if (isMac() && contextMenuState.state) {
@@ -96,7 +102,8 @@ export const innerContainerDrag = function () {
onMouseMove,
};
};
export const innerContainerDragUp = function () {
export const innerContainerDragUp = function (config: UserConfig) {
const store = config.getStore();
const onMouseUp = (e: React.MouseEvent) => {
e.preventDefault();
wrapperMoveMouseUp();

17
packages/dooringx-lib/src/core/markline/calcRender.ts
View File

@@ -2,22 +2,23 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-03-14 11:49:50
* @FilePath: \dooring-v2\src\core\markline\calcRender.ts
* @LastEditTime: 2021-07-12 20:56:02
* @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\calcRender.ts
*/
import { store } from '../../runtime/store';
import { innerDragState } from '../innerDrag/state';
import { scaleState } from '../scale/state';
import { grideModeRender, gridModeDisplay } from './gridMode';
import { switchMarklineDisplay } from './normalMode';
import { resizeCurrentCalculate } from './resizeMarkline';
import { marklineConfig } from './marklineConfig';
import UserConfig from '../../config';
export interface LinesTypes {
x: number[];
y: number[];
}
export function marklineCalRender() {
export function marklineCalRender(config: UserConfig) {
const store = config.getStore();
const scaleState = config.getScaleState();
//focus可能好几个，做对比的是拖拽那个
const lines: LinesTypes = { x: [], y: [] };
if (innerDragState.item?.position === 'static' || innerDragState.item?.position === 'relative') {
@@ -65,15 +66,15 @@ export function marklineCalRender() {
}
});
if (marklineConfig.mode === 'grid' && marklineConfig.isAbsorb) {
gridModeDisplay(left, top, focus);
gridModeDisplay(left, top, focus, config);
}
}
if (marklineConfig.mode === 'grid') {
grideModeRender(lines);
grideModeRender(lines, config);
}
resizeCurrentCalculate(lines);
resizeCurrentCalculate(lines, config);
return lines;
}

12
packages/dooringx-lib/src/core/markline/gridMode.ts
View File

@@ -2,17 +2,18 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-03-14 11:49:43
* @FilePath: \dooring-v2\src\core\markline\gridMode.ts
* @LastEditTime: 2021-07-12 20:56:19
* @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\gridMode.ts
*/
import { store } from '../../runtime/store';
import UserConfig from '../../config';
import { IBlockType } from '../store/storetype';
import { deepCopy } from '../utils';
import { LinesTypes } from './calcRender';
import { marklineConfig } from './marklineConfig';
export function gridModeDisplay(left: number, top: number, focus: IBlockType) {
export function gridModeDisplay(left: number, top: number, focus: IBlockType, config: UserConfig) {
// 有吸附走吸附，只吸top和left，宽高不需要
// 无吸附拖拽时显示所有网格。
const store = config.getStore();
const container = store.getData().container;
const containerWidth = container.width;
const containerHeight = container.height;
@@ -55,7 +56,8 @@ export const lastGridStatus: lastGridStatusProps = {
lastLine: { x: [], y: [] },
};
export function grideModeRender(lines: LinesTypes) {
export function grideModeRender(lines: LinesTypes, config: UserConfig) {
const store = config.getStore();
const container = store.getData().container;
const containerWidth = container.width;
const containerHeight = container.height;

9
packages/dooringx-lib/src/core/markline/index.tsx
View File

@@ -2,11 +2,12 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-03-14 11:45:22
* @FilePath: \dooring-v2\src\core\markline\index.tsx
* @LastEditTime: 2021-07-12 20:59:27
* @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\index.tsx
*/
import React from 'react';
import { useMemo } from 'react';
import UserConfig from '../../config';
import { IBlockType } from '../store/storetype';
import { marklineCalRender } from './calcRender';
@@ -62,8 +63,8 @@ export function MarklineY(props: any) {
);
}
export function NormalMarkLineRender() {
const lines = marklineCalRender();
export function NormalMarkLineRender(props: { config: UserConfig }) {
const lines = marklineCalRender(props.config);
const render = useMemo(() => {
return (
<>

11
packages/dooringx-lib/src/core/markline/resizeMarkline.ts
View File

@@ -2,21 +2,22 @@
* @Author: yehuozhili
* @Date: 2021-02-18 11:52:38
* @LastEditors: yehuozhili
* @LastEditTime: 2021-03-14 11:49:58
* @FilePath: \dooring-v2\src\core\markline\resizeMarkline.ts
* @LastEditTime: 2021-07-12 20:54:50
* @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\resizeMarkline.ts
*/
import { store } from '../../runtime/store';
import { resizeState } from '../resizeHandler';
import { scaleState } from '../scale/state';
import { LinesTypes } from './calcRender';
import { switchMarklineResizeDisplay } from './normalMode';
import { marklineConfig } from './marklineConfig';
import UserConfig from '../../config';
export function resizeCurrentCalculate(lines: LinesTypes) {
export function resizeCurrentCalculate(lines: LinesTypes, config: UserConfig) {
const id = resizeState.item?.id;
if (resizeState.ref?.current && id) {
const store = config.getStore();
const scaleState = config.getScaleState();
const newblock = store.getData().block;
const unfocus = newblock.filter((v) => v.id !== id);
const { width, height } = resizeState.ref.current.getBoundingClientRect();

8
packages/dooringx-lib/src/core/resizeHandler/containerResizer.ts
View File

@@ -2,8 +2,8 @@
* @Author: yehuozhili
* @Date: 2021-03-09 15:19:36
* @LastEditors: yehuozhili
* @LastEditTime: 2021-03-14 04:52:57
* @FilePath: \dooring-v2\src\core\resizeHandler\containerResizer.ts
* @LastEditTime: 2021-07-12 19:25:09
* @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\containerResizer.ts
*/
import { store } from '../../runtime/store';
@@ -15,6 +15,7 @@ export const containerState = {
isDrag: false,
startY: 0,
startIndex: 0,
minHeight: 667,
};
export const containerResizer = {
@@ -29,7 +30,8 @@ export const containerResizer = {
const diff = ((e.clientY - containerState.startY) / scale) * 2;
const clonedata: IStoreData = deepCopy(store.getData());
const height = clonedata.container.height;
let tmpHeight = height + diff < 600 ? 600 : height + diff;
let tmpHeight =
height + diff < containerState.minHeight ? containerState.minHeight : height + diff;
clonedata.container.height = tmpHeight;
store.setData(clonedata);
containerState.startY = e.clientY;

60
packages/dooringx-lib/src/core/scale/index.ts
View File

@@ -2,40 +2,44 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-04-05 22:18:43
* @FilePath: \dooringv2\src\core\scale\index.ts
* @LastEditTime: 2021-07-12 20:04:17
* @FilePath: \dooringx\packages\dooringx-lib\src\core\scale\index.ts
*/
import { store } from '../../runtime/store';
import Store from '../store';
import UserConfig from '../../config';
import { scaleCancelFn } from './cancel';
import { scaleState } from './state';
export const onWheelEvent = {
onWheel: (e: React.WheelEvent<HTMLDivElement>) => {
const dom = document.querySelector('.ant-modal-mask');
if (dom) {
//出现弹窗禁止滚动
return;
}
if (e.deltaY > 0) {
scaleCancelFn();
if (scaleState.value < scaleState.maxValue) {
scaleState.value = scaleState.value + 0.1;
store.forceUpdate();
export const onWheelEvent = (config: UserConfig) => {
const store = config.getStore();
const scale = config.getScaleState();
return {
onWheel: (e: React.WheelEvent<HTMLDivElement>) => {
const dom = document.querySelector('.ant-modal-mask');
if (dom) {
//出现弹窗禁止滚动
return;
}
} else {
scaleCancelFn();
//往上滚缩小
if (scaleState.value > scaleState.minValue) {
scaleState.value = scaleState.value - 0.1;
store.forceUpdate();
if (e.deltaY > 0) {
scaleCancelFn();
if (scale.value < scale.maxValue) {
scale.value = scale.value + 0.1;
store.forceUpdate();
}
} else {
scaleCancelFn();
//往上滚缩小
if (scale.value > scale.minValue) {
scale.value = scale.value - 0.1;
store.forceUpdate();
}
}
}
},
},
};
};
export const scaleFn = {
increase(number: number = 0.1, store: Store) {
increase(number: number = 0.1, config: UserConfig) {
const store = config.getStore();
const scaleState = config.getScaleState();
if (scaleState.value < scaleState.maxValue) {
scaleCancelFn();
scaleState.value = scaleState.value + number;
@@ -43,7 +47,9 @@ export const scaleFn = {
}
return scaleState.value;
},
decrease(number: number = 0.1, store: Store) {
decrease(number: number = 0.1, config: UserConfig) {
const store = config.getStore();
const scaleState = config.getScaleState();
scaleCancelFn();
if (scaleState.value > scaleState.minValue) {
scaleState.value = scaleState.value - number;

15
packages/dooringx-lib/src/core/selectRange/index.ts
View File

@@ -1,9 +1,8 @@
import { store } from '../../runtime/store';
import { IStoreData } from '../store/storetype';
import { deepCopy } from '../utils';
import { focusState } from '../focusHandler/state';
import { scaleState } from '../scale/state';
import style from '../../index.less';
import UserConfig from '../../config';
export interface SelectDataProps {
selectDiv: HTMLDivElement | null;
posx: number;
@@ -20,7 +19,7 @@ export const selectData: SelectDataProps = {
startY: 0,
};
export function selectRangeMouseDown(e: React.MouseEvent) {
export function selectRangeMouseDown(e: React.MouseEvent, config: UserConfig) {
if (!selectData.selectDiv) {
selectData.selectDiv = document.createElement('div');
}
@@ -34,7 +33,7 @@ export function selectRangeMouseDown(e: React.MouseEvent) {
selectData.selectDiv.style.top = e.clientY + 'px';
selectData.selectDiv.style.position = 'fixed';
document.body.appendChild(selectData.selectDiv);
selectData.selectDiv.onmouseup = (e) => selectRangeMouseUp(e);
selectData.selectDiv.onmouseup = (e) => selectRangeMouseUp(e, config);
selectData.selectDiv.onmousemove = (e) => selectRangeMouseMove(e);
}
}
@@ -52,10 +51,11 @@ function typeGuard(e: React.MouseEvent | MouseEvent): e is React.MouseEvent {
return !(e instanceof Event);
}
function selectFocus(left: number, top: number, width: number, height: number) {
function selectFocus(left: number, top: number, width: number, height: number, config: UserConfig) {
if (width === 0 || height === 0) {
return;
}
const store = config.getStore();
const clonedata: IStoreData = deepCopy(store.getData());
const blocks = clonedata.block;
let change = false;
@@ -75,13 +75,14 @@ function selectFocus(left: number, top: number, width: number, height: number) {
}
}
export function selectRangeMouseUp(e: React.MouseEvent | MouseEvent) {
export function selectRangeMouseUp(e: React.MouseEvent | MouseEvent, config: UserConfig) {
if (selectData.selectDiv) {
// 这里需要判定区域
// 如果是react触发 ，left和top就是起始值和终止值的最小值
// 如果是原生触发，left和top是起始点减去其宽高
let left = 0;
let top = 0;
const scaleState = config.getScaleState();
const { width, height } = selectData.selectDiv.getBoundingClientRect();
const scale = scaleState.value;
const wwidth = width / scale;
@@ -93,7 +94,7 @@ export function selectRangeMouseUp(e: React.MouseEvent | MouseEvent) {
left = selectData.startX - wwidth;
top = selectData.startY - wheight;
}
selectFocus(left, top, wwidth, wheight);
selectFocus(left, top, wwidth, wheight, config);
selectData.selectDiv.parentNode!.removeChild(selectData.selectDiv);
selectData.selectDiv = null;
}

4
packages/dooringx-lib/src/hooks/index.ts
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-03-14 05:35:15
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-12 14:48:38
* @LastEditTime: 2021-07-12 15:52:06
* @FilePath: \dooringx\packages\dooringx-lib\src\hooks\index.ts
*/
import { useEffect, useMemo, useState } from 'react';
@@ -94,6 +94,6 @@ export function useDynamicAddEventCenter(
eventCenter.manualUpdateMap(eventName, displayName);
}
}
}, [eventCenter, props.data.eventMap, props.data.id, props.store]);
}, [displayName, eventCenter, eventName, props.data.eventMap, props.data.id, props.store]);
return;
}