diff options
Diffstat (limited to 'src/client/views/PropertiesView.tsx')
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 74 |
1 files changed, 39 insertions, 35 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index a7a065a95..07f285eaf 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -110,7 +110,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps componentDidMount() { this._disposers.link = reaction( - () => LinkManager.currentLink, + () => LinkManager.Instance.currentLink, link => { link && this.CloseAll(); link && (this.openLinks = true); @@ -173,10 +173,14 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps if (this.dataDoc && this.selectedDoc) { const ids = new Set<string>(reqdKeys); const docs: Doc[] = SelectionManager.Views.length < 2 ? [this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc] : SelectionManager.Views.map(dv => (this.layoutFields ? dv.layoutDoc : dv.dataDoc)); - docs.forEach(doc => Object.keys(doc).forEach(key => doc[key] !== ComputedField.undefined && key && ids.add(key))); + docs.forEach(doc => + Object.keys(doc) + .filter(filter) + .forEach(key => doc[key] !== ComputedField.undefined && key && ids.add(key)) + ); // prettier-ignore - Array.from(ids).filter(filter).sort().map(key => { + Array.from(ids).sort().map(key => { const multiple = Array.from(docs.reduce((set,doc) => set.add(doc[key]), new Set<FieldResult>()).keys()).length > 1; const editableContents = multiple ? '-multiple-' : Field.toKeyValueString(docs[0], key); const displayContents = multiple ? '-multiple-' : Field.toString(docs[0][key] as Field); @@ -270,12 +274,12 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps } @computed get links() { - const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.currentLinkAnchor ?? this.selectedDoc; + const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.Instance.currentLinkAnchor ?? this.selectedDoc; return !selAnchor ? null : <PropertiesDocBacklinksSelector Document={selAnchor} hideTitle={true} addDocTab={this._props.addDocTab} />; } @computed get linkCount() { - const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.currentLinkAnchor ?? this.selectedDoc; + const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.Instance.currentLinkAnchor ?? this.selectedDoc; var counter = 0; LinkManager.Links(selAnchor).forEach((l, i) => counter++); @@ -571,19 +575,19 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps return ( <div> <EditableText val={title} setVal={this.setTitle} color={this.color} type={Type.SEC} formLabel={'Title'} fillWidth /> - {LinkManager.currentLinkAnchor ? ( + {LinkManager.Instance.currentLinkAnchor ? ( <p className="propertiesView-titleExtender"> <> <b>Anchor:</b> - {LinkManager.currentLinkAnchor.title} + {LinkManager.Instance.currentLinkAnchor.title} </> </p> ) : null} - {LinkManager.currentLink?.title ? ( + {LinkManager.Instance.currentLink?.title ? ( <p className="propertiesView-titleExtender"> <> <b>Link:</b> - {LinkManager.currentLink.title} + {LinkManager.Instance.currentLink.title} </> </p> ) : null} @@ -1222,10 +1226,10 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps } @computed get description() { - return Field.toString(LinkManager.currentLink?.link_description as any as Field); + return Field.toString(LinkManager.Instance.currentLink?.link_description as any as Field); } @computed get relationship() { - return StrCast(LinkManager.currentLink?.link_relationship); + return StrCast(LinkManager.Instance.currentLink?.link_relationship); } @observable private relationshipButtonColor: string = ''; @@ -1235,7 +1239,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps handleDescriptionChange = undoable( action((value: string) => { - if (LinkManager.currentLink && this.selectedDoc) { + if (LinkManager.Instance.currentLink && this.selectedDoc) { this.setDescripValue(value); } }), @@ -1244,7 +1248,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps handlelinkRelationshipChange = undoable( action((value: string) => { - if (LinkManager.currentLink && this.selectedDoc) { + if (LinkManager.Instance.currentLink && this.selectedDoc) { this.setlinkRelationshipValue(value); } }), @@ -1253,17 +1257,17 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps @undoBatch setDescripValue = action((value: string) => { - if (LinkManager.currentLink) { - Doc.GetProto(LinkManager.currentLink).link_description = value; + if (LinkManager.Instance.currentLink) { + Doc.GetProto(LinkManager.Instance.currentLink).link_description = value; } }); @undoBatch setlinkRelationshipValue = action((value: string) => { - if (LinkManager.currentLink) { - const prevRelationship = StrCast(LinkManager.currentLink.link_relationship); - LinkManager.currentLink.link_relationship = value; - Doc.GetProto(LinkManager.currentLink).link_relationship = value; + if (LinkManager.Instance.currentLink) { + const prevRelationship = StrCast(LinkManager.Instance.currentLink.link_relationship); + LinkManager.Instance.currentLink.link_relationship = value; + Doc.GetProto(LinkManager.Instance.currentLink).link_relationship = value; const linkRelationshipList = StrListCast(Doc.UserDoc().link_relationshipList); const linkRelationshipSizes = NumListCast(Doc.UserDoc().link_relationshipSizes); const linkColorList = StrListCast(Doc.UserDoc().link_ColorList); @@ -1347,20 +1351,20 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps }; toggleLinkProp = (e: React.PointerEvent, prop: string) => { - setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.currentLink && (LinkManager.currentLink[prop] = !LinkManager.currentLink[prop])))); + setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.currentLink && (LinkManager.Instance.currentLink[prop] = !LinkManager.Instance.currentLink[prop])))); }; @computed get destinationAnchor() { - const ldoc = LinkManager.currentLink; - const lanch = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.currentLinkAnchor; + const ldoc = LinkManager.Instance.currentLink; + const lanch = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.Instance.currentLinkAnchor; if (ldoc && lanch) return LinkManager.getOppositeAnchor(ldoc, lanch) ?? lanch; return ldoc ? DocCast(ldoc.link_anchor_2) : ldoc; } @computed get sourceAnchor() { - const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.currentLinkAnchor; + const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.Instance.currentLinkAnchor; - return selAnchor ?? (LinkManager.currentLink && this.destinationAnchor ? LinkManager.getOppositeAnchor(LinkManager.currentLink, this.destinationAnchor) : LinkManager.currentLink); + return selAnchor ?? (LinkManager.Instance.currentLink && this.destinationAnchor ? LinkManager.getOppositeAnchor(LinkManager.Instance.currentLink, this.destinationAnchor) : LinkManager.Instance.currentLink); } toggleAnchorProp = (e: React.PointerEvent, prop: string, anchor?: Doc, value: any = true, ovalue: any = false, cb: (val: any) => any = val => val) => { @@ -1386,7 +1390,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }} autoComplete={'off'} id="link_relationship_input" - value={StrCast(LinkManager.currentLink?.link_relationship)} + value={StrCast(LinkManager.Instance.currentLink?.link_relationship)} onKeyDown={this.onRelationshipKey} onBlur={this.onSelectOutRelationship} onChange={e => this.handlelinkRelationshipChange(e.currentTarget.value)} @@ -1403,7 +1407,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps autoComplete="off" style={{ textAlign: 'left', color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }} id="link_description_input" - value={StrCast(LinkManager.currentLink?.link_description)} + value={StrCast(LinkManager.Instance.currentLink?.link_description)} onKeyDown={this.onDescriptionKey} onBlur={this.onSelectOutDesc} onChange={e => this.handleDescriptionChange(e.currentTarget.value)} @@ -1425,7 +1429,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps const zoom = Number((NumCast(this.sourceAnchor?.followLinkZoomScale, 1) * 100).toPrecision(3)); const targZoom = this.sourceAnchor?.followLinkZoom; const indent = 30; - const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.currentLink!); + const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.Instance.currentLink!); return ( <> @@ -1441,7 +1445,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-input inline"> <p>Show link</p> <button - style={{ background: !LinkManager.currentLink?.link_displayLine ? '' : '#4476f7', borderRadius: 3 }} + style={{ background: !LinkManager.Instance.currentLink?.link_displayLine ? '' : '#4476f7', borderRadius: 3 }} onPointerDown={e => this.toggleLinkProp(e, 'link_displayLine')} onClick={e => e.stopPropagation()} className="propertiesButton"> @@ -1451,7 +1455,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-input inline" style={{ marginLeft: 10 }}> <p>Auto-move anchors</p> <button - style={{ background: !LinkManager.currentLink?.link_autoMoveAnchors ? '' : '#4476f7', borderRadius: 3 }} + style={{ background: !LinkManager.Instance.currentLink?.link_autoMoveAnchors ? '' : '#4476f7', borderRadius: 3 }} onPointerDown={e => this.toggleLinkProp(e, 'link_autoMoveAnchors')} onClick={e => e.stopPropagation()} className="propertiesButton"> @@ -1461,7 +1465,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-input inline" style={{ marginLeft: 10 }}> <p>Display arrow</p> <button - style={{ background: !LinkManager.currentLink?.link_displayArrow ? '' : '#4476f7', borderRadius: 3 }} + style={{ background: !LinkManager.Instance.currentLink?.link_displayArrow ? '' : '#4476f7', borderRadius: 3 }} onPointerDown={e => this.toggleLinkProp(e, 'link_displayArrow')} onClick={e => e.stopPropagation()} className="propertiesButton"> @@ -1486,7 +1490,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <option value={OpenWhere.add}>Opening in new tab</option> <option value={OpenWhere.replace}>Replacing current tab</option> <option value={OpenWhere.inParent}>Opening in same collection</option> - {LinkManager.currentLink?.linksToAnnotation ? <option value="openExternal">Open in external page</option> : null} + {LinkManager.Instance.currentLink?.linksToAnnotation ? <option value="openExternal">Open in external page</option> : null} </select> </div> <div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 134px) 50px' }}> @@ -1671,7 +1675,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps render() { const isNovice = Doc.noviceMode; - const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.currentLink!); + const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.Instance.currentLink!); if (!this.selectedDoc && !this.isPres) { return ( <div className="propertiesView" style={{ width: this._props.width }}> @@ -1692,7 +1696,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps minWidth: this._props.width, }}> <div className="propertiesView-propAndInfoGrouping"> - <div className="propertiesView-title" style={{ width: this._props.width }}> + <div className="propertiesView-sectionTitle" style={{ width: this._props.width }}> Properties <div className="propertiesView-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/properties')}> <IconButton icon={<FontAwesomeIcon icon="info-circle" />} color={SettingsManager.userColor} /> @@ -1702,12 +1706,12 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-name">{this.editableTitle}</div> <div className="propertiesView-type"> {this.currentType} </div> + {this.fieldsSubMenu} {this.optionsSubMenu} {this.linksSubMenu} - {!LinkManager.currentLink || !this.openLinks ? null : this.linkProperties} + {!LinkManager.Instance.currentLink || !this.openLinks ? null : this.linkProperties} {this.inkSubMenu} {this.contextsSubMenu} - {this.fieldsSubMenu} {isNovice ? null : this.sharingSubMenu} {this.filtersSubMenu} {isNovice ? null : this.layoutSubMenu} |