From e95eadcc5ec0edb315b41be4b9e4794f1350dade Mon Sep 17 00:00:00 2001 From: yehuozhili <673632758@qq.com> Date: Fri, 31 Dec 2021 00:30:09 +0800 Subject: [PATCH] update 0.11.2 --- CHANGELOG.md | 4 + .../docs/ChangeLog/index.en.md | 2 + .../dooringx-dumi-doc/docs/ChangeLog/index.md | 4 + packages/dooringx-lib/README.md | 1 + packages/dooringx-lib/package.json | 2 +- .../dooringx-lib/src/core/innerDrag/index.ts | 6 + .../src/core/markline/calcRender.ts | 107 ++++++++++++++---- .../dooringx-lib/src/core/markline/state.ts | 31 +++++ packages/dooringx-lib/src/core/utils/index.ts | 22 ++++ .../dooringx-plugin-template/package.json | 2 +- .../template/template.json | 2 +- 11 files changed, 161 insertions(+), 22 deletions(-) create mode 100644 packages/dooringx-lib/src/core/markline/state.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 2ce94c4..b8190b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 0.11.2 + +优化拖拽速度 + ## 0.11.1 兼容旧的属性 diff --git a/packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md b/packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md index b39c43f..0bf8e8e 100644 --- a/packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md +++ b/packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md @@ -5,6 +5,8 @@ nav: title: change log order: 6 --- +## 0.11.2 +Optimize drag speed ## 0.11.1 Compatible with legacy properties ## 0.11.0 diff --git a/packages/dooringx-dumi-doc/docs/ChangeLog/index.md b/packages/dooringx-dumi-doc/docs/ChangeLog/index.md index 160d443..e4f0264 100644 --- a/packages/dooringx-dumi-doc/docs/ChangeLog/index.md +++ b/packages/dooringx-dumi-doc/docs/ChangeLog/index.md @@ -5,6 +5,10 @@ nav: title: 变更日志 order: 6 --- +## 0.11.2 + +优化拖拽速度 + ## 0.11.1 兼容旧的属性 diff --git a/packages/dooringx-lib/README.md b/packages/dooringx-lib/README.md index 6e9b859..06a34ff 100644 --- a/packages/dooringx-lib/README.md +++ b/packages/dooringx-lib/README.md @@ -13,6 +13,7 @@ This is the repository for DooringX. - 🔥 Written in TypeScript - 🛠️ Rich Features - 🔩 Universal Plugin Interface +- 🔥 website: [官网地址](http://x.dooring.cn/dooringx-org) - 🏠 预览 [x.dooring](http://x.dooring.cn/editor/home) # 简介 | Brief Intro diff --git a/packages/dooringx-lib/package.json b/packages/dooringx-lib/package.json index 5be06a7..0613946 100644 --- a/packages/dooringx-lib/package.json +++ b/packages/dooringx-lib/package.json @@ -1,5 +1,5 @@ { - "version": "0.11.1", + "version": "0.11.2", "license": "MIT", "main": "dist/index.js", "module": "dist/dooringx-lib.esm.js", diff --git a/packages/dooringx-lib/src/core/innerDrag/index.ts b/packages/dooringx-lib/src/core/innerDrag/index.ts index 5df0802..ed04097 100644 --- a/packages/dooringx-lib/src/core/innerDrag/index.ts +++ b/packages/dooringx-lib/src/core/innerDrag/index.ts @@ -12,6 +12,7 @@ import { innerDragState } from './state'; import UserConfig from '../../config'; import { rotateMouseMove, rotateMouseUp } from '../rotateHandler'; import { specialCoList } from '../utils/special'; +import { marklineState } from '../markline/state'; export const innerDrag = function ( item: IBlockType, @@ -133,6 +134,11 @@ export const innerContainerDragUp = function (config: UserConfig) { const store = config.getStore(); const onMouseUp = (e: React.MouseEvent) => { // e.preventDefault(); 这个会导致无法取消选中 + marklineState.cache = null; + marklineState.sortLeft = null; + marklineState.sortTop = null; + marklineState.sortRight = null; + marklineState.sortBottom = null; iframeWrapperMove(config); wrapperMoveMouseUp(config); selectRangeMouseUp(e, config); diff --git a/packages/dooringx-lib/src/core/markline/calcRender.ts b/packages/dooringx-lib/src/core/markline/calcRender.ts index f72a81c..a8b9cd1 100644 --- a/packages/dooringx-lib/src/core/markline/calcRender.ts +++ b/packages/dooringx-lib/src/core/markline/calcRender.ts @@ -2,14 +2,15 @@ * @Author: yehuozhili * @Date: 2021-03-14 04:29:09 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-27 15:33:35 + * @LastEditTime: 2021-12-31 00:25:43 * @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\calcRender.ts */ import { innerDragState } from '../innerDrag/state'; import { newMarklineDisplay } from './normalMode'; import { marklineConfig } from './marklineConfig'; import UserConfig from '../../config'; -import { angleToRadian, getContainer } from '../utils'; +import { angleToRadian, binarySearchRemain, getContainer } from '../utils'; +import { marklineState, RealStyleType } from './state'; export interface LinesTypes { x: number[]; y: number[]; @@ -101,23 +102,91 @@ export function marklineCalRender(config: UserConfig, iframe: boolean): LinesTyp } const unfocus = marklineConfig.marklineUnfocus; const len = unfocus.length; - for (let i = 0; i < len; i++) { - const v = unfocus[i]; - const l = v?.left; - const t = v?.top; - const w = v?.width; - const h = v?.height; - if ( - typeof l === 'number' && - typeof t === 'number' && - typeof w === 'number' && - typeof h === 'number' - ) { - const ro = v.rotate.value; - const rstyle = getComponentRotatedStyle(ro, w, h, l, t); - newMarklineDisplay(realStyle, rstyle, lines, focus); - if (lines.x.length !== 0 || lines.y.length !== 0) { - break; + + // 只要cache里有东西，说明有缓存 + if (marklineState.cache) { + if (!marklineState.sortLeft) { + marklineState.sortLeft = Object.values(marklineState.cache).sort((a, b) => { + return a.left - b.left; + }); + } + if (!marklineState.sortTop) { + marklineState.sortTop = Object.values(marklineState.cache).sort((a, b) => { + return a.top - b.top; + }); + } + if (!marklineState.sortBottom) { + marklineState.sortBottom = Object.values(marklineState.cache).sort((a, b) => { + return a.bottom - b.bottom; + }); + } + if (!marklineState.sortRight) { + marklineState.sortRight = Object.values(marklineState.cache).sort((a, b) => { + return a.right - b.right; + }); + } + const indexLeft = binarySearchRemain( + realStyle.left, + marklineState.sortLeft, + 'left', + marklineConfig.indent + ); + if (indexLeft) { + newMarklineDisplay(realStyle, indexLeft, lines, focus); + } + const indexTop = binarySearchRemain( + realStyle.top, + marklineState.sortTop, + 'top', + marklineConfig.indent + ); + if (indexTop) { + newMarklineDisplay(realStyle, indexTop, lines, focus); + } + const indexRight = binarySearchRemain( + realStyle.right, + marklineState.sortRight, + 'right', + marklineConfig.indent + ); + if (indexRight) { + newMarklineDisplay(realStyle, indexRight, lines, focus); + } + const indexBottom = binarySearchRemain( + realStyle.bottom, + marklineState.sortBottom, + 'bottom', + marklineConfig.indent + ); + if (indexBottom) { + newMarklineDisplay(realStyle, indexBottom, lines, focus); + } + } else { + for (let i = 0; i < len; i++) { + const v = unfocus[i]; + const l = v?.left; + const t = v?.top; + const w = v?.width; + const h = v?.height; + if ( + typeof l === 'number' && + typeof t === 'number' && + typeof w === 'number' && + typeof h === 'number' + ) { + const ro = v.rotate.value; + const rstyle = getComponentRotatedStyle(ro, w, h, l, t); + if (!marklineState.cache) { + marklineState.cache = { + [v.id]: rstyle, + }; + } else { + marklineState.cache[v.id] = rstyle; + } + newMarklineDisplay(realStyle, rstyle, lines, focus); + // if (lines.x.length !== 0 || lines.y.length !== 0) { + // break; 这里不能break要算完所有值 + // } } } } diff --git a/packages/dooringx-lib/src/core/markline/state.ts b/packages/dooringx-lib/src/core/markline/state.ts new file mode 100644 index 0000000..b03674a --- /dev/null +++ b/packages/dooringx-lib/src/core/markline/state.ts @@ -0,0 +1,31 @@ +/* + * @Author: yehuozhili + * @Date: 2021-12-30 23:02:30 + * @LastEditors: yehuozhili + * @LastEditTime: 2021-12-31 00:13:09 + * @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\state.ts + */ +export interface RealStyleType { + [x: string]: number; + left: number; + width: number; + height: number; + right: number; + top: number; + bottom: number; +} + +interface MarklineStateType { + cache: null | Record; + sortLeft: null | Array; + sortTop: null | Array; + sortRight: null | Array; + sortBottom: null | Array; +} +export const marklineState: MarklineStateType = { + cache: null, + sortLeft: null, + sortTop: null, + sortRight: null, + sortBottom: null, +}; diff --git a/packages/dooringx-lib/src/core/utils/index.ts b/packages/dooringx-lib/src/core/utils/index.ts index 33767f6..4ea8734 100644 --- a/packages/dooringx-lib/src/core/utils/index.ts +++ b/packages/dooringx-lib/src/core/utils/index.ts @@ -310,3 +310,25 @@ export function getContainer() { } return container; } + +export function binarySearchRemain>( + target: number, + arr: Array, + attribute: keyof T, + indent: number +) { + let start = 0; + let end = arr.length - 1; + + while (start <= end) { + var mid = parseInt(start + (end - start) / 2 + ''); + if (target === arr[mid][attribute] || Math.abs(target - arr[mid][attribute]) < indent) { + return arr[mid]; + } else if (target > arr[mid][attribute]) { + start = mid + 1; + } else { + end = mid - 1; + } + } + return null; +} diff --git a/packages/dooringx-plugin-template/package.json b/packages/dooringx-plugin-template/package.json index 3357ece..9b5b337 100644 --- a/packages/dooringx-plugin-template/package.json +++ b/packages/dooringx-plugin-template/package.json @@ -1,6 +1,6 @@ { "name": "dooringx-plugin-template", - "version": "0.11.1", + "version": "0.11.2", "description": "> TODO: description", "author": "yehuozhili <673632758@qq.com>", "homepage": "https://github.com/H5-Dooring/dooringx#readme", diff --git a/packages/dooringx-plugin-template/template/template.json b/packages/dooringx-plugin-template/template/template.json index 5bed1b3..21fc138 100644 --- a/packages/dooringx-plugin-template/template/template.json +++ b/packages/dooringx-plugin-template/template/template.json @@ -40,7 +40,7 @@ "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@svgr/rollup": "^5.5.0", - "dooringx-lib": "^0.11.1", + "dooringx-lib": "^0.11.2", "postcss": "^8.3.6", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.1",