diff options
Diffstat (limited to 'src/client/views/PropertiesView.tsx')
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 32 |
1 files changed, 18 insertions, 14 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 19c138a21..297820e37 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -21,7 +21,7 @@ import { LinkManager } from '../util/LinkManager'; import { SelectionManager } from '../util/SelectionManager'; import { SharingManager } from '../util/SharingManager'; import { Transform } from '../util/Transform'; -import { undoBatch, UndoManager } from '../util/UndoManager'; +import { undoable, undoBatch, UndoManager } from '../util/UndoManager'; import { EditableView } from './EditableView'; import { FilterPanel } from './FilterPanel'; import { Colors } from './global/globalEnums'; @@ -538,6 +538,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { className="inputBox-input" type="text" value={value} + readOnly={true} onChange={e => { setter(e.target.value); }} @@ -656,21 +657,21 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { return this.inputBoxDuo( 'hgt', this.shapeHgt, - (val: string) => { + undoable((val: string) => { if (!isNaN(Number(val))) { this.shapeHgt = val; } return true; - }, + }, 'set height'), 'H:', 'wid', this.shapeWid, - (val: string) => { + undoable((val: string) => { if (!isNaN(Number(val))) { this.shapeWid = val; } return true; - }, + }, 'set width'), 'W:' ); } @@ -678,21 +679,21 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { return this.inputBoxDuo( 'Xps', this.shapeXps, - (val: string) => { + undoable((val: string) => { if (val !== '0' && !isNaN(Number(val))) { this.shapeXps = val; } return true; - }, + }, 'set x coord'), 'X:', 'Yps', this.shapeYps, - (val: string) => { + undoable((val: string) => { if (val !== '0' && !isNaN(Number(val))) { this.shapeYps = val; } return true; - }, + }, 'set y coord'), 'Y:' ); } @@ -867,7 +868,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { regInput = (key: string, value: any, setter: (val: string) => {}) => { return ( <div className="inputBox"> - <input className="inputBox-input" type="text" value={value} onChange={e => setter(e.target.value)} /> + <input className="inputBox-input" type="text" readOnly={true} value={value} onChange={e => setter(e.target.value)} /> <div className="inputBox-button"> <div className="inputBox-button-up" key="up2" onPointerDown={undoBatch(action(() => this.upDownButtons('up', key)))}> <FontAwesomeIcon icon="caret-up" color="white" size="sm" /> @@ -1228,8 +1229,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } }); - @undoBatch - changeFollowBehavior = action((follow: Opt<string>) => this.sourceAnchor && (this.sourceAnchor.followLinkLocation = follow)); + changeFollowBehavior = undoable((loc: Opt<string>) => this.sourceAnchor && (this.sourceAnchor.followLinkLocation = loc), 'change follow behavior'); @undoBatch changeAnimationBehavior = action((behavior: string) => this.sourceAnchor && (this.sourceAnchor.followLinkAnimEffect = behavior)); @@ -1315,6 +1315,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { autoComplete={'off'} id="link_relationship_input" value={StrCast(LinkManager.currentLink?.link_relationship)} + readOnly={true} onKeyDown={this.onRelationshipKey} onBlur={this.onSelectOutRelationship} onChange={e => this.handlelinkRelationshipChange(e.currentTarget.value)} @@ -1332,6 +1333,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { style={{ textAlign: 'left' }} id="link_description_input" value={Field.toString(LinkManager.currentLink?.link_description as any as Field)} + readOnly={true} onKeyDown={this.onDescriptionKey} onBlur={this.onSelectOutDesc} onChange={e => this.handleDescriptionChange(e.currentTarget.value)} @@ -1457,7 +1459,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { <select style={{ width: '100%', gridColumn: 2 }} onChange={e => this.changeAnimationBehavior(e.currentTarget.value)} value={StrCast(this.sourceAnchor?.followLinkAnimEffect, 'default')}> <option value="default">Default</option> {[PresEffect.None, PresEffect.Zoom, PresEffect.Lightspeed, PresEffect.Fade, PresEffect.Flip, PresEffect.Rotate, PresEffect.Bounce, PresEffect.Roll].map(effect => ( - <option value={effect.toString()}>{effect.toString()}</option> + <option key={effect.toString()} value={effect.toString()}> + {effect.toString()} + </option> ))} </select> <div className="effectDirection" style={{ marginLeft: '10px', display: 'grid', width: 40, height: 36, gridColumn: 3, gridTemplateRows: '12px 12px 12px' }}> @@ -1567,7 +1571,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { <div className="propertiesView-input inline" style={{ display: 'grid', gridTemplateColumns: '78px calc(100% - 108px) 50px' }}> <p>Zoom %</p> <div className="ribbon-property" style={{ display: !targZoom ? 'none' : 'inline-flex' }}> - <input className="presBox-input" style={{ width: '100%' }} type="number" value={zoom} /> + <input className="presBox-input" style={{ width: '100%' }} readOnly={true} type="number" value={zoom} /> <div className="ribbon-propertyUpDown" style={{ display: 'flex', flexDirection: 'column' }}> <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), 0.1))}> <FontAwesomeIcon icon={'caret-up'} /> |