diff options
Diffstat (limited to 'src/client/views/nodes/DocumentView.tsx')
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 48 |
1 files changed, 26 insertions, 22 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 640d27aa1..e37658ca5 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -85,7 +85,7 @@ export interface DocumentViewProps extends FieldViewSharedProps { reactParent?: React.Component; // parent React component view (see CollectionFreeFormDocumentView) } @observer -export class DocumentViewInternal extends DocComponent<FieldViewProps & DocumentViewProps>() { +export class DocumentViewInternal extends DocComponent<FieldViewProps & DocumentViewProps & { showAIEditor: boolean }>() { // this makes mobx trace() statements more descriptive public get displayName() { return 'DocumentViewInternal(' + this.Document.title + ')'; } // prettier-ignore public static SelectAfterContextMenu = true; // whether a document should be selected after it's contextmenu is triggered. @@ -109,7 +109,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document private _mainCont = React.createRef<HTMLDivElement>(); private _titleRef = React.createRef<EditableView>(); private _dropDisposer?: DragManager.DragDropDisposer; - constructor(props: FieldViewProps & DocumentViewProps) { + constructor(props: FieldViewProps & DocumentViewProps & { showAIEditor: boolean }) { super(props); makeObservable(this); } @@ -122,12 +122,6 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document @observable _componentView: Opt<ViewBoxInterface<FieldViewProps>> = undefined; // needs to be accessed from DocumentView wrapper class @observable _animateScaleTime: Opt<number> = undefined; // milliseconds for animating between views. defaults to 300 if not uset @observable _animateScalingTo = 0; - @observable public _showAIEditor: boolean = false; - - @action - showAIEditor() { - this._showAIEditor = !this._showAIEditor; - } get _contentDiv() { return this._mainCont.current; } // prettier-ignore get _docView() { return this._props.DocumentView?.(); } // prettier-ignore @@ -689,7 +683,11 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document rootSelected = () => this._rootSelected; panelHeight = () => this._props.PanelHeight() - this.headerMargin; - screenToLocalContent = () => this._props.ScreenToLocalTransform().translate(0, -this.headerMargin); + screenToLocalContent = () => + this._props + .ScreenToLocalTransform() + .translate(0, -this.headerMargin) + .scale(this._props.showAIEditor ? (this._props.PanelHeight() || 1) / this.rph() : 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)); } // prettier-ignore setContentView = action((view: ViewBoxInterface<FieldViewProps>) => { this._componentView = view; }); // prettier-ignore @@ -715,9 +713,9 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document return this._props.styleProvider?.(doc, props, property); }; - @observable _aiWinHeight = 100; - rpw = () => this._props.PanelWidth() - this._aiWinHeight; - rph = () => this.panelHeight() - this._aiWinHeight; + @observable _aiWinHeight = 95; + rpw = () => (this.rph() * (this._props.NativeWidth?.() || 1)) / (this._props.NativeHeight?.() || 1); + rph = () => Math.max(10, this._props.PanelHeight() - this._aiWinHeight); @computed get viewBoxContents() { TraceMobx(); const isInk = this.layoutDoc._layout_isSvg && !this._props.LayoutTemplateString; @@ -728,8 +726,8 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document className="documentView-contentsView" style={{ pointerEvents: (isInk || noBackground ? 'none' : this.contentPointerEvents()) ?? (this._mounted ? 'all' : 'none'), - width: this._showAIEditor ? this.rpw() : undefined, - height: this._showAIEditor ? this.rph() : this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined, + width: this._props.showAIEditor ? this.rpw() : undefined, + height: this._props.showAIEditor ? this.rph() : this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined, }}> <DocumentContentsView {...this._props} @@ -737,8 +735,8 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document pointerEvents={this.contentPointerEvents} setContentViewBox={this.setContentView} childFilters={this.childFilters} - PanelHeight={this._showAIEditor ? this.rpw : this.panelHeight} - PanelWidth={this._showAIEditor ? this.rph : this._props.PanelWidth} + PanelWidth={this._props.showAIEditor ? this.rpw : this._props.PanelWidth} + PanelHeight={this._props.showAIEditor ? this.rph : this.panelHeight} setHeight={this.setHeight} isContentActive={this.isContentActive} ScreenToLocalTransform={this.screenToLocalContent} @@ -748,7 +746,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document hideClickBehaviors={BoolCast(this.Document.hideClickBehaviors)} /> </div> - {!this._showAIEditor ? null : ( + {!this._props.showAIEditor ? null : ( <> <div className="documentView-editorView-history" @@ -1168,10 +1166,13 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { @computed private get nativeScaling() { if (this.shouldNotScale) return 1; const minTextScale = this.Document.type === DocumentType.RTF ? 0.1 : 0; - if (this.layout_fitWidth || this._props.PanelHeight() / (this.effectiveNativeHeight || 1) > this._props.PanelWidth() / (this.effectiveNativeWidth || 1)) { - return Math.max(minTextScale, this._props.PanelWidth() / (this.effectiveNativeWidth || 1)); // width-limited or layout_fitWidth + const ai = this._showAIEditor && this.nativeWidth === this.layoutDoc.width ? 95 : 0; + const effNW = Math.max(this.effectiveNativeWidth - ai, 1); + const effNH = Math.max(this.effectiveNativeHeight - ai, 1); + if (this.layout_fitWidth || (this._props.PanelHeight() - ai) / effNH > (this._props.PanelWidth() - ai) / effNW) { + return Math.max(minTextScale, (this._props.PanelWidth() - ai) / effNW); // width-limited or layout_fitWidth } - return Math.max(minTextScale, this._props.PanelHeight() / (this.effectiveNativeHeight || 1)); // height-limited or unscaled + return Math.max(minTextScale, (this._props.PanelHeight() - ai) / effNH); // height-limited or unscaled } @computed private get panelWidth() { return this.effectiveNativeWidth ? this.effectiveNativeWidth * this.nativeScaling : this._props.PanelWidth(); @@ -1231,7 +1232,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { } @computed get layout_fitWidth() { - return this._props.fitWidth?.(this.layoutDoc) ?? this.layoutDoc?.layout_fitWidth; + return this._showAIEditor ? false : (this._props.fitWidth?.(this.layoutDoc) ?? this.layoutDoc?.layout_fitWidth); } @computed get anchorViewDoc() { return this._props.LayoutTemplateString?.includes('link_anchor_2') ? DocCast(this.Document.link_anchor_2) : this._props.LayoutTemplateString?.includes('link_anchor_1') ? DocCast(this.Document.link_anchor_1) : undefined; @@ -1327,9 +1328,11 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { } }; + @observable public _showAIEditor: boolean = false; + @action public toggleAIEditor = () => { - this._docViewInternal && this._docViewInternal.showAIEditor(); + this._showAIEditor = !this._showAIEditor; }; public setTextHtmlOverlay = action((text: string | undefined, effect?: Doc) => { @@ -1516,6 +1519,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { }}> <DocumentViewInternal {...this._props} + showAIEditor={this._showAIEditor} reactParent={undefined} isHovering={this.isHovering} fieldKey={this.LayoutFieldKey} |