update 0.11.9

CHANGELOG.md

@@ -1,3 +1,11 @@
+
+## 0.11.9
+
+新增设置面板控制对吸附缩放等行为进行控制。
+
+修复弹窗按钮样式问题。
+
+修复部分提示语不显示问题。
 ## 0.11.8
 
 timeline增加自动聚焦功能。

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

@@ -5,6 +5,10 @@ nav:
   title: change log
   order: 6
 ---
+## 0.11.9
+A new setting panel is added to control adsorption scaling and other behaviors.
+Fixed pop up button style issue.
+Fixed the problem that some prompts do not display.
 ## 0.11.8
 Timeline adds auto focus function.
 ## 0.11.7

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

@@ -5,6 +5,14 @@ nav:
   title: 变更日志
   order: 6
 ---
+
+## 0.11.9
+
+新增设置面板控制对吸附缩放等行为进行控制。
+
+修复弹窗按钮样式问题。
+
+修复部分提示语不显示问题。
 ## 0.11.8
 
 timeline增加自动聚焦功能。

packages/dooringx-example/src/layouts/index.tsx

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-07-07 14:51:17
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-09-28 16:33:32
+ * @LastEditTime: 2022-01-13 13:22:40
  * @FilePath: \dooringx\packages\dooringx-example\src\layouts\index.tsx
  */
 import { Button } from 'antd';

packages/dooringx-lib/package.json

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

packages/dooringx-lib/src/components/IframeWrapperMove/ticker.tsx

@@ -2,8 +2,8 @@
  * @Author: yehuozhili
  * @Date: 2021-07-12 15:54:35
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-13 21:07:22
+ * @LastEditTime: 2022-01-13 13:41:16
- * @FilePath: \dooringx\packages\dooringx-lib\src\components\wrapperMove\ticker.tsx
+ * @FilePath: \dooringx\packages\dooringx-lib\src\components\IframeWrapperMove\ticker.tsx
  */
 import React, { useEffect, useRef, useState } from 'react';
 import UserConfig from '../../config';
@@ -24,14 +24,18 @@ function Ticker(props: { config: UserConfig }) {
 			if (topRef.current) {
 				const width = topRef.current.getBoundingClientRect().width;
 				const renderWidth = Math.ceil(width / 10 / scale);
+				if (renderWidth < 2 ** 32 - 1) {
 					setTopRender(renderWidth);
 				}
+			}
 			// left可以不用放，但为了更新统一
 			if (leftRef.current) {
 				const height = leftRef.current.getBoundingClientRect().height;
 				const renderHeight = Math.ceil(height / 10 / scale);
+				if (renderHeight < 2 ** 32 - 1) {
 					setLeftRender(renderHeight);
 				}
+			}
 		}, 300);
 
 		return () => {

packages/dooringx-lib/src/components/control/control.tsx

@@ -1,6 +1,7 @@
 import {
 	GatewayOutlined,
 	LayoutOutlined,
+	SettingOutlined,
 	SyncOutlined,
 	UnorderedListOutlined,
 	VideoCameraOutlined,
@@ -11,6 +12,7 @@ import { UserConfig } from '../..';
 import { wrapperMoveState } from '../wrapperMove/event';
 import { replaceLocale } from '../../locale';
 import { mouseUp, moveState } from './state';
+import SettingsModal from './settings';
 
 export interface ControlProps {
 	config: UserConfig;
@@ -22,7 +24,8 @@ export function Control(props: PropsWithChildren<ControlProps>) {
 	const [visible, setVisible] = useState(false);
 	const [configVisible, setConfigVisible] = useState(false);
 	const [form] = Form.useForm();
-
+	const [settingVisible, setSettingVisible] = useState(false);
+	const [api, contextHolder] = message.useMessage();
 	const [xy, setXy] = useState({ x: 0, y: 0 });
 	return (
 		<>
@@ -38,6 +41,7 @@ export function Control(props: PropsWithChildren<ControlProps>) {
 					...style,
 				}}
 			>
+				{contextHolder}
 				<Button
 					onMouseDown={(e) => {
 						moveState.startX = e.clientX;
@@ -62,24 +66,24 @@ export function Control(props: PropsWithChildren<ControlProps>) {
 						<div
 							style={{
 								display: 'flex',
-								justifyContent: 'center',
+								justifyContent: 'flex-end',
 								alignItems: 'center',
 								flexDirection: 'column',
 							}}
 						>
 							<Button
+								block
 								onClick={() => {
 									setVisible(true);
 								}}
-								style={{ width: '100px', overflow: 'hidden', textOverflow: 'ellipsis' }}
 							>
 								{replaceLocale('modal.new', '新建弹窗', props.config)}
 							</Button>
 							<Button
+								block
 								onClick={() => {
 									setConfigVisible(true);
 								}}
-								style={{ width: '100px', overflow: 'hidden', textOverflow: 'ellipsis' }}
 							>
 								{replaceLocale('modal.control', '弹窗配置', props.config)}
 							</Button>
@@ -104,6 +108,12 @@ export function Control(props: PropsWithChildren<ControlProps>) {
 						props.config.getStore().forceUpdate();
 					}}
 				></Button>
+				<Button
+					icon={<SettingOutlined />}
+					onClick={() => {
+						setSettingVisible(true);
+					}}
+				></Button>
 			</div>
 
 			<Modal
@@ -136,7 +146,7 @@ export function Control(props: PropsWithChildren<ControlProps>) {
 													.getStoreChanger()
 													.updateModal(props.config.getStore(), v);
 												if (!sign.success && sign.sign === 0) {
-													message.error(
+													api.error(
 														replaceLocale(
 															'modal.popup.save',
 															'请保存弹窗后编辑其他弹窗',
@@ -145,7 +155,7 @@ export function Control(props: PropsWithChildren<ControlProps>) {
 													);
 												}
 												if (!sign.success && sign.sign === 1) {
-													message.error(
+													api.error(
 														replaceLocale(
 															'modal.popup.notfond',
 															`未找到该弹窗 ${sign.param}`,
@@ -170,7 +180,7 @@ export function Control(props: PropsWithChildren<ControlProps>) {
 													.getStoreChanger()
 													.removeModal(props.config.getStore(), v);
 												if (!sign.success && sign.sign === 0) {
-													message.error(
+													api.error(
 														replaceLocale(
 															'modal.popup.save',
 															'请保存弹窗后编辑其他弹窗',
@@ -179,7 +189,7 @@ export function Control(props: PropsWithChildren<ControlProps>) {
 													);
 												}
 												if (!sign.success && sign.sign === 1) {
-													message.error(
+													api.error(
 														replaceLocale(
 															'modal.popup.notfond',
 															`未找到该弹窗 ${sign.param}`,
@@ -227,12 +237,12 @@ export function Control(props: PropsWithChildren<ControlProps>) {
 								.newModalMap(props.config.getStore(), modalName);
 
 							if (!sign.succeess && sign.sign === 0) {
-								message.error(
+								api.error(
 									replaceLocale('modal.popup.save', `请保存弹窗后编辑其他弹窗`, props.config)
 								);
 							}
 							if (!sign.succeess && sign.sign === 1) {
-								message.error(
+								api.error(
 									replaceLocale(
 										'modal.popup.repeat',
 										`已有重名弹窗 ${sign.param}`,
@@ -269,6 +279,21 @@ export function Control(props: PropsWithChildren<ControlProps>) {
 					</Form.Item>
 				</Form>
 			</Modal>
+			<SettingsModal
+				config={props.config}
+				visible={settingVisible}
+				onOk={(v: any) => {
+					console.log(v);
+					props.config.marklineConfig.isAbsorb = v.absorb;
+					props.config.marklineConfig.indent = v.indent;
+					props.config.scaleState.minValue = v.min;
+					props.config.scaleState.maxValue = v.max;
+					props.config.timelineConfig.autoFocus = v.autofocus;
+					setSettingVisible(false);
+				}}
+				onCancel={() => setSettingVisible(false)}
+				message={api}
+			></SettingsModal>
 		</>
 	);
 }

packages/dooringx-lib/src/components/control/settings.tsx

@@ -0,0 +1,116 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2022-01-13 09:58:05
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2022-01-13 13:44:42
+ * @FilePath: \dooringx\packages\dooringx-lib\src\components\control\settings.tsx
+ */
+
+import { Modal, Form, InputNumber, Radio } from 'antd';
+import { MessageInstance } from 'antd/lib/message';
+import React from 'react';
+import { memo } from 'react';
+import { UserConfig } from '../..';
+import { replaceLocale, zhCN } from '../../locale';
+
+export interface SettingsModalPropsType {
+	visible: boolean;
+	config: UserConfig;
+	onOk: Function;
+	onCancel: Function;
+	message: MessageInstance;
+}
+const formItemLayout = {
+	labelCol: {
+		span: 12,
+	},
+	wrapperCol: {
+		span: 12,
+	},
+};
+
+function SettingsModal(props: SettingsModalPropsType) {
+	const [form] = Form.useForm();
+
+	return (
+		<Modal
+			width={800}
+			visible={props.visible}
+			okText={replaceLocale('yes', '确定', props.config)}
+			cancelText={replaceLocale('no', '取消', props.config)}
+			title={replaceLocale('system.setting', '系统设置', props.config)}
+			onCancel={() => props.onCancel()}
+			onOk={() => {
+				const res = form.getFieldsValue();
+				const { min, max } = res;
+				if (max < min) {
+					props.message.error(replaceLocale('error.minmax', zhCN['error.minmax'], props.config));
+					return;
+				}
+				// 判断当前scale大小，如果超出范围，取最低值
+				const currentScale = props.config.scaleState.value;
+				if (currentScale < min || currentScale > max) {
+					props.config.scaleState.value = min;
+				}
+				props.onOk(res);
+				return;
+			}}
+		>
+			<Form
+				{...formItemLayout}
+				initialValues={{
+					absorb: props.config.marklineConfig.isAbsorb,
+					indent: props.config.marklineConfig.indent,
+					min: props.config.scaleState.minValue,
+					max: props.config.scaleState.maxValue,
+					autofocus: props.config.timelineConfig.autoFocus,
+				}}
+				form={form}
+			>
+				<Form.Item
+					name="absorb"
+					label={replaceLocale('settings.openabsorb', zhCN['settings.openabsorb'], props.config)}
+				>
+					<Radio.Group>
+						<Radio value={true}>{replaceLocale('on', zhCN['on'], props.config)}</Radio>
+						<Radio value={false}>{replaceLocale('off', zhCN['off'], props.config)}</Radio>
+					</Radio.Group>
+				</Form.Item>
+				<Form.Item
+					name="indent"
+					label={replaceLocale(
+						'settings.absorbindent',
+						zhCN['settings.absorbindent'],
+						props.config
+					)}
+				>
+					<InputNumber<number> min={0.1}></InputNumber>
+				</Form.Item>
+				<Form.Item
+					name="min"
+					// 最小值要大于0.1否则tiker计算有问题
+					label={replaceLocale('settings.min', zhCN['settings.min'], props.config)}
+				>
+					<InputNumber<number> min={0.1} step={0.1}></InputNumber>
+				</Form.Item>
+				<Form.Item
+					name="max"
+					label={replaceLocale('settings.max', zhCN['settings.max'], props.config)}
+				>
+					<InputNumber<number> min={0.1} step={0.1}></InputNumber>
+				</Form.Item>
+				<Form.Item
+					name="autofocus"
+					label={replaceLocale('settings.autofocus', zhCN['settings.autofocus'], props.config)}
+				>
+					<Radio.Group>
+						<Radio value={true}>{replaceLocale('on', zhCN['on'], props.config)}</Radio>
+						<Radio value={false}>{replaceLocale('off', zhCN['off'], props.config)}</Radio>
+					</Radio.Group>
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+}
+
+export default memo(SettingsModal);

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-07-12 15:54:35
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-13 21:07:22
+ * @LastEditTime: 2022-01-13 13:41:48
  * @FilePath: \dooringx\packages\dooringx-lib\src\components\wrapperMove\ticker.tsx
  */
 import React, { useEffect, useRef, useState } from 'react';
@@ -24,14 +24,19 @@ function Ticker(props: { config: UserConfig }) {
 			if (topRef.current) {
 				const width = topRef.current.getBoundingClientRect().width;
 				const renderWidth = Math.ceil(width / 10 / scale);
+				if (renderWidth < 2 ** 32 - 1) {
+					// new array的参数最大值
 					setTopRender(renderWidth);
 				}
+			}
 			// left可以不用放，但为了更新统一
 			if (leftRef.current) {
 				const height = leftRef.current.getBoundingClientRect().height;
 				const renderHeight = Math.ceil(height / 10 / scale);
+				if (renderHeight < 2 ** 32 - 1) {
 					setLeftRender(renderHeight);
 				}
+			}
 		}, 300);
 
 		return () => {

packages/dooringx-lib/src/core/markline/normalMode.ts

@@ -125,9 +125,11 @@ export function marklineDisplay(
 			}
 			break;
 	}
+	if (marklineConfig.isAbsorb) {
 		focus.top = Math.round(focus.top + diffY);
 		focus.left = Math.round(focus.left + diffX);
 	}
+}
 
 /**
  *

packages/dooringx-lib/src/locale/en.ts

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-08-27 10:20:23
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-09-27 21:11:51
+ * @LastEditTime: 2022-01-13 13:43:20
  * @FilePath: \dooringx\packages\dooringx-lib\src\locale\en.ts
  */
 
@@ -30,12 +30,21 @@ export const en: typeof zhCN = {
 	'modal.popup.name': 'Please enter modal name',
 	'modal.name': 'Modal name',
 	'modal.control.remove': 'Delete click to delete the effect of the modal',
-	yes: 'yes',
+	yes: 'Ok',
-	no: 'no',
+	no: 'Cancel',
 	'right.noprops': 'No properties have been configured',
 	'right.global': 'Global config',
 	'right.containerheight': 'Container height',
 	'right.containerColor': 'Container background color',
 	'right.bodyColor': 'Body background color',
 	title: 'Title',
+	'system.setting': 'System Settings',
+	'settings.openabsorb': 'Turn on adsorption',
+	on: 'on',
+	off: 'off',
+	'settings.absorbindent': 'Adsorption spacing',
+	'settings.min': 'Canvas zoom min',
+	'settings.max': 'Canvas zoom max',
+	'settings.autofocus': 'Auto scroll focus on the animation panel',
+	'error.minmax': 'The maximum value should be greater than or equal to the minimum value',
 };

packages/dooringx-lib/src/locale/zh-CN.ts

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-08-27 10:20:15
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-09-27 21:11:43
+ * @LastEditTime: 2022-01-13 13:42:51
  * @FilePath: \dooringx\packages\dooringx-lib\src\locale\zh-CN.ts
  */
 export const zhCN = {
@@ -35,4 +35,13 @@ export const zhCN = {
 	'right.containerColor': '容器底色',
 	'right.bodyColor': 'body底色',
 	title: '标题',
+	'system.setting': '系统设置',
+	'settings.openabsorb': '开启吸附',
+	on: '开',
+	off: '关',
+	'settings.absorbindent': '吸附间距',
+	'settings.min': '画布缩放最小值',
+	'settings.max': '画布缩放最大值',
+	'settings.autofocus': '动画面板点击自动滚动聚焦',
+	'error.minmax': '最大值应大于等于最小值',
 };

packages/dooringx-plugin-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dooringx-plugin-template",
-  "version": "0.11.8",
+  "version": "0.11.9",
   "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.11.8",
+		"dooringx-lib": "^0.11.9",
 		"postcss": "^8.3.6",
 		"rollup-plugin-peer-deps-external": "^2.2.4",
 		"rollup-plugin-postcss": "^4.0.1",