update 0.11.10

2022-01-21 13:43:57 +08:00
parent 4ef294ea8b
commit e93e98d0a1
14 changed files with 154 additions and 86 deletions
--- a/packages/dooringx-lib/package.json
+++ b/packages/dooringx-lib/package.json
@@ -1,5 +1,5 @@
 {
-	"version": "0.11.9",
+	"version": "0.11.10",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/dooringx-lib.esm.js",
--- a/packages/dooringx-lib/src/components/colorPicker/index.tsx
+++ b/packages/dooringx-lib/src/components/colorPicker/index.tsx
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2022-01-20 11:04:15
 * @LastEditors: yehuozhili
- * @LastEditTime: 2022-01-20 12:18:54
+ * @LastEditTime: 2022-01-21 13:40:19
 * @FilePath: \dooringx\packages\dooringx-lib\src\components\colorPicker\index.tsx
 */
 import React, { memo, useState } from 'react';
@@ -18,7 +18,7 @@ function ColorPicker(props: ColorPickerProps) {
 	const [colorPickerVisible, setColorPickerVisible] = useState(false);
 	return (
 		<>
-			<div style={{ position: 'relative' }}>
+			<div style={{ position: 'relative', display: 'flex' }}>
 				<div
 					onClick={() => {
 						setColorPickerVisible((pre) => !pre);
--- a/packages/dooringx-lib/src/components/control/settings.tsx
+++ b/packages/dooringx-lib/src/components/control/settings.tsx
@@ -2,16 +2,18 @@
 * @Author: yehuozhili
 * @Date: 2022-01-13 09:58:05
 * @LastEditors: yehuozhili
- * @LastEditTime: 2022-01-13 13:44:42
+ * @LastEditTime: 2022-01-21 10:57:39
 * @FilePath: \dooringx\packages\dooringx-lib\src\components\control\settings.tsx
 */

-import { Modal, Form, InputNumber, Radio } from 'antd';
+import { Modal, Form, InputNumber, Radio, Select } from 'antd';
 import { MessageInstance } from 'antd/lib/message';
-import React from 'react';
+import React, { useState } from 'react';
 import { memo } from 'react';
-import { UserConfig } from '../..';
+import { UserConfig } from '../../config/index';
+import { rgba2Obj } from '../../core/utils/index';
 import { replaceLocale, zhCN } from '../../locale';
+import ColorPicker from '../colorPicker';

 export interface SettingsModalPropsType {
 	visible: boolean;
@@ -31,6 +33,7 @@ const formItemLayout = {

 function SettingsModal(props: SettingsModalPropsType) {
 	const [form] = Form.useForm();
+	const [color, setColor] = useState(rgba2Obj(props.config.marklineConfig.borderColor));

 	return (
 		<Modal
@@ -42,7 +45,7 @@ function SettingsModal(props: SettingsModalPropsType) {
 			onCancel={() => props.onCancel()}
 			onOk={() => {
 				const res = form.getFieldsValue();
-				const { min, max } = res;
+				const { min, max, borderStyle } = res;
 				if (max < min) {
 					props.message.error(replaceLocale('error.minmax', zhCN['error.minmax'], props.config));
 					return;
@@ -52,6 +55,8 @@ function SettingsModal(props: SettingsModalPropsType) {
 				if (currentScale < min || currentScale > max) {
 					props.config.scaleState.value = min;
 				}
+				props.config.marklineConfig.borderColor = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
+				props.config.marklineConfig.borderStyle = borderStyle;
 				props.onOk(res);
 				return;
 			}}
@@ -64,6 +69,7 @@ function SettingsModal(props: SettingsModalPropsType) {
 					min: props.config.scaleState.minValue,
 					max: props.config.scaleState.maxValue,
 					autofocus: props.config.timelineConfig.autoFocus,
+					borderStyle: props.config.marklineConfig.borderStyle,
 				}}
 				form={form}
 			>
@@ -86,6 +92,34 @@ function SettingsModal(props: SettingsModalPropsType) {
 				>
 					<InputNumber<number> min={0.1}></InputNumber>
 				</Form.Item>
+				<Form.Item
+					label={replaceLocale(
+						'settings.marklineColor',
+						zhCN['settings.marklineColor'],
+						props.config
+					)}
+				>
+					<ColorPicker
+						initColor={rgba2Obj(props.config.marklineConfig.borderColor)}
+						onChange={(v) => {
+							setColor(v);
+						}}
+					></ColorPicker>
+				</Form.Item>
+				<Form.Item
+					name="borderStyle"
+					label={replaceLocale(
+						'settings.marklineStyle',
+						zhCN['settings.marklineStyle'],
+						props.config
+					)}
+				>
+					<Select style={{ width: 88 }}>
+						<Select.Option value="dotted">dotted</Select.Option>
+						<Select.Option value="solid">solid</Select.Option>
+						<Select.Option value="dashed">dashed</Select.Option>
+					</Select>
+				</Form.Item>
 				<Form.Item
 					name="min"
 					// 最小值要大于0.1否则tiker计算有问题
--- a/packages/dooringx-lib/src/core/markline/index.tsx
+++ b/packages/dooringx-lib/src/core/markline/index.tsx
@@ -2,20 +2,21 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 04:29:09
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-27 15:14:34
+ * @LastEditTime: 2022-01-21 09:28:53
 * @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\index.tsx
 */
 import React from 'react';
 import { useMemo } from 'react';
 import UserConfig from '../../config';
 import { marklineCalRender } from './calcRender';
+import { marklineConfig } from './marklineConfig';

 export function MarklineX(props: any) {
 	return (
 		<div
 			className="yh-markline"
 			style={{
-				borderTop: '1px dotted #2196f3',
+				borderTop: `1px ${marklineConfig.borderStyle} ${marklineConfig.borderColor}`,
 				position: 'absolute',
 				width: '100%',
 				top: props.top,
@@ -30,7 +31,7 @@ export function MarklineY(props: any) {
 		<div
 			className="yh-markline"
 			style={{
-				borderLeft: '1px dotted #2196f3',
+				borderLeft: `1px ${marklineConfig.borderStyle} ${marklineConfig.borderColor}`,
 				position: 'absolute',
 				height: '100%',
 				left: props.left,
--- a/packages/dooringx-lib/src/core/markline/marklineConfig.ts
+++ b/packages/dooringx-lib/src/core/markline/marklineConfig.ts
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 11:49:13
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-27 15:09:33
+ * @LastEditTime: 2022-01-21 10:44:50
 * @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\marklineConfig.ts
 */
 import { IBlockType } from '../store/storetype';
@@ -14,6 +14,8 @@ export interface MarklineConfigType {
 	gridIndent: number;
 	resizeIndent: number;
 	marklineUnfocus: null | IBlockType[];
+	borderColor: string;
+	borderStyle: 'dotted' | 'solid' | 'dashed';
 }

 // 间隔距离执行吸附
@@ -24,4 +26,6 @@ export const marklineConfig: MarklineConfigType = {
 	gridIndent: 50,
 	resizeIndent: 0,
 	marklineUnfocus: null,
+	borderColor: 'rgba( 33 , 150 , 243, 1 )',
+	borderStyle: 'dotted',
 };
--- a/packages/dooringx-lib/src/locale/en.ts
+++ b/packages/dooringx-lib/src/locale/en.ts
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-08-27 10:20:23
 * @LastEditors: yehuozhili
- * @LastEditTime: 2022-01-13 13:43:20
+ * @LastEditTime: 2022-01-21 10:56:25
 * @FilePath: \dooringx\packages\dooringx-lib\src\locale\en.ts
 */

@@ -47,4 +47,6 @@ export const en: typeof zhCN = {
 	'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',
+	'settings.marklineColor': 'Markline color',
+	'settings.marklineStyle': 'Markline style',
 };
--- a/packages/dooringx-lib/src/locale/zh-CN.ts
+++ b/packages/dooringx-lib/src/locale/zh-CN.ts
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-08-27 10:20:15
 * @LastEditors: yehuozhili
- * @LastEditTime: 2022-01-13 13:42:51
+ * @LastEditTime: 2022-01-21 10:55:56
 * @FilePath: \dooringx\packages\dooringx-lib\src\locale\zh-CN.ts
 */
 export const zhCN = {
@@ -44,4 +44,6 @@ export const zhCN = {
 	'settings.max': '画布缩放最大值',
 	'settings.autofocus': '动画面板点击自动滚动聚焦',
 	'error.minmax': '最大值应大于等于最小值',
+	'settings.marklineColor': '辅助线颜色',
+	'settings.marklineStyle': '辅助线样式',
 };