aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/DocumentManager.ts11
-rw-r--r--src/client/views/ContextMenu.scss4
-rw-r--r--src/client/views/MainView.scss40
-rw-r--r--src/client/views/MainView.tsx30
-rw-r--r--src/client/views/PropertiesView.scss8
-rw-r--r--src/client/views/PropertiesView.tsx16
-rw-r--r--src/client/views/collections/CollectionDockingView.scss2
-rw-r--r--src/client/views/collections/CollectionMenu.tsx5
-rw-r--r--src/client/views/collections/TabDocView.scss1
-rw-r--r--src/client/views/collections/TabDocView.tsx10
-rw-r--r--src/client/views/collections/collectionFreeForm/MarqueeView.tsx7
-rw-r--r--src/client/views/globalCssVariables.scss2
-rw-r--r--src/client/views/nodes/ColorBox.tsx4
-rw-r--r--src/client/views/nodes/ContentFittingDocumentView.tsx2
-rw-r--r--src/client/views/nodes/PresBox.tsx205
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.scss2
-rw-r--r--src/client/views/presentationview/PresElementBox.tsx2
17 files changed, 190 insertions, 161 deletions
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 805e0e897..14aaeaec0 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -128,14 +128,9 @@ export class DocumentManager {
}
- static addView = (doc: Doc, finished?: () => void, presCollection?: Doc) => {
- if (presCollection) {
- const collectionDocView = DocumentManager.Instance.getDocumentView(presCollection);
- if (collectionDocView) collectionDocView.props.addDocTab(doc, "replace");
- } else {
- CollectionDockingView.AddSplit(doc, "right");
- finished?.();
- }
+ static addView = (doc: Doc, finished?: () => void) => {
+ CollectionDockingView.AddSplit(doc, "right");
+ finished?.();
}
public jumpToDocument = async (
targetDoc: Doc, // document to display
diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 7467bc043..b514de5f2 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -43,7 +43,6 @@
.contextMenu-item {
// width: 11vw; //10vw
height: 25px; //2vh
- background: whitesmoke;
display: flex; //comment out to allow search icon to be inline with search text
justify-content: left;
align-items: center;
@@ -58,7 +57,6 @@
// padding: 10px 0px 10px 0px;
white-space: nowrap;
font-size: 13px;
- color: grey;
letter-spacing: 2px;
text-transform: uppercase;
padding-right: 30px;
@@ -75,7 +73,6 @@
.contextMenu-description {
// width: 11vw; //10vw
- background: whitesmoke;
display: flex; //comment out to allow search icon to be inline with search text
justify-content: left;
-webkit-touch-callout: none;
@@ -89,7 +86,6 @@
// padding: 10px 0px 10px 0px;
white-space: nowrap;
font-size: 10px;
- color: grey;
letter-spacing: 1px;
text-transform: uppercase;
padding-right: 30px;
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index b608eceb1..b49990433 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -153,7 +153,7 @@
cursor: auto;
}
-.mainView-innerContent {
+.mainView-innerContent, .mainView-innerContent-dark {
display: contents;
flex-direction: row;
position: relative;
@@ -174,6 +174,43 @@
right: 0;
position: absolute;
z-index: 2;
+ background-color: rgb(159, 159, 159);
+ .editable-title {
+ background-color: lightgrey;
+ }
+ }
+
+}
+.mainView-innerContent-dark
+{
+ .propertiesView {
+ background-color: #252525;
+ input {
+ background-color: dimgrey;
+ }
+ .propertiesView-sharingTable
+ {
+ background-color: dimgrey;
+ }
+ .editable-title {
+ background-color: dimgrey;
+ }
+ .propertiesView-field {
+ background-color: dimgrey;
+ }
+ }
+ .mainView-propertiesDragger,
+ .mainView-libraryHandle {
+ background: #353535;
+ }
+}
+.mainView-container-dark {
+ .contextMenu-cont {
+ background: dimgrey;
+ color: white;
+ input::placeholder {
+ color:white;
+ }
}
}
@@ -334,7 +371,6 @@
position: relative;
z-index: 41; // lm_maximised has a z-index of 40 and this needs to be above that
touch-action: none;
- background-color: lightgrey;
cursor: grab;
display: flex;
align-items: center;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 1730007a5..3a3dbc68f 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -229,25 +229,29 @@ export class MainView extends React.Component {
getContentsHeight = () => this._panelHeight - Number(SEARCH_PANEL_HEIGHT.replace("px", ""));
defaultBackgroundColors = (doc: Opt<Doc>, renderDepth: number) => {
- if (doc?.type === DocumentType.COL) {
- return Doc.IsSystem(doc) ? "lightgrey" : StrCast(renderDepth > 0 ? Doc.UserDoc().activeCollectionNestedBackground : Doc.UserDoc().activeCollectionBackground);
- }
if (this.darkScheme) {
switch (doc?.type) {
- case DocumentType.FONTICON: return "white";
+ case DocumentType.PRESELEMENT: return "dimgrey";
+ case DocumentType.PRES: return "#3e3e3e";
+ case DocumentType.FONTICON: return "black";
case DocumentType.RTF || DocumentType.LABEL || DocumentType.BUTTON: return "#2d2d2d";
case DocumentType.LINK:
- case DocumentType.COL: if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "rgb(62,62,62)";
+ case DocumentType.COL:
+ return Doc.IsSystem(doc) ? "rgb(62,62,62)" : StrCast(renderDepth > 0 ? Doc.UserDoc().activeCollectionNestedBackground : Doc.UserDoc().activeCollectionBackground);
+ //if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "rgb(62,62,62)";
default: return "black";
}
} else {
switch (doc?.type) {
+ case DocumentType.PRESELEMENT: return "";
case DocumentType.FONTICON: return "black";
case DocumentType.RTF: return "#f1efeb";
case DocumentType.BUTTON:
case DocumentType.LABEL: return "lightgray";
case DocumentType.LINK:
- case DocumentType.COL: if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "lightgray";
+ case DocumentType.COL:
+ return Doc.IsSystem(doc) ? "lightgrey" : StrCast(renderDepth > 0 ? Doc.UserDoc().activeCollectionNestedBackground : Doc.UserDoc().activeCollectionBackground);
+ //if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "lightgray";
default: return "white";
}
}
@@ -345,7 +349,7 @@ export class MainView extends React.Component {
ContainingCollectionView={undefined}
ContainingCollectionDoc={undefined}
relative={true}
- forcedBackgroundColor={() => "lightgrey"}
+ forcedBackgroundColor={() => this.darkScheme ? "rgb(62,62,62)" : "lightgrey"}
/>
</div>
{this.docButtons}
@@ -411,18 +415,18 @@ export class MainView extends React.Component {
@computed get mainInnerContent() {
return <>
{this.menuPanel}
- <div className="mainView-innerContent" >
+ <div className={`mainView-innerContent${this.darkScheme ? "-dark" : ""}`}>
{this.flyout}
- <div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined }} onPointerDown={this.onFlyoutPointerDown} >
- <FontAwesomeIcon icon="chevron-left" color="black" size="sm" />
+ < div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined, }} onPointerDown={this.onFlyoutPointerDown} >
+ <FontAwesomeIcon icon="chevron-left" color={this.darkScheme ? "white" : "black"} size="sm" />
</div>
{this.dockingContent}
<div className="mainView-propertiesDragger" onPointerDown={this.onPropertiesPointerDown} style={{ right: this.propertiesWidth() - 1 }}>
- <FontAwesomeIcon icon={this.propertiesWidth() < 10 ? "chevron-left" : "chevron-right"} color="black" size="sm" />
+ <FontAwesomeIcon icon={this.propertiesWidth() < 10 ? "chevron-left" : "chevron-right"} color={this.darkScheme ? "white" : "black"} size="sm" />
</div>
- {this.propertiesWidth() < 10 ? (null) : <PropertiesView width={this.propertiesWidth()} height={this.getContentsHeight()} />}
+ {this.propertiesWidth() < 10 ? (null) : <PropertiesView backgroundColor={this.defaultBackgroundColors} width={this.propertiesWidth()} height={this.getContentsHeight()} />}
</div>
</>;
}
@@ -443,7 +447,7 @@ export class MainView extends React.Component {
expandFlyout = action((button: Doc) => {
this._flyoutWidth = (this._flyoutWidth || 250);
this._sidebarContent.proto = button.target as any;
- button._backgroundColor = "lightgrey";
+ button._backgroundColor = this.darkScheme ? "dimgrey" : "lightgrey";
button.color = "black";
this._lastButton = button;
});
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index ce2a87733..1365725cb 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -1,6 +1,4 @@
.propertiesView {
-
- background-color: rgb(205, 205, 205);
height: 100%;
font-family: "Noto Sans";
cursor: auto;
@@ -9,7 +7,6 @@
overflow-y: auto;
.propertiesView-title {
- background-color: rgb(159, 159, 159);
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
@@ -335,7 +332,6 @@
}
}
}
-
.propertiesView-fields {
//border-bottom: 1px solid black;
//padding: 8.5px;
@@ -390,7 +386,7 @@
}
}
- .field {
+ .propertiesView-field {
display: flex;
font-size: 7px;
background-color: #e8e8e8;
@@ -400,7 +396,7 @@
padding-left: 3px;
}
- .uneditable-field {
+ .propertiesView-uneditable-field {
display: flex;
overflow-y: visible;
margin-bottom: 2px;
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 4dea0ddaa..2a13ab937 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -5,7 +5,7 @@ import { intersection } from "lodash";
import { action, computed, observable } from "mobx";
import { observer } from "mobx-react";
import { ColorState, SketchPicker } from "react-color";
-import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, WidthSym } from "../../fields/Doc";
+import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, WidthSym, Opt } from "../../fields/Doc";
import { Id } from "../../fields/FieldSymbols";
import { InkField } from "../../fields/InkField";
import { ComputedField } from "../../fields/ScriptField";
@@ -36,6 +36,7 @@ const _global = (window /* browser */ || global /* node */) as any;
interface PropertiesViewProps {
width: number;
height: number;
+ backgroundColor: (doc: Opt<Doc>, renderDepth: number) => Opt<string>;
}
@observer
@@ -144,7 +145,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
</div>);
}
}
- rows.push(<div className="field" key={"newKeyValue"} style={{ marginTop: "3px" }}>
+ rows.push(<div className="propertiesView-field" key={"newKeyValue"} style={{ marginTop: "3px" }}>
<EditableView
key="editableView"
contents={"add key:value or #tags"}
@@ -172,14 +173,14 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
docs.forEach(doc => docvals.add(doc[key]));
const contents = Array.from(docvals.keys()).length > 1 ? "-multiple" : docs[0][key];
if (key[0] === "#") {
- rows.push(<div className="uneditable-field" key={key}>
+ rows.push(<div className="propertiesView-uneditable-field" key={key}>
<span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key}</span>
&nbsp;
</div>);
} else if (contents !== undefined) {
const value = Field.toString(contents as Field);
if (noviceReqFields.includes(key) || key.indexOf("lastModified") !== -1) {
- rows.push(<div className="uneditable-field" key={key}>
+ rows.push(<div className="propertiesView-uneditable-field" key={key}>
<span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key + ": "}</span>
<div style={{ whiteSpace: "nowrap", overflowX: "hidden" }}>{value}</div>
</div>);
@@ -200,7 +201,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
}
}
}
- rows.push(<div className="field" key={"newKeyValue"} style={{ marginTop: "3px" }}>
+ rows.push(<div className="propertiesView-field" key={"newKeyValue"} style={{ marginTop: "3px" }}>
<EditableView
key="editableView"
contents={"add key:value or #tags"}
@@ -253,7 +254,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
return !this.selectedDoc ? (null) : <PropertiesDocContextSelector Document={this.selectedDoc} hideTitle={true} addDocTab={(doc, where) => CollectionDockingView.AddSplit(doc, "right")} />;
}
- previewBackground = () => "lightgrey";
@computed get layoutPreview() {
if (SelectionManager.SelectedDocuments().length > 1) {
return "-- multiple selected --";
@@ -270,7 +270,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
renderDepth={1}
rootSelected={returnFalse}
treeViewDoc={undefined}
- backgroundColor={this.previewBackground}
+ backgroundColor={this.props.backgroundColor}
fitToBox={true}
FreezeDimensions={true}
dontCenter={true}
@@ -856,7 +856,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
if (this.selectedDoc && !this.isPres) {
return <div className="propertiesView" style={{
width: this.props.width,
- minWidth: this.props.width
+ minWidth: this.props.width,
//overflowY: this.scrolling ? "scroll" : "visible"
}} >
<div className="propertiesView-title" style={{ width: this.props.width }}>
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 8b1594b21..f4736eb29 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -4,7 +4,7 @@
.lm_title {
margin-top: 3px;
border-radius: 5px;
- border: solid 1px dimgray;
+ border: solid 0px dimgray;
border-width: 2px 2px 0px;
height: 20px;
transform: translate(0px, -3px);
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 34a1c0697..338b067fa 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -400,7 +400,10 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
pinWithView = (targetDoc: Opt<Doc>) => {
if (targetDoc) {
TabDocView.PinDoc(targetDoc, false);
- const activeDoc = PresBox.Instance?.childDocs[PresBox.Instance?.childDocs.length - 1];
+ const presArray: Doc[] = PresBox.Instance?.sortArray();
+ const size: number = PresBox.Instance?._selectedArray.size;
+ const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined;
+ const activeDoc = presSelected ? PresBox.Instance?.childDocs[PresBox.Instance?.childDocs.indexOf(presSelected) + 1] : PresBox.Instance?.childDocs[PresBox.Instance?.childDocs.length - 1];
if (targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.RTF || targetDoc.type === DocumentType.WEB || targetDoc._viewType === CollectionViewType.Stacking) {
const scroll = targetDoc._scrollTop;
activeDoc.presPinView = true;
diff --git a/src/client/views/collections/TabDocView.scss b/src/client/views/collections/TabDocView.scss
index edf556c9f..9acbc4f85 100644
--- a/src/client/views/collections/TabDocView.scss
+++ b/src/client/views/collections/TabDocView.scss
@@ -43,7 +43,6 @@ input.lm_title {
right: 0;
width: 45px;
height: 45px;
- background: white;
transform: translate(20px, 20px) rotate(45deg);
border-radius: 30px;
padding: 2px;
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index dcd94a7e6..38b9b399d 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -134,7 +134,10 @@ export class TabDocView extends React.Component<TabDocViewProps> {
pinDoc.title = doc.title + " - Slide";
pinDoc.presMovement = PresMovement.Zoom;
pinDoc.context = curPres;
- Doc.AddDocToList(curPres, "data", pinDoc);
+ const presArray: Doc[] = PresBox.Instance?.sortArray();
+ const size: number = PresBox.Instance?._selectedArray.size;
+ const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined;
+ Doc.AddDocToList(curPres, "data", pinDoc, presSelected);
if (pinDoc.type === "audio" && !audioRange) {
pinDoc.presStartTime = 0;
pinDoc.presEndTime = doc.duration;
@@ -149,6 +152,8 @@ export class TabDocView extends React.Component<TabDocViewProps> {
tabdocs?.push(curPres); // bcz: Argh! this is annoying. if multiple documents are pinned, this will get called multiple times before the presentation view is drawn. Thus it won't be in the tabdocs list and it will get created multple times. so need to explicilty add the presbox to the list of open tabs
CollectionDockingView.AddSplit(curPres, "right");
}
+ PresBox.Instance?._selectedArray.clear();
+ pinDoc && PresBox.Instance?._selectedArray.set(pinDoc, undefined); //Update selected array
DocumentManager.Instance.jumpToDocument(doc, false, undefined);
batch.end();
}
@@ -331,7 +336,8 @@ export class TabDocView extends React.Component<TabDocViewProps> {
</div>
<Tooltip title={<div className="dash-tooltip">{"toggle minimap"}</div>}>
- <div className="miniMap-hidden" onPointerDown={e => e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} >
+ <div className="miniMap-hidden" onPointerDown={e => e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })}
+ style={{ background: CollectionDockingView.Instance.props.backgroundColor?.(this._document, 0) }} >
<FontAwesomeIcon icon={"globe-asia"} size="lg" />
</div>
</Tooltip>
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index c6d1c9da2..efbe85f1a 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -25,7 +25,7 @@ import "./MarqueeView.scss";
import React = require("react");
import { Id } from "../../../../fields/FieldSymbols";
import { CurrentUserUtils } from "../../../util/CurrentUserUtils";
-import { PresMovement } from "../../nodes/PresBox";
+import { PresBox, PresMovement } from "../../nodes/PresBox";
interface MarqueeViewProps {
getContainerTransform: () => Transform;
@@ -399,7 +399,10 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
pinDoc.presMovement = PresMovement.Zoom;
pinDoc.context = curPres;
pinDoc.title = doc.title + " - Slide";
- Doc.AddDocToList(curPres, "data", pinDoc);
+ const presArray: Doc[] = PresBox.Instance?.sortArray();
+ const size: number = PresBox.Instance?._selectedArray.size;
+ const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined;
+ Doc.AddDocToList(curPres, "data", pinDoc, presSelected);
if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
if (!DocumentManager.Instance.getDocumentView(curPres)) {
CollectionDockingView.AddSplit(curPres, "right");
diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss
index 1e0b023d7..b2ea87c06 100644
--- a/src/client/views/globalCssVariables.scss
+++ b/src/client/views/globalCssVariables.scss
@@ -33,7 +33,7 @@ $searchpanel-height: 32px;
$mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc
$docDecorations-zindex: 998; // then doc decorations appear over everything else
$remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right?
-$COLLECTION_BORDER_WIDTH: 1;
+$COLLECTION_BORDER_WIDTH: 0;
$SCHEMA_DIVIDER_WIDTH: 4;
$MINIMIZED_ICON_SIZE:25;
$MAX_ROW_HEIGHT: 44px;
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx
index fcc9e50f5..4fb350b55 100644
--- a/src/client/views/nodes/ColorBox.tsx
+++ b/src/client/views/nodes/ColorBox.tsx
@@ -69,11 +69,11 @@ export class ColorBox extends ViewBoxBaseComponent<FieldViewProps, ColorDocument
SetActiveInkWidth(e.target.value);
SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeWidth = Number(e.target.value));
}} />
- <div> {ActiveInkBezierApprox() ?? 2}</div>
+ {/* <div> {ActiveInkBezierApprox() ?? 2}</div>
<input type="range" defaultValue={ActiveInkBezierApprox() ?? 2} min={0} max={300} onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
SetActiveBezierApprox(e.target.value);
SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeBezier = e.target.value);
- }} />
+ }} /> */}
<br />
<br />
</div>
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx
index bc3ad5bce..0c52b9044 100644
--- a/src/client/views/nodes/ContentFittingDocumentView.tsx
+++ b/src/client/views/nodes/ContentFittingDocumentView.tsx
@@ -40,7 +40,7 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
@computed get panelWidth() { return this.nativeWidth() && !this.props.Document._fitWidth ? this.nativeWidth() * this.contentScaling() : this.props.PanelWidth(); }
@computed get panelHeight() {
if (this.nativeHeight()) {
- if (!this.props.Document._fitWidth) return this.nativeHeight() * this.contentScaling()
+ if (!this.props.Document._fitWidth) return this.nativeHeight() * this.contentScaling();
else return this.panelWidth / Doc.NativeAspect(this.layoutDoc, this.props.DataDoc, this.freezeDimensions) || 1;
}
return this.props.PanelHeight();
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 0e92044e0..3c40b61f3 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -90,7 +90,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
const tagDocs: Doc[] = [];
for (const doc of this.childDocs) {
const tagDoc = Cast(doc.presentationTargetDoc, Doc, null);
- tagDocs.push(tagDoc)
+ tagDocs.push(tagDoc);
}
return tagDocs;
}
@@ -155,9 +155,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
this.layoutDoc.presStatus = PresStatus.Edit;
this.layoutDoc._gridGap = 0;
this.layoutDoc._yMargin = 0;
- document.removeEventListener("keydown", PresBox.keyEventsWrapper, true);
- document.addEventListener("keydown", PresBox.keyEventsWrapper, true);
- this._presKeyEventsActive = true;
this.turnOffEdit(true);
DocListCastAsync((Doc.UserDoc().myPresentations as Doc).data).then(pres =>
!pres?.includes(this.rootDoc) && Doc.AddDocToList(Doc.UserDoc().myPresentations as Doc, "data", this.rootDoc));
@@ -171,75 +168,80 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
else Doc.UserDoc().activePresentation = this.rootDoc;
document.removeEventListener("keydown", PresBox.keyEventsWrapper, true);
document.addEventListener("keydown", PresBox.keyEventsWrapper, true);
+ this._presKeyEventsActive = true;
PresBox.Instance = this;
}
- /**
- * Called when the user moves to the next slide in the presentation trail.
- */
+ // There are still other internal frames and should go through all frames before going to next slide
+ nextInternalFrame = (targetDoc: Doc, activeItem: Doc) => {
+ const currentFrame = Cast(targetDoc?._currentFrame, "number", null);
+ const childDocs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
+ targetDoc._viewTransition = "all 1s";
+ setTimeout(() => targetDoc._viewTransition = undefined, 1010);
+ this.nextKeyframe(targetDoc, activeItem);
+ if (activeItem.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, targetDoc);
+ else targetDoc.editing = true;
+ }
+
+ // 'Play on next' for audio or video therefore first navigate to the audio/video before it should be played
+ nextAudioVideo = (targetDoc: Doc, activeItem: Doc) => {
+ if (targetDoc.type === DocumentType.AUDIO) AudioBox.Instance.playFrom(NumCast(activeItem.presStartTime));
+ // if (targetDoc.type === DocumentType.VID) { VideoBox.Instance.Play() };
+ activeItem.playNow = false;
+ }
+
+ // No more frames in current doc and next slide is defined, therefore move to next slide
+ nextSlide = (targetDoc: Doc, activeNext: Doc) => {
+ const nextSelected = this.itemIndex + 1;
+ if (targetDoc.type === DocumentType.AUDIO) { if (AudioBox.Instance._ele) AudioBox.Instance.pause(); }
+ // if (targetDoc.type === DocumentType.VID) { if (AudioBox.Instance._ele) VideoBox.Instance.Pause(); }
+ const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null);
+ // If next slide is audio / video 'Play automatically' then the next slide should be played
+ if (activeNext && (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) && activeNext.playAuto) {
+ console.log('play next automatically');
+ if (targetNext.type === DocumentType.AUDIO) AudioBox.Instance.playFrom(NumCast(activeNext.presStartTime));
+ // if (targetNext.type === DocumentType.VID) { VideoBox.Instance.Play() };
+ } else if (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) { activeNext.playNow = true; console.log('play next after it is navigated to'); }
+ this.gotoDocument(nextSelected);
+ }
+
+ // Called when the user activates 'next' - to move to the next part of the pres. trail
@action
next = () => {
- this.updateCurrentPresentation();
const activeNext = Cast(this.childDocs[this.itemIndex + 1], Doc, null);
const activeItem: Doc = this.activeItem;
const targetDoc: Doc = this.targetDoc;
- const currentFrame = Cast(targetDoc?._currentFrame, "number", null);
const lastFrame = Cast(targetDoc?.lastFrame, "number", null);
const curFrame = NumCast(targetDoc?._currentFrame);
let internalFrames: boolean = false;
if (activeItem.presProgressivize || activeItem.zoomProgressivize || targetDoc.scrollProgressivize) internalFrames = true;
- // Case 1: There are still other frames and should go through all frames before going to next slide
+
if (internalFrames && lastFrame !== undefined && curFrame < lastFrame) {
- const childDocs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
- targetDoc._viewTransition = "all 1s";
- setTimeout(() => targetDoc._viewTransition = undefined, 1010);
- // targetDoc._currentFrame = curFrame + 1;
- this.nextKeyframe(targetDoc, activeItem);
- if (activeItem.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, targetDoc);
- else targetDoc.editing = true;
- // if (activeItem.zoomProgressivize) this.zoomProgressivizeNext(targetDoc);
- // Case 2: 'Play on next' for audio or video therefore first navigate to the audio/video before it should be played
+ // Case 1: There are still other frames and should go through all frames before going to next slide
+ this.nextInternalFrame(targetDoc, activeItem);
} else if ((targetDoc.type === DocumentType.AUDIO || targetDoc.type === DocumentType.VID) && !activeItem.playAuto && activeItem.playNow && this.layoutDoc.presStatus !== PresStatus.Autoplay) {
- if (targetDoc.type === DocumentType.AUDIO) AudioBox.Instance.playFrom(NumCast(activeItem.presStartTime));
- // if (targetDoc.type === DocumentType.VID) { VideoBox.Instance.Play() };
- activeItem.playNow = false;
- // Case 3: No more frames in current doc and next slide is defined, therefore move to next slide
+ // Case 2: 'Play on next' for audio or video therefore first navigate to the audio/video before it should be played
+ this.nextAudioVideo(targetDoc, activeItem);
} else if (this.childDocs[this.itemIndex + 1] !== undefined) {
- if (activeNext.presPinView || activeNext.presentationTargetDoc === this.layoutDoc.presCollection) setTimeout(() => this.updateCurrentPresentation(), 0);
- else this.selectPres();
- const nextSelected = this.itemIndex + 1;
- if (targetDoc.type === DocumentType.AUDIO) { if (AudioBox.Instance._ele) AudioBox.Instance.pause(); }
- // if (targetDoc.type === DocumentType.VID) { if (AudioBox.Instance._ele) VideoBox.Instance.Pause(); }
- const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null);
- // If next slide is audio / video 'Play automatically' then the next slide should be played
- if (activeNext && (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) && activeNext.playAuto) {
- console.log('play next automatically');
- if (targetNext.type === DocumentType.AUDIO) AudioBox.Instance.playFrom(NumCast(activeNext.presStartTime));
- // if (targetNext.type === DocumentType.VID) { VideoBox.Instance.Play() };
- } else if (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) { activeNext.playNow = true; console.log('play next after it is navigated to'); }
- this.gotoDocument(nextSelected);
+ // Case 3: No more frames in current doc and next slide is defined, therefore move to next slide
+ this.nextSlide(targetDoc, activeNext);
} else if (this.childDocs[this.itemIndex + 1] === undefined && this.layoutDoc.presLoop) {
+ // Case 4: Last slide and presLoop is toggled ON
this.gotoDocument(0);
}
}
- /**
- * Called when the user moves back
- * Design choice: If there are frames within the presentation, moving back will not
- * got back through the frames but instead directly to the next point in the presentation.
- */
+ // Called when the user activates 'back' - to move to the previous part of the pres. trail
@action
back = () => {
- this.updateCurrentPresentation();
const activeItem: Doc = this.activeItem;
const targetDoc: Doc = this.targetDoc;
const prevItem = Cast(this.childDocs[Math.max(0, this.itemIndex - 1)], Doc, null);
const prevTargetDoc = Cast(prevItem.presentationTargetDoc, Doc, null);
const lastFrame = Cast(targetDoc.lastFrame, "number", null);
const curFrame = NumCast(targetDoc._currentFrame);
- if (prevItem.presPinView || prevTargetDoc === this.layoutDoc.presCollection) { setTimeout(() => this.updateCurrentPresentation(), 0); }
- else this.selectPres();
if (lastFrame !== undefined && curFrame >= 1) {
+ // Case 1: There are still other frames and should go through all frames before going to previous slide
this.prevKeyframe(targetDoc, activeItem);
} else if (activeItem) {
let prevSelected = this.itemIndex;
@@ -257,17 +259,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
this.rootDoc._itemIndex = index;
const activeItem: Doc = this.activeItem;
const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null);
- if (activeItem.presPinView) {
- const bestTarget = DocumentManager.Instance.getFirstDocumentView(presTargetDoc)?.props.Document;
- bestTarget && runInAction(() => {
- if (activeItem.presMovement === PresMovement.Jump) {
- bestTarget._viewTransition = '0s';
- } else {
- bestTarget._viewTransition = activeItem.presTransition ? `transform ${activeItem.presTransition}ms` : 'all 1s';
- setTimeout(() => bestTarget._viewTransition = undefined, activeItem.presTransition ? NumCast(activeItem.presTransition) + 10 : 1010);
- }
- });
- } else if (presTargetDoc) {
+ if (presTargetDoc) {
presTargetDoc && runInAction(() => {
if (activeItem.presMovement === PresMovement.Jump) presTargetDoc.focusSpeed = 0;
else presTargetDoc.focusSpeed = activeItem.presTransition ? activeItem.presTransition : 500;
@@ -279,12 +271,33 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
}
this._selectedArray.clear();
this.childDocs[index] && this._selectedArray.set(this.childDocs[index], undefined); //Update selected array
- //Handles movement to element
- if (this.layoutDoc._viewType === "stacking") this.navigateToElement(this.childDocs[index]);
+ if (this.layoutDoc._viewType === "stacking") this.navigateToElement(this.childDocs[index]); //Handles movement to element only when presTrail is list
this.onHideDocument(); //Handles hide after/before
}
});
+ _navTimer!: NodeJS.Timeout;
+ navigateToView = (targetDoc: Doc, activeItem: Doc) => {
+ clearTimeout(this._navTimer);
+ const bestTarget = DocumentManager.Instance.getFirstDocumentView(targetDoc)?.props.Document;
+ bestTarget && runInAction(() => {
+ if (bestTarget.type === DocumentType.PDF || bestTarget.type === DocumentType.WEB || bestTarget.type === DocumentType.RTF || bestTarget._viewType === CollectionViewType.Stacking) {
+ bestTarget._viewTransition = activeItem.presTransition ? `transform ${activeItem.presTransition}ms` : 'all 0.5s';
+ bestTarget._scrollY = activeItem.presPinViewScroll;
+ } else if (bestTarget.type === DocumentType.COMPARISON) {
+ bestTarget._clipWidth = activeItem.presPinClipWidth;
+ } else if (bestTarget.type === DocumentType.VID) {
+ bestTarget._currentTimecode = activeItem.presPinTimecode;
+ } else {
+ bestTarget._viewTransition = activeItem.presTransition ? `transform ${activeItem.presTransition}ms` : 'all 0.5s';
+ bestTarget._panX = activeItem.presPinViewX;
+ bestTarget._panY = activeItem.presPinViewY;
+ bestTarget._viewScale = activeItem.presPinViewScale;
+ }
+ this._navTimer = setTimeout(() => bestTarget._viewTransition = undefined, activeItem.presTransition ? NumCast(activeItem.presTransition) + 10 : 510);
+ });
+ }
+
/**
* This method makes sure that cursor navigates to the element that
* has the option open and last in the group.
@@ -299,14 +312,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
const srcContext = await DocCastAsync(targetDoc?.context);
const presCollection = Cast(this.layoutDoc.presCollection, Doc, null);
const collectionDocView = presCollection ? DocumentManager.Instance.getDocumentView(presCollection) : undefined;
+ const includesDoc: boolean = DocListCast(presCollection?.data).includes(targetDoc);
this.turnOffEdit();
- if (this.itemIndex >= 0) {
- if (srcContext && targetDoc) {
- this.layoutDoc.presCollection = srcContext;
- } else if (targetDoc) this.layoutDoc.presCollection = targetDoc;
- }
- const docToJump = curDoc;
- const willZoom = false;
+ if (includesDoc) {
+ this.layoutDoc.presCollection = srcContext;
+ } else if (targetDoc) this.layoutDoc.presCollection = targetDoc;
const presStatus = this.rootDoc.presStatus;
const selViewCache = Array.from(this._selectedArray.keys());
const dragViewCache = Array.from(this._dragArray);
@@ -330,47 +340,18 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
// If openDocument is selected then it should open the document for the user
if (activeItem.openDocument) {
openInTab();
- } else {
- //docToJump stayed same meaning, it was not in the group or was the last element in the group
- // if (activeItem.zoomProgressivize && this.rootDoc.presStatus !== PresStatus.Edit) {
- // this.zoomProgressivizeNext(targetDoc);
- // } else
- if (docToJump === curDoc) {
- //checking if curDoc has navigation open
- if (curDoc.presMovement === PresMovement.Pan && targetDoc) {
- await DocumentManager.Instance.jumpToDocument(targetDoc, false, openInTab, srcContext); // documents open in new tab instead of on right
- } else if ((curDoc.presMovement === PresMovement.Zoom || curDoc.presMovement === PresMovement.Jump) && targetDoc) {
- //awaiting jump so that new scale can be found, since jumping is async
- await DocumentManager.Instance.jumpToDocument(targetDoc, true, openInTab, srcContext, undefined, undefined, undefined, resetSelection); // documents open in new tab instead of on right
- }
- } else {
- //awaiting jump so that new scale can be found, since jumping is async
- targetDoc && await DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext);
- }
+ } else if (curDoc.presMovement === PresMovement.Pan && targetDoc) {
+ await DocumentManager.Instance.jumpToDocument(targetDoc, false, openInTab, srcContext, undefined, undefined, undefined, includesDoc ? undefined : resetSelection); // documents open in new tab instead of on right
+ } else if ((curDoc.presMovement === PresMovement.Zoom || curDoc.presMovement === PresMovement.Jump) && targetDoc) {
+ //awaiting jump so that new scale can be found, since jumping is async
+ await DocumentManager.Instance.jumpToDocument(targetDoc, true, openInTab, srcContext, undefined, undefined, undefined, includesDoc ? undefined : resetSelection); // documents open in new tab instead of on right
}
// After navigating to the document, if it is added as a presPinView then it will
// adjust the pan and scale to that of the pinView when it was added.
if (activeItem.presPinView) {
// if targetDoc is not displayed but one of its aliases is, then we need to modify that alias, not the original target
- const bestTarget = DocumentManager.Instance.getFirstDocumentView(targetDoc)?.props.Document;
- bestTarget && runInAction(() => {
- if (bestTarget.type === DocumentType.PDF || bestTarget.type === DocumentType.WEB || bestTarget.type === DocumentType.RTF || bestTarget._viewType === CollectionViewType.Stacking) {
- bestTarget._scrollY = activeItem.presPinViewScroll;
- } else if (bestTarget.type === DocumentType.COMPARISON) {
- bestTarget._clipWidth = activeItem.presPinClipWidth;
- } else if (bestTarget.type === DocumentType.VID) {
- bestTarget._currentTimecode = activeItem.presPinTimecode;
- } else {
- bestTarget._viewTransition = activeItem.presTransition ? `transform ${activeItem.presTransition}ms` : 'all 0.5s';
- bestTarget._panX = activeItem.presPinViewX;
- bestTarget._panY = activeItem.presPinViewY;
- bestTarget._viewScale = activeItem.presPinViewScale;
- }
- });
- //setTimeout(() => targetDoc._viewTransition = undefined, 1010);
+ this.navigateToView(targetDoc, activeItem);
}
- // If website and has presWebsite data associated then on click it should
- // go back to that specific website
// TODO: Add progressivize for navigating web (storing websites for given frames)
}
@@ -653,7 +634,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
const list = Array.from(this._selectedArray.keys()).map((doc: Doc, index: any) => {
const curDoc = Cast(doc, Doc, null);
const tagDoc = Cast(curDoc.presentationTargetDoc!, Doc, null);
- if (curDoc && curDoc === this.activeItem) return <div className="selectedList-items"><b>{index + 1}. {curDoc.title}</b></div>
+ if (curDoc && curDoc === this.activeItem) return <div className="selectedList-items"><b>{index + 1}. {curDoc.title}</b></div>;
else if (tagDoc) return <div className="selectedList-items">{index + 1}. {curDoc.title}</div>;
else if (curDoc) return <div className="selectedList-items">{index + 1}. {curDoc.title}</div>;
});
@@ -682,10 +663,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
this._selectedArray.set(doc, undefined);
this._eleArray.push(ref);
this._dragArray.push(drag);
+ } else {
+ this._selectedArray.delete(doc);
+ this.removeFromArray(this._eleArray, doc);
+ this.removeFromArray(this._dragArray, doc);
}
this.selectPres();
}
+ removeFromArray = (arr: any[], val: any) => {
+ const index: number = arr.indexOf(val);
+ const ret: any[] = arr.splice(index, 1);
+ arr = ret;
+ }
+
//Shift click
@action
shiftSelect = (doc: Doc, ref: HTMLElement, drag: HTMLElement) => {
@@ -806,10 +797,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
}
getAllIndexes = (arr: Doc[], val: Doc): number[] => {
- var indexes = [], i;
- for (i = 0; i < arr.length; i++)
- if (arr[i] === val)
- indexes.push(i);
+ const indexes = [];
+ for (let i = 0; i < arr.length; i++) {
+ arr[i] === val && indexes.push(i);
+ }
return indexes;
}
@@ -945,7 +936,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
doc.presMovement = PresMovement.None;
break;
}
- })
+ });
});
@undoBatch
@@ -1608,12 +1599,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@action
turnOffEdit = (paths?: boolean) => {
+ // Turn off paths
if (paths) {
- // Turn off paths
const srcContext = Cast(this.rootDoc.presCollection, Doc, null);
if (srcContext) this.togglePath(srcContext, true);
}
- // Turn off the progressivize editors for each
+ // Turn off the progressivize editors for each document
this.childDocs.forEach((doc) => {
doc.editSnapZoomProgressivize = false;
doc.editZoomProgressivize = false;
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 9307f1649..b75cc230f 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -22,7 +22,7 @@
border-style: solid;
overflow-y: auto;
overflow-x: hidden;
- color: initial;
+ color: inherit;
display: flex;
flex-direction: row;
transition: opacity 1s;
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 8017468c3..7a28f8bff 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -311,7 +311,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
<div className="presItem-number">
{`${this.indexInPres + 1}.`}
</div>}
- {miniView ? (null) : <div ref={miniView ? null : this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}>
+ {miniView ? (null) : <div ref={miniView ? null : this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`} style={{ backgroundColor: this.props.backgroundColor?.(this.layoutDoc, this.props.renderDepth) }}>
<div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 175) : toolbarWidth - 85, cursor: isSelected ? 'text' : 'grab' }}>
<EditableView
ref={this._titleRef}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 17:54:13 +0000