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.tsx117
1 files changed, 51 insertions, 66 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 229ceffe2..d0c47875f 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -120,9 +120,6 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
@observable openAddSlide: boolean = false;
@observable openSlideOptions: boolean = false;
- // For ink groups
- @observable inkDoc: Doc | undefined = undefined;
-
@observable _controlButton: boolean = false;
private _disposers: { [name: string]: IReactionDisposer } = {};
@@ -826,7 +823,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
set shapeWid(value) { this.selectedDoc && (this.selectedDoc._width = Math.round(value * 100) / 100); } // prettier-ignore
@computed get shapeHgt() { return NumCast(this.selectedDoc?._height); } // prettier-ignore
set shapeHgt(value) { this.selectedDoc && (this.selectedDoc._height = Math.round(value * 100) / 100); } // prettier-ignore
- @computed get strokeThk(){ return this.containsInkDoc ? NumCast(this.inkDoc?.[DocData].stroke_width) : NumCast(this.selectedDoc?.[DocData].stroke_width); } // prettier-ignore
+ @computed get strokeThk(){ return NumCast(this.selectedStrokes.lastElement()?.[DocData].stroke_width); } // prettier-ignore
set strokeThk(value) {
this.selectedStrokes.forEach(doc => {
doc[DocData].stroke_width = Math.round(value * 100) / 100;
@@ -868,7 +865,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
private _lastDash: string = '2';
- @computed get colorFil() { return this.containsInkDoc ? StrCast(this.inkDoc?.[DocData].fillColor) : StrCast(this.selectedDoc?.[DocData].fillColor); } // prettier-ignore
+ @computed get colorFil() { return StrCast(this.selectedStrokes.lastElement()?.[DocData].fillColor); } // prettier-ignore
set colorFil(value) {
this.selectedStrokes.forEach(doc => {
const inkStroke = DocumentView.getDocumentView(doc)?.ComponentView as InkingStroke;
@@ -878,7 +875,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
}
});
}
- @computed get colorStk() { return this.containsInkDoc ? StrCast(this.inkDoc?.[DocData].color) : StrCast(this.selectedDoc?.[DocData].color); } // prettier-ignore
+ @computed get colorStk() { return StrCast(this.selectedStrokes.lastElement()?.[DocData].color); } // prettier-ignore
set colorStk(value) {
this.selectedStrokes.forEach(doc => {
doc[DocData].color = value || undefined;
@@ -956,9 +953,21 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
@computed get smoothAndColor() {
const targetDoc = this.selectedLayoutDoc;
+ const smoothNumber = this.getNumber(
+ 'Smooth Amount',
+ '',
+ 1,
+ Math.max(10, this.smoothAmt),
+ this.smoothAmt,
+ (val: number) => {
+ !isNaN(val) && (this.smoothAmt = val);
+ },
+ 10,
+ 1
+ );
return (
<div>
- {!targetDoc.layout_isSvg && (
+ {!targetDoc.layout_isSvg && this.containsInkDoc && (
<div className="color">
<Toggle
text={'Color with GPT'}
@@ -984,29 +993,16 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
fillWidth
toggleType={ToggleType.BUTTON}
onClick={undoable(() => {
- InkStrokeProperties.Instance.smoothInkStrokes(this.containsInkDoc ? DocListCast(targetDoc.data) : [targetDoc], this.smoothAmt);
+ InkStrokeProperties.Instance.smoothInkStrokes(this.selectedStrokes, this.smoothAmt);
}, 'smoothStrokes')}
/>
</div>
- <div className="smooth-slider">
- {this.getNumber(
- 'Smooth Amount',
- '',
- 1,
- Math.max(10, this.smoothAmt),
- this.smoothAmt,
- (val: number) => {
- !isNaN(val) && (this.smoothAmt = val);
- },
- 10,
- 1
- )}
- </div>
+ <div className="smooth-slider">{smoothNumber}</div>
</div>
);
}
- @computed get dashdStk() { return this.containsInkDoc? this.inkDoc?.stroke_dash || '' : this.selectedDoc?.stroke_dash || ''; } // prettier-ignore
+ @computed get dashdStk() { return this.selectedStrokes[0]?.stroke_dash || ''; } // prettier-ignore
set dashdStk(value) {
value && (this._lastDash = value as string);
this.selectedStrokes.forEach(doc => {
@@ -1148,54 +1144,51 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
this.dashdStk = this.dashdStk === '2' ? '0' : '2';
};
- @computed get appearanceEditor() {
- return (
- <div className="appearance-editor">
- {this.widthAndDash}
- {this.strokeAndFill}
- {this.smoothAndColor}
- </div>
- );
- }
-
@computed get inkEditor() {
return (
<div className="ink-editor">
{this.widthAndDash}
{this.strokeAndFill}
+ {this.smoothAndColor}
</div>
);
}
_sliderBatch: UndoManager.Batch | undefined;
+ _sliderKey = '';
setFinalNumber = () => {
+ this._sliderKey = '';
this._sliderBatch?.end();
};
- getNumber = (label: string, unit: string, min: number, max: number, number: number, setNumber: (val: number) => void, autorange?: number, autorangeMinVal?: number) => (
- <div key={label + (this.selectedDoc?.title ?? '')}>
- <NumberInput formLabel={label} formLabelPlacement="left" type={Type.SEC} unit={unit} fillWidth color={this.color} number={number} setNumber={setNumber} min={min} max={max} />
- <Slider
- key={label}
- onPointerDown={() => {
- this._sliderBatch = UndoManager.StartBatch('slider ' + label);
- }}
- multithumb={false}
- color={this.color}
- size={Size.XSMALL}
- min={min}
- max={max}
- autorangeMinVal={autorangeMinVal}
- autorange={autorange}
- number={number}
- unit={unit}
- decimals={1}
- setFinalNumber={this.setFinalNumber}
- setNumber={setNumber}
- fillWidth
- />
- </div>
- );
+ getNumber = (label: string, unit: string, min: number, max: number, number: number, setNumber: (val: number) => void, autorange?: number, autorangeMinVal?: number) => {
+ const key = this._sliderKey || label + min + max + number;
+ return (
+ <div key={label + (this.selectedDoc?.title ?? '')}>
+ <NumberInput formLabel={label} formLabelPlacement="left" type={Type.SEC} unit={unit} fillWidth color={this.color} number={number} setNumber={setNumber} min={min} max={max} />
+ <Slider
+ key={key}
+ onPointerDown={() => {
+ this._sliderKey = key;
+ this._sliderBatch = UndoManager.StartBatch('slider ' + label);
+ }}
+ multithumb={false}
+ color={this.color}
+ size={Size.XSMALL}
+ min={min}
+ max={max}
+ autorangeMinVal={autorangeMinVal}
+ autorange={autorange}
+ number={number}
+ unit={unit}
+ decimals={1}
+ setFinalNumber={this.setFinalNumber}
+ setNumber={setNumber}
+ fillWidth
+ />
+ </div>
+ );
+ };
setVal = (func: (doc: Doc, val: number) => void) => (val: number) => this.selectedDoc && !isNaN(val) && func(this.selectedDoc, val);
@computed get transformEditor() {
@@ -1294,7 +1287,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
return (
<>
<PropertiesSection title="Appearance" isOpen={this.openAppearance} setIsOpen={bool => { this.openAppearance = bool; }} onDoubleClick={this.CloseAll}>
- {this.selectedLayoutDoc?.layout_isSvg ? this.appearanceEditor : null}
+ {this.selectedStrokes.length ? this.inkEditor : null}
</PropertiesSection>
<PropertiesSection title="Transform" isOpen={this.openTransform} setIsOpen={bool => { this.openTransform = bool; }} onDoubleClick={this.CloseAll}>
{this.transformEditor}
@@ -1311,19 +1304,12 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
const childDocs: Doc[] = DocListCast(selectedDoc[DocData].data);
for (let i = 0; i < childDocs.length; i++) {
if (DocumentView.getDocumentView(childDocs[i])?.layoutDoc?.layout_isSvg) {
- this.inkDoc = childDocs[i];
return true;
}
}
return false;
};
- @computed get inkCollectionSubMenu() {
- return <PropertiesSection title="Ink Appearance" isOpen={this.openAppearance} setIsOpen={bool => { this.openAppearance = bool; }} onDoubleClick={this.CloseAll}>
- {this.isGroup && this.containsInk(this.selectedDoc) ? this.appearanceEditor : null}
- </PropertiesSection>; // prettier-ignore
- }
-
@computed get fieldsSubMenu() {
return (
<PropertiesSection
@@ -1875,7 +1861,6 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
{this.linksSubMenu}
{!this.selectedLink || !this.openLinks ? null : this.linkProperties}
{this.inkSubMenu}
- {this.inkCollectionSubMenu}
{this.contextsSubMenu}
{isNovice ? null : this.sharingSubMenu}
{this.filtersSubMenu}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 18:17:55 +0000