remove runtime

This commit is contained in:
hufeixiong
2021-07-13 15:15:19 +08:00
parent a687b1b42c
commit 4367633ec2
19 changed files with 158 additions and 111 deletions

View File

@@ -3,6 +3,9 @@ title: CHANGELOG
order: 1 order: 1
--- ---
## 0.4.0
去除runtime导出所有属性从config中获取。
## 0.3.1 ## 0.3.1

View File

@@ -2,11 +2,10 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-07-07 14:32:55 * @Date: 2021-07-07 14:32:55
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-07-07 14:33:06 * @LastEditTime: 2021-07-13 15:07:08
* @FilePath: \visual-editor\src\plugin\formComponents\input.tsx * @FilePath: \dooringx\packages\dooringx-example\src\plugin\formComponents\input.tsx
*/ */
import { deepCopy } from 'dooringx-lib'; import { deepCopy, UserConfig } from 'dooringx-lib';
import { store } from 'dooringx-lib';
import { Col, Input, Row } from 'antd'; import { Col, Input, Row } from 'antd';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import React from 'react'; import React from 'react';
@@ -17,12 +16,14 @@ import { IBlockType } from 'dooringx-lib/dist/core/store/storetype';
interface MInputProps { interface MInputProps {
data: CreateOptionsRes<FormMap, 'input'>; data: CreateOptionsRes<FormMap, 'input'>;
current: IBlockType; current: IBlockType;
config: UserConfig;
} }
function MInput(props: MInputProps) { function MInput(props: MInputProps) {
const option = useMemo(() => { const option = useMemo(() => {
return props.data?.option || {}; return props.data?.option || {};
}, [props.data]); }, [props.data]);
const store = props.config.getStore();
return ( return (
<Row style={{ padding: '10px 20px' }}> <Row style={{ padding: '10px 20px' }}>
<Col span={6} style={{ lineHeight: '30px' }}> <Col span={6} style={{ lineHeight: '30px' }}>

View File

@@ -2,31 +2,61 @@
* @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-13 11:10:00 * @LastEditTime: 2021-07-13 15:14:42
* @FilePath: \dooringx\packages\dooringx-lib\README.md * @FilePath: \dooringx\packages\dooringx-lib\README.md
--> -->
## Dooringx-lib ## Dooringx-lib
## changelog ## changelog
- 0.3.1
## 0.4.0
去除runtime导出所有属性从config中获取。
## 0.3.1
1、由uuid更换为nanoid。 1、由uuid更换为nanoid。
2、control组件增加标尺控制。 2、control组件增加标尺控制。
- 0.3.0 ## 0.3.0
1、增加标尺ContainerWrapper需要传递config才可使用。 1、增加标尺ContainerWrapper需要传递config才可使用。
2、修改容器最小拖动667。修复画布缩放下拖拽时与鼠标距离不一致。 2、修改容器最小拖动667。修复画布缩放下拖拽时与鼠标距离不一致。
3、innerContainerDragUp需要传递config。 3、innerContainerDragUp需要传递config。
- 0.2.0 commander的传递进行修改可以获得config了commander不再从index中导出 需要使用时从config中获取。增加左侧类名方便自定义。 ## 0.2.0
- 0.1.10 修改eslint依赖推荐
- 0.1.9 增加全局body设置
- 0.1.8 增加弹窗设置移除modalContainer
- 0.1.7 修改预览特殊条件显示删除console
- 0.1.6 调整初始缩放,画布初始比例,增加回正画布功能。
- 0.1.5 删除未作按钮增加fixed配置
- 0.1.4 基础功能
commander的传递进行修改可以获得config了commander不再从index中导出 需要使用时从config中获取。增加左侧类名方便自定义。
## 0.1.10
修改eslint依赖推荐
## 0.1.9
增加全局body设置
## 0.1.8
增加弹窗设置移除modalContainer
## 0.1.7
修改预览特殊条件显示删除console
## 0.1.6
调整初始缩放,画布初始比例,增加回正画布功能。
## 0.1.5
删除未作按钮增加fixed配置
## 0.1.4
基础功能
## todo ## todo

View File

@@ -1,7 +1,9 @@
{ {
"version": "0.3.1", "version": "0.4.0",
"license": "MIT", "license": "MIT",
"main": "dist/index.js", "main": "dist/index.js",
"module": "dist/dooringx-lib.esm.js",
"browser": "dist/dooringx-lib.esm.js",
"typings": "dist/index.d.ts", "typings": "dist/index.d.ts",
"files": [ "files": [
"dist" "dist"

View File

@@ -159,7 +159,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
{props.data.position === 'static' && props.data.display === 'inline' && ( {props.data.position === 'static' && props.data.display === 'inline' && (
<span style={{ pointerEvents: 'none' }}>{state}</span> <span style={{ pointerEvents: 'none' }}>{state}</span>
)} )}
<BlockResizer data={props.data} rect={ref}></BlockResizer> <BlockResizer data={props.data} config={props.config} rect={ref}></BlockResizer>
</div> </div>
); );
} else { } else {

View File

@@ -92,14 +92,9 @@ function Container(props: PropsWithChildren<ContainerProps>) {
> >
<IconFont <IconFont
type="icon-suofang" type="icon-suofang"
onMouseDown={containerResizer.onMousedown} onMouseDown={(e) => containerResizer.onMousedown(e, props.config)}
style={{ fontSize: '20px', cursor: 's-resize' }} style={{ fontSize: '20px', cursor: 's-resize' }}
></IconFont> ></IconFont>
{/* <BoxPlotFilled
onMouseDown={containerResizer.onMousedown}
style={{ fontSize: '20px', cursor: 's-resize' }}
rotate={90}
/> */}
</div> </div>
</div> </div>
</> </>

View File

@@ -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-12 20:33:14 * @LastEditTime: 2021-07-13 14:29:36
* @FilePath: \dooringx\packages\dooringx-lib\src\components\wrapperMove\event.ts * @FilePath: \dooringx\packages\dooringx-lib\src\components\wrapperMove\event.ts
*/ */
import { RefObject } from 'react'; import { RefObject } from 'react';
@@ -58,14 +58,14 @@ export const wrapperEvent = (ref: RefObject<HTMLDivElement>, config: UserConfig)
store.forceUpdate(); store.forceUpdate();
} }
containerResizer.onMouseMove(e); containerResizer.onMouseMove(e, config);
}, },
}; };
}; };
export const wrapperMoveMouseUp = () => { export const wrapperMoveMouseUp = (config: UserConfig) => {
if (wrapperMoveState.ref && wrapperMoveState.ref.current) { if (wrapperMoveState.ref && wrapperMoveState.ref.current) {
wrapperMoveState.ref.current.style.cursor = 'default'; wrapperMoveState.ref.current.style.cursor = 'default';
} }
containerResizer.onMouseUp(); containerResizer.onMouseUp(config);
wrapperMoveState.isDrag = false; wrapperMoveState.isDrag = false;
}; };

View File

@@ -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 10:49:33 * @LastEditTime: 2021-07-13 14:34:00
* @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';
@@ -19,7 +19,7 @@ export interface ContainerWrapperProps extends AllHTMLAttributes<HTMLDivElement>
} }
function ContainerWrapper(props: PropsWithChildren<ContainerWrapperProps>) { function ContainerWrapper(props: PropsWithChildren<ContainerWrapperProps>) {
const { children, style, classNames, ...rest } = props; const { children, style, classNames, config, ...rest } = props;
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const ticker = props.config.ticker; const ticker = props.config.ticker;
return ( return (

View File

@@ -2,18 +2,19 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-02-25 21:16:58 * @Date: 2021-02-25 21:16:58
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-07-13 10:48:14 * @LastEditTime: 2021-07-13 14:57:06
* @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx * @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx
*/ */
import { IBlockType, IStoreData } from '../core/store/storetype'; import { IBlockType, IStoreData } from '../core/store/storetype';
import { store } from '../runtime/store';
import { formRegister, componentRegister, storeChanger } from '../runtime';
import { ComponentClass, FunctionComponent, ReactNode } from 'react'; import { ComponentClass, FunctionComponent, ReactNode } from 'react';
import { ComponentItemFactory } from '../core/components/abstract'; import { ComponentItemFactory } from '../core/components/abstract';
import { marklineConfig } from '../core/markline/marklineConfig'; import { marklineConfig } from '../core/markline/marklineConfig';
import { CommanderItem } from '../core/command/commanderType'; import { CommanderItem } from '../core/command/commanderType';
import { contextMenuState } from '../core/contextMenu'; import { contextMenuState } from '../core/contextMenu';
import { formComponentRegisterFn } from '../core/components/formComponentRegister'; import {
FormComponentRegister,
formComponentRegisterFn,
} from '../core/components/formComponentRegister';
import { deepCopy } from '../core/utils'; import { deepCopy } from '../core/utils';
import { LeftRegistComponentMapItem } from '../core/crossDrag'; import { LeftRegistComponentMapItem } from '../core/crossDrag';
import { FunctionCenterType } from '../core/functionCenter'; import { FunctionCenterType } from '../core/functionCenter';
@@ -24,6 +25,10 @@ import { scaleState } from '../core/scale/state';
import { CommanderItemFactory } from '../core/command/abstract'; import { CommanderItemFactory } from '../core/command/abstract';
import MmodalMask from '../core/components/defaultFormComponents/modalMask'; import MmodalMask from '../core/components/defaultFormComponents/modalMask';
import CommanderWrapper from '../core/command'; import CommanderWrapper from '../core/command';
import { focusState } from '../core/focusHandler/state';
import ComponentRegister from '../core/components';
import { StoreChanger } from '../core/storeChanger';
import Store from '../core/store';
// 组件部分 // 组件部分
@@ -309,24 +314,25 @@ export function userConfigMerge(a: Partial<InitConfig>, b?: Partial<InitConfig>)
*/ */
export class UserConfig { export class UserConfig {
public initConfig: InitConfig; public initConfig: InitConfig;
public store = store; public store = new Store();
public componentRegister = componentRegister; public componentRegister = new ComponentRegister();
public formRegister = new FormComponentRegister();
public storeChanger = new StoreChanger();
public componentCache = {}; public componentCache = {};
public asyncComponentUrlMap = {} as AsyncCacheComponentType; public asyncComponentUrlMap = {} as AsyncCacheComponentType;
public marklineConfig = marklineConfig; public marklineConfig = marklineConfig;
public commanderRegister: CommanderWrapper; public commanderRegister: CommanderWrapper;
public contextMenuState = contextMenuState; public contextMenuState = contextMenuState;
public formRegister = formRegister;
public storeChanger = storeChanger;
public eventCenter: EventCenter; public eventCenter: EventCenter;
public dataCenter: DataCenter; public dataCenter: DataCenter;
public scaleState = scaleState; public scaleState = scaleState;
public focusState = focusState;
public collapsed = false; public collapsed = false;
public ticker = true; public ticker = true;
constructor(initConfig?: Partial<InitConfig>) { constructor(initConfig?: Partial<InitConfig>) {
const mergeConfig = userConfigMerge(defaultConfig, initConfig); const mergeConfig = userConfigMerge(defaultConfig, initConfig);
this.initConfig = mergeConfig; this.initConfig = mergeConfig;
this.commanderRegister = new CommanderWrapper(store, {}, this); this.commanderRegister = new CommanderWrapper(this.store, {}, this);
this.eventCenter = new EventCenter({}, mergeConfig.initFunctionMap); this.eventCenter = new EventCenter({}, mergeConfig.initFunctionMap);
this.dataCenter = new DataCenter(mergeConfig.initDataCenterMap); this.dataCenter = new DataCenter(mergeConfig.initDataCenterMap);
this.init(); this.init();
@@ -335,7 +341,7 @@ export class UserConfig {
toRegist() { toRegist() {
const modules = this.initConfig.initFormComponents; const modules = this.initConfig.initFormComponents;
formComponentRegisterFn(formRegister, modules); formComponentRegisterFn(this.formRegister, modules);
const cache = this.initConfig.initComponentCache; const cache = this.initConfig.initComponentCache;
this.componentCache = cache; this.componentCache = cache;
@@ -389,6 +395,9 @@ export class UserConfig {
this.toRegist(); this.toRegist();
} }
getFocusState() {
return this.focusState;
}
getScaleState() { getScaleState() {
return this.scaleState; return this.scaleState;
} }
@@ -430,7 +439,7 @@ export class UserConfig {
const mergeConfig = userConfigMerge(defaultConfig, v); const mergeConfig = userConfigMerge(defaultConfig, v);
this.initConfig = mergeConfig; this.initConfig = mergeConfig;
this.init(); this.init();
store.forceUpdate(); this.store.forceUpdate();
} }
/** /**
* 会重置配置,请修改配置后增加 * 会重置配置,请修改配置后增加
@@ -442,7 +451,7 @@ export class UserConfig {
obj.leftRenderListCategory = v; obj.leftRenderListCategory = v;
this.initConfig = userConfigMerge(this.initConfig, obj); this.initConfig = userConfigMerge(this.initConfig, obj);
this.init(); this.init();
store.forceUpdate(); this.store.forceUpdate();
} }
/** /**
@@ -455,7 +464,7 @@ export class UserConfig {
obj.rightRenderListCategory = v; obj.rightRenderListCategory = v;
this.initConfig = userConfigMerge(this.initConfig, obj); this.initConfig = userConfigMerge(this.initConfig, obj);
this.init(); this.init();
store.forceUpdate(); this.store.forceUpdate();
} }
/** /**
@@ -468,7 +477,7 @@ export class UserConfig {
obj.leftAllRegistMap = [v]; obj.leftAllRegistMap = [v];
this.initConfig = userConfigMerge(this.initConfig, obj); this.initConfig = userConfigMerge(this.initConfig, obj);
this.init(); this.init();
store.forceUpdate(); this.store.forceUpdate();
} }
/** /**
@@ -479,7 +488,7 @@ export class UserConfig {
setConfig(v: Partial<InitConfig>) { setConfig(v: Partial<InitConfig>) {
this.initConfig = userConfigMerge(this.initConfig, v); this.initConfig = userConfigMerge(this.initConfig, v);
this.init(); this.init();
store.forceUpdate(); this.store.forceUpdate();
} }
/** /**

View File

@@ -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:48:04 * @LastEditTime: 2021-07-13 14:43:14
* @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';
@@ -10,12 +10,13 @@ import { IBlockType } from '../store/storetype';
import { deepCopy } from '../utils'; import { deepCopy } from '../utils';
import { selectRangeMouseDown } from '../selectRange'; import { selectRangeMouseDown } from '../selectRange';
import { unmountContextMenu } from '../contextMenu'; import { unmountContextMenu } from '../contextMenu';
import { focusState } from './state';
import UserConfig from '../../config'; import UserConfig from '../../config';
export function containerFocusRemove(config: UserConfig) { export function containerFocusRemove(config: UserConfig) {
const store = config.getStore(); const store = config.getStore();
const onMouseDown = (e: React.MouseEvent) => { const onMouseDown = (e: React.MouseEvent) => {
const focusState = config.getFocusState();
const clonedata = deepCopy(store.getData()); const clonedata = deepCopy(store.getData());
const newBlock = clonedata.block.map((v: IBlockType) => { const newBlock = clonedata.block.map((v: IBlockType) => {
v.focus = false; v.focus = false;
@@ -36,6 +37,7 @@ export function containerFocusRemove(config: UserConfig) {
export function blockFocus(e: React.MouseEvent, item: IBlockType, config: UserConfig) { export function blockFocus(e: React.MouseEvent, item: IBlockType, config: UserConfig) {
const store = config.getStore(); const store = config.getStore();
const clonedata = deepCopy(store.getData()); const clonedata = deepCopy(store.getData());
const focusState = config.getFocusState();
if (e.shiftKey) { if (e.shiftKey) {
const newBlock = clonedata.block.map((v: IBlockType) => { const newBlock = clonedata.block.map((v: IBlockType) => {
if (v.id === item.id) { if (v.id === item.id) {

View File

@@ -93,7 +93,7 @@ export const innerContainerDrag = function (config: UserConfig) {
innerDragState.startY = moveY; innerDragState.startY = moveY;
store.setData({ ...store.getData(), block: newblock }); store.setData({ ...store.getData(), block: newblock });
} }
resizerMouseMove(e); resizerMouseMove(e, config);
if (selectData.selectDiv) { if (selectData.selectDiv) {
selectRangeMouseMove(e); selectRangeMouseMove(e);
} }
@@ -106,13 +106,13 @@ export const innerContainerDragUp = function (config: UserConfig) {
const store = config.getStore(); const store = config.getStore();
const onMouseUp = (e: React.MouseEvent) => { const onMouseUp = (e: React.MouseEvent) => {
e.preventDefault(); e.preventDefault();
wrapperMoveMouseUp(); wrapperMoveMouseUp(config);
selectRangeMouseUp(e, config); selectRangeMouseUp(e, config);
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';
} }
resizerMouseUp(); resizerMouseUp(config);
if (innerDragState.current) { if (innerDragState.current) {
const endindex = store.getIndex(); const endindex = store.getIndex();
store.getStoreList().splice(innerDragState.current, endindex - innerDragState.current); store.getStoreList().splice(innerDragState.current, endindex - innerDragState.current);

View File

@@ -2,12 +2,11 @@
* @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-12 19:25:09 * @LastEditTime: 2021-07-13 14:28:17
* @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\containerResizer.ts * @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\containerResizer.ts
*/ */
import { store } from '../../runtime/store'; import UserConfig from '../../config';
import { scaleState } from '../scale/state';
import { IStoreData } from '../store/storetype'; import { IStoreData } from '../store/storetype';
import { deepCopy } from '../utils'; import { deepCopy } from '../utils';
@@ -19,13 +18,16 @@ export const containerState = {
}; };
export const containerResizer = { export const containerResizer = {
onMousedown: (e: React.MouseEvent) => { onMousedown: (e: React.MouseEvent, config: UserConfig) => {
const store = config.getStore();
containerState.isDrag = true; containerState.isDrag = true;
containerState.startY = e.clientY; containerState.startY = e.clientY;
containerState.startIndex = store.getIndex(); containerState.startIndex = store.getIndex();
}, },
onMouseMove: (e: React.MouseEvent) => { onMouseMove: (e: React.MouseEvent, config: UserConfig) => {
if (containerState.isDrag) { if (containerState.isDrag) {
const scaleState = config.getScaleState();
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;
const clonedata: IStoreData = deepCopy(store.getData()); const clonedata: IStoreData = deepCopy(store.getData());
@@ -37,8 +39,9 @@ export const containerResizer = {
containerState.startY = e.clientY; containerState.startY = e.clientY;
} }
}, },
onMouseUp: () => { onMouseUp: (config: UserConfig) => {
if (containerState.isDrag) { if (containerState.isDrag) {
const store = config.getStore();
containerState.isDrag = false; containerState.isDrag = false;
const endIndex = store.getIndex(); const endIndex = store.getIndex();
store.getStoreList().splice(containerState.startIndex, endIndex - containerState.startIndex); store.getStoreList().splice(containerState.startIndex, endIndex - containerState.startIndex);

View File

@@ -1,14 +1,14 @@
import { store } from '../../runtime/store';
import { RefObject, useMemo } from 'react'; import { RefObject, useMemo } from 'react';
import { scaleState } from '../scale/state';
import { IBlockType } from '../store/storetype'; import { IBlockType } from '../store/storetype';
import { deepCopy } from '../utils'; import { deepCopy } from '../utils';
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import styles from '../../index.less'; import styles from '../../index.less';
import UserConfig from '../../config';
interface BlockResizerProps { interface BlockResizerProps {
data: IBlockType; data: IBlockType;
rect: RefObject<HTMLDivElement>; rect: RefObject<HTMLDivElement>;
config: UserConfig;
} }
interface resizeStateType { interface resizeStateType {
startX: number; startX: number;
@@ -42,9 +42,11 @@ const onMouseDown = (
e: React.MouseEvent, e: React.MouseEvent,
direction: directionType, direction: directionType,
item: IBlockType, item: IBlockType,
ref: RefObject<HTMLDivElement> ref: RefObject<HTMLDivElement>,
config: UserConfig
) => { ) => {
e.stopPropagation(); e.stopPropagation();
const store = config.getStore();
resizeState.isResize = true; resizeState.isResize = true;
resizeState.item = item; resizeState.item = item;
resizeState.startX = e.clientX; resizeState.startX = e.clientX;
@@ -54,9 +56,10 @@ const onMouseDown = (
resizeState.current = store.getIndex(); resizeState.current = store.getIndex();
}; };
export const resizerMouseUp = () => { export const resizerMouseUp = (config: UserConfig) => {
resizeState.isResize = false; resizeState.isResize = false;
resizeState.item = null; resizeState.item = null;
const store = config.getStore();
if (resizeState.current) { if (resizeState.current) {
const endindex = store.getIndex(); const endindex = store.getIndex();
store.getStoreList().splice(resizeState.current, endindex - resizeState.current); store.getStoreList().splice(resizeState.current, endindex - resizeState.current);
@@ -64,7 +67,16 @@ export const resizerMouseUp = () => {
} }
resizeState.current = 0; resizeState.current = 0;
}; };
const changePosition = (v: IBlockType, durX: number, durY: number) => { const changePosition = (
v: IBlockType,
durX: number,
durY: number,
scaleState: {
value: number;
maxValue: number;
minValue: number;
}
) => {
const direction = resizeState.direction; const direction = resizeState.direction;
const { width, height } = resizeState.ref!.current!.getBoundingClientRect(); const { width, height } = resizeState.ref!.current!.getBoundingClientRect();
const scale = scaleState.value; const scale = scaleState.value;
@@ -110,8 +122,10 @@ const changePosition = (v: IBlockType, durX: number, durY: number) => {
} }
}; };
export const resizerMouseMove = (e: React.MouseEvent) => { export const resizerMouseMove = (e: React.MouseEvent, config: UserConfig) => {
//根据direction修改位置 //根据direction修改位置
const scaleState = config.getScaleState();
const store = config.getStore();
if (resizeState.isResize && resizeState.item) { if (resizeState.isResize && resizeState.item) {
let { clientX: moveX, clientY: moveY } = e; let { clientX: moveX, clientY: moveY } = e;
const { startX, startY } = resizeState; const { startX, startY } = resizeState;
@@ -121,7 +135,7 @@ export const resizerMouseMove = (e: React.MouseEvent) => {
const clonedata = deepCopy(store.getData()); const clonedata = deepCopy(store.getData());
const newblock: IBlockType[] = clonedata.block.map((v: IBlockType) => { const newblock: IBlockType[] = clonedata.block.map((v: IBlockType) => {
if (v.id === resizeState.item!.id) { if (v.id === resizeState.item!.id) {
changePosition(v, durX, durY); changePosition(v, durX, durY, scaleState);
} }
return v; return v;
}); });
@@ -139,58 +153,74 @@ export function BlockResizer(props: BlockResizerProps) {
<div <div
className={classnames(styles.resizepoint, styles.top)} className={classnames(styles.resizepoint, styles.top)}
onMouseDown={(e) => { onMouseDown={(e) => {
onMouseDown(e, 'top', props.data, props.rect); onMouseDown(e, 'top', props.data, props.rect, props.config);
}}
onMouseUp={() => {
resizerMouseUp(props.config);
}} }}
onMouseUp={resizerMouseUp}
></div> ></div>
<div <div
className={classnames(styles.resizepoint, styles.topleft)} className={classnames(styles.resizepoint, styles.topleft)}
onMouseDown={(e) => { onMouseDown={(e) => {
onMouseDown(e, 'topleft', props.data, props.rect); onMouseDown(e, 'topleft', props.data, props.rect, props.config);
}}
onMouseUp={() => {
resizerMouseUp(props.config);
}} }}
onMouseUp={resizerMouseUp}
></div> ></div>
<div <div
className={classnames(styles.resizepoint, styles.left)} className={classnames(styles.resizepoint, styles.left)}
onMouseDown={(e) => { onMouseDown={(e) => {
onMouseDown(e, 'left', props.data, props.rect); onMouseDown(e, 'left', props.data, props.rect, props.config);
}}
onMouseUp={() => {
resizerMouseUp(props.config);
}} }}
onMouseUp={resizerMouseUp}
></div> ></div>
<div <div
className={classnames(styles.resizepoint, styles.topright)} className={classnames(styles.resizepoint, styles.topright)}
onMouseDown={(e) => { onMouseDown={(e) => {
onMouseDown(e, 'topright', props.data, props.rect); onMouseDown(e, 'topright', props.data, props.rect, props.config);
}}
onMouseUp={() => {
resizerMouseUp(props.config);
}} }}
onMouseUp={resizerMouseUp}
></div> ></div>
<div <div
className={classnames(styles.resizepoint, styles.bottomleft)} className={classnames(styles.resizepoint, styles.bottomleft)}
onMouseDown={(e) => { onMouseDown={(e) => {
onMouseDown(e, 'bottomleft', props.data, props.rect); onMouseDown(e, 'bottomleft', props.data, props.rect, props.config);
}}
onMouseUp={() => {
resizerMouseUp(props.config);
}} }}
onMouseUp={resizerMouseUp}
></div> ></div>
<div <div
className={classnames(styles.resizepoint, styles.bottom)} className={classnames(styles.resizepoint, styles.bottom)}
onMouseDown={(e) => { onMouseDown={(e) => {
onMouseDown(e, 'bottom', props.data, props.rect); onMouseDown(e, 'bottom', props.data, props.rect, props.config);
}}
onMouseUp={() => {
resizerMouseUp(props.config);
}} }}
onMouseUp={resizerMouseUp}
></div> ></div>
<div <div
className={classnames(styles.resizepoint, styles.right)} className={classnames(styles.resizepoint, styles.right)}
onMouseDown={(e) => { onMouseDown={(e) => {
onMouseDown(e, 'right', props.data, props.rect); onMouseDown(e, 'right', props.data, props.rect, props.config);
}}
onMouseUp={() => {
resizerMouseUp(props.config);
}} }}
onMouseUp={resizerMouseUp}
></div> ></div>
<div <div
className={classnames(styles.resizepoint, styles.bottomright)} className={classnames(styles.resizepoint, styles.bottomright)}
onMouseDown={(e) => { onMouseDown={(e) => {
onMouseDown(e, 'bottomright', props.data, props.rect); onMouseDown(e, 'bottomright', props.data, props.rect, props.config);
}}
onMouseUp={() => {
resizerMouseUp(props.config);
}} }}
onMouseUp={resizerMouseUp}
></div> ></div>
</> </>
); );

View File

@@ -1,6 +1,5 @@
import { IStoreData } from '../store/storetype'; import { IStoreData } from '../store/storetype';
import { deepCopy } from '../utils'; import { deepCopy } from '../utils';
import { focusState } from '../focusHandler/state';
import style from '../../index.less'; import style from '../../index.less';
import UserConfig from '../../config'; import UserConfig from '../../config';
export interface SelectDataProps { export interface SelectDataProps {
@@ -57,6 +56,7 @@ function selectFocus(left: number, top: number, width: number, height: number, c
} }
const store = config.getStore(); const store = config.getStore();
const clonedata: IStoreData = deepCopy(store.getData()); const clonedata: IStoreData = deepCopy(store.getData());
const focusState = config.getFocusState();
const blocks = clonedata.block; const blocks = clonedata.block;
let change = false; let change = false;
const maxleft = left + width; const maxleft = left + width;

View File

@@ -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-10 18:17:56 * @LastEditTime: 2021-07-13 14:58:30
* @FilePath: \dooringx\packages\dooringx-lib\src\core\store\index.ts * @FilePath: \dooringx\packages\dooringx-lib\src\core\store\index.ts
*/ */
import { IStoreData } from './storetype'; import { IStoreData } from './storetype';
@@ -11,7 +11,7 @@ import { storeChangerState } from '../storeChanger/state';
export const initialData: IStoreData = { export const initialData: IStoreData = {
container: { container: {
width: 375, width: 375,
height: 600, height: 667,
}, },
block: [], block: [],
modalMap: {}, modalMap: {},

View File

@@ -8,7 +8,7 @@ import deepCopys from 'deepcopy';
import { FunctionDataMap } from '../functionCenter/config'; import { FunctionDataMap } from '../functionCenter/config';
import UserConfig from '../../config'; import UserConfig from '../../config';
export function deepCopy(obj: any) { export function deepCopy<T = any>(obj: any): T {
return deepCopys(obj); return deepCopys(obj);
} }

View File

@@ -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-12 14:43:28 * @LastEditTime: 2021-07-13 14:57:13
* @FilePath: \dooringx\packages\dooringx-lib\src\index.tsx * @FilePath: \dooringx\packages\dooringx-lib\src\index.tsx
*/ */
@@ -24,10 +24,6 @@ export { default as ContainerWrapper } from './components/wrapperMove';
export { default as Control } from './components/control'; export { default as Control } from './components/control';
// 这个放到外层容器属性里 ...innerContainerDragUp() // 这个放到外层容器属性里 ...innerContainerDragUp()
export { innerContainerDragUp } from './core/innerDrag'; export { innerContainerDragUp } from './core/innerDrag';
// 用于修改store
export { store } from './runtime/store';
// 用于获取运行中的实例
export { componentRegister, formRegister, storeChanger } from './runtime';
export { unmountContextMenu } from './core/contextMenu'; export { unmountContextMenu } from './core/contextMenu';

View File

@@ -1,13 +0,0 @@
/*
* @Author: yehuozhili
* @Date: 2021-03-14 04:33:52
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-12 14:43:03
* @FilePath: \dooringx\packages\dooringx-lib\src\runtime\index.ts
*/
import ComponentRegister from '../core/components';
import { FormComponentRegister } from '../core/components/formComponentRegister';
import { StoreChanger } from '../core/storeChanger';
export const componentRegister = new ComponentRegister();
export const formRegister = new FormComponentRegister();
export const storeChanger = new StoreChanger();

View File

@@ -1,11 +0,0 @@
/*
* @Author: yehuozhili
* @Date: 2021-03-14 11:32:30
* @LastEditors: yehuozhili
* @LastEditTime: 2021-03-14 11:32:48
* @FilePath: \dooring-v2\src\runtime\store.ts
*/
// 单独提出来为了避免循环引用
import Store from '../core/store';
export const store = new Store();