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

update 0.9.3

Browse Source
This commit is contained in:
yehuozhili
2021-10-07 14:41:24 +08:00
parent 02337bae3c
commit c37d442b45
18 changed files with 494 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
{
"version": "0.9.2",
"version": "0.9.3",
"license": "MIT",
"main": "dist/index.js",
"module": "dist/dooringx-lib.esm.js",

6
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-09-28 21:28:41
* @LastEditTime: 2021-10-07 12:35:38
* @FilePath: \dooringx\packages\dooringx-lib\src\components\leftConfig.tsx
*/
import React, { ReactNode, useEffect, useMemo, useState } from 'react';
@@ -109,7 +109,7 @@ function LeftConfig(props: LeftConfigProps) {
<div
className={`${styles.coitem} yh-left-item-wrap`}
key={index}
{...dragEventResolve(v)}
{...dragEventResolve(v, props.config)}
>
<div className={`${styles.redbox} yh-left-item-img-wrap`}>
{v.imgCustom ? (
@@ -140,7 +140,7 @@ function LeftConfig(props: LeftConfigProps) {
<div
className={`${styles.coitem} yh-left-item-wrap`}
key={index}
{...dragEventResolve(v)}
{...dragEventResolve(v, props.config)}
>
<div className={`${styles.redbox} yh-left-item-img-wrap`}>
{v.imgCustom ? (

14
packages/dooringx-lib/src/core/components/createBlock.ts
View File

@@ -2,15 +2,23 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-08-06 10:24:32
* @LastEditTime: 2021-10-07 12:45:49
* @FilePath: \dooringx\packages\dooringx-lib\src\core\components\createBlock.ts
*/
import { UserConfig } from '../..';
import { innerRemoveFocus } from '../focusHandler';
import { IBlockType } from '../store/storetype';
import { createUid } from '../utils';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { ComponentItem } from './componentItem';
export function createBlock(top: number, left: number, ComponentItem: ComponentItem): IBlockType {
export function createBlock(
top: number,
left: number,
ComponentItem: ComponentItem,
config: UserConfig
): IBlockType {
innerRemoveFocus(config);
return {
id: createUid(ComponentItem.name),
name: ComponentItem.name,
@@ -19,7 +27,7 @@ export function createBlock(top: number, left: number, ComponentItem: ComponentI
zIndex: ComponentItem.initData.zIndex || 0,
props: ComponentItem.initData.props || {},
resize: ComponentItem.initData.resize || ComponentItem.resize,
focus: false,
focus: ComponentItem.initData.focus ?? true,
position: ComponentItem.initData.position || 'absolute',
display: ComponentItem.initData.display || 'block',
width: ComponentItem.initData.width,

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

@@ -2,10 +2,10 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-26 20:42:16
* @LastEditTime: 2021-10-07 12:45:30
* @FilePath: \dooringx\packages\dooringx-lib\src\core\crossDrag\index.ts
*/
import { DragEvent, ReactNode } from 'react';
import React, { DragEvent, ReactNode } from 'react';
import { createBlock } from '../components/createBlock';
import { IBlockType } from '../store/storetype';
import { deepCopy } from '../utils';
@@ -28,7 +28,58 @@ export interface LeftRegistComponentMapItem {
}
let currentDrag: LeftRegistComponentMapItem | null = null;
export const dragEventResolve = function (item: LeftRegistComponentMapItem) {
function resolveDrop(
config: UserConfig,
item: LeftRegistComponentMapItem,
e: DragEvent<HTMLDivElement> | React.MouseEvent,
x: number,
y: number,
dbclick: boolean = false
) {
const componentRegister = config.getComponentRegister();
const store = config.getStore();
const origin = componentRegister.getComp(item.component);
if (!origin) {
console.log(item.component, 'wait the chunk pull compeletely and retry');
return;
}
const target = e.target as HTMLElement;
let newblock: IBlockType;
//如果有宽高，那么让其在中间
let fixX = x;
let fixY = y;
if (origin.initData.width && typeof origin.initData.width === 'number') {
fixX = x - origin.initData.width / 2;
}
if (origin.initData.height && typeof origin.initData.height === 'number') {
fixY = y - origin.initData.height / 2;
}
if (!origin.needPosition) {
newblock = createBlock(
origin.initData.top ?? fixY,
origin.initData.left ?? fixX,
origin,
config
);
} else {
if (dbclick) {
newblock = createBlock(fixY, fixX, origin, config);
} else {
if (target.id !== 'yh-container') {
newblock = createBlock(fixY + target.offsetTop, fixX + target.offsetLeft, origin, config);
} else {
newblock = createBlock(fixY, fixX, origin, config);
}
}
}
const data = deepCopy(store.getData());
data.block.push(newblock);
store.setData({ ...data });
}
export const dragEventResolve = function (item: LeftRegistComponentMapItem, config: UserConfig) {
return {
draggable: true,
onDragStart: () => {
@@ -39,12 +90,16 @@ export const dragEventResolve = function (item: LeftRegistComponentMapItem) {
},
onDrop: () => {},
onDragEnd: () => {},
onDoubleClick: (e: React.MouseEvent) => {
const container = config.getStore().getData().container;
const x = container.width / 2;
const y = container.height / 2;
resolveDrop(config, item, e, x, y, true);
},
};
};
export const containerDragResolve = (config: UserConfig) => {
const store = config.getStore();
const componentRegister = config.getComponentRegister();
return {
onDragStart: () => {},
onDragOver: (e: DragEvent<HTMLDivElement>) => {
@@ -55,30 +110,7 @@ export const containerDragResolve = (config: UserConfig) => {
const offestY = Math.round(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 });
resolveDrop(config, currentDrag, e, offsetX, offestY);
}
currentDrag = null;
},

29
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-09-28 17:14:16
* @LastEditTime: 2021-10-07 12:40:32
* @FilePath: \dooringx\packages\dooringx-lib\src\core\focusHandler\index.tsx
*/
import { innerDragState } from '../innerDrag/state';
@@ -12,22 +12,29 @@ import { selectRangeMouseDown } from '../selectRange';
import { unmountContextMenu } from '../contextMenu';
import UserConfig from '../../config';
export function containerFocusRemove(config: UserConfig) {
function resolveRemove(config: UserConfig) {
const store = config.getStore();
const focusState = config.getFocusState();
const clonedata = deepCopy(store.getData());
const newBlock = clonedata.block.map((v: IBlockType) => {
v.focus = false;
return v;
});
focusState.blocks = [];
store.setData({ ...clonedata, block: newBlock });
unmountContextMenu();
}
export function innerRemoveFocus(config: UserConfig) {
resolveRemove(config);
}
export function containerFocusRemove(config: UserConfig) {
const onMouseDown = (e: React.MouseEvent) => {
const focusState = config.getFocusState();
const clonedata = deepCopy(store.getData());
const newBlock = clonedata.block.map((v: IBlockType) => {
v.focus = false;
return v;
});
focusState.blocks = [];
store.setData({ ...clonedata, block: newBlock });
resolveRemove(config);
if (!innerDragState.item) {
selectRangeMouseDown(e, config);
}
unmountContextMenu();
};
return {
onMouseDown,