From e18ce0f63555484d6b212a3eddb7fada2329f673 Mon Sep 17 00:00:00 2001 From: hufeixiong <673632758@qq.com> Date: Mon, 12 Jul 2021 21:01:11 +0800 Subject: [PATCH] update 0.3.0 --- packages/dooringx-example/src/pages/index.tsx | 8 +- packages/dooringx-lib/README.md | 7 +- packages/dooringx-lib/package.json | 2 +- .../dooringx-lib/src/components/blocks.tsx | 6 +- .../dooringx-lib/src/components/container.tsx | 15 +- .../src/components/leftConfig.tsx | 10 +- .../src/components/rightConfig.tsx | 10 +- .../src/components/wrapperMove/event.ts | 15 +- .../src/components/wrapperMove/index.tsx | 10 +- .../src/components/wrapperMove/ticker.tsx | 147 ++++++++++++++++++ packages/dooringx-lib/src/config/index.tsx | 7 +- .../src/core/contextMenu/index.tsx | 10 +- .../dooringx-lib/src/core/crossDrag/index.ts | 81 +++++----- .../src/core/focusHandler/index.tsx | 14 +- .../dooringx-lib/src/core/innerDrag/index.ts | 21 ++- .../src/core/markline/calcRender.ts | 17 +- .../src/core/markline/gridMode.ts | 12 +- .../dooringx-lib/src/core/markline/index.tsx | 9 +- .../src/core/markline/resizeMarkline.ts | 11 +- .../core/resizeHandler/containerResizer.ts | 8 +- packages/dooringx-lib/src/core/scale/index.ts | 60 +++---- .../src/core/selectRange/index.ts | 15 +- packages/dooringx-lib/src/hooks/index.ts | 4 +- 23 files changed, 349 insertions(+), 150 deletions(-) create mode 100644 packages/dooringx-lib/src/components/wrapperMove/ticker.tsx diff --git a/packages/dooringx-example/src/pages/index.tsx b/packages/dooringx-example/src/pages/index.tsx index 498ad59..2a812ee 100644 --- a/packages/dooringx-example/src/pages/index.tsx +++ b/packages/dooringx-example/src/pages/index.tsx @@ -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 ( -
+
head
- + <> diff --git a/packages/dooringx-lib/README.md b/packages/dooringx-lib/README.md index 61f1ba0..e71372f 100644 --- a/packages/dooringx-lib/README.md +++ b/packages/dooringx-lib/README.md @@ -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设置 diff --git a/packages/dooringx-lib/package.json b/packages/dooringx-lib/package.json index 5622c68..1754d8d 100644 --- a/packages/dooringx-lib/package.json +++ b/packages/dooringx-lib/package.json @@ -1,5 +1,5 @@ { - "version": "0.2.0", + "version": "0.3.0", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts", diff --git a/packages/dooringx-lib/src/components/blocks.tsx b/packages/dooringx-lib/src/components/blocks.tsx index 6644825..1748c75 100644 --- a/packages/dooringx-lib/src/components/blocks.tsx +++ b/packages/dooringx-lib/src/components/blocks.tsx @@ -61,8 +61,8 @@ function Blocks(props: PropsWithChildren) { const ref = useRef(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) { {...innerDragData} onContextMenu={(e) => { if (props.data.name !== 'modalMask') { - contextMenuEvent(e, ref); + contextMenuEvent(e, ref, props.config); } }} > diff --git a/packages/dooringx-lib/src/components/container.tsx b/packages/dooringx-lib/src/components/container.tsx index 8930430..0f58a8d 100644 --- a/packages/dooringx-lib/src/components/container.tsx +++ b/packages/dooringx-lib/src/components/container.tsx @@ -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) { 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) { 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' && } + {props.context === 'edit' && ( + + )} {props.state.block.map((v) => { return ( @@ -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; } }) diff --git a/packages/dooringx-lib/src/components/rightConfig.tsx b/packages/dooringx-lib/src/components/rightConfig.tsx index 96458e1..52c7b71 100644 --- a/packages/dooringx-lib/src/components/rightConfig.tsx +++ b/packages/dooringx-lib/src/components/rightConfig.tsx @@ -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) { 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) { return () => { unregist(); }; - }, []); + }, [store]); const render = useMemo(() => { return (type: string, current: IBlockType) => { const fn = () => props.config.getComponentRegister().getComp(current.name); diff --git a/packages/dooringx-lib/src/components/wrapperMove/event.ts b/packages/dooringx-lib/src/components/wrapperMove/event.ts index 1e8ddab..bbc57ee 100644 --- a/packages/dooringx-lib/src/components/wrapperMove/event.ts +++ b/packages/dooringx-lib/src/components/wrapperMove/event.ts @@ -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) => { +export const wrapperEvent = (ref: RefObject, 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) => { 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); diff --git a/packages/dooringx-lib/src/components/wrapperMove/index.tsx b/packages/dooringx-lib/src/components/wrapperMove/index.tsx index 0f74bc6..6656788 100644 --- a/packages/dooringx-lib/src/components/wrapperMove/index.tsx +++ b/packages/dooringx-lib/src/components/wrapperMove/index.tsx @@ -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 { + config: UserConfig; classNames?: string; style?: CSSProperties; } @@ -33,11 +36,12 @@ function ContainerWrapper(props: PropsWithChildren) { overflow: 'hidden', ...style, }} - {...wrapperEvent(ref)} - {...onWheelEvent} + {...wrapperEvent(ref, props.config)} + {...onWheelEvent(props.config)} {...rest} > {children} +
); } diff --git a/packages/dooringx-lib/src/components/wrapperMove/ticker.tsx b/packages/dooringx-lib/src/components/wrapperMove/ticker.tsx new file mode 100644 index 0000000..ebb9cde --- /dev/null +++ b/packages/dooringx-lib/src/components/wrapperMove/ticker.tsx @@ -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(null); + const leftRef = useRef(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 ( + <> +
+ {Array(topRender) + .fill(1) + .map((_, i) => { + if (i % 10 === 0) { + return ( +
+
+ {i} +
+
+ ); + } else { + return ( +
+ ); + } + })} +
+
+ {Array(leftRender) + .fill(1) + .map((_, i) => { + if (i % 10 === 0) { + return ( +
+
+ {i} +
+
+ ); + } else { + return ( +
+ ); + } + })} +
+ + ); +} + +export default Ticker; diff --git a/packages/dooringx-lib/src/config/index.tsx b/packages/dooringx-lib/src/config/index.tsx index e770505..bf5aa82 100644 --- a/packages/dooringx-lib/src/config/index.tsx +++ b/packages/dooringx-lib/src/config/index.tsx @@ -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) { 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()); } diff --git a/packages/dooringx-lib/src/core/contextMenu/index.tsx b/packages/dooringx-lib/src/core/contextMenu/index.tsx index 22570a7..0cfb023 100644 --- a/packages/dooringx-lib/src/core/contextMenu/index.tsx +++ b/packages/dooringx-lib/src/core/contextMenu/index.tsx @@ -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, - ref: RefObject + ref: RefObject, + userConfig: UserConfig ) { e.preventDefault(); + const scaleState = userConfig.getScaleState(); contextMenuState.unmountContextMenu(); const config: MutationObserverInit = { attributes: true, diff --git a/packages/dooringx-lib/src/core/crossDrag/index.ts b/packages/dooringx-lib/src/core/crossDrag/index.ts index 619710b..deb70ad 100644 --- a/packages/dooringx-lib/src/core/crossDrag/index.ts +++ b/packages/dooringx-lib/src/core/crossDrag/index.ts @@ -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) => { - e.preventDefault(); - }, - onDrop: (e: DragEvent) => { - 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) => { + e.preventDefault(); + }, + onDrop: (e: DragEvent) => { + 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: () => {}, + }; }; diff --git a/packages/dooringx-lib/src/core/focusHandler/index.tsx b/packages/dooringx-lib/src/core/focusHandler/index.tsx index 84f7b18..e1cf1a0 100644 --- a/packages/dooringx-lib/src/core/focusHandler/index.tsx +++ b/packages/dooringx-lib/src/core/focusHandler/index.tsx @@ -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) => { diff --git a/packages/dooringx-lib/src/core/innerDrag/index.ts b/packages/dooringx-lib/src/core/innerDrag/index.ts index 0697545..eddb349 100644 --- a/packages/dooringx-lib/src/core/innerDrag/index.ts +++ b/packages/dooringx-lib/src/core/innerDrag/index.ts @@ -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) { +export const innerDrag = function ( + item: IBlockType, + ref: RefObject, + 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 { 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(); diff --git a/packages/dooringx-lib/src/core/markline/calcRender.ts b/packages/dooringx-lib/src/core/markline/calcRender.ts index 9645714..b6fc550 100644 --- a/packages/dooringx-lib/src/core/markline/calcRender.ts +++ b/packages/dooringx-lib/src/core/markline/calcRender.ts @@ -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; } diff --git a/packages/dooringx-lib/src/core/markline/gridMode.ts b/packages/dooringx-lib/src/core/markline/gridMode.ts index 5282de9..0f07946 100644 --- a/packages/dooringx-lib/src/core/markline/gridMode.ts +++ b/packages/dooringx-lib/src/core/markline/gridMode.ts @@ -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; diff --git a/packages/dooringx-lib/src/core/markline/index.tsx b/packages/dooringx-lib/src/core/markline/index.tsx index 3c80b14..15c6df1 100644 --- a/packages/dooringx-lib/src/core/markline/index.tsx +++ b/packages/dooringx-lib/src/core/markline/index.tsx @@ -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 ( <> diff --git a/packages/dooringx-lib/src/core/markline/resizeMarkline.ts b/packages/dooringx-lib/src/core/markline/resizeMarkline.ts index d682f12..61b4631 100644 --- a/packages/dooringx-lib/src/core/markline/resizeMarkline.ts +++ b/packages/dooringx-lib/src/core/markline/resizeMarkline.ts @@ -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(); diff --git a/packages/dooringx-lib/src/core/resizeHandler/containerResizer.ts b/packages/dooringx-lib/src/core/resizeHandler/containerResizer.ts index 0d3d865..e4c2c16 100644 --- a/packages/dooringx-lib/src/core/resizeHandler/containerResizer.ts +++ b/packages/dooringx-lib/src/core/resizeHandler/containerResizer.ts @@ -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; diff --git a/packages/dooringx-lib/src/core/scale/index.ts b/packages/dooringx-lib/src/core/scale/index.ts index a4d8a11..fa2cdbb 100644 --- a/packages/dooringx-lib/src/core/scale/index.ts +++ b/packages/dooringx-lib/src/core/scale/index.ts @@ -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) => { - 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) => { + 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; diff --git a/packages/dooringx-lib/src/core/selectRange/index.ts b/packages/dooringx-lib/src/core/selectRange/index.ts index 803f9c3..a01b02e 100644 --- a/packages/dooringx-lib/src/core/selectRange/index.ts +++ b/packages/dooringx-lib/src/core/selectRange/index.ts @@ -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; } diff --git a/packages/dooringx-lib/src/hooks/index.ts b/packages/dooringx-lib/src/hooks/index.ts index 389bdc2..0296c2e 100644 --- a/packages/dooringx-lib/src/hooks/index.ts +++ b/packages/dooringx-lib/src/hooks/index.ts @@ -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; }