update 0.15.2

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.15.2
+
+修复行内元素编辑预览不一致情况。
+
+新增行高字号配置项。
+
 ## 0.15.1
 
 新增useRegistFunc用于注册函数。

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

@@ -5,6 +5,9 @@ nav:
   title: Change log
   order: 6
 ---
+## 0.15.2
+Fix inconsistencies in line element editing preview.
+Add line height font size configuration item.
 ## 0.15.1
 Useregistfunc is added to register functions.
 Update some documents.
@@ -60,7 +63,7 @@ Change the position of rotation justification
 Fix guide line bug
 Optimized drag and drop algorithm
 ## 0.11.3
-Positive rotation function is added.
+Increase the function of rotary return.
 Optimize mouse style.
 ## 0.11.2
 Optimize drag speed

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

@@ -5,6 +5,12 @@ nav:
   title: 变更日志
   order: 6
 ---
+## 0.15.2
+
+修复行内元素编辑预览不一致情况。
+
+新增行高字号配置项。
+
 ## 0.15.1
 
 新增useRegistFunc用于注册函数。

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-02-27 21:33:36
  * @LastEditors: yehuozhili
- * @LastEditTime: 2022-04-09 21:55:03
+ * @LastEditTime: 2022-04-29 23:35:58
  * @FilePath: \dooringx\packages\dooringx-example\src\plugin\index.tsx
  */
 
@@ -29,13 +29,6 @@ const LeftRegistMap: LeftRegistComponentMapItem[] = [
 		img: 'https://img.guguzhu.com/d/file/android/ico/2021/09/08/rytzi2w34tm.png',
 		displayName: '输入框',
 	},
-	{
-		type: 'basic',
-		component: 'test',
-		img: 'https://img.guguzhu.com/d/file/android/ico/2021/09/08/rytzi2w34tm.png',
-		displayName: '测试',
-		urlFn: () => import('./registComponents/testCo'),
-	},
 ];
 
 export const defaultConfig: Partial<InitConfig> = {

packages/dooringx-example/src/plugin/registComponents/testCo.tsx

@@ -1,17 +0,0 @@
-import { ComponentItemFactory } from 'dooringx-lib';
-
-const TestCo = new ComponentItemFactory(
-	'test',
-	'测试组件',
-	{},
-	{
-		width: 200,
-		height: 55,
-	},
-	() => {
-		return <div>测试</div>;
-	},
-	true
-);
-
-export default TestCo;

packages/dooringx-lib/package.json

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

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

@@ -180,8 +180,6 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 						<div
 							style={{
 								pointerEvents: 'none',
-								width: '100%',
-								height: '100%',
 								...animationEdit,
 							}}
 						>
@@ -205,21 +203,37 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 				</div>
 			);
 		} else {
+			const style = {
+				position: props.data.fixed ? 'fixed' : props.data.position,
+				top: previewState.top,
+				left: previewState.left,
+				width: previewState.width,
+				height: previewState.height,
+				zIndex: props.data.zIndex,
+				display: props.data.display,
+				transform: `rotate(${props.data.rotate.value}deg)`,
+			};
 			return (
-				<div
+				<>
-					style={{
+					{/* 绝对定位元素 */}
-						position: props.data.fixed ? 'fixed' : props.data.position,
+					{props.data.position !== 'static' && (
-						top: previewState.top,
+						<div style={style}>
-						left: previewState.left,
+							<div style={{ ...animateProps }}>{state}</div>
-						width: previewState.width,
+						</div>
-						height: previewState.height,
+					)}
-						zIndex: props.data.zIndex,
+					{/* 静态定位 非行内 这里暂不考虑布局影响 */}
-						display: props.data.display,
+					{props.data.position === 'static' && props.data.display !== 'inline' && (
-						transform: `rotate(${props.data.rotate.value}deg)`,
+						<div style={style}>
-					}}
+							<div style={{ ...animateProps }}>{state}</div>
-				>
+						</div>
-					<div style={{ ...animateProps }}>{state}</div>
+					)}
-				</div>
+					{/* 静态定位 行内 这里暂不考虑布局影响 */}
+					{props.data.position === 'static' && props.data.display === 'inline' && (
+						<span style={style}>
+							<span style={{ ...animateProps }}>{state}</span>
+						</span>
+					)}
+				</>
 			);
 		}
 	}, [

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

@@ -78,6 +78,8 @@ function Container(props: PropsWithChildren<ContainerProps>) {
 									position: 'relative',
 									overflow: props.config.containerOverFlow ? 'hidden' : 'visible',
 									cursor: 'default',
+									lineHeight: props.state.globalState?.lineHeight ?? 1.575,
+									fontSize: props.state.globalState?.fontSize ?? 14,
 									...editContainerStyle,
 								}}
 								{...(props.context === 'edit' ? containerDragResolve(props.config) : null)}
@@ -129,6 +131,8 @@ function Container(props: PropsWithChildren<ContainerProps>) {
 						overflow: 'hidden',
 						backgroundColor: bgColor(),
 						transform: transform,
+						lineHeight: props.state.globalState?.lineHeight ?? 1.575,
+						fontSize: props.state.globalState?.fontSize ?? 14,
 						...previewContainerStyle,
 					}}
 				>

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 05:42:13
  * @LastEditors: yehuozhili
- * @LastEditTime: 2022-04-23 18:12:53
+ * @LastEditTime: 2022-04-29 23:36:45
  * @FilePath: \dooringx\packages\dooringx-lib\src\components\rightConfig.tsx
  */
 import { CreateOptionsRes } from '../core/components/formTypes';
@@ -21,6 +21,12 @@ const colStyle: CSSProperties = {
 	alignItems: 'center',
 	justifyContent: 'flex-end',
 };
+const titletStyle: CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	userSelect: 'none',
+	height: 32,
+};
 interface RightConfigProps {
 	state: IStoreData;
 	config: UserConfig;
@@ -156,7 +162,7 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 						{replaceLocale('right.global', '全局设置', props.config)}
 					</Row>
 					<Row style={{ padding: '10px 0' }}>
-						<Col span={6} style={{ userSelect: 'none' }}>
+						<Col span={6} style={{ ...titletStyle }}>
 							{replaceLocale('title', '标题', props.config)}
 						</Col>
 						<Col span={18} style={colStyle}>
@@ -173,7 +179,7 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 						</Col>
 					</Row>
 					<Row style={{ padding: '10px 0' }}>
-						<Col span={6} style={{ userSelect: 'none' }}>
+						<Col span={6} style={{ ...titletStyle }}>
 							{replaceLocale('right.containerheight', '容器高度', props.config)}
 						</Col>
 						<Col span={18} style={colStyle}>
@@ -190,7 +196,7 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 						</Col>
 					</Row>
 					<Row style={{ padding: '10px 0' }}>
-						<Col span={6} style={{ userSelect: 'none' }}>
+						<Col span={6} style={{ ...titletStyle }}>
 							{replaceLocale('right.containerColor', '容器底色', props.config)}
 						</Col>
 						<Col span={18} style={colStyle}>
@@ -205,7 +211,7 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 						</Col>
 					</Row>
 					<Row style={{ padding: '10px 0' }}>
-						<Col span={6} style={{ userSelect: 'none' }}>
+						<Col span={6} style={{ ...titletStyle }}>
 							{replaceLocale('right.bodyColor', 'body底色', props.config)}
 						</Col>
 						<Col span={18} style={colStyle}>
@@ -219,6 +225,41 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 							></ColorPicker>
 						</Col>
 					</Row>
+					<Row style={{ padding: '10px 0' }}>
+						<Col span={6} style={{ ...titletStyle }}>
+							{replaceLocale('right.lineHeight', '容器行高', props.config)}
+						</Col>
+						<Col span={18} style={colStyle}>
+							<InputNumber
+								min={0}
+								step="0.1"
+								value={props.config.getStore().getData().globalState?.lineHeight ?? 1.575}
+								onChange={(e) => {
+									const val = e;
+									const originData = deepcopy(props.config.getStore().getData());
+									originData.globalState.lineHeight = val;
+									props.config.getStore().setData(originData);
+								}}
+							/>
+						</Col>
+					</Row>
+					<Row style={{ padding: '10px 0' }}>
+						<Col span={6} style={{ ...titletStyle }}>
+							{replaceLocale('right.fontSize', '容器字号', props.config)}
+						</Col>
+						<Col span={18} style={colStyle}>
+							<InputNumber
+								min={0}
+								value={props.config.getStore().getData().globalState?.fontSize ?? 14}
+								onChange={(e) => {
+									const val = e;
+									const originData = deepcopy(props.config.getStore().getData());
+									originData.globalState.fontSize = val;
+									props.config.getStore().setData(originData);
+								}}
+							/>
+						</Col>
+					</Row>
 					{props.globalExtra && props.globalExtra}
 				</div>
 			)}
@@ -229,7 +270,7 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
 						{replaceLocale('modal.control', '弹窗配置', props.config)}
 					</Row>
 					<Row style={{ padding: '10px 0' }}>
-						<Col span={8}>
+						<Col span={8} style={{ ...titletStyle }}>
 							{replaceLocale('modal.control.remove', '取消点击删除弹窗', props.config)}
 						</Col>
 						<Col span={16} style={{ ...colStyle }}>

packages/dooringx-lib/src/config/index.tsx

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-02-25 21:16:58
  * @LastEditors: yehuozhili
- * @LastEditTime: 2022-04-23 23:03:56
+ * @LastEditTime: 2022-04-29 23:23:42
  * @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx
  */
 import React from 'react';
@@ -174,6 +174,8 @@ export const defaultStore: IMainStoreData = {
 		bodyColor: 'rgba(255,255,255,1)',
 		script: [],
 		customAnimate: [],
+		lineHeight: 1.575,
+		fontSize: 14,
 	},
 	modalConfig: {},
 	modalEditName: '',

packages/dooringx-lib/src/core/store/storetype.ts

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:29:09
  * @LastEditors: yehuozhili
- * @LastEditTime: 2022-04-23 17:07:19
+ * @LastEditTime: 2022-04-29 23:15:50
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\store\storetype.ts
  */
 
@@ -15,6 +15,8 @@ export interface GlobalState {
 	title: string;
 	bodyColor: string;
 	script: string[];
+	lineHeight: number;
+	fontSize: number;
 }
 
 export interface IStoreData {

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

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-08-27 10:20:23
  * @LastEditors: yehuozhili
- * @LastEditTime: 2022-04-23 18:58:39
+ * @LastEditTime: 2022-04-29 23:23:13
  * @FilePath: \dooringx\packages\dooringx-lib\src\locale\en.ts
  */
 
@@ -38,6 +38,8 @@ export const en: typeof zhCN = {
 	'right.containerheight': 'Container height',
 	'right.containerColor': 'Container background color',
 	'right.bodyColor': 'Body background color',
+	'right.fontSize': 'Container font size',
+	'right.lineHeight': 'Container line height',
 	title: 'Title',
 	'system.setting': 'System Settings',
 	'settings.openabsorb': 'Turn on adsorption',

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-04-23 18:58:26
+ * @LastEditTime: 2022-04-29 23:19:30
  * @FilePath: \dooringx\packages\dooringx-lib\src\locale\zh-CN.ts
  */
 export const zhCN = {
@@ -35,6 +35,8 @@ export const zhCN = {
 	'right.containerheight': '容器高度',
 	'right.containerColor': '容器底色',
 	'right.bodyColor': 'body底色',
+	'right.fontSize': '容器字号',
+	'right.lineHeight': '容器行高',
 	title: '标题',
 	'system.setting': '系统设置',
 	'settings.openabsorb': '开启吸附',

packages/dooringx-plugin-template/package.json

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