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

remove runtime

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-02-21 22:17:29
* @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
*/
import { RefObject } from 'react';
@@ -58,14 +58,14 @@ export const wrapperEvent = (ref: RefObject<HTMLDivElement>, config: UserConfig)
store.forceUpdate();
}
containerResizer.onMouseMove(e);
containerResizer.onMouseMove(e, config);
},
};
};
export const wrapperMoveMouseUp = () => {
export const wrapperMoveMouseUp = (config: UserConfig) => {
if (wrapperMoveState.ref && wrapperMoveState.ref.current) {
wrapperMoveState.ref.current.style.cursor = 'default';
}
containerResizer.onMouseUp();
containerResizer.onMouseUp(config);
wrapperMoveState.isDrag = false;
};

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

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-13 10:49:33
* @LastEditTime: 2021-07-13 14:34:00
* @FilePath: \dooringx\packages\dooringx-lib\src\components\wrapperMove\index.tsx
*/
import { AllHTMLAttributes, CSSProperties, PropsWithChildren, useRef } from 'react';
@@ -19,7 +19,7 @@ export interface ContainerWrapperProps extends AllHTMLAttributes<HTMLDivElement>
}
function ContainerWrapper(props: PropsWithChildren<ContainerWrapperProps>) {
const { children, style, classNames, ...rest } = props;
const { children, style, classNames, config, ...rest } = props;
const ref = useRef<HTMLDivElement>(null);
const ticker = props.config.ticker;
return (

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

@@ -2,18 +2,19 @@
* @Author: yehuozhili
* @Date: 2021-02-25 21:16:58
* @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
*/
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 { ComponentItemFactory } from '../core/components/abstract';
import { marklineConfig } from '../core/markline/marklineConfig';
import { CommanderItem } from '../core/command/commanderType';
import { contextMenuState } from '../core/contextMenu';
import { formComponentRegisterFn } from '../core/components/formComponentRegister';
import {
FormComponentRegister,
formComponentRegisterFn,
} from '../core/components/formComponentRegister';
import { deepCopy } from '../core/utils';
import { LeftRegistComponentMapItem } from '../core/crossDrag';
import { FunctionCenterType } from '../core/functionCenter';
@@ -24,6 +25,10 @@ import { scaleState } from '../core/scale/state';
import { CommanderItemFactory } from '../core/command/abstract';
import MmodalMask from '../core/components/defaultFormComponents/modalMask';
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 {
public initConfig: InitConfig;
public store = store;
public componentRegister = componentRegister;
public store = new Store();
public componentRegister = new ComponentRegister();
public formRegister = new FormComponentRegister();
public storeChanger = new StoreChanger();
public componentCache = {};
public asyncComponentUrlMap = {} as AsyncCacheComponentType;
public marklineConfig = marklineConfig;
public commanderRegister: CommanderWrapper;
public contextMenuState = contextMenuState;
public formRegister = formRegister;
public storeChanger = storeChanger;
public eventCenter: EventCenter;
public dataCenter: DataCenter;
public scaleState = scaleState;
public focusState = focusState;
public collapsed = false;
public ticker = true;
constructor(initConfig?: Partial<InitConfig>) {
const mergeConfig = userConfigMerge(defaultConfig, initConfig);
this.initConfig = mergeConfig;
this.commanderRegister = new CommanderWrapper(store, {}, this);
this.commanderRegister = new CommanderWrapper(this.store, {}, this);
this.eventCenter = new EventCenter({}, mergeConfig.initFunctionMap);
this.dataCenter = new DataCenter(mergeConfig.initDataCenterMap);
this.init();
@@ -335,7 +341,7 @@ export class UserConfig {
toRegist() {
const modules = this.initConfig.initFormComponents;
formComponentRegisterFn(formRegister, modules);
formComponentRegisterFn(this.formRegister, modules);
const cache = this.initConfig.initComponentCache;
this.componentCache = cache;
@@ -389,6 +395,9 @@ export class UserConfig {
this.toRegist();
}
getFocusState() {
return this.focusState;
}
getScaleState() {
return this.scaleState;
}
@@ -430,7 +439,7 @@ export class UserConfig {
const mergeConfig = userConfigMerge(defaultConfig, v);
this.initConfig = mergeConfig;
this.init();
store.forceUpdate();
this.store.forceUpdate();
}
/**
* 会重置配置，请修改配置后增加
@@ -442,7 +451,7 @@ export class UserConfig {
obj.leftRenderListCategory = v;
this.initConfig = userConfigMerge(this.initConfig, obj);
this.init();
store.forceUpdate();
this.store.forceUpdate();
}
/**
@@ -455,7 +464,7 @@ export class UserConfig {
obj.rightRenderListCategory = v;
this.initConfig = userConfigMerge(this.initConfig, obj);
this.init();
store.forceUpdate();
this.store.forceUpdate();
}
/**
@@ -468,7 +477,7 @@ export class UserConfig {
obj.leftAllRegistMap = [v];
this.initConfig = userConfigMerge(this.initConfig, obj);
this.init();
store.forceUpdate();
this.store.forceUpdate();
}
/**
@@ -479,7 +488,7 @@ export class UserConfig {
setConfig(v: Partial<InitConfig>) {
this.initConfig = userConfigMerge(this.initConfig, v);
this.init();
store.forceUpdate();
this.store.forceUpdate();
}
/**

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

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @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
*/
import { innerDragState } from '../innerDrag/state';
@@ -10,12 +10,13 @@ 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(config: UserConfig) {
const store = config.getStore();
const onMouseDown = (e: React.MouseEvent) => {
const focusState = config.getFocusState();
const clonedata = deepCopy(store.getData());
const newBlock = clonedata.block.map((v: IBlockType) => {
v.focus = false;
@@ -36,6 +37,7 @@ export function containerFocusRemove(config: UserConfig) {
export function blockFocus(e: React.MouseEvent, item: IBlockType, config: UserConfig) {
const store = config.getStore();
const clonedata = deepCopy(store.getData());
const focusState = config.getFocusState();
if (e.shiftKey) {
const newBlock = clonedata.block.map((v: IBlockType) => {
if (v.id === item.id) {

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

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

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

@@ -2,12 +2,11 @@
* @Author: yehuozhili
* @Date: 2021-03-09 15:19:36
* @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
*/
import { store } from '../../runtime/store';
import { scaleState } from '../scale/state';
import UserConfig from '../../config';
import { IStoreData } from '../store/storetype';
import { deepCopy } from '../utils';
@@ -19,13 +18,16 @@ export const containerState = {
};
export const containerResizer = {
onMousedown: (e: React.MouseEvent) => {
onMousedown: (e: React.MouseEvent, config: UserConfig) => {
const store = config.getStore();
containerState.isDrag = true;
containerState.startY = e.clientY;
containerState.startIndex = store.getIndex();
},
onMouseMove: (e: React.MouseEvent) => {
onMouseMove: (e: React.MouseEvent, config: UserConfig) => {
if (containerState.isDrag) {
const scaleState = config.getScaleState();
const store = config.getStore();
const scale = scaleState.value;
const diff = ((e.clientY - containerState.startY) / scale) * 2;
const clonedata: IStoreData = deepCopy(store.getData());
@@ -37,8 +39,9 @@ export const containerResizer = {
containerState.startY = e.clientY;
}
},
onMouseUp: () => {
onMouseUp: (config: UserConfig) => {
if (containerState.isDrag) {
const store = config.getStore();
containerState.isDrag = false;
const endIndex = store.getIndex();
store.getStoreList().splice(containerState.startIndex, endIndex - containerState.startIndex);

76
packages/dooringx-lib/src/core/resizeHandler/index.tsx
View File

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

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

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

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

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @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
*/
import { IStoreData } from './storetype';
@@ -11,7 +11,7 @@ import { storeChangerState } from '../storeChanger/state';
export const initialData: IStoreData = {
container: {
width: 375,
height: 600,
height: 667,
},
block: [],
modalMap: {},

2
packages/dooringx-lib/src/core/utils/index.ts
View File

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

6
packages/dooringx-lib/src/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:22:18
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-12 14:43:28
* @LastEditTime: 2021-07-13 14:57:13
* @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';
// 这个放到外层容器属性里 ...innerContainerDragUp()
export { innerContainerDragUp } from './core/innerDrag';
// 用于修改store
export { store } from './runtime/store';
// 用于获取运行中的实例
export { componentRegister, formRegister, storeChanger } from './runtime';
export { unmountContextMenu } from './core/contextMenu';

13
packages/dooringx-lib/src/runtime/index.ts
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();

11
packages/dooringx-lib/src/runtime/store.ts
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();