From e4fca20fd4f7d7401fb62d5f700a15c604070484 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 19 Jan 2025 14:35:23 -0500 Subject: css fixes for ai editor views. --- src/client/views/nodes/DocumentView.tsx | 76 ++++++++++++++++++++++++--------- 1 file changed, 57 insertions(+), 19 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index bc3f27124..83c948f0b 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -551,6 +551,7 @@ export class DocumentViewInternal extends DocComponent 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' }); !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' }); @@ -687,7 +688,7 @@ export class DocumentViewInternal extends DocComponent 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) => { this._componentView = view; }); // prettier-ignore @@ -713,9 +714,32 @@ export class DocumentViewInternal extends DocComponent (this.rph() * (this._props.NativeWidth?.() || 1)) / (this._props.NativeHeight?.() || 1); - rph = () => Math.max(10, this._props.PanelHeight() - this._aiWinHeight); + @observable _aiWinHeight = 88; + + private _sideBtnWidth = 22; + @computed get currentScale() { + const viewXfScale = this._props.DocumentView!().screenToLocalScale(); + const x = NumCast(this.Document.height) / viewXfScale / 80; + const xscale = x >= 1 ? 0 : 1 / (1 + x * (viewXfScale - 1)); + const y = NumCast(this.Document.width) / viewXfScale / 200; + const yscale = y >= 1 ? 0 : 1 / (1 + y * viewXfScale - 1); + return Math.max(xscale, yscale, 1 / viewXfScale); + } + /** + * How much the content of the view is being scaled based on its nesting and its fit-to-width settings + */ + @computed get viewScaling() { return 1 / this.currentScale; } // prettier-ignore + /** + * The maximum size a UI widget can be scaled so that it won't be bigger in screen pixels than its normal 35 pixel size. + */ + @computed get maxWidgetSize() { return Math.min(this._sideBtnWidth * this.viewScaling, 0.25 * Math.min(NumCast(this.Document.width), NumCast(this.Document.height))); } // prettier-ignore + /** + * How much to reactively scale a UI element so that it is as big as it can be (up to its normal 35pixel size) without being too big for the Doc content + */ + @computed get uiBtnScaling() { return Math.max(this.maxWidgetSize / this._sideBtnWidth, 1) * Math.min(1, this.viewScaling); } // prettier-ignore + + aiContentsWidth = () => (this.aiContentsHeight() * (this._props.NativeWidth?.() || 1)) / (this._props.NativeHeight?.() || 1); + aiContentsHeight = () => Math.max(10, this._props.PanelHeight() - this._aiWinHeight * this.uiBtnScaling); @computed get viewBoxContents() { TraceMobx(); const isInk = this.layoutDoc._layout_isSvg && !this._props.LayoutTemplateString; @@ -726,8 +750,8 @@ export class DocumentViewInternal extends DocComponent - {!this._props.showAIEditor ? null : ( + {!this._props.showAIEditor ? ( +
+ {this.widgetDecorations ?? null} +
+ ) : ( <>
{ - this.historyRef(this._oldAiWheel, (this._oldAiWheel = r)); - }} - style={{ height: this.rph(), width: (this._props.PanelWidth() - this.rpw()) * 0.95 }}> + 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}
{ - this.historyRef(this._oldHistoryWheel, (this._oldHistoryWheel = r)); - }}> + style={{ + width: `${100 / this.uiBtnScaling}%`, // + transform: `scale(${this.uiBtnScaling})`, + }} + ref={r => this.historyRef(this._oldHistoryWheel, (this._oldHistoryWheel = r))}>
{this._componentView?.componentAIView?.() ?? null} + {this.widgetDecorations ?? null}
)} @@ -934,7 +973,6 @@ export class DocumentViewInternal extends DocComponent )} - {this.widgetDecorations ?? null}
)); }; @@ -1232,7 +1270,7 @@ export class DocumentView extends DocComponent() { } @computed get layout_fitWidth() { - return this._showAIEditor ? false : (this._props.fitWidth?.(this.layoutDoc) ?? this.layoutDoc?.layout_fitWidth); + return 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; @@ -1430,7 +1468,7 @@ export class DocumentView extends DocComponent() { public docViewPath = () => (this.containerViewPath ? [...this.containerViewPath(), this] : [this]); layout_fitWidthFunc = (/* doc: Doc */) => BoolCast(this.layout_fitWidth); - screenToLocalScale = () => this._props.ScreenToLocalTransform().Scale; + screenToLocalScale = () => this.screenToViewTransform().Scale; isSelected = () => this.IsSelected; select = (extendSelection: boolean, focusSelection?: boolean) => { if (!this._props.dontSelect?.()) DocumentView.SelectView(this, extendSelection); -- cgit v1.2.3-70-g09d2