update 0.3.0
This commit is contained in:
hufeixiong
@@ -2,13 +2,13 @@
|
||||
* @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
|
||||
* @LastEditTime: 2021-07-12 20:33:14
|
||||
* @FilePath: \dooringx\packages\dooringx-lib\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';
|
||||
import UserConfig from '../../config';
|
||||
|
||||
export interface WrapperMoveStateProps {
|
||||
isDrag: boolean;
|
||||
@@ -28,7 +28,9 @@ export const wrapperMoveState: WrapperMoveStateProps = {
|
||||
ref: null,
|
||||
};
|
||||
|
||||
export const wrapperEvent = (ref: RefObject<HTMLDivElement>) => {
|
||||
export const wrapperEvent = (ref: RefObject<HTMLDivElement>, config: UserConfig) => {
|
||||
const scale = config.getScaleState().value;
|
||||
const store = config.getStore();
|
||||
return {
|
||||
onMouseDown: (e: React.MouseEvent) => {
|
||||
// e.preventDefault();// 不能使用preventDefault 否则弹窗输入框焦点无法触发
|
||||
@@ -49,10 +51,11 @@ export const wrapperEvent = (ref: RefObject<HTMLDivElement>) => {
|
||||
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.needX = wrapperMoveState.needX + diffX / scale;
|
||||
wrapperMoveState.needY = wrapperMoveState.needY + diffY / scale;
|
||||
wrapperMoveState.startX = e.clientX;
|
||||
wrapperMoveState.startY = e.clientY;
|
||||
|
||||
store.forceUpdate();
|
||||
}
|
||||
containerResizer.onMouseMove(e);
|
||||
|
||||
@@ -2,15 +2,18 @@
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-03-14 04:29:09
|
||||
* @LastEditors: yehuozhili
|
||||
* @LastEditTime: 2021-07-12 15:24:29
|
||||
* @LastEditTime: 2021-07-12 19:47:39
|
||||
* @FilePath: \dooringx\packages\dooringx-lib\src\components\wrapperMove\index.tsx
|
||||
*/
|
||||
import { AllHTMLAttributes, CSSProperties, PropsWithChildren, useRef } from 'react';
|
||||
import { wrapperEvent } from './event';
|
||||
import { onWheelEvent } from '../../core/scale';
|
||||
import React from 'react';
|
||||
import Ticker from './ticker';
|
||||
import UserConfig from '../../config';
|
||||
|
||||
export interface ContainerWrapperProps extends AllHTMLAttributes<HTMLDivElement> {
|
||||
config: UserConfig;
|
||||
classNames?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
@@ -33,11 +36,12 @@ function ContainerWrapper(props: PropsWithChildren<ContainerWrapperProps>) {
|
||||
overflow: 'hidden',
|
||||
...style,
|
||||
}}
|
||||
{...wrapperEvent(ref)}
|
||||
{...onWheelEvent}
|
||||
{...wrapperEvent(ref, props.config)}
|
||||
{...onWheelEvent(props.config)}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
<Ticker config={props.config}></Ticker>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
147
packages/dooringx-lib/src/components/wrapperMove/ticker.tsx
Normal file
147
packages/dooringx-lib/src/components/wrapperMove/ticker.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
/*
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-07-12 15:54:35
|
||||
* @LastEditors: yehuozhili
|
||||
* @LastEditTime: 2021-07-12 19:21:35
|
||||
* @FilePath: \dooringx\packages\dooringx-lib\src\components\wrapperMove\ticker.tsx
|
||||
*/
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import UserConfig from '../../config';
|
||||
|
||||
const width = '20px';
|
||||
const indent = 50;
|
||||
|
||||
function Ticker(props: { config: UserConfig }) {
|
||||
const topRef = useRef<HTMLDivElement>(null);
|
||||
const leftRef = useRef<HTMLDivElement>(null);
|
||||
const [topRender, setTopRender] = useState(0);
|
||||
const [leftRender, setLeftRender] = useState(0);
|
||||
|
||||
const scale = props.config.getScaleState().value;
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
if (topRef.current) {
|
||||
const width = topRef.current.getBoundingClientRect().width;
|
||||
const renderWidth = Math.ceil(width / 10 / scale);
|
||||
setTopRender(renderWidth);
|
||||
}
|
||||
// left可以不用放，但为了更新统一
|
||||
if (leftRef.current) {
|
||||
const height = leftRef.current.getBoundingClientRect().height;
|
||||
const renderHeight = Math.ceil(height / 10 / scale);
|
||||
setLeftRender(renderHeight);
|
||||
}
|
||||
}, 300);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
};
|
||||
}, [props.config, props.config.collapsed, scale]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
ref={topRef}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: indent,
|
||||
width: '100%',
|
||||
height: width,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
{Array(topRender)
|
||||
.fill(1)
|
||||
.map((_, i) => {
|
||||
if (i % 10 === 0) {
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
background: 'rgb(204, 204, 204)',
|
||||
width: '1px',
|
||||
height: '12px',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
fontSize: '10px',
|
||||
left: '-2px',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
{i}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
style={{ background: 'rgb(204, 204, 204)', width: '1px', height: '6px' }}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
<div
|
||||
ref={leftRef}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: indent,
|
||||
left: 0,
|
||||
width: width,
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
{Array(leftRender)
|
||||
.fill(1)
|
||||
.map((_, i) => {
|
||||
if (i % 10 === 0) {
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
background: 'rgb(204, 204, 204)',
|
||||
width: '12px',
|
||||
height: '1px',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '20px',
|
||||
fontSize: '10px',
|
||||
top: '-2px',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
{i}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
style={{ background: 'rgb(204, 204, 204)', width: '6px', height: '1px' }}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Ticker;
|
||||
Reference in New Issue
Block a user