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

update 0.7.0

Browse Source
This commit is contained in:
hufeixiong
2021-07-27 15:38:29 +08:00
parent a0f469c9a0
commit 0619bdfc81
18 changed files with 67 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/dooringx-doc/src/changelog/1.1.md
View File

@@ -6,6 +6,12 @@ order: 1
## changelog
## 0.7.0
已支持组件旋转！
修复拖拽参考线等优化逻辑。
## 0.6.0
已支持编辑模式使用Iframe！

2
packages/dooringx-doc/src/docs/1.3.md
View File

@@ -18,6 +18,8 @@ dooringx-lib在编辑时提供两种容器，可以根据需要选择使用。
使用普通容器即在编辑时为普通的div并非iframe，而使用iframe则编辑时看见的为iframe内容。在预览时，使用preview组件，preview可以放到任何容器，包括去使用iframe查看。
iframe容器由于使用postmessage通信，所以在操作上可能会有略微延迟。如果对样式隔离要求不高可以使用普通容器，预览的样式正常即可。
普通容器使用参考demo:
```js

6
packages/dooringx-doc/src/docs/3.3.md
View File

@@ -73,6 +73,12 @@ export default MButton;
第四个参数会配置组件的初始值，特别注意的是，制作组件必须要有初始宽度（非由内容撑开），否则会在适配时产生问题。
这个初始值里有很多有用的属性，比如fixed代表使用固定定位，可以结合配置项更改该值，使得组件可以fixed定位。
还有canDrag类似于锁定命令，锁定的元素不可拖拽。
初始值里的rotate需要个对象，value代表旋转角度，canRotate 代表是否可以操作旋转。（0.7.0版本开始支持）
第五个参数是个函数，你将获得配置项中的receive属性（暂且都默认该配置为receive）传来的配置，比如上例中receive的是text，则该函数中data里会收到该字段。
context一般只有preview和edit，用来进行环境判断。

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

@@ -2,90 +2,10 @@
* @Author: yehuozhili
* @Date: 2021-01-31 20:44:16
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-20 16:15:34
* @LastEditTime: 2021-07-27 14:57:23
* @FilePath: \dooringx\packages\dooringx-lib\README.md
-->
## Dooringx-lib
## changelog
## 0.6.0
已支持编辑模式使用Iframe！
修复选中条件。
## 0.5.1
修复右侧选中不能取消选中问题。
## 0.5.0
修复control组件宽度不够问题。
移除antd自定义icon，容器底部icon可配置。
## 0.4.2
修复animate错误初始值。
修改markline样式。
全局设置增加容器高度。
## 0.4.1
去除lib自动导入样式。
## 0.4.0
去除runtime导出，所有属性从config中获取。
## 0.3.1
1、由uuid更换为nanoid。
2、control组件增加标尺控制。
## 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设置
## 0.1.8
增加弹窗设置，移除modalContainer
## 0.1.7
修改预览特殊条件显示，删除console
## 0.1.6
调整初始缩放，画布初始比例，增加回正画布功能。
## 0.1.5
删除未作按钮，增加fixed配置
## 0.1.4
基础功能
## todo
1、重构拖拽，优化性能与config传递。
开发中，即将开源

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

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

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

@@ -67,7 +67,7 @@ function Container(props: PropsWithChildren<ContainerProps>) {
{...(props.context === 'edit' ? containerFocusRemove(props.config) : null)}
>
{props.context === 'edit' && (
<NormalMarkLineRender config={props.config}></NormalMarkLineRender>
<NormalMarkLineRender config={props.config} iframe={false}></NormalMarkLineRender>
)}
{props.state.block.map((v) => {
return (

8
packages/dooringx-lib/src/components/iframeContainer.tsx
View File

@@ -2,13 +2,12 @@
* @Author: yehuozhili
* @Date: 2021-07-17 10:08:08
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-20 16:26:24
* @LastEditTime: 2021-07-27 14:42:00
* @FilePath: \dooringx\packages\dooringx-lib\src\components\iframeContainer.tsx
*/
import { containerDragResolve } from '../core/crossDrag';
import { containerFocusRemove } from '../core/focusHandler';
import { innerContainerDrag } from '../core/innerDrag';
import { NormalMarkLineRender } from '../core/markline';
import { IStoreData } from '../core/store/storetype';
import { wrapperMoveState } from './IframeWrapperMove/event';
import { CSSProperties, PropsWithChildren, useEffect, useMemo, useState } from 'react';
@@ -125,11 +124,8 @@ function Container(props: PropsWithChildren<ContainerProps>) {
}}
{...(props.context === 'edit' ? containerDragResolve(props.config) : null)}
{...(props.context === 'edit' ? innerContainerDrag(props.config) : null)}
{...(props.context === 'edit' ? containerFocusRemove(props.config, true) : null)}
{...(props.context === 'edit' ? containerFocusRemove(props.config) : null)}
>
{props.context === 'edit' && (
<NormalMarkLineRender config={props.config}></NormalMarkLineRender>
)}
{state.block.map((v) => {
return (
<Blocks

6
packages/dooringx-lib/src/components/iframeTarget.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-07-20 10:36:55
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-20 16:13:07
* @LastEditTime: 2021-07-27 15:13:35
* @FilePath: \dooringx\packages\dooringx-lib\src\components\iframeTarget.tsx
*/
import React from 'react';
@@ -10,6 +10,7 @@ import UserConfig from '../config';
import { containerDragResolve } from '../core/crossDrag';
import { containerFocusRemove } from '../core/focusHandler';
import { innerContainerDrag } from '../core/innerDrag';
import { NormalMarkLineRender } from '../core/markline';
import { containerResizer } from '../core/resizeHandler/containerResizer';
import Blocks from './blocks';
@@ -35,7 +36,7 @@ export function IframeTarget(props: IframeTargetProps) {
<div
{...containerDragResolve(props.config)}
{...innerContainerDrag(props.config)}
{...containerFocusRemove(props.config, true)}
{...containerFocusRemove(props.config)}
style={{
width: state.container.width * scaleState.value,
height: state.container.height * scaleState.value,
@@ -64,6 +65,7 @@ export function IframeTarget(props: IframeTargetProps) {
></Blocks>
);
})}
{<NormalMarkLineRender config={props.config} iframe={true}></NormalMarkLineRender>}
</div>
</div>
<iframe

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-20 15:39:47
* @LastEditTime: 2021-07-27 14:36:07
* @FilePath: \dooringx\packages\dooringx-lib\src\core\focusHandler\index.tsx
*/
import { innerDragState } from '../innerDrag/state';
@@ -12,7 +12,7 @@ import { selectRangeMouseDown } from '../selectRange';
import { unmountContextMenu } from '../contextMenu';
import UserConfig from '../../config';
export function containerFocusRemove(config: UserConfig, iframe = false) {
export function containerFocusRemove(config: UserConfig) {
const store = config.getStore();
const onMouseDown = (e: React.MouseEvent) => {
@@ -25,7 +25,7 @@ export function containerFocusRemove(config: UserConfig, iframe = false) {
focusState.blocks = [];
store.setData({ ...clonedata, block: newBlock });
if (!innerDragState.item) {
selectRangeMouseDown(e, config, iframe);
selectRangeMouseDown(e, config);
}
unmountContextMenu();
};

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

@@ -105,13 +105,13 @@ export const innerContainerDrag = function (config: UserConfig) {
onMouseMove,
};
};
export const innerContainerDragUp = function (config: UserConfig, iframe = false) {
export const innerContainerDragUp = function (config: UserConfig) {
const store = config.getStore();
const onMouseUp = (e: React.MouseEvent) => {
// e.preventDefault(); 这个会导致无法取消选中
iframeWrapperMove(config);
wrapperMoveMouseUp(config);
selectRangeMouseUp(e, config, iframe);
selectRangeMouseUp(e, config);
if (innerDragState.ref && innerDragState.ref.current) {
innerDragState.ref.current.style.cursor = 'default';
innerDragState.ref.current.style.willChange = 'auto';

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

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-27 11:18:48
* @LastEditTime: 2021-07-27 15:33:35
* @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\calcRender.ts
*/
import { innerDragState } from '../innerDrag/state';
@@ -56,7 +56,7 @@ export function getComponentRotatedStyle(
return style;
}
export function marklineCalRender(config: UserConfig): LinesTypes {
export function marklineCalRender(config: UserConfig, iframe: boolean): LinesTypes {
const store = config.getStore();
//focus可能好几个，做对比的是拖拽那个
const lines: LinesTypes = { x: [], y: [] };
@@ -121,6 +121,11 @@ export function marklineCalRender(config: UserConfig): LinesTypes {
}
}
}
// 如果是iframe 需要刷给iframe
if (iframe) {
config.refreshIframe();
}
}
return lines;

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

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-26 15:01:06
* @LastEditTime: 2021-07-27 15:14:34
* @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\index.tsx
*/
import React from 'react';
@@ -41,8 +41,8 @@ export function MarklineY(props: any) {
);
}
export function NormalMarkLineRender(props: { config: UserConfig }) {
const lines = marklineCalRender(props.config);
export function NormalMarkLineRender(props: { config: UserConfig; iframe: boolean }) {
const lines = marklineCalRender(props.config, props.iframe);
const render = useMemo(() => {
return (
<>

6
packages/dooringx-lib/src/core/markline/marklineConfig.ts
View File

@@ -2,8 +2,8 @@
* @Author: yehuozhili
* @Date: 2021-03-14 11:49:13
* @LastEditors: yehuozhili
* @LastEditTime: 2021-03-14 11:49:31
* @FilePath: \dooring-v2\src\core\markline\marklineConfig.ts
* @LastEditTime: 2021-07-27 15:09:33
* @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\marklineConfig.ts
*/
import { IBlockType } from '../store/storetype';
@@ -18,7 +18,7 @@ export interface MarklineConfigType {
// 间隔距离执行吸附
export const marklineConfig: MarklineConfigType = {
indent: 2,
indent: 5,
isAbsorb: true,
mode: 'normal',
gridIndent: 50,

8
packages/dooringx-lib/src/core/markline/normalMode.ts
View File

@@ -99,9 +99,9 @@ export function newMarklineDisplay(
diffX = l + w / 2 - left - width;
}
// 头对尾
else if (Math.abs((l + w - left) / 2) < marklineConfig.indent) {
else if (Math.abs(l + w - left) < marklineConfig.indent) {
lines.y.push(l + w);
diffX = (l + w - left) / 2;
diffX = l + w - left;
}
// 中对尾
else if (Math.abs(l + w - left - width / 2) < marklineConfig.indent) {
@@ -109,9 +109,9 @@ export function newMarklineDisplay(
diffX = l + w - left - width / 2;
}
// 尾对尾
else if (Math.abs((l + w - left - width) / 2) < marklineConfig.indent) {
else if (Math.abs(l + w - left - width) < marklineConfig.indent) {
lines.y.push(l + w);
diffX = (l + w - left - width) / 2;
diffX = l + w - left - width;
}
focus.left = Math.round(focus.left + diffX);
}

11
packages/dooringx-lib/src/core/rotateHandler/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-07-21 20:51:58
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-22 20:51:08
* @LastEditTime: 2021-07-27 14:53:15
* @FilePath: \dooringx\packages\dooringx-lib\src\core\rotateHandler\index.tsx
*/
import React from 'react';
@@ -11,6 +11,7 @@ import UserConfig from '../../config';
import { IBlockType } from '../store/storetype';
import styles from '../../index.less';
import { deepCopy } from '../utils';
import { ReloadOutlined } from '@ant-design/icons';
interface rotateStateType {
startX: number;
@@ -96,7 +97,13 @@ export function RotateResizer(props: RotateResizerProps) {
onMouseDown(e, props.data, props.rect, props.config);
}}
className={styles.rotate}
></div>
>
<ReloadOutlined
style={{
color: '#2196f3',
}}
/>
</div>
);
} else {
return null;

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

@@ -19,7 +19,7 @@ export const selectData: SelectDataProps = {
startY: 0,
};
export function selectRangeMouseDown(e: React.MouseEvent, config: UserConfig, iframe: boolean) {
export function selectRangeMouseDown(e: React.MouseEvent, config: UserConfig) {
if (!selectData.selectDiv) {
selectData.selectDiv = document.createElement('div');
}
@@ -33,7 +33,7 @@ export function selectRangeMouseDown(e: React.MouseEvent, config: UserConfig, if
selectData.selectDiv.style.top = e.clientY + 'px';
selectData.selectDiv.style.position = 'fixed';
document.body.appendChild(selectData.selectDiv);
selectData.selectDiv.onmouseup = (e) => selectRangeMouseUp(e, config, iframe);
selectData.selectDiv.onmouseup = (e) => selectRangeMouseUp(e, config);
selectData.selectDiv.onmousemove = (e) => selectRangeMouseMove(e);
}
}
@@ -92,11 +92,7 @@ function selectFocus(left: number, top: number, width: number, height: number, c
}
}
export function selectRangeMouseUp(
e: React.MouseEvent | MouseEvent,
config: UserConfig,
iframe = false
) {
export function selectRangeMouseUp(e: React.MouseEvent | MouseEvent, config: UserConfig) {
if (selectData.selectDiv) {
// 这里需要判定区域
// 如果是react触发 ，left和top就是起始值和终止值的最小值
@@ -115,10 +111,6 @@ export function selectRangeMouseUp(
left = selectData.startX - wwidth;
top = selectData.startY - wheight;
}
if (iframe) {
left = left / scale;
top = top / scale;
}
selectFocus(left, top, wwidth, wheight, config);
selectData.selectDiv.parentNode!.removeChild(selectData.selectDiv);
selectData.selectDiv = null;

9
packages/dooringx-lib/src/index.less
View File

@@ -174,11 +174,8 @@
.rotate {
position: absolute;
top: -30px;
left: calc(50% - 6px);
height: 12px;
width: 12px;
border-radius: 50%;
background-color: #2196f3;
top: -35px;
left: calc(50% - 10px);
cursor: grab;
font-size: 20px;
}