fix: 功能优化

src/pages/poster/edit/$id$.js

@@ -55,8 +55,12 @@ export default class Edit extends React.PureComponent {
 
   updateElement =(index, value) => {
     const _ele = this.state.element.slice()
-    const _tar = _ele[index]
-    _ele[index] = { ..._tar, ...value }
+    const _tar = _ele[index]  // dom
+    // console.log(_tar,value);
+    _ele[index] = { 
+      ..._tar ,
+      ...value
+    }
     this.setState({ element: _ele })
   }
 
@@ -163,7 +167,7 @@ export default class Edit extends React.PureComponent {
     const activeObject = element[activeObjectIndex] || {}
     const group = element.map(item => item.group)
     const _element = element.map((item, index) => ({ ...item, index: index }))
-
+    // console.log('activeObject',activeObject);
     return (
       <div id="poster" style={{ height: this.state.posterHeight, display: 'flex', flexDirection: 'column' }}>
         <div className={styles.header}>
@@ -252,12 +256,13 @@ export default class Edit extends React.PureComponent {
                   if (item.type === 'text') {
                     return (
                       <Rnd
+                        disableDragging={item.fixed}
                         size={{ width: Number.parseFloat(item.weight), height: Number.parseFloat(item.height) }}
                         position={{ x: item.dx, y: item.dy - item.size }}
                         onDragStop={(e, d) => { this.updateElement(index, { dx: d.x, dy: d.y + item.size }) }}
-                        onResizeStop={(e, direction, ref, delta, position) => {
-                          this.updateElement(index, { width: Number.parseFloat(ref.style.width), height: Number.parseFloat(ref.style.height), ...position })
-                        }}
+                        onResizeStop={(e, direction, ref, delta, position) => { // 单击、双击文字框 出现白屏 
+                         if (ref.style.width && ref.style.height)this.updateElement(index, { width: Number.parseFloat(ref.style.width||0), height: Number.parseFloat(ref.style.height||0), ...position })                                          
+                       }}
                         bounds="parent"
                         className={activeObjectIndex === index ? styles.outline : ''}
                       >
@@ -265,16 +270,18 @@ export default class Edit extends React.PureComponent {
                           className={styles.textRnd}
                           onClick={() => this.setState({ activeObjectIndex: index })}
                           style={{
-                            WebkitBoxOrient: 'vertical',
                             WebkitLineClamp: clampLine,
-                            width: item.float_x === 'center' ? (Number.parseFloat(bgWidth) - Number.parseFloat(item.dx)) + 'px' : (Number.parseFloat(item.width) || 'auto'),
+                            // width: item.float_x === 'center' ? (Number.parseFloat(bgWidth) - Number.parseFloat(item.dx)) + 'px' : (Number.parseFloat(item.width) || 'auto'),
+                            width: Number.parseFloat(item.width) || 'auto',
                             height: Number.parseFloat(item.height) || 'auto',
                             fontFamily: item.font,
                             fontSize: item.size,
                             color: item.c,
                             opacity: item.opacity,
                             position: 'relative',
-                            textAlign: item.float_x
+                            textAlign: item.float_x,
+                            writingMode: item.vertical && "vertical-lr",
+                            display: item.vertical && "inline-block",
                             // left: (Number.parseFloat(bgWidth) - Number.parseFloat(item.dx) - Number.parseFloat(item.width)) / 2 + 'px'
                           }}>
                           {item.content}
@@ -359,8 +366,8 @@ export default class Edit extends React.PureComponent {
                       <Select value={activeObject.font} onChange={(value) => this.updateElement(activeObjectIndex, { font: value })}>
                         <Option value="msyh">msyh</Option>
                         <Option value="msyhbd">msyhbd</Option>
-                        <Option value="NotoSerifCJK">NotoSerifCJK</Option>
-                        <Option value="PingFang">PingFang</Option>
+                        <Option value="NotoSerifCJK.ttc">NotoSerifCJK</Option>
+                        <Option value="PingFang.ttc">PingFang</Option>
                         <Option value="pingfang-sc-semibold">pingfang-sc-semibold</Option>
                         <Option value="pingfang_jiancu">pingfang_jiancu</Option>
                         <Option value="pingfang_jianxi">pingfang_jianxi</Option>
@@ -372,7 +379,7 @@ export default class Edit extends React.PureComponent {
                         <Option value="SourceHanSansCN-Normal">SourceHanSansCN-Normal</Option>
                         <Option value="喜鹊招牌体">喜鹊招牌体</Option>
                         <Option value="喜鹊聚珍体regular">喜鹊聚珍体regular</Option>
-                        <Option value="思源宋体">思源宋体</Option>
+                        <Option value="思源宋体.otf">思源宋体</Option>
                         <Option value="方正正粗黑简体">方正正粗黑简体</Option>
                       </Select>
                     </Form.Item>
@@ -411,10 +418,11 @@ export default class Edit extends React.PureComponent {
                     </div>
                     <div style={{ display: 'flex' }}>
                       <Form.Item label="X居中" style={{ flex: 1 }}>
-                        <Select value={activeObject.float_x} style={{ width: 80 }} onChange={(value) => this.updateElement(activeObjectIndex, { float_x: value })}>
+                        <Select value={activeObject.float_x||""} style={{ width: 80 }} onChange={(value) => this.updateElement(activeObjectIndex, { float_x: value })}>
                           <Option value="">不居中</Option>
                           <Option value="center">居中</Option>
                           {/* <Option value="right">right</Option> */}
+                          <Option value="left">居左</Option>
                         </Select>
                       </Form.Item>
                       <Form.Item label="文字垂直" style={{ flex: 1 }}>
@@ -582,6 +590,7 @@ export default class Edit extends React.PureComponent {
                     <Form.Item label="图片裁剪选项">
                       {activeObject.align}
                       <Select value={activeObject.align} onChange={(value) => this.updateElement(activeObjectIndex, { align: value })}>
+                        <Option value="">为空不选</Option>
                         <Option value="vertical-align">垂直居中</Option>
                         <Option value="horizontal-align">水平居中</Option>
                         <Option value="both-align">垂直水平居中</Option>