diff options
Diffstat (limited to 'src/client/views/nodes/DocumentView.tsx')
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 76 |
1 files changed, 57 insertions, 19 deletions
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<FieldViewProps & Document 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' }); !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<FieldViewProps & Document this._props .ScreenToLocalTransform() .translate(0, -this.headerMargin) - .scale(this._props.showAIEditor ? (this._props.PanelHeight() || 1) / this.rph() : 1); + .scale(this._props.showAIEditor ? (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)); } // prettier-ignore setContentView = action((view: ViewBoxInterface<FieldViewProps>) => { this._componentView = view; }); // prettier-ignore @@ -713,9 +714,32 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document return this._props.styleProvider?.(doc, props, property); }; - @observable _aiWinHeight = 95; - rpw = () => (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<FieldViewProps & Document className="documentView-contentsView" style={{ pointerEvents: (isInk || noBackground ? 'none' : this.contentPointerEvents()) ?? (this._mounted ? 'all' : 'none'), - width: this._props.showAIEditor ? this.rpw() : undefined, - height: this._props.showAIEditor ? this.rph() : this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined, + width: this._props.showAIEditor ? this.aiContentsWidth() : undefined, + height: this._props.showAIEditor ? this.aiContentsHeight() : this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined, }}> <DocumentContentsView {...this._props} @@ -735,8 +759,8 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document pointerEvents={this.contentPointerEvents} setContentViewBox={this.setContentView} childFilters={this.childFilters} - PanelWidth={this._props.showAIEditor ? this.rpw : this._props.PanelWidth} - PanelHeight={this._props.showAIEditor ? this.rph : this.panelHeight} + PanelWidth={this._props.showAIEditor ? this.aiContentsWidth : this._props.PanelWidth} + PanelHeight={this._props.showAIEditor ? this.aiContentsHeight : this.panelHeight} setHeight={this.setHeight} isContentActive={this.isContentActive} ScreenToLocalTransform={this.screenToLocalContent} @@ -746,23 +770,38 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document hideClickBehaviors={BoolCast(this.Document.hideClickBehaviors)} /> </div> - {!this._props.showAIEditor ? null : ( + {!this._props.showAIEditor ? ( + <div + className="documentView-noAiWidgets" + style={{ + width: `${100 / this.uiBtnScaling}%`, // + transform: `scale(${this.uiBtnScaling})`, + bottom: this.maxWidgetSize, + }}> + {this.widgetDecorations ?? null} + </div> + ) : ( <> <div className="documentView-editorView-history" - ref={r => { - 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} </div> <div className="documentView-editorView" - ref={r => { - 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))}> <div className="documentView-editorView-resizer" /> {this._componentView?.componentAIView?.() ?? null} + {this.widgetDecorations ?? null} </div> </> )} @@ -934,7 +973,6 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document {this.captionView} </div> )} - {this.widgetDecorations ?? null} </div> )); }; @@ -1232,7 +1270,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { } @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<DocumentViewProps>() { 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); |