diff options
Diffstat (limited to 'src/client/views/nodes/DocumentView.tsx')
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 70 |
1 files changed, 37 insertions, 33 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index bec5ea5c1..cbd92c159 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -523,7 +523,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field appearanceItems.splice(0, 0, { description: 'Open in Lightbox', event: () => DocumentView.SetLightboxDoc(this.Document), icon: 'external-link-alt' }); } appearanceItems.push({ description: 'Pin', event: () => this._props.pinToPres(this.Document, {}), icon: 'map-pin' }); - appearanceItems.push({ description: 'AI view', event: () => this._docView?.toggleAIEditor(), icon: 'map-pin' }); + this._componentView?.componentAIView?.() && appearanceItems.push({ description: 'AI view', event: () => this._docView?.toggleAIEditor(), icon: 'map-pin' }); !Doc.noviceMode && templateDoc && appearanceItems.push({ description: 'Open Template ', event: () => this._props.addDocTab(templateDoc, OpenWhere.addRight), icon: 'eye' }); !appearance && appearanceItems.length && cm.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'compass' }); @@ -660,7 +660,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field this._props .ScreenToLocalTransform() .translate(-NumCast(this.Document.borderWidth), -this.headerMargin - NumCast(this.Document.borderWidth)) - .scale(this._props.showAIEditor ? (this._props.PanelHeight() || 1) / this.aiContentsHeight() : 1); + .scale(this.viewingAiEditor() ? (this._props.PanelHeight() || 1) / this.aiContentsHeight() : 1); onClickFunc = () => (this.disableClickScriptFunc ? undefined : this.onClickHdlr); setHeight = (height: number) => { !this._props.suppressSetHeight && (this.layoutDoc._height = Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), height + 2 * NumCast(this.Document.borderWidth))); } // prettier-ignore setContentView = action((view: ViewBoxInterface<FieldViewProps>) => { this._componentView = view; }); // prettier-ignore @@ -712,32 +712,34 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field aiContentsWidth = () => (this.aiContentsHeight() * (this._props.NativeWidth?.() || 1)) / (this._props.NativeHeight?.() || 1); aiContentsHeight = () => Math.max(10, this._props.PanelHeight() - this._aiWinHeight * this.uiBtnScaling); - aiEditor = () => ( - <> - <div - className="documentView-editorView-history" - ref={r => this.historyRef(this._oldAiWheel, (this._oldAiWheel = r))} - style={{ - transform: `scale(${this.uiBtnScaling})`, - height: this.aiContentsHeight() / this.uiBtnScaling, - width: ((this._props.PanelWidth() - this.aiContentsWidth()) * 0.95) / this.uiBtnScaling, - }}> - {this._componentView?.componentAIViewHistory?.() ?? null} - </div> - <div - className="documentView-editorView" - style={{ - background: SnappingManager.userVariantColor, - width: `${100 / this.uiBtnScaling}%`, // - transform: `scale(${this.uiBtnScaling})`, - }} - ref={r => this.historyRef(this._oldHistoryWheel, (this._oldHistoryWheel = r))}> - <div className="documentView-editorView-resizer" /> - {this._componentView?.componentAIView?.() ?? null} - {this._props.DocumentView?.() ? <TagsView background={this.backgroundBoxColor} Views={[this._props.DocumentView?.()]} /> : null} - </div> - </> - ); + @computed get aiEditor() { + return ( + <> + <div + className="documentView-editorView-history" + ref={r => this.historyRef(this._oldAiWheel, (this._oldAiWheel = r))} + style={{ + transform: `scale(${this.uiBtnScaling})`, + height: this.aiContentsHeight() / this.uiBtnScaling, + width: ((this._props.PanelWidth() - this.aiContentsWidth()) * 0.95) / this.uiBtnScaling, + }}> + {this._componentView?.componentAIViewHistory?.() ?? null} + </div> + <div + className="documentView-editorView" + style={{ + background: SnappingManager.userVariantColor, + width: `${100 / this.uiBtnScaling}%`, // + transform: `scale(${this.uiBtnScaling})`, + }} + ref={r => this.historyRef(this._oldHistoryWheel, (this._oldHistoryWheel = r))}> + <div className="documentView-editorView-resizer" /> + {this._componentView?.componentAIView?.() ?? null} + {this._props.DocumentView?.() ? <TagsView background={this.backgroundBoxColor} Views={[this._props.DocumentView?.()]} /> : null} + </div> + </> + ); + } @computed get tagsOverlay() { return ( <div @@ -760,6 +762,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field ); } widgetOverlayFunc = () => (this.widgetDecorations ? this.widgetOverlay : null); + viewingAiEditor = () => (this._props.showAIEditor && this._componentView?.componentAIView?.() !== undefined ? this.aiEditor : null); @computed get viewBoxContents() { TraceMobx(); const isInk = this.layoutDoc._layout_isSvg && !this._props.LayoutTemplateString; @@ -770,8 +773,8 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field className="documentView-contentsView" style={{ pointerEvents: (isInk || noBackground ? 'none' : this.contentPointerEvents()) ?? (this._mounted ? 'all' : 'none'), - width: this._props.showAIEditor ? this.aiContentsWidth() : undefined, - height: this._props.showAIEditor ? this.aiContentsHeight() : this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined, + width: this.viewingAiEditor() ? this.aiContentsWidth() : undefined, + height: this.viewingAiEditor() ? this.aiContentsHeight() : this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined, }}> <DocumentContentsView {...this._props} @@ -779,8 +782,8 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field pointerEvents={this.contentPointerEvents} setContentViewBox={this.setContentView} childFilters={this.childFilters} - PanelWidth={this._props.showAIEditor ? this.aiContentsWidth : this._props.PanelWidth} - PanelHeight={this._props.showAIEditor ? this.aiContentsHeight : this.panelHeight} + PanelWidth={this.viewingAiEditor() ? this.aiContentsWidth : this._props.PanelWidth} + PanelHeight={this.viewingAiEditor() ? this.aiContentsHeight : this.panelHeight} setHeight={this.setHeight} isContentActive={this.isContentActive} ScreenToLocalTransform={this.screenToLocalContent} @@ -790,7 +793,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field hideClickBehaviors={BoolCast(this.Document.hideClickBehaviors)} /> </div> - {this._props.showAIEditor ? this.aiEditor() : this.tagsOverlayFunc()} + {this.viewingAiEditor() ?? this.tagsOverlayFunc()} {this.widgetOverlayFunc()} </> ); @@ -1256,6 +1259,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { public get allLinks() { return this._docViewInternal?._allLinks ?? []; } // prettier-ignore public get TagBtnHeight() { return this._docViewInternal?.TagsBtnHeight; } // prettier-ignore public get UIBtnScaling() { return this._docViewInternal?.uiBtnScaling; } // prettier-ignore + public get HasAIEditor() { return !!this._docViewInternal?._componentView?.componentAIView?.(); } // prettier-ignore get LayoutFieldKey() { return Doc.LayoutFieldKey(this.Document, this._props.LayoutTemplateString); |