aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/PropertiesView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/PropertiesView.tsx')
-rw-r--r--src/client/views/PropertiesView.tsx224
1 files changed, 65 insertions, 159 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 1111886d8..00e077f96 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -127,9 +127,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
const aspect = Doc.NativeAspect(layoutDoc, undefined, !layoutDoc._layout_fitWidth);
if (aspect) return Math.min(layoutDoc[Width](), Math.min(this.MAX_EMBED_HEIGHT * aspect, this.props.width - 20));
return Doc.NativeWidth(layoutDoc) ? Math.min(layoutDoc[Width](), this.props.width - 20) : this.props.width - 20;
- } else {
- return 0;
}
+ return 0;
};
@action
@@ -435,9 +434,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
}
@action
- toggleCheckbox = () => {
- this.layoutFields = !this.layoutFields;
- };
+ toggleCheckbox = () => (this.layoutFields = !this.layoutFields);
@computed get editableTitle() {
const titles = new Set<string>();
@@ -535,18 +532,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
marginLeft: title === '∠:' ? '39px' : '',
}}>
<div className="inputBox-title"> {title} </div>
- <input
- className="inputBox-input"
- type="text"
- value={value}
- readOnly={true}
- onChange={e => {
- setter(e.target.value);
- }}
- onKeyPress={e => {
- e.stopPropagation();
- }}
- />
+ <input className="inputBox-input" type="text" value={value} onChange={e => setter(e.target.value)} onKeyPress={e => e.stopPropagation()} />
<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" />
@@ -570,55 +556,50 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
@action
upDownButtons = (dirs: string, field: string) => {
+ const selDoc = this.selectedDoc;
+ if (!selDoc) return;
+ //prettier-ignore
switch (field) {
- case 'Xps':
- this.selectedDoc && (this.selectedDoc.x = NumCast(this.selectedDoc?.x) + (dirs === 'up' ? 10 : -10));
- break;
- case 'Yps':
- this.selectedDoc && (this.selectedDoc.y = NumCast(this.selectedDoc?.y) + (dirs === 'up' ? 10 : -10));
- break;
- case 'stk':
- this.selectedDoc && (this.selectedDoc.stroke_width = NumCast(this.selectedDoc?.stroke_width) + (dirs === 'up' ? 0.1 : -0.1));
- break;
+ case 'Xps': selDoc.x = NumCast(this.selectedDoc?.x) + (dirs === 'up' ? 10 : -10); break;
+ case 'Yps': selDoc.y = NumCast(this.selectedDoc?.y) + (dirs === 'up' ? 10 : -10); break;
+ case 'stk': selDoc.stroke_width = NumCast(this.selectedDoc?.stroke_width) + (dirs === 'up' ? 0.1 : -0.1); break;
case 'wid':
- const oldWidth = NumCast(this.selectedDoc?._width);
- const oldHeight = NumCast(this.selectedDoc?._height);
- const oldX = NumCast(this.selectedDoc?.x);
- const oldY = NumCast(this.selectedDoc?.y);
- this.selectedDoc && (this.selectedDoc._width = oldWidth + (dirs === 'up' ? 10 : -10));
- const doc = this.selectedDoc;
- if (doc?.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) {
- const ink = Cast(doc.data, InkField)?.inkData;
+ const oldWidth = NumCast(selDoc._width);
+ const oldHeight = NumCast(selDoc._height);
+ const oldX = NumCast(selDoc.x);
+ const oldY = NumCast(selDoc.y);
+ selDoc._width = oldWidth + (dirs === 'up' ? 10 : -10);
+ if (selDoc.type === DocumentType.INK && selDoc.x && selDoc.y && selDoc._height && selDoc._width) {
+ const ink = Cast(selDoc.data, InkField)?.inkData;
if (ink) {
const newPoints: { X: number; Y: number }[] = [];
for (var j = 0; j < ink.length; j++) {
// (new x — oldx) + (oldxpoint * newWidt)/oldWidth
- const newX = NumCast(doc.x) - oldX + (ink[j].X * NumCast(doc._width)) / oldWidth;
- const newY = NumCast(doc.y) - oldY + (ink[j].Y * NumCast(doc._height)) / oldHeight;
+ const newX = NumCast(selDoc.x) - oldX + (ink[j].X * NumCast(selDoc._width)) / oldWidth;
+ const newY = NumCast(selDoc.y) - oldY + (ink[j].Y * NumCast(selDoc._height)) / oldHeight;
newPoints.push({ X: newX, Y: newY });
}
- doc.data = new InkField(newPoints);
+ selDoc.data = new InkField(newPoints);
}
}
break;
case 'hgt':
- const oWidth = NumCast(this.selectedDoc?._width);
- const oHeight = NumCast(this.selectedDoc?._height);
- const oX = NumCast(this.selectedDoc?.x);
- const oY = NumCast(this.selectedDoc?.y);
- this.selectedDoc && (this.selectedDoc._height = oHeight + (dirs === 'up' ? 10 : -10));
- const docu = this.selectedDoc;
- if (docu?.type === DocumentType.INK && docu.x && docu.y && docu._height && docu._width) {
- const ink = Cast(docu.data, InkField)?.inkData;
+ const oWidth = NumCast(selDoc._width);
+ const oHeight = NumCast(selDoc._height);
+ const oX = NumCast(selDoc.x);
+ const oY = NumCast(selDoc.y);
+ selDoc._height = oHeight + (dirs === 'up' ? 10 : -10);
+ if (selDoc.type === DocumentType.INK && selDoc.x && selDoc.y && selDoc._height && selDoc._width) {
+ const ink = Cast(selDoc.data, InkField)?.inkData;
if (ink) {
const newPoints: { X: number; Y: number }[] = [];
for (var j = 0; j < ink.length; j++) {
// (new x — oldx) + (oldxpoint * newWidt)/oldWidth
- const newX = NumCast(docu.x) - oX + (ink[j].X * NumCast(docu._width)) / oWidth;
- const newY = NumCast(docu.y) - oY + (ink[j].Y * NumCast(docu._height)) / oHeight;
+ const newX = NumCast(selDoc.x) - oX + (ink[j].X * NumCast(selDoc._width)) / oWidth;
+ const newY = NumCast(selDoc.y) - oY + (ink[j].Y * NumCast(selDoc._height)) / oHeight;
newPoints.push({ X: newX, Y: newY });
}
- docu.data = new InkField(newPoints);
+ selDoc.data = new InkField(newPoints);
}
}
break;
@@ -658,21 +639,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
return this.inputBoxDuo(
'hgt',
this.shapeHgt,
- undoable((val: string) => {
- if (!isNaN(Number(val))) {
- this.shapeHgt = val;
- }
- return true;
- }, 'set height'),
+ undoable((val: string) => !isNaN(Number(val)) && (this.shapeHgt = val), 'set height'),
'H:',
'wid',
this.shapeWid,
- undoable((val: string) => {
- if (!isNaN(Number(val))) {
- this.shapeWid = val;
- }
- return true;
- }, 'set width'),
+ undoable((val: string) => !isNaN(Number(val)) && (this.shapeWid = val), 'set width'),
'W:'
);
}
@@ -680,21 +651,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
return this.inputBoxDuo(
'Xps',
this.shapeXps,
- undoable((val: string) => {
- if (val !== '0' && !isNaN(Number(val))) {
- this.shapeXps = val;
- }
- return true;
- }, 'set x coord'),
+ undoable((val: string) => val !== '0' && !isNaN(Number(val)) && (this.shapeXps = val), 'set x coord'),
'X:',
'Yps',
this.shapeYps,
- undoable((val: string) => {
- if (val !== '0' && !isNaN(Number(val))) {
- this.shapeYps = val;
- }
- return true;
- }, 'set y coord'),
+ undoable((val: string) => val !== '0' && !isNaN(Number(val)) && (this.shapeYps = val), 'set y coord'),
'Y:'
);
}
@@ -702,36 +663,24 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
@observable private _fillBtn = false;
@observable private _lineBtn = false;
- private _lastFill = '#D0021B';
- private _lastLine = '#D0021B';
private _lastDash: any = '2';
@computed get colorFil() {
- const ccol = this.getField('fillColor') || '';
- ccol && (this._lastFill = ccol);
- return ccol;
+ return StrCast(this.selectedDoc?.fillColor);
}
@computed get colorStk() {
- const ccol = this.getField('color') || '';
- ccol && (this._lastLine = ccol);
- return ccol;
+ return StrCast(this.selectedDoc?.color);
}
set colorFil(value) {
- value && (this._lastFill = value);
this.selectedDoc && (this.selectedDoc.fillColor = value ? value : undefined);
}
set colorStk(value) {
- value && (this._lastLine = value);
this.selectedDoc && (this.selectedDoc.color = value ? value : undefined);
}
- colorButton(value: string, type: string, setter: () => {}) {
- // return <div className="properties-flyout" onPointerEnter={e => this.changeScrolling(false)}
- // onPointerLeave={e => this.changeScrolling(true)}>
- // <Flyout anchorPoint={anchorPoints.LEFT_TOP}
- // content={type === "fill" ? this.fillPicker : this.linePicker}>
+ colorButton(value: string, type: string, setter: () => void) {
return (
- <div className="color-button" key="color" onPointerDown={undoBatch(action(e => setter()))}>
+ <div className="color-button" key="color" onPointerDown={action(e => setter())}>
<div
className="color-button-preview"
style={{
@@ -744,31 +693,17 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
{value === '' || value === 'transparent' ? <p style={{ fontSize: 25, color: 'red', marginTop: -14 }}>☒</p> : ''}
</div>
);
- // </Flyout>
- // </div>;
}
- @undoBatch
- @action
- switchStk = (color: ColorState) => {
- const val = String(color.hex);
- this.colorStk = val;
- return true;
- };
- @undoBatch
- @action
- switchFil = (color: ColorState) => {
- const val = String(color.hex);
- this.colorFil = val;
- return true;
- };
-
- colorPicker(setter: (color: string) => {}, type: string) {
+ colorPicker(color: string, setter: (color: string) => void) {
return (
<SketchPicker
- onChange={type === 'stk' ? this.switchStk : this.switchFil}
+ onChange={undoable(
+ action((color: ColorState) => setter(color.hex)),
+ 'set stroke color property'
+ )}
presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']}
- color={type === 'stk' ? this.colorStk : this.colorFil}
+ color={color}
/>
);
}
@@ -777,22 +712,20 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
return this.colorButton(this.colorFil, 'fill', () => {
this._fillBtn = !this._fillBtn;
this._lineBtn = false;
- return true;
});
}
@computed get lineButton() {
return this.colorButton(this.colorStk, 'line', () => {
this._lineBtn = !this._lineBtn;
this._fillBtn = false;
- return true;
});
}
@computed get fillPicker() {
- return this.colorPicker((color: string) => (this.colorFil = color), 'fil');
+ return this.colorPicker(this.colorFil, (color: string) => (this.colorFil = color));
}
@computed get linePicker() {
- return this.colorPicker((color: string) => (this.colorStk = color), 'stk');
+ return this.colorPicker(this.colorStk, (color: string) => (this.colorStk = color));
}
@computed get strokeAndFill() {
@@ -814,15 +747,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
);
}
- @computed get solidStk() {
- return this.selectedDoc?.color && (!this.selectedDoc?.stroke_dash || this.selectedDoc?.stroke_dash === '0') ? true : false;
- }
@computed get dashdStk() {
return this.selectedDoc?.stroke_dash || '';
}
- @computed get unStrokd() {
- return this.selectedDoc?.color ? true : false;
- }
@computed get widthStk() {
return this.getField('stroke_width') || '1';
}
@@ -835,12 +762,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
@computed get markTail() {
return this.getField('stroke_endMarker') || '';
}
- set solidStk(value) {
- this.dashdStk = '';
- this.unStrokd = !value;
- }
set dashdStk(value) {
- value && (this._lastDash = value) && (this.unStrokd = false);
+ value && (this._lastDash = value);
this.selectedDoc && (this.selectedDoc.stroke_dash = value ? this._lastDash : undefined);
}
set markScal(value) {
@@ -849,9 +772,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
set widthStk(value) {
this.selectedDoc && (this.selectedDoc.stroke_width = Number(value));
}
- set unStrokd(value) {
- this.colorStk = value ? '' : this._lastLine;
- }
set markHead(value) {
this.selectedDoc && (this.selectedDoc.stroke_startMarker = value);
}
@@ -869,7 +789,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" readOnly={true} value={value} onChange={e => setter(e.target.value)} />
+ <input className="inputBox-input" type="text" 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" />
@@ -1164,27 +1084,28 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
// handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.link_description = e.target.value; }
// handleRelationshipChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.link_relationship = e.target.value; }
- @undoBatch
- handleDescriptionChange = action((value: string) => {
- if (LinkManager.currentLink && this.selectedDoc) {
- this.setDescripValue(value);
- return true;
- }
- });
-
- @undoBatch
- handlelinkRelationshipChange = action((value: string) => {
- if (LinkManager.currentLink && this.selectedDoc) {
- this.setlinkRelationshipValue(value);
- return true;
- }
- });
+ handleDescriptionChange = undoable(
+ action((value: string) => {
+ if (LinkManager.currentLink && this.selectedDoc) {
+ this.setDescripValue(value);
+ }
+ }),
+ 'change link description'
+ );
+
+ handlelinkRelationshipChange = undoable(
+ action((value: string) => {
+ if (LinkManager.currentLink && this.selectedDoc) {
+ this.setlinkRelationshipValue(value);
+ }
+ }),
+ 'change link relationship'
+ );
@undoBatch
setDescripValue = action((value: string) => {
if (LinkManager.currentLink) {
Doc.GetProto(LinkManager.currentLink).link_description = value;
- return true;
}
});
@@ -1316,7 +1237,6 @@ 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)}
@@ -1333,8 +1253,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
autoComplete="off"
style={{ textAlign: 'left' }}
id="link_description_input"
- value={Field.toString(LinkManager.currentLink?.link_description as any as Field)}
- readOnly={true}
+ value={StrCast(LinkManager.currentLink?.link_description)}
onKeyDown={this.onDescriptionKey}
onBlur={this.onSelectOutDesc}
onChange={e => this.handleDescriptionChange(e.currentTarget.value)}
@@ -1688,19 +1607,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
{this.openSlideOptions ? <div className="propertiesView-presTrails-content">{PresBox.Instance.mediaOptionsDropdown}</div> : null}
</div>
)}
- {/* <div className="propertiesView-presTrails">
- <div className="propertiesView-presTrails-title"
- onPointerDown={action(() => { this.openAddSlide = !this.openAddSlide; })}
- style={{ backgroundColor: this.openAddSlide ? "black" : "" }}>
- &nbsp; <FontAwesomeIcon icon={"plus"} /> &nbsp; Add new slide
- <div className="propertiesView-presTrails-title-icon">
- <FontAwesomeIcon icon={this.openAddSlide ? "caret-down" : "caret-right"} size="lg" color="white" />
- </div>
- </div>
- {this.openAddSlide ? <div className="propertiesView-presTrails-content">
- {PresBox.Instance.newDocumentDropdown}
- </div> : null}
- </div> */}
</div>
);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 16:59:18 +0000