change pkg

packages/dooringx-lib/src/components/wrapperMove/event.ts

@@ -0,0 +1,68 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-02-21 22:17:29
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-04-05 18:24:27
+ * @FilePath: \dooringv2\src\components\wrapperMove\event.ts
+ */
+import { store } from '../../runtime/store';
+import { RefObject } from 'react';
+import { containerResizer } from '../../core/resizeHandler/containerResizer';
+import { contextMenuState } from '../../core/contextMenu';
+
+export interface WrapperMoveStateProps {
+	isDrag: boolean;
+	startX: number;
+	startY: number;
+	needX: number;
+	needY: number;
+	ref: null | RefObject<HTMLDivElement>;
+}
+
+export const wrapperMoveState: WrapperMoveStateProps = {
+	isDrag: false,
+	startX: 0,
+	startY: 0,
+	needX: 0,
+	needY: 0,
+	ref: null,
+};
+
+export const wrapperEvent = (ref: RefObject<HTMLDivElement>) => {
+	return {
+		onMouseDown: (e: React.MouseEvent) => {
+			// e.preventDefault();// 不能使用preventDefault 否则弹窗输入框焦点无法触发
+			contextMenuState.unmountContextMenu();
+			if (e.target !== ref.current) {
+			} else {
+				wrapperMoveState.isDrag = true;
+				wrapperMoveState.startX = e.clientX;
+				wrapperMoveState.startY = e.clientY;
+				if (ref.current) {
+					ref.current.style.cursor = 'grab';
+					wrapperMoveState.ref = ref;
+				}
+			}
+		},
+		onMouseMove: (e: React.MouseEvent) => {
+			e.preventDefault();
+			if (wrapperMoveState.isDrag) {
+				const diffX = e.clientX - wrapperMoveState.startX;
+				const diffY = e.clientY - wrapperMoveState.startY;
+				wrapperMoveState.needX = wrapperMoveState.needX + diffX;
+				wrapperMoveState.needY = wrapperMoveState.needY + diffY;
+				wrapperMoveState.startX = e.clientX;
+				wrapperMoveState.startY = e.clientY;
+				store.forceUpdate();
+			}
+			containerResizer.onMouseMove(e);
+		},
+	};
+};
+export const wrapperMoveMouseUp = () => {
+	if (wrapperMoveState.ref && wrapperMoveState.ref.current) {
+		wrapperMoveState.ref.current.style.cursor = 'default';
+	}
+	containerResizer.onMouseUp();
+	wrapperMoveState.isDrag = false;
+};

packages/dooringx-lib/src/components/wrapperMove/index.tsx

@@ -0,0 +1,44 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-03-14 04:29:09
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-03-14 04:58:51
+ * @FilePath: \dooring-v2\src\core\wrapperMove\index.tsx
+ */
+import { AllHTMLAttributes, CSSProperties, PropsWithChildren, useRef } from 'react';
+import { wrapperEvent } from './event';
+import { onWheelEvent } from '../../core/scale';
+import React from 'react';
+
+export interface ContainerWrapperProps extends AllHTMLAttributes<HTMLDivElement> {
+	classNames?: string;
+	style?: CSSProperties;
+}
+
+function ContainerWrapper(props: PropsWithChildren<ContainerWrapperProps>) {
+	const { children, style, classNames, ...rest } = props;
+	const ref = useRef<HTMLDivElement>(null);
+	return (
+		<div
+			className={`ant-menu ${classNames}`}
+			ref={ref}
+			style={{
+				backgroundColor: '#f0f0f0',
+				height: '100%',
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+				flex: 1,
+				position: 'relative',
+				overflow: 'hidden',
+				...style,
+			}}
+			{...wrapperEvent(ref)}
+			{...onWheelEvent}
+			{...rest}
+		>
+			{children}
+		</div>
+	);
+}
+export default ContainerWrapper;