diff --git a/packages/dooringx-lib/.eslintrc.js b/packages/dooringx-lib/.eslintrc.js index 5779591..b7eb9e5 100644 --- a/packages/dooringx-lib/.eslintrc.js +++ b/packages/dooringx-lib/.eslintrc.js @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-03-14 05:00:20 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-09 01:34:14 + * @LastEditTime: 2021-08-16 17:06:51 * @FilePath: \dooringx\packages\dooringx-lib\.eslintrc.js */ module.exports = { diff --git a/packages/dooringx-lib/src/components/control.tsx b/packages/dooringx-lib/src/components/control.tsx index 9cf9766..2d0c418 100644 --- a/packages/dooringx-lib/src/components/control.tsx +++ b/packages/dooringx-lib/src/components/control.tsx @@ -94,6 +94,18 @@ const SortableList = SortableContainer( } ); +const moveState = { + startX: 0, + startY: 0, + isMove: false, +}; + +const mouseUp = () => { + if (moveState.isMove) { + moveState.isMove = false; + } +}; + export function Control(props: PropsWithChildren) { const { style } = props; const [visible, setVisible] = useState(false); @@ -136,16 +148,33 @@ export function Control(props: PropsWithChildren) { > ); - + const [xy, setXy] = useState({ x: 0, y: 0 }); return ( <>
{ + moveState.startX = e.clientX; + moveState.startY = e.clientY; + moveState.isMove = true; + }} + onMouseMove={(e) => { + if (moveState.isMove) { + const diffx = e.clientX - moveState.startX; + const diffy = e.clientY - moveState.startY; + setXy((pre) => ({ x: pre.x + diffx, y: pre.y + diffy })); + moveState.startX = e.clientX; + moveState.startY = e.clientY; + } + }} + onMouseUp={mouseUp} + onMouseLeave={mouseUp} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', + transform: `translate(${xy.x}px,${xy.y}px)`, ...style, }} > diff --git a/packages/dooringx-lib/src/components/leftConfig.tsx b/packages/dooringx-lib/src/components/leftConfig.tsx index 66d877a..fc1361f 100644 --- a/packages/dooringx-lib/src/components/leftConfig.tsx +++ b/packages/dooringx-lib/src/components/leftConfig.tsx @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-02-04 10:32:45 * @LastEditors: yehuozhili - * @LastEditTime: 2021-08-12 15:50:48 + * @LastEditTime: 2021-08-16 20:32:23 * @FilePath: \dooringx\packages\dooringx-lib\src\components\leftConfig.tsx */ import React, { ReactNode, useEffect, useMemo, useState } from 'react'; @@ -158,8 +158,8 @@ function LeftConfig(props: LeftConfigProps) { style={{ flex: 1 }} defaultSelectedKeys={[menuSelect]} mode="vertical" - inlineCollapsed={props.showName ? false : true} - className={`${styles.menuWidth} ${styles.menus}`} + inlineCollapsed={props.showName ? undefined : true} + className={`${styles.menuWidth} ${styles.menus} yh-menu`} > {leftMapRenderListCategory.map((v, i) => { return ( @@ -167,14 +167,18 @@ function LeftConfig(props: LeftConfigProps) { key={i} onClick={() => setMenuSelect(i + '')} icon={v.icon} - className={props.mode === 'vertical' ? `${styles.menuStyle} ${styles.menus}` : ''} + className={ + props.mode === 'vertical' + ? `${styles.menuStyle} ${styles.menus} yh-menuitem` + : 'yh-menuitem' + } > {props.showName && v.displayName} ); })} -
{props.footerConfig}
+
{props.footerConfig}
y); const DragHandle = SortableHandle(() => ); @@ -50,6 +51,18 @@ const SortableItem = SortableElement( }} >
{ + const store = value.config.getStore(); + const clone = deepcopy(store.getData()); + clone.block.forEach((v) => { + if (v.id === value.value.id && !specialCoList.includes(value.value.name)) { + v.focus = true; + } else { + v.focus = false; + } + }); + store.setData(clone); + }} style={{ display: 'flex', alignItems: 'center', @@ -58,6 +71,8 @@ const SortableItem = SortableElement( minWidth: leftWidth, borderRight: borderColor, borderBottom: borderColor, + backgroundColor: value.value.focus ? '#eeeeee' : 'initial', + cursor: 'pointer', }} >
diff --git a/packages/dooringx-lib/src/components/timeLine/timelineItem.tsx b/packages/dooringx-lib/src/components/timeLine/timelineItem.tsx index a6859f7..ee31171 100644 --- a/packages/dooringx-lib/src/components/timeLine/timelineItem.tsx +++ b/packages/dooringx-lib/src/components/timeLine/timelineItem.tsx @@ -2,14 +2,19 @@ * @Author: yehuozhili * @Date: 2021-08-10 20:26:44 * @LastEditors: yehuozhili - * @LastEditTime: 2021-08-11 15:34:46 + * @LastEditTime: 2021-08-16 20:29:58 * @FilePath: \dooringx\packages\dooringx-lib\src\components\timeLine\timelineItem.tsx */ -import React from 'react'; +import React, { CSSProperties } from 'react'; import { AnimateItem } from '../../core/store/storetype'; +export const iter = 500; export const itemHeight = 25; +export const interval = 19; const diff = 6; +const square = 2.5; +const times = interval + 1; + // 需要根据animate属性渲染div export interface TimeLineItemProps { @@ -32,18 +37,34 @@ interface MoveStateTypes { startX: number; isMove: boolean; uid: string; - dom: null | HTMLDivElement; } const moveState: MoveStateTypes = { startX: 0, isMove: false, uid: '', - dom: null, }; +interface resizeStateTypes extends MoveStateTypes { + left: boolean; +} -export const interval = 19; -const times = interval + 1; +const resizeState: resizeStateTypes = { + startX: 0, + isMove: false, + uid: '', + left: true, +}; +const resizeMouseDown = ( + e: React.MouseEvent, + v: AnimateItem, + left: boolean +) => { + e.stopPropagation(); + resizeState.startX = e.screenX; + resizeState.uid = v.uid; + resizeState.isMove = true; + resizeState.left = left; +}; export const TimeLineItemMouseMove = function ( e: React.MouseEvent, @@ -61,15 +82,51 @@ export const TimeLineItemMouseMove = function ( } }); moveState.startX = e.screenX; + } else if (resizeState.isMove) { + const diff = e.screenX - resizeState.startX; + if (resizeState.left) { + animate.forEach((v) => { + if (v.uid === resizeState.uid) { + const count = + v.animationIterationCount === 'infinite' ? 500 : parseInt(v.animationIterationCount); + const f2 = parseFloat((v.animationDelay + diff / times).toFixed(1)); + const f = parseFloat((v.animationDuration - (f2 - v.animationDelay) / count).toFixed(1)); + v.animationDuration = f2 < 0 ? v.animationDuration : f < 0 ? 0 : f; + v.animationDelay = f2 < 0 ? 0 : f2; + forceUpdate((p) => p + 1); + } + }); + } else { + animate.forEach((v) => { + if (v.uid === resizeState.uid) { + const count = + v.animationIterationCount === 'infinite' ? 500 : parseInt(v.animationIterationCount); + const f = parseFloat((v.animationDuration + diff / count / times).toFixed(1)); + v.animationDuration = f < 0 ? 0 : f; + forceUpdate((p) => p + 1); + } + }); + } + resizeState.startX = e.screenX; } }; export const TimeLineItemMouseOver = function () { moveState.isMove = false; moveState.startX = 0; moveState.uid = ''; - if (moveState.dom) { - moveState.dom.style.cursor = 'default'; - } + resizeState.isMove = false; + resizeState.startX = 0; + resizeState.uid = ''; +}; + +const commonCss: CSSProperties = { + transform: `rotate(45deg)`, + height: square * 2, + width: square * 2, + position: 'absolute', + background: '#000000', + top: (itemHeight - diff) / 2 - square, + cursor: 'e-resize', }; export function TimeLineItem(props: TimeLineItemProps) { @@ -78,7 +135,7 @@ export function TimeLineItem(props: TimeLineItemProps) { {props.animate.map((v) => { const left = v.animationDelay * times + interval; const repeat = - v.animationIterationCount === 'infinite' ? 500 : parseInt(v.animationIterationCount); + v.animationIterationCount === 'infinite' ? iter : parseInt(v.animationIterationCount); const width = v.animationDuration * times * repeat; const index = v.uid.charCodeAt(0) % 10; return ( @@ -88,9 +145,6 @@ export function TimeLineItem(props: TimeLineItemProps) { moveState.startX = e.screenX; moveState.uid = v.uid; moveState.isMove = true; - const dom = e.target as HTMLDivElement; - dom.style.cursor = 'move'; - moveState.dom = dom; }} style={{ position: 'absolute', @@ -99,8 +153,23 @@ export function TimeLineItem(props: TimeLineItemProps) { width: width, height: itemHeight - diff, background: bgColor[index], + zIndex: 1, + cursor: 'move', }} - >
+ > +
{ + resizeMouseDown(e, v, true); + }} + >
+
{ + resizeMouseDown(e, v, false); + }} + >
+
); })}