update 0.12.2

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.12.2
+
+新增双击定位帧。
+
+暂停后拖拽帧重置指针行为修复。
+
 ## 0.12.0
 
 动画新增帧的操作，可以精确查看每0.1秒的动画状态！

packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md

@@ -5,6 +5,9 @@ nav:
   title: change log
   order: 6
 ---
+## 0.12.2
+Add double click positioning frame.
+Fixed drag frame reset pointer behavior after pause.
 ## 0.12.0
 The operation of adding frames to the animation can accurately view the animation status every 0.1 seconds!
 Timeline adds some class names to facilitate style modification.
@@ -57,7 +60,7 @@ A pop-up event will not appear if the pop-up name is not passed.
 Scripts loading of preview component changes from concurrency to linearity.
 Using remote components in edit mode will save the current canvas state.
 ## 0.9.4
-Fix the bug that the preview component cannot release loading
+The component of preview that cannot be fixed
 ## 0.9.3
 Add double click to place the canvas.
 Change the initial focus state of the element.
@@ -81,7 +84,7 @@ Fix timeline flicker.
 Add animation component timeline. You can preview all animations better.
 ## 0.8.0
 The animation part is reconstructed, which can support the simultaneous configuration of multiple animations.
-Drag the canvas to the minimum value of 0.
+The minimum value of canvas drag is changed to 0.
 ## 0.7.7
 Optimize the drag logic of the canvas to move more smoothly.
 ## 0.7.6
@@ -123,7 +126,7 @@ Remove the runtime export and get all properties from config.
 2. Modify container minimum drag 667. Fix the inconsistency between the distance between the canvas and the mouse when zooming down and dragging.
 3. Innercontainerdragup needs to pass config.
 ## 0.2.0 
-Modify the transfer of the commander to obtain the config. The commander is no longer exported from the index. When it needs to be used, it is obtained from the config. Add the class name on the left to facilitate customization.
+Modify the transmission of the commander to obtain the config. The commander will no longer be exported from the index. When it needs to be used, it will be obtained from the config. Add the class name on the left to facilitate customization.
 ## 0.1.10 
 Modify eslint dependency recommendation
 ## 0.1.9 

packages/dooringx-dumi-doc/docs/ChangeLog/index.md

@@ -5,6 +5,12 @@ nav:
   title: 变更日志
   order: 6
 ---
+## 0.12.2
+
+新增双击定位帧。
+
+暂停后拖拽帧重置指针行为修复。
+
 ## 0.12.0
 
 动画新增帧的操作，可以精确查看每0.1秒的动画状态！

packages/dooringx-lib/package.json

@@ -1,5 +1,5 @@
 {
-	"version": "0.12.0",
+	"version": "0.12.2",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/dooringx-lib.esm.js",

packages/dooringx-lib/src/components/timeLine/timeline.tsx

@@ -195,7 +195,14 @@ const needleHeadEvent = (
 				config.timelineNeedleConfig.status === 'start' ||
 				!config.timelineNeedleConfig.isRefresh
 			) {
+				let init = initialLeft;
+				setNeedle((p) => {
+					init = p;
+					return p;
+				});
 				await config.timelineNeedleConfig.resetFunc();
+				// 重置后需要再回正
+				setNeedle(init);
 			}
 			setNeedle((p) => {
 				needleState.origin = p;
@@ -242,8 +249,39 @@ export const needleMoveEvent = (config: UserConfig) => {
 			needleState.isDrag = false;
 			needleState.startX = 0;
 		},
-		onDoubleClick: () => {
-			// 这个暂时搞不定，可以在起始点埋个点位得到坐标值进行计算。
+	};
+};
+
+const needleDoubleClick = (config: UserConfig) => {
+	return {
+		onDoubleClick: async (e: React.MouseEvent) => {
+			const dom = config.timelineConfig.scrollDom;
+			if (dom) {
+				const setNeedle = config.timelineNeedleConfig.setNeedle;
+				const left = dom.getBoundingClientRect().left + dom.scrollLeft;
+				const mouseLeft = e.clientX;
+				e.persist();
+				e.stopPropagation();
+				await config.timelineNeedleConfig.resetFunc();
+				config.timelineNeedleConfig.status = 'stop';
+				let diff = mouseLeft - left;
+				if (diff <= initialLeft) {
+					config.timelineNeedleConfig.current = 0;
+					diff = initialLeft;
+				} else if (diff > ruleWidth) {
+					config.timelineNeedleConfig.current = (ruleWidth - initialLeft) / 20;
+					diff = ruleWidth;
+				} else {
+					config.timelineNeedleConfig.current = (diff - initialLeft) / 20;
+				}
+				setNeedle(diff);
+				config.blockForceUpdate.forEach((v) => {
+					v();
+				});
+				if (timer) {
+					window.clearInterval(timer);
+				}
+			}
 		},
 	};
 };
@@ -491,12 +529,15 @@ export function TimeLine(props: TimeLineProps) {
 					</div>
 
 					<div
+						className="yh-timeline-needle-head-wrap"
 						style={{
 							width: `calc(100% -  ${leftWidth}px)`,
 							borderBottom: '1px solid #dadada',
 							overflow: 'hidden',
 							position: 'relative',
+							cursor: 'crosshair',
 						}}
+						{...needleDoubleClick(props.config)}
 					>
 						<div
 							className="yh-timeline-needle-head"

packages/dooringx-plugin-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dooringx-plugin-template",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "description": "> TODO: description",
   "author": "yehuozhili <673632758@qq.com>",
   "homepage": "https://github.com/H5-Dooring/dooringx#readme",

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.12.0",
+		"dooringx-lib": "^0.12.2",
 		"postcss": "^8.3.6",
 		"rollup-plugin-peer-deps-external": "^2.2.4",
 		"rollup-plugin-postcss": "^4.0.1",