diff options
Diffstat (limited to 'src/client/views/PropertiesView.tsx')
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 180 |
1 files changed, 61 insertions, 119 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 208ed56c9..e4e7bec32 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -41,6 +41,7 @@ import { DocumentView, OpenWhere } from './nodes/DocumentView'; import { StyleProviderFuncType } from './nodes/FieldView'; import { KeyValueBox } from './nodes/KeyValueBox'; import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails'; +import { LinkBox } from './nodes/LinkBox'; const _global = (window /* browser */ || global) /* node */ as any; interface PropertiesViewProps { @@ -69,6 +70,10 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps return SelectionManager.SelectedSchemaDoc || this.selectedDocumentView?.Document || Doc.ActiveDashboard; } + @computed get selectedLink() { + return this.selectedDocumentView?.ComponentView instanceof LinkBox ? this.selectedDocumentView.Document : LinkManager.Instance.currentLink; + } + @computed get selectedLayoutDoc() { return SelectionManager.SelectedSchemaDoc || this.selectedDocumentView?.layoutDoc || Doc.ActiveDashboard; } @@ -110,7 +115,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps componentDidMount() { this._disposers.link = reaction( - () => LinkManager.currentLink, + () => this.selectedLink, link => { link && this.CloseAll(); link && (this.openLinks = true); @@ -173,10 +178,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 && 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); @@ -263,20 +272,19 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps @computed get contextCount() { if (this.selectedDocumentView) { const target = this.selectedDocumentView.Document; - const embeddings = DocListCast(target.proto_embeddings); - return embeddings.length - 1; + return Doc.GetEmbeddings(target).length - 1; } else { return 0; } } @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++); @@ -572,19 +580,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 ? ( + {this.selectedLink?.title ? ( <p className="propertiesView-titleExtender"> <> <b>Link:</b> - {LinkManager.currentLink.title} + {this.selectedLink.title} </> </p> ) : null} @@ -738,7 +746,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); @@ -783,7 +791,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() { @@ -798,6 +806,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); } @@ -810,6 +821,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( @@ -842,16 +856,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) { @@ -940,19 +954,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() { @@ -993,53 +1007,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> @@ -1223,10 +1195,10 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps } @computed get description() { - return Field.toString(LinkManager.currentLink?.link_description as any as Field); + return Field.toString(this.selectedLink?.link_description as any as Field); } @computed get relationship() { - return StrCast(LinkManager.currentLink?.link_relationship); + return StrCast(this.selectedLink?.link_relationship); } @observable private relationshipButtonColor: string = ''; @@ -1236,7 +1208,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps handleDescriptionChange = undoable( action((value: string) => { - if (LinkManager.currentLink && this.selectedDoc) { + if (this.selectedLink) { this.setDescripValue(value); } }), @@ -1245,7 +1217,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps handlelinkRelationshipChange = undoable( action((value: string) => { - if (LinkManager.currentLink && this.selectedDoc) { + if (this.selectedLink) { this.setlinkRelationshipValue(value); } }), @@ -1254,17 +1226,17 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps @undoBatch setDescripValue = action((value: string) => { - if (LinkManager.currentLink) { - Doc.GetProto(LinkManager.currentLink).link_description = value; + if (this.selectedLink) { + this.selectedLink[DocData].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 (this.selectedLink) { + const prevRelationship = StrCast(this.selectedLink.link_relationship); + this.selectedLink.link_relationship = value; + Doc.GetProto(this.selectedLink).link_relationship = value; const linkRelationshipList = StrListCast(Doc.UserDoc().link_relationshipList); const linkRelationshipSizes = NumListCast(Doc.UserDoc().link_relationshipSizes); const linkColorList = StrListCast(Doc.UserDoc().link_ColorList); @@ -1348,20 +1320,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(() => this.selectedLink && (this.selectedLink[prop] = !this.selectedLink[prop])))); }; @computed get destinationAnchor() { - const ldoc = LinkManager.currentLink; - const lanch = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.currentLinkAnchor; + const ldoc = this.selectedLink; + 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 ?? (this.selectedLink && this.destinationAnchor ? LinkManager.getOppositeAnchor(this.selectedLink, this.destinationAnchor) : this.selectedLink); } toggleAnchorProp = (e: React.PointerEvent, prop: string, anchor?: Doc, value: any = true, ovalue: any = false, cb: (val: any) => any = val => val) => { @@ -1387,7 +1359,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(this.selectedLink?.link_relationship)} onKeyDown={this.onRelationshipKey} onBlur={this.onSelectOutRelationship} onChange={e => this.handlelinkRelationshipChange(e.currentTarget.value)} @@ -1404,7 +1376,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(this.selectedLink?.link_description)} onKeyDown={this.onDescriptionKey} onBlur={this.onSelectOutDesc} onChange={e => this.handleDescriptionChange(e.currentTarget.value)} @@ -1426,7 +1398,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(this.selectedLink!); return ( <> @@ -1439,36 +1411,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.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.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.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"> @@ -1487,7 +1429,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} + {this.selectedLink?.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' }}> @@ -1672,7 +1614,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(this.selectedLink!); if (!this.selectedDoc && !this.isPres) { return ( <div className="propertiesView" style={{ width: this._props.width }}> @@ -1693,7 +1635,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} /> @@ -1703,12 +1645,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} + {!this.selectedLink || !this.openLinks ? null : this.linkProperties} {this.inkSubMenu} {this.contextsSubMenu} - {this.fieldsSubMenu} {isNovice ? null : this.sharingSubMenu} {this.filtersSubMenu} {isNovice ? null : this.layoutSubMenu} |