|
|
@@ -54,6 +54,7 @@ export default class Edit extends React.PureComponent {
|
|
|
}
|
|
|
|
|
|
updateElement =(index, value) => {
|
|
|
+ // console.log(index, value);
|
|
|
const _ele = this.state.element.slice()
|
|
|
const _tar = _ele[index] // dom
|
|
|
// console.log(_tar,value);
|
|
|
@@ -256,38 +257,74 @@ 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) }}
|
|
|
+ // disableDragging={item.fixed}
|
|
|
+ size={{
|
|
|
+ width: Number.parseFloat(item.width),
|
|
|
+ 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) => { // 单击、双击文字框 出现白屏
|
|
|
- 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 })
|
|
|
- }}
|
|
|
+ onDragStop={(e, d) => {
|
|
|
+ this.updateElement(index, {
|
|
|
+ dx: d.x,
|
|
|
+ dy: d.y + item.size
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ onResizeStop={(e, direction, ref, delta, position) => {
|
|
|
+ // 单击、双击文字框 出现白屏
|
|
|
+ switch (direction) {
|
|
|
+ case "left":
|
|
|
+ this.updateElement(index, {
|
|
|
+ dx: position.x
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case "top":
|
|
|
+ this.updateElement(index, {
|
|
|
+ dy: item.dy - delta.height
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ 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 : ''}
|
|
|
+ className={
|
|
|
+ activeObjectIndex === index ? styles.outline : ""
|
|
|
+ }
|
|
|
+ // enableResizing={{
|
|
|
+ // top:false, right:true, bottom:false, left:false, topRight:false, bottomRight:false, bottomLeft:false, topLeft:false
|
|
|
+ // }}
|
|
|
>
|
|
|
<div
|
|
|
className={styles.textRnd}
|
|
|
- onClick={() => this.setState({ activeObjectIndex: index })}
|
|
|
+ onClick={() =>
|
|
|
+ this.setState({ activeObjectIndex: index })
|
|
|
+ }
|
|
|
style={{
|
|
|
WebkitLineClamp: clampLine,
|
|
|
// 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',
|
|
|
+ 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',
|
|
|
+ position: "relative",
|
|
|
textAlign: item.float_x,
|
|
|
writingMode: item.vertical && "vertical-lr",
|
|
|
- display: item.vertical&& "inline-block" || item.float_x === 'center' && "inline-block",
|
|
|
+ display:
|
|
|
+ (item.vertical && "inline-block") ||
|
|
|
+ (item.float_x === "center" && "inline-block")
|
|
|
// left: (Number.parseFloat(bgWidth) - Number.parseFloat(item.dx) - Number.parseFloat(item.width)) / 2 + 'px'
|
|
|
- }}>
|
|
|
+ }}
|
|
|
+ >
|
|
|
{item.content}
|
|
|
</div>
|
|
|
</Rnd>
|
|
|
- )
|
|
|
+ );
|
|
|
}
|
|
|
if (item.type === 'pic' || item.type === 'mat') {
|
|
|
return (
|
张敬