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.tsx161
1 files changed, 74 insertions, 87 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 076dc8261..ad3f62990 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1409,7 +1409,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
@undoBatch
changeAnimationBehavior = action((behavior: string) => {
- const lanch = this.destinationAnchor;
+ const lanch = this.sourceAnchor;
if (lanch) {
lanch.presEffect = behavior;
}
@@ -1417,7 +1417,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
@undoBatch
@action
updateEffectDirection = (effect: PresEffectDirection) => {
- const lanch = this.destinationAnchor;
+ const lanch = this.sourceAnchor;
if (lanch) {
lanch.presEffectDirection = effect;
}
@@ -1425,7 +1425,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
@undoBatch
animationDirection = (direction: PresEffectDirection, icon: string, gridColumn: number, gridRow: number, opts: object) => {
- const lanch = this.destinationAnchor;
+ const lanch = this.sourceAnchor;
const color = lanch?.presEffectDirection === direction || (direction === PresEffectDirection.Center && !lanch?.presEffectDirection) ? Colors.LIGHT_BLUE : 'black';
return (
<Tooltip title={<div className="dash-tooltip">{direction}</div>}>
@@ -1451,7 +1451,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
document.getElementById('link_description_input')?.blur();
};
- onDescriptionKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+ onDescriptionKey = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter') {
this.setDescripValue(this.description);
document.getElementById('link_description_input')?.blur();
@@ -1508,15 +1508,15 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
@computed
get editDescription() {
return (
- <input
- autoComplete={'off'}
+ <textarea
+ autoComplete="off"
+ style={{ textAlign: 'left' }}
id="link_description_input"
value={StrCast(this.selectedDoc?.description)}
onKeyDown={this.onDescriptionKey}
onBlur={this.onSelectOutDesc}
onChange={e => this.handleDescriptionChange(e.currentTarget.value)}
className="text"
- type="text"
/>
);
}
@@ -1527,14 +1527,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
if (change) scale += change;
if (scale < 0.01) scale = 0.01;
if (scale > 1) scale = 1;
- this.destinationAnchor && (this.destinationAnchor.presZoom = scale);
- };
- // Converts seconds to ms and updates presTransition
- setZoomSrc = (number: String, change?: number) => {
- let scale = Number(number) / 100;
- if (change) scale += change;
- if (scale < 0.01) scale = 0.01;
- if (scale > 1) scale = 1;
this.sourceAnchor && (this.sourceAnchor.presZoom = scale);
};
@@ -1551,11 +1543,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
render() {
const isNovice = Doc.noviceMode;
- const zoom = Number((NumCast(this.destinationAnchor?.presZoom) * 100).toPrecision(3));
- const zoomSrc = Number((NumCast(this.sourceAnchor?.presZoom) * 100).toPrecision(3));
- const targZoom = this.destinationAnchor?.followLinkZoom;
- const srcZooom = this.sourceAnchor?.followLinkZoom;
- if (!this.selectedDoc && !this.isPres) {
+ const zoom = Number((NumCast(this.sourceAnchor?.presZoom, 1) * 100).toPrecision(3));
+ const targZoom = this.sourceAnchor?.followLinkZoom;
+ const selectedDoc = this.selectedDoc;
+ const indent = 30;
+ if (!selectedDoc && !this.isPres) {
return (
<div className="propertiesView" style={{ width: this.props.width }}>
<div className="propertiesView-title" style={{ width: this.props.width }}>
@@ -1564,7 +1556,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
</div>
);
} else {
- if (this.selectedDoc && !this.isPres) {
+ if (selectedDoc && !this.isPres) {
return (
<div
className="propertiesView"
@@ -1581,43 +1573,43 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
{this.contextsSubMenu}
{this.linksSubMenu}
- {!this.selectedDoc || !LinkManager.currentLink ? null : (
+ {!selectedDoc || !LinkManager.currentLink || !SelectionManager.Views().some(dv => DocListCast(dv.rootDoc.links).includes(LinkManager.currentLink!)) ? null : (
<>
<div className="propertiesView-section">
- <div className="propertiesView-input first">
- <p>Link Relationship</p>
+ <div className="propertiesView-input first" style={{ display: 'grid', gridTemplateColumns: '84px auto' }}>
+ <p>Relationship</p>
{this.editRelationship}
</div>
- <div className="propertiesView-input">
+ <div className="propertiesView-input" style={{ display: 'grid', gridTemplateColumns: '84px auto' }}>
<p>Description</p>
{this.editDescription}
</div>
</div>
<div className="propertiesView-section">
- <div className="propertiesView-input inline first">
- <p>Follow Behavior</p>
- <select onChange={e => this.changeFollowBehavior(e.currentTarget.value)} value={StrCast(this.selectedDoc.followLinkLocation, 'default')}>
+ <div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 84px)' }}>
+ <p>Follow by</p>
+ <select onChange={e => this.changeFollowBehavior(e.currentTarget.value)} value={StrCast(selectedDoc.followLinkLocation, 'default')}>
<option value="default">Default</option>
- <option value="add:left">Open in new left pane</option>
- <option value="add:right">Open in new right pane</option>
- <option value="replace:left">Replace left tab</option>
- <option value="replace:right">Replace right tab</option>
- <option value="fullScreen">Open full screen</option>
- <option value="add">Open in new tab</option>
- <option value="replace">Replace current tab</option>
- <option value="inPlace">Opin in place</option>
- {this.selectedDoc.linksToAnnotation ? <option value="openExternal">Open in external page</option> : null}
+ <option value="add:left">Opening in new left pane</option>
+ <option value="add:right">Opening in new right pane</option>
+ <option value="replace:left">Replacing left tab</option>
+ <option value="replace:right">Replacing right tab</option>
+ <option value="fullScreen">Opening full screen</option>
+ <option value="add">Opening in new tab</option>
+ <option value="replace">Replacing current tab</option>
+ <option value="inPlace">Opening in place</option>
+ {selectedDoc.linksToAnnotation ? <option value="openExternal">Open in external page</option> : null}
</select>
</div>
- <div className="propertiesView-input inline first">
- <p>Target Effect</p>
- <select style={{ width: '100%' }} onChange={e => this.changeAnimationBehavior(e.currentTarget.value)} value={StrCast(this.destinationAnchor?.presEffect, 'default')}>
+ <div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 134px) 50px' }}>
+ <p>Animation</p>
+ <select style={{ width: '100%', gridColumn: 2 }} onChange={e => this.changeAnimationBehavior(e.currentTarget.value)} value={StrCast(this.sourceAnchor?.presEffect, '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>
))}
</select>
- <div className="effectDirection" style={{ marginLeft: '10px', display: 'grid', width: 40 }}>
+ <div className="effectDirection" style={{ marginLeft: '10px', display: 'grid', width: 40, gridColumn: 3 }}>
{this.animationDirection(PresEffectDirection.Left, 'angle-right', 1, 2, {})}
{this.animationDirection(PresEffectDirection.Right, 'angle-left', 3, 2, {})}
{this.animationDirection(PresEffectDirection.Top, 'angle-down', 2, 1, {})}
@@ -1625,20 +1617,27 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
{this.animationDirection(PresEffectDirection.Center, '', 2, 2, { width: 10, height: 10, alignSelf: 'center' })}
</div>
</div>
- {PresBox.inputter('0.1', '0.1', '10', NumCast(this.destinationAnchor?.presTransition) / 1000, true, (val: string) =>
- PresBox.SetTransitionTime(val, (timeInMS: number) => this.destinationAnchor && (this.destinationAnchor.presTransition = timeInMS))
+ {PresBox.inputter(
+ '0.1',
+ '0.1',
+ '10',
+ NumCast(this.sourceAnchor?.presTransition) / 1000,
+ true,
+ (val: string) => PresBox.SetTransitionTime(val, (timeInMS: number) => this.sourceAnchor && (this.sourceAnchor.presTransition = timeInMS)),
+ indent
)}{' '}
<div
className={'slider-headers'}
style={{
display: 'grid',
justifyContent: 'space-between',
- width: '100%',
- gridTemplateColumns: 'auto auto auto',
+ width: `calc(100% - ${indent * 2}px)`,
+ marginLeft: indent,
+ marginRight: indent,
+ gridTemplateColumns: 'auto auto',
borderTop: 'solid',
}}>
<div className="slider-text">Fast</div>
- <div className="slider-text">Medium</div>
<div className="slider-text">Slow</div>
</div>{' '}
<div className="propertiesView-input inline">
@@ -1652,39 +1651,35 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
</button>
</div>
<div className="propertiesView-input inline">
+ <p>Show link</p>
+ <button style={{ background: !selectedDoc.linkDisplay ? '' : '#4476f7', borderRadius: 3 }} onPointerDown={e => this.toggleProp(e, 'linkDisplay')} 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 anchor</p>
<button
- style={{ background: !this.selectedDoc.linkAutoMove ? '' : '#4476f7', borderRadius: 3 }}
+ style={{ background: !selectedDoc.linkAutoMove ? '' : '#4476f7', borderRadius: 3 }}
onPointerDown={e => this.toggleProp(e, 'linkAutoMove')}
onClick={e => e.stopPropagation()}
className="propertiesButton">
<FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
</button>
</div>
- <div className="propertiesView-input inline">
- <p>Show link</p>
- <button
- style={{ background: !this.selectedDoc.linkDisplay ? '' : '#4476f7', borderRadius: 3 }}
- onPointerDown={e => this.toggleProp(e, 'linkDisplay')}
- onClick={e => e.stopPropagation()}
- className="propertiesButton">
- <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
- </button>
- </div>
- <div className="propertiesView-input inline">
+ <div className="propertiesView-input inline" style={{ marginLeft: 10 }}>
<p>Display arrow</p>
<button
- style={{ background: !this.selectedDoc.linkDisplayArrow ? '' : '#4476f7', borderRadius: 3 }}
+ style={{ background: !selectedDoc.linkDisplayArrow ? '' : '#4476f7', borderRadius: 3 }}
onPointerDown={e => this.toggleProp(e, 'linkDisplayArrow')}
onClick={e => e.stopPropagation()}
className="propertiesButton">
<FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
</button>
</div>
- <div className="propertiesView-input inline">
- <p>Zoom to target (% screen filled)</p>
- <div className="ribbon-property" style={{ display: !targZoom ? 'none' : 'flex' }}>
- <input className="presBox-input" type="number" value={zoom} />
+ <div className="propertiesView-input inline" style={{ display: 'grid', gridTemplateColumns: '78px calc(100% - 128px) 50px' }}>
+ <p>Zoom % screen</p>
+ <div className="ribbon-property" style={{ display: !targZoom ? 'none' : 'inline-flex' }}>
+ <input className="presBox-input" style={{ width: '100%' }} 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'} />
@@ -1695,36 +1690,28 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
</div>
</div>
<button
- style={{ background: !targZoom ? '' : '#4476f7', borderRadius: 3 }}
- onPointerDown={e => this.toggleAnchorProp(e, 'followLinkZoom', this.destinationAnchor)}
- onClick={e => e.stopPropagation()}
- className="propertiesButton">
- <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
- </button>
- </div>
- {!targZoom ? null : PresBox.inputter('0', '1', '100', zoom, true, this.setZoom)}
- <div className="propertiesView-input inline">
- <p>Zoom to source (% screen filled)</p>
- <div className="ribbon-property" style={{ display: !srcZooom ? 'none' : 'flex' }}>
- <input className="presBox-input" type="number" value={zoomSrc} />
- <div className="ribbon-propertyUpDown" style={{ display: 'flex', flexDirection: 'column' }}>
- <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoomSrc(String(zoomSrc), 0.1))}>
- <FontAwesomeIcon icon={'caret-up'} />
- </div>
- <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoomSrc(String(zoomSrc), -0.1))}>
- <FontAwesomeIcon icon={'caret-down'} />
- </div>
- </div>
- </div>
- <button
- style={{ background: !srcZooom ? '' : '#4476f7', borderRadius: 3 }}
+ style={{ background: !targZoom ? '' : '#4476f7', borderRadius: 3, gridColumn: 3 }}
onPointerDown={e => this.toggleAnchorProp(e, 'followLinkZoom', this.sourceAnchor)}
onClick={e => e.stopPropagation()}
className="propertiesButton">
<FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
</button>
</div>
- {!srcZooom ? null : PresBox.inputter('0', '1', '100', zoomSrc, true, this.setZoomSrc)}
+ {!targZoom ? null : PresBox.inputter('0', '1', '100', zoom, true, this.setZoom, 30)}
+ <div
+ className={'slider-headers'}
+ style={{
+ display: !targZoom ? 'none' : 'grid',
+ justifyContent: 'space-between',
+ width: `calc(100% - ${indent * 2}px)`,
+ marginLeft: indent,
+ marginRight: indent,
+ gridTemplateColumns: 'auto auto',
+ borderTop: 'solid',
+ }}>
+ <div className="slider-text">0%</div>
+ <div className="slider-text">100%</div>
+ </div>{' '}
</div>
</>
)}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-15 23:58:37 +0000