) => {
- const offsetX = e.nativeEvent.offsetX;
- const offestY = e.nativeEvent.offsetY;
+ const offsetX = Math.round(e.nativeEvent.offsetX);
+ const offestY = Math.round(e.nativeEvent.offsetY);
//drop后修改store，
if (currentDrag) {
// 还需要拿到注册的组件状态
diff --git a/packages/dooringx-lib/src/core/innerDrag/index.ts b/packages/dooringx-lib/src/core/innerDrag/index.ts
index 283f1e2..7a3bd05 100644
--- a/packages/dooringx-lib/src/core/innerDrag/index.ts
+++ b/packages/dooringx-lib/src/core/innerDrag/index.ts
@@ -39,8 +39,8 @@ export const innerDrag = function (
ref.current.style.cursor = 'move';
ref.current.style.willChange = 'left,right,width,height';
}
- innerDragState.startX = e.clientX;
- innerDragState.startY = e.clientY;
+ innerDragState.startX = Math.round(e.clientX);
+ innerDragState.startY = Math.round(e.clientY);
innerDragState.item = item;
innerDragState.isDrag = true;
innerDragState.ref = ref;
@@ -69,30 +69,30 @@ export const innerContainerDrag = function (config: UserConfig) {
let { clientX: moveX, clientY: moveY } = e;
const { startX, startY } = innerDragState;
const scale = scaleState.value;
- let durX = (moveX - startX) / scale;
- let durY = (moveY - startY) / scale;
+ let durX = Math.round((moveX - startX) / scale);
+ let durY = Math.round((moveY - startY) / scale);
let newblock: IBlockType[];
if (lastblock !== innerDragState.item) {
const cloneblock: IBlockType[] = deepCopy(store.getData().block);
lastblock = innerDragState.item;
newblock = cloneblock.map((v) => {
if (v.focus && v.position !== 'static') {
- v.left = v.left + durX;
- v.top = v.top + durY;
+ v.left = Math.round(v.left + durX);
+ v.top = Math.round(v.top + durY);
}
return v;
});
} else {
newblock = store.getData().block.map((v) => {
if (v.focus && v.position !== 'static') {
- v.left = v.left + durX;
- v.top = v.top + durY;
+ v.left = Math.round(v.left + durX);
+ v.top = Math.round(v.top + durY);
}
return v;
});
}
- innerDragState.startX = moveX;
- innerDragState.startY = moveY;
+ innerDragState.startX = Math.round(moveX);
+ innerDragState.startY = Math.round(moveY);
store.setData({ ...store.getData(), block: newblock });
}
resizerMouseMove(e, config);
diff --git a/packages/dooringx-lib/src/core/markline/calcRender.ts b/packages/dooringx-lib/src/core/markline/calcRender.ts
index c0a6ac4..7e0bd82 100644
--- a/packages/dooringx-lib/src/core/markline/calcRender.ts
+++ b/packages/dooringx-lib/src/core/markline/calcRender.ts
@@ -2,22 +2,64 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-26 11:38:11
+ * @LastEditTime: 2021-07-26 20:51:41
* @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\calcRender.ts
*/
import { innerDragState } from '../innerDrag/state';
-import { switchMarklineDisplay } from './normalMode';
-import { resizeCurrentCalculate } from './resizeMarkline';
+import { newMarklineDisplay } from './normalMode';
import { marklineConfig } from './marklineConfig';
import UserConfig from '../../config';
+import { angleToRadian, getContainer } from '../utils';
export interface LinesTypes {
x: number[];
y: number[];
}
-export function marklineCalRender(config: UserConfig) {
+export function cos(rotate: number) {
+ return Math.abs(Math.cos(angleToRadian(rotate)));
+}
+export function sin(rotate: number) {
+ return Math.abs(Math.sin(angleToRadian(rotate)));
+}
+
+export function getComponentRotatedStyle(
+ rotate: number,
+ width: number,
+ height: number,
+ left: number,
+ right: number,
+ top: number,
+ bottom: number
+) {
+ const style = {
+ left,
+ width,
+ height,
+ right,
+ top,
+ bottom,
+ };
+ if (rotate !== 0) {
+ const newWidth = style.width * cos(rotate) + style.height * sin(rotate);
+ const diffX = (style.width - newWidth) / 2; // 旋转后范围变小是正值，变大是负值
+ style.left += diffX;
+ style.right = style.left + newWidth;
+ const newHeight = style.height * cos(rotate) + style.width * sin(rotate);
+ const diffY = (newHeight - style.height) / 2; // 始终是正
+ style.top -= diffY;
+ style.bottom = style.top + newHeight;
+ style.width = newWidth;
+ style.height = newHeight;
+ } else {
+ style.bottom = style.top + style.height;
+ style.right = style.left + style.width;
+ }
+
+ return style;
+}
+
+export function marklineCalRender(config: UserConfig): LinesTypes {
const store = config.getStore();
- const scaleState = config.getScaleState();
//focus可能好几个，做对比的是拖拽那个
const lines: LinesTypes = { x: [], y: [] };
if (innerDragState.item?.position === 'static' || innerDragState.item?.position === 'relative') {
@@ -28,7 +70,19 @@ export function marklineCalRender(config: UserConfig) {
const ref = innerDragState.ref;
if (item && ref && ref.current && innerDragState.isDrag) {
+ // 这个被拷贝过，所以必须重新获取
const focus = store.getData().block.find((v) => v.id === item.id)!;
+ if (!focus) {
+ return lines;
+ }
+ const container = getContainer();
+ if (!container) {
+ return lines;
+ }
+ if (typeof focus.width !== 'number' || typeof focus.height !== 'number') {
+ return lines;
+ }
+
if (!marklineConfig.marklineUnfocus) {
marklineConfig.marklineUnfocus = store
.getData()
@@ -36,17 +90,25 @@ export function marklineCalRender(config: UserConfig) {
(v) => v.focus === false && v.position !== 'static' && v.position !== 'relative'
);
}
- const { width, height } = ref.current.getBoundingClientRect();
- // left 和top 被深拷贝过，最新的值需要即时获取
- const left = focus?.left;
- const top = focus?.top;
+ const left = focus.left;
+ const top = focus.top;
+ const rotate = focus.rotate.value;
+ const width = focus.width;
+ const height = focus.height;
+ const realStyle = getComponentRotatedStyle(
+ rotate,
+ width,
+ height,
+ left,
+ left + width,
+ top,
+ top + height
+ );
+
if (typeof left !== 'number' || typeof top !== 'number') {
- return lines; //莫名可能没有这2值
+ return lines; //可能没有这2值
}
- const scale = scaleState.value;
- const wwidth = width / scale;
- const wheight = height / scale;
marklineConfig.marklineUnfocus.forEach((v) => {
let l = v?.left;
@@ -54,26 +116,19 @@ export function marklineCalRender(config: UserConfig) {
if (typeof l !== 'number' || typeof t !== 'number') {
console.warn(`${v} component miss top or left`);
} else {
- // 如果不是由外层容器决定的则没有这2属性
+ // 如果拿实例可能有性能问题，暂直接计算。
const w = v.width;
const h = v.height;
-
- // 只有满足要求的才进行push
- if (marklineConfig.mode === 'normal') {
- switchMarklineDisplay(l, t, w, h, left, top, wwidth, wheight, lines, focus);
+ if (typeof w === 'number' && typeof h === 'number') {
+ const ro = v.rotate.value;
+ const r = l + w;
+ const b = t + h;
+ const rstyle = getComponentRotatedStyle(ro, w, h, l, r, t, b);
+ newMarklineDisplay(realStyle, rstyle, lines, focus);
}
}
});
- // if (marklineConfig.mode === 'grid' && marklineConfig.isAbsorb) {
- // gridModeDisplay(left, top, focus, config);该模式暂废弃
- // }
}
- // if (marklineConfig.mode === 'grid') {
- // grideModeRender(lines, config);该模式暂废弃
- // }
-
- resizeCurrentCalculate(lines, config);
-
return lines;
}
diff --git a/packages/dooringx-lib/src/core/markline/index.tsx b/packages/dooringx-lib/src/core/markline/index.tsx
index 9b8dc02..d168d74 100644
--- a/packages/dooringx-lib/src/core/markline/index.tsx
+++ b/packages/dooringx-lib/src/core/markline/index.tsx
@@ -2,36 +2,14 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-13 20:38:59
+ * @LastEditTime: 2021-07-26 15:01:06
* @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\index.tsx
*/
import React from 'react';
import { useMemo } from 'react';
import UserConfig from '../../config';
-import { IBlockType } from '../store/storetype';
import { marklineCalRender } from './calcRender';
-// 主要逻辑需要注入组件内拖拽
-
-export interface MarklineConfigType {
- indent: number;
- isAbsorb: boolean;
- mode: 'normal' | 'grid';
- gridIndent: number;
- resizeIndent: number;
- marklineUnfocus: null | IBlockType[];
-}
-
-// 间隔距离执行吸附
-export const marklineConfig: MarklineConfigType = {
- indent: 2,
- isAbsorb: true,
- mode: 'normal',
- gridIndent: 50,
- resizeIndent: 0,
- marklineUnfocus: null,
-};
-
export function MarklineX(props: any) {
return (
{
resizeState.ref?.current &&
resizeState.currentTarget
) {
- let { clientX: moveX, clientY: moveY } = e;
+ const { clientX: moveX, clientY: moveY } = e;
const scale = scaleState.value;
- let container = document.querySelector('#yh-container');
- if (!container) {
- container = document.querySelector('#yh-container-iframe');
- }
+ const container = getContainer();
if (!container) {
return;
}
diff --git a/packages/dooringx-lib/src/core/utils/index.ts b/packages/dooringx-lib/src/core/utils/index.ts
index d6f474a..c1d0885 100644
--- a/packages/dooringx-lib/src/core/utils/index.ts
+++ b/packages/dooringx-lib/src/core/utils/index.ts
@@ -294,3 +294,11 @@ export function postMessage(value: any, src: string, target = 'yh-container-ifra
export function angleToRadian(angle: number) {
return (angle * Math.PI) / 180;
}
+
+export function getContainer() {
+ let container = document.querySelector('#yh-container');
+ if (!container) {
+ container = document.querySelector('#yh-container-iframe');
+ }
+ return container;
+}
diff --git a/packages/dooringx-lib/tsdx.config.js b/packages/dooringx-lib/tsdx.config.js
index b3aa294..2fedced 100644
--- a/packages/dooringx-lib/tsdx.config.js
+++ b/packages/dooringx-lib/tsdx.config.js
@@ -2,14 +2,15 @@
* @Author: yehuozhili
* @Date: 2021-03-14 05:02:28
* @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-04 16:40:17
- * @FilePath: \DooringV2\packages\dooring-v2-lib\tsdx.config.js
+ * @LastEditTime: 2021-07-26 14:55:29
+ * @FilePath: \dooringx\packages\dooringx-lib\tsdx.config.js
*/
const postcss = require('rollup-plugin-postcss');
const replace = require('@rollup/plugin-replace');
module.exports = {
rollup(config, options) {
+ config.output.banner = '// 有问题请加QQ 673632758 by yehuozhili';
config.plugins.push(
postcss({
inject: false,