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.tsx104
1 files changed, 19 insertions, 85 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 07f285eaf..3ae2362a1 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -741,7 +741,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
switch (field) {
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 'stk': selDoc.stroke_width = NumCast(this.selectedDoc?.[DocData].stroke_width) + (dirs === 'up' ? 0.1 : -0.1); break;
case 'wid':
const oldWidth = NumCast(selDoc._width);
const oldHeight = NumCast(selDoc._height);
@@ -786,7 +786,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
};
getField(key: string) {
- return Field.toString(this.selectedDoc?.[key] as Field);
+ return Field.toString(this.selectedDoc?.[DocData][key] as Field);
}
@computed get shapeXps() {
@@ -801,6 +801,9 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
@computed get shapeWid() {
return NumCast(this.selectedDoc?._width);
}
+ @computed get strokeThk() {
+ return NumCast(this.selectedDoc?.[DocData].stroke_width);
+ }
set shapeXps(value) {
this.selectedDoc && (this.selectedDoc.x = Math.round(value * 100) / 100);
}
@@ -813,6 +816,9 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
set shapeHgt(value) {
this.selectedDoc && (this.selectedDoc._height = Math.round(value * 100) / 100);
}
+ set strokeThk(value) {
+ this.selectedDoc && (this.selectedDoc[DocData].stroke_width = Math.round(value * 100) / 100);
+ }
@computed get hgtInput() {
return this.inputBoxDuo(
@@ -845,16 +851,16 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
private _lastDash: any = '2';
@computed get colorFil() {
- return StrCast(this.selectedDoc?.fillColor);
+ return StrCast(this.selectedDoc?.[DocData].fillColor);
}
@computed get colorStk() {
- return StrCast(this.selectedDoc?.color);
+ return StrCast(this.selectedDoc?.[DocData].color);
}
set colorFil(value) {
- this.selectedDoc && (this.selectedDoc.fillColor = value ? value : undefined);
+ this.selectedDoc && (this.selectedDoc[DocData].fillColor = value ? value : undefined);
}
set colorStk(value) {
- this.selectedDoc && (this.selectedDoc.color = value ? value : undefined);
+ this.selectedDoc && (this.selectedDoc[DocData].color = value ? value : undefined);
}
colorButton(value: string, type: string, setter: () => void) {
@@ -943,19 +949,19 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
}
set dashdStk(value) {
value && (this._lastDash = value);
- this.selectedDoc && (this.selectedDoc.stroke_dash = value ? this._lastDash : undefined);
+ this.selectedDoc && (this.selectedDoc[DocData].stroke_dash = value ? this._lastDash : undefined);
}
set markScal(value) {
- this.selectedDoc && (this.selectedDoc.stroke_markerScale = Number(value));
+ this.selectedDoc && (this.selectedDoc[DocData].stroke_markerScale = Number(value));
}
set widthStk(value) {
- this.selectedDoc && (this.selectedDoc.stroke_width = Number(value));
+ this.selectedDoc && (this.selectedDoc[DocData].stroke_width = Number(value));
}
set markHead(value) {
- this.selectedDoc && (this.selectedDoc.stroke_startMarker = value);
+ this.selectedDoc && (this.selectedDoc[DocData].stroke_startMarker = value);
}
set markTail(value) {
- this.selectedDoc && (this.selectedDoc.stroke_endMarker = value);
+ this.selectedDoc && (this.selectedDoc[DocData].stroke_endMarker = value);
}
@computed get stkInput() {
@@ -996,53 +1002,11 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
@computed get widthAndDash() {
return (
<div className="widthAndDash">
- <div className="width">
- <div className="width-top">
- <div className="width-title">Width:</div>
- <div className="width-input">{this.stkInput}</div>
- </div>
- <input
- className="width-range"
- type="range"
- style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}
- defaultValue={Number(this.widthStk)}
- min={1}
- max={100}
- onChange={action(e => (this.widthStk = e.target.value))}
- onMouseDown={e => {
- this._widthUndo = UndoManager.StartBatch('width undo');
- }}
- onMouseUp={e => {
- this._widthUndo?.end();
- this._widthUndo = undefined;
- }}
- />
- </div>
+ <div className="width">{this.getNumber('Thickness', '', 0, Math.max(50, this.strokeThk), this.strokeThk, (val: number) => !isNaN(val) && (this.strokeThk = val), 50, 1)}</div>
+ <div className="width">{this.getNumber('Arrow Scale', '', 0, Math.max(10, this.markScal), this.markScal, (val: number) => !isNaN(val) && (this.markScal = val), 10, 1)}</div>
<div className="arrows">
<div className="arrows-head">
- <div className="width-top">
- <div className="width-title">Arrow Scale:</div>
- {/* <div className="width-input">{this.markScalInput}</div> */}
- </div>
- <input
- className="width-range"
- type="range"
- defaultValue={this.markScal}
- style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}
- min={0}
- max={10}
- onChange={action(e => (this.markScal = +e.target.value))}
- onMouseDown={e => {
- this._widthUndo = UndoManager.StartBatch('scale undo');
- }}
- onMouseUp={e => {
- this._widthUndo?.end();
- this._widthUndo = undefined;
- }}
- />
- </div>
- <div className="arrows-head">
<div className="arrows-head-title">Arrow Head: </div>
<input key="markHead" className="arrows-head-input" type="checkbox" checked={this.markHead !== ''} onChange={undoBatch(action(() => (this.markHead = this.markHead ? '' : 'arrow')))} />
</div>
@@ -1442,36 +1406,6 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
<p>Description</p>
{this.editDescription}
</div>
- <div className="propertiesView-input inline">
- <p>Show link</p>
- <button
- style={{ background: !LinkManager.Instance.currentLink?.link_displayLine ? '' : '#4476f7', borderRadius: 3 }}
- onPointerDown={e => this.toggleLinkProp(e, 'link_displayLine')}
- onClick={e => e.stopPropagation()}
- className="propertiesButton">
- <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
- </button>
- </div>
- <div className="propertiesView-input inline" style={{ marginLeft: 10 }}>
- <p>Auto-move anchors</p>
- <button
- style={{ background: !LinkManager.Instance.currentLink?.link_autoMoveAnchors ? '' : '#4476f7', borderRadius: 3 }}
- onPointerDown={e => this.toggleLinkProp(e, 'link_autoMoveAnchors')}
- onClick={e => e.stopPropagation()}
- className="propertiesButton">
- <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
- </button>
- </div>
- <div className="propertiesView-input inline" style={{ marginLeft: 10 }}>
- <p>Display arrow</p>
- <button
- style={{ background: !LinkManager.Instance.currentLink?.link_displayArrow ? '' : '#4476f7', borderRadius: 3 }}
- onPointerDown={e => this.toggleLinkProp(e, 'link_displayArrow')}
- onClick={e => e.stopPropagation()}
- className="propertiesButton">
- <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
- </button>
- </div>
</div>
{!hasSelectedAnchor ? null : (
<div className="propertiesView-section">
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-24 14:21:29 +0000