aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/MainView.scss17
-rw-r--r--src/client/views/MainView.tsx77
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx2
-rw-r--r--src/client/views/collections/CollectionView.tsx14
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx2
-rw-r--r--src/client/views/nodes/ContentFittingDocumentView.tsx1
6 files changed, 68 insertions, 45 deletions
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 0ee30f117..a8924c6b1 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -7,11 +7,18 @@
width: 100%;
}
+.mainContent-div {
+ position: relative;
+ width:100%;
+ height:100%;
+}
+
// add nodes menu. Note that the + button is actually an input label, not an actual button.
.mainView-docButtons {
position: absolute;
bottom: 20px;
- left: 250px;
+ left: calc(100% + 5px);
+ z-index: 1;
}
#mainView-container {
@@ -27,13 +34,13 @@
width: 100%;
height: 100%;
position: absolute;
+ display: flex;
}
.mainView-flyoutContainer {
display: flex;
flex-direction: column;
- position: absolute;
- width: 100%;
+ position: relative;
height: 100%;
.documentView-node-topmost {
@@ -59,9 +66,11 @@
.mainView-libraryFlyout {
height: 100%;
+ width:100%;
position: absolute;
display: flex;
flex-direction: column;
+ z-index: 1;
}
.mainView-expandFlyoutButton {
@@ -73,6 +82,7 @@
.mainView-libraryHandle {
width: 20px;
+ left: calc(100% - 10px);
height: 40px;
top: 50%;
border: 1px solid black;
@@ -80,6 +90,7 @@
position: absolute;
z-index: 1;
touch-action: none;
+ cursor: ew-resize;
}
.mainView-workspace {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 29719a6eb..175af1abc 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -39,6 +39,7 @@ import MarqueeOptionsMenu from './collections/collectionFreeForm/MarqueeOptionsM
import InkSelectDecorations from './InkSelectDecorations';
import { Scripting } from '../util/Scripting';
import { AudioBox } from './nodes/AudioBox';
+import { TraceMobx } from '../../new_fields/util';
@observer
export class MainView extends React.Component {
@@ -260,38 +261,41 @@ export class MainView extends React.Component {
getPHeight = () => this._panelHeight;
getContentsHeight = () => this._panelHeight - this._buttonBarHeight;
+ _emptyPath = [];
+ @computed get mainDocView() {
+ return <DocumentView Document={this.mainContainer!}
+ DataDoc={undefined}
+ LibraryPath={this._emptyPath}
+ addDocument={undefined}
+ addDocTab={this.addDocTabFunc}
+ pinToPres={emptyFunction}
+ onClick={undefined}
+ ruleProvider={undefined}
+ removeDocument={undefined}
+ ScreenToLocalTransform={Transform.Identity}
+ ContentScaling={returnOne}
+ PanelWidth={this.getPWidth}
+ PanelHeight={this.getPHeight}
+ renderDepth={0}
+ backgroundColor={returnEmptyString}
+ focus={emptyFunction}
+ parentActive={returnTrue}
+ whenActiveChanged={emptyFunction}
+ bringToFront={emptyFunction}
+ ContainingCollectionView={undefined}
+ ContainingCollectionDoc={undefined}
+ zoomToScale={emptyFunction}
+ getScale={returnOne}
+ />
+ }
@computed get dockingContent() {
+ TraceMobx();
const mainContainer = this.mainContainer;
- const flyoutWidth = this.flyoutWidth; // bcz: need to be here because Measure messes with observables.
- const flyoutTranslate = this._flyoutTranslate;
+ const width = this.flyoutWidth;
return <Measure offset onResize={this.onResize}>
{({ measureRef }) =>
- <div ref={measureRef} id="mainContent-div" style={{ width: `calc(100% - ${flyoutTranslate ? flyoutWidth : 0}px`, transform: `translate(${flyoutTranslate ? flyoutWidth : 0}px, 0px)` }} onDrop={this.onDrop}>
- {!mainContainer ? (null) :
- <DocumentView Document={mainContainer}
- DataDoc={undefined}
- LibraryPath={[]}
- addDocument={undefined}
- addDocTab={this.addDocTabFunc}
- pinToPres={emptyFunction}
- onClick={undefined}
- ruleProvider={undefined}
- removeDocument={undefined}
- ScreenToLocalTransform={Transform.Identity}
- ContentScaling={returnOne}
- PanelWidth={this.getPWidth}
- PanelHeight={this.getPHeight}
- renderDepth={0}
- backgroundColor={returnEmptyString}
- focus={emptyFunction}
- parentActive={returnTrue}
- whenActiveChanged={emptyFunction}
- bringToFront={emptyFunction}
- ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined}
- zoomToScale={emptyFunction}
- getScale={returnOne}
- />}
+ <div ref={measureRef} className="mainContent-div" onDrop={this.onDrop} style={{ width: `calc(100% - ${width}px)` }}>
+ {!mainContainer ? (null) : this.mainDocView}
</div>
}
</Measure>;
@@ -416,6 +420,7 @@ export class MainView extends React.Component {
{CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
</button>
</div>
+ {this.docButtons}
</div>;
}
@@ -423,10 +428,9 @@ export class MainView extends React.Component {
const sidebar = this.userDoc && this.userDoc.sidebarContainer;
return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
<div className="mainView-mainContent" >
- <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger}>
- <div className="mainView-libraryHandle"
- style={{ cursor: "ew-resize", left: `${(this.flyoutWidth * (this._flyoutTranslate ? 1 : 0)) - 10}px`, backgroundColor: `${StrCast(sidebar.backgroundColor, "lightGray")}` }}
- onPointerDown={this.onPointerDown} onPointerOver={this.pointerOverDragger}>
+ <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
+ <div className="mainView-libraryHandle" onPointerDown={this.onPointerDown} onPointerOver={this.pointerOverDragger}
+ style={{ backgroundColor: `${StrCast(sidebar.backgroundColor, "lightGray")}` }} >
<span title="library View Dragger" style={{
width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
@@ -435,11 +439,9 @@ export class MainView extends React.Component {
}} />
</div>
<div className="mainView-libraryFlyout" style={{
- width: `${this.flyoutWidth}px`,
- zIndex: 1,
- transformOrigin: this._flyoutTranslate ? "" : "left center",
+ //transformOrigin: this._flyoutTranslate ? "" : "left center",
transition: this._flyoutTranslate ? "" : "width .5s",
- transform: `scale(${this._flyoutTranslate ? 1 : 0.8})`,
+ //transform: `scale(${this._flyoutTranslate ? 1 : 0.8})`,
boxShadow: this._flyoutTranslate ? "" : "rgb(156, 147, 150) 0.2vw 0.2vw 0.8vw"
}}>
{this.flyout}
@@ -471,7 +473,7 @@ export class MainView extends React.Component {
@computed get docButtons() {
if (CurrentUserUtils.UserDocument?.expandingButtons instanceof Doc) {
return <div className="mainView-docButtons" ref={this._docBtnRef}
- style={{ left: (this._flyoutTranslate ? this.flyoutWidth : 0) + 20, height: !CurrentUserUtils.UserDocument.expandingButtons.isExpanded ? "42px" : undefined }} >
+ style={{ height: !CurrentUserUtils.UserDocument.expandingButtons.isExpanded ? "42px" : undefined }} >
<MainViewNotifs />
<CollectionLinearView
Document={CurrentUserUtils.UserDocument.expandingButtons}
@@ -515,7 +517,6 @@ export class MainView extends React.Component {
{this.mainContent}
<PreviewCursor />
<ContextMenu />
- {this.docButtons}
<PDFMenu />
<MarqueeOptionsMenu />
<OverlayView />
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 4374cde3c..ffcb3e9ce 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -32,6 +32,7 @@ import React = require("react");
import { ButtonSelector } from './ParentDocumentSelector';
import { DocumentType } from '../../documents/DocumentTypes';
import { ComputedField } from '../../../new_fields/ScriptField';
+import { TraceMobx } from '../../../new_fields/util';
library.add(faFile);
const _global = (window /* browser */ || global /* node */) as any;
@@ -662,6 +663,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
}
@computed get docView() {
+ TraceMobx();
if (!this._document) return (null);
const document = this._document;
const resolvedDataDoc = document.layout instanceof Doc ? document : this._dataDoc;
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 54f5a2c42..cd546696f 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -32,6 +32,7 @@ import { SelectionManager } from '../../util/SelectionManager';
import './CollectionView.scss';
import { FieldViewProps, FieldView } from '../nodes/FieldView';
import { Touchable } from '../Touchable';
+const path = require('path');
library.add(faTh, faTree, faSquare, faProjectDiagram, faSignature, faThList, faFingerprint, faColumns, faEllipsisV, faImage, faEye as any, faCopy);
export enum CollectionViewType {
@@ -234,10 +235,17 @@ export class CollectionView extends Touchable<FieldViewProps> {
}
lightbox = (images: string[]) => {
+ if (!images.length) return (null);
+ const mainPath = path.extname(images[this._curLightboxImg]);
+ const nextPath = path.extname(images[(this._curLightboxImg + 1) % images.length]);
+ const prevPath = path.extname(images[(this._curLightboxImg + images.length - 1) % images.length]);
+ let main = images[this._curLightboxImg].replace(mainPath, "_o" + mainPath);
+ let next = images[(this._curLightboxImg + 1) % images.length].replace(nextPath, "_o" + nextPath);
+ let prev = images[(this._curLightboxImg + images.length - 1) % images.length].replace(prevPath, "_o" + prevPath);
return !this._isLightboxOpen ? (null) : (<Lightbox key="lightbox"
- mainSrc={images[this._curLightboxImg]}
- nextSrc={images[(this._curLightboxImg + 1) % images.length]}
- prevSrc={images[(this._curLightboxImg + images.length - 1) % images.length]}
+ mainSrc={main}
+ nextSrc={next}
+ prevSrc={prev}
onCloseRequest={action(() => this._isLightboxOpen = false)}
onMovePrevRequest={action(() => this._curLightboxImg = (this._curLightboxImg + images.length - 1) % images.length)}
onMoveNextRequest={action(() => this._curLightboxImg = (this._curLightboxImg + 1) % images.length)} />);
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 0d3748ded..81d8d467b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -711,7 +711,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
case "pivot": computedElementData = this.doPivotLayout(this._layoutPoolData); break;
default: computedElementData = this.doFreeformLayout(this._layoutPoolData); break;
}
- this.childLayoutPairs.filter(pair => this.isCurrent(pair.layout)).forEach(pair =>
+ this.childLayoutPairs.filter((pair, i) => this.isCurrent(pair.layout)).forEach(pair =>
computedElementData.elements.push({
ele: <CollectionFreeFormDocumentView key={pair.layout[Id]} dataProvider={this.childDataProvider}
ruleProvider={this.Document.isRuleProvider ? this.props.Document : this.props.ruleProvider}
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx
index 660a5bb7e..6d0ea33fa 100644
--- a/src/client/views/nodes/ContentFittingDocumentView.tsx
+++ b/src/client/views/nodes/ContentFittingDocumentView.tsx
@@ -45,6 +45,7 @@ interface ContentFittingDocumentViewProps {
@observer
export class ContentFittingDocumentView extends React.Component<ContentFittingDocumentViewProps>{
+ public get displayName() { return "DocumentView(" + this.props.Document?.title + ")"; } // this makes mobx trace() statements more descriptive
private get layoutDoc() { return this.props.Document && Doc.Layout(this.props.Document); }
private get nativeWidth() { return NumCast(this.layoutDoc!.nativeWidth, this.props.PanelWidth()); }
private get nativeHeight() { return NumCast(this.layoutDoc!.nativeHeight, this.props.PanelHeight()); }
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 08:03:25 +0000