aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/CurrentUserUtils.ts29
-rw-r--r--src/client/views/DocumentButtonBar.tsx9
-rw-r--r--src/client/views/MainView.tsx4
-rw-r--r--src/client/views/PropertiesButtons.tsx2
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx51
-rw-r--r--src/client/views/collections/CollectionView.tsx4
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx51
-rw-r--r--src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx9
-rw-r--r--src/client/views/collections/collectionFreeForm/MarqueeView.tsx35
-rw-r--r--src/client/views/nodes/PresBox.tsx301
-rw-r--r--src/client/views/presentationview/PresElementBox.tsx14
11 files changed, 318 insertions, 191 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index a14786b5b..4e432e6fa 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -442,7 +442,7 @@ export class CurrentUserUtils {
{ toolTip: "Tap to create an audio recorder in a new pane, drag for an audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc, noviceMode: true },
{ toolTip: "Tap to create a button in a new pane, drag for a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc, noviceMode: true },
- { toolTip: "Tap to create a presentation in a new pane, drag for a presentation", title: "Present", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc, noviceMode: true },
+ { toolTip: "Tap to create a presentation in a new pane, drag for a presentation", title: "Trails", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc, noviceMode: true },
{ toolTip: "Tap to create a search box in a new pane, drag for a search box", title: "Query", icon: "search", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptySearch as Doc },
{ toolTip: "Tap to create a scripting box in a new pane, drag for a scripting box", title: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc },
// { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' },
@@ -512,6 +512,7 @@ export class CurrentUserUtils {
return [
{ title: "Sharing", icon: "users", click: 'selectMainMenu(self)', watchedDocuments: doc["sidebar-sharing"] as Doc },
{ title: "Workspace", icon: "desktop", click: 'selectMainMenu(self)' },
+ { title: "Pres. Trails", icon: "desktop", click: 'selectMainMenu(self)' },
{ title: "Catalog", icon: "file", click: 'selectMainMenu(self)' },
{ title: "Archive", icon: "archive", click: 'selectMainMenu(self)' },
{ title: "Import", icon: "upload", click: 'selectMainMenu(self)' },
@@ -747,6 +748,27 @@ export class CurrentUserUtils {
return doc.myWorkspaces as any as Doc;
}
+ static setupPresentations(doc: Doc) {
+ doc.myPresentations === undefined;
+ if (doc.myPresentations === undefined) {
+ doc.myPresentations = new PrefetchProxy(Docs.Create.SchemaDocument([], [], {
+ title: "Pres. Trails", _height: 1000, _fitWidth: true, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: false,
+ childDropAction: "alias", targetDropAction: "same", _stayInCollection: true, treeViewOpen: true, system: true
+ }));
+ }
+
+ if (doc["sidebar-presentations"] === undefined) {
+ const presentations = doc.myPresentations as Doc;
+
+ doc["sidebar-presentations"] = new PrefetchProxy(Docs.Create.TreeDocument([presentations], {
+ title: "sidebar-presentations",
+ treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
+ treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
+ lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same", system: true
+ })) as any as Doc;
+ }
+ }
+
static setupCatalog(doc: Doc) {
doc.myCatalog === undefined;
if (doc.myCatalog === undefined) {
@@ -822,6 +844,7 @@ export class CurrentUserUtils {
await CurrentUserUtils.setupToolsBtnPanel(doc);
CurrentUserUtils.setupWorkspaces(doc);
CurrentUserUtils.setupCatalog(doc);
+ CurrentUserUtils.setupPresentations(doc);
CurrentUserUtils.setupRecentlyClosed(doc);
CurrentUserUtils.setupUserDoc(doc);
}
@@ -874,7 +897,9 @@ export class CurrentUserUtils {
// Import sidebar is where shared documents are contained
static setupImportSidebar(doc: Doc) {
if (doc["sidebar-import-documents"] === undefined) {
- doc["sidebar-import-documents"] = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Imported Documents", forceActive: true, _showTitle: "title", childDropAction: "alias", _autoHeight: true, _yMargin: 30, lockedPosition: true, _chromeStatus: "disabled", system: true }));
+ const sidebar = Cast(doc["sidebar-import-documents"], Doc, null);
+ const height: number = sidebar ? NumCast(sidebar._height) - 150 : 400;
+ doc["sidebar-import-documents"] = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Imported Documents", forceActive: true, _showTitle: "title", childDropAction: "alias", _autoHeight: true, _yMargin: 30, lockedPosition: true, _chromeStatus: "disabled", system: true, _height: height }));
}
if (doc["sidebar-import"] === undefined) {
const uploads = Cast(doc["sidebar-import-documents"], Doc, null);
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 7effc4aa0..8a12bf467 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -23,6 +23,7 @@ import { Template, Templates } from "./Templates";
import React = require("react");
import { DocumentLinksButton } from './nodes/DocumentLinksButton';
import { Tooltip } from '@material-ui/core';
+import { SelectionManager } from '../util/SelectionManager';
const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -195,7 +196,13 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
@computed
get pinButton() {
const targetDoc = this.view0?.props.Document;
- const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
+ let isPinned = targetDoc && Doc.isDocPinned(targetDoc);
+ if (SelectionManager.SelectedDocuments().length > 1) {
+ SelectionManager.SelectedDocuments().forEach((docView: DocumentView) => {
+ if (Doc.isDocPinned(docView.props.Document)) isPinned = true;
+ else isPinned = false;
+ });
+ }
return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}</div></>}>
<div className="documentButtonBar-linker"
style={{ backgroundColor: isPinned ? "white" : "", color: isPinned ? "black" : "white", border: isPinned ? "black 1px solid " : "" }}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index f3d8fc181..73138dcd8 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -255,6 +255,7 @@ export class MainView extends React.Component {
@action
createNewWorkspace = async (id?: string) => {
const myCatalog = Doc.UserDoc().myCatalog as Doc;
+ const myPresentations = Doc.UserDoc().myPresentations as Doc;
const presentation = Doc.MakeCopy(Doc.UserDoc().emptyPresentation as Doc, true);
const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
const workspaceCount = DocListCast(workspaces.data).length + 1;
@@ -269,6 +270,7 @@ export class MainView extends React.Component {
const workspaceDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600, path: [myCatalog] }], { title: `Workspace ${workspaceCount}` }, id, "row");
Doc.AddDocToList(myCatalog, "data", freeformDoc);
Doc.AddDocToList(myCatalog, "data", presentation);
+ Doc.AddDocToList(myPresentations, "data", presentation);
Doc.UserDoc().activePresentation = presentation;
const toggleTheme = ScriptField.MakeScript(`self.darkScheme = !self.darkScheme`);
const toggleComic = ScriptField.MakeScript(`toggleComicMode()`);
@@ -895,7 +897,7 @@ export class MainView extends React.Component {
document.removeEventListener("editSuccess", onSuccess);
};
- // For some reason, Hypothes.is annotations don't load until a click is registered on the page,
+ // For some reason, Hypothes.is annotations don't load until a click is registered on the page,
// so we keep simulating clicks until annotations have loaded and editing is successful
const interval = setInterval(() => {
!success && simulateMouseClick(ele, 50, 50, 50, 50);
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 9e776c652..ae57560d0 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -243,7 +243,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
const y = targetDoc._panY;
const scale = targetDoc._viewScale;
}
- return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin with this view"}</div></>} placement="top">
+ return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin to presentation with current view"}</div></>} placement="top">
<div>
<div className="propertiesButtons-linker"
onClick={e => {
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 43da0d3cf..744648e24 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -34,6 +34,7 @@ import { PresBox } from '../nodes/PresBox';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { InteractionUtils } from '../../util/InteractionUtils';
import { InkTool } from '../../../fields/InkField';
+import { Select } from '@material-ui/core';
const _global = (window /* browser */ || global /* node */) as any;
@observer
@@ -718,21 +719,43 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
@undoBatch
@action
public static PinDoc(doc: Doc, unpin = false) {
- if (unpin) DockedFrameRenderer.UnpinDoc(doc);
- else {
- //add this new doc to props.Document
- const curPres = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
- if (curPres) {
- const pinDoc = Doc.MakeAlias(doc);
- pinDoc.presentationTargetDoc = doc;
- pinDoc.presZoomButton = true;
- pinDoc.context = curPres;
- Doc.AddDocToList(curPres, "data", pinDoc);
- if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
- if (!DocumentManager.Instance.getDocumentView(curPres)) {
- CollectionDockingView.AddRightSplit(curPres);
+ if (SelectionManager.SelectedDocuments().length > 1) {
+ SelectionManager.SelectedDocuments().forEach((docView: DocumentView, i: number) => {
+ if (unpin) DockedFrameRenderer.UnpinDoc(docView.props.Document);
+ else {
+ console.log('adding multiple docs to trails');
+ const curPres = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
+ if (curPres) {
+ const pinDoc = Doc.MakeAlias(docView.props.Document);
+ pinDoc.presentationTargetDoc = docView.props.Document;
+ pinDoc.presZoomButton = true;
+ pinDoc.context = curPres;
+ Doc.AddDocToList(curPres, "data", pinDoc);
+ if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
+ if (!DocumentManager.Instance.getDocumentView(curPres)) {
+ CollectionDockingView.AddRightSplit(curPres);
+ }
+ DocumentManager.Instance.jumpToDocument(doc, false, undefined, Cast(doc.context, Doc, null));
+ }
+ }
+ });
+ } else {
+ if (unpin) DockedFrameRenderer.UnpinDoc(doc);
+ else {
+ //add this new doc to props.Document
+ const curPres = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
+ if (curPres) {
+ const pinDoc = Doc.MakeAlias(doc);
+ pinDoc.presentationTargetDoc = doc;
+ pinDoc.presZoomButton = true;
+ pinDoc.context = curPres;
+ Doc.AddDocToList(curPres, "data", pinDoc);
+ if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
+ if (!DocumentManager.Instance.getDocumentView(curPres)) {
+ CollectionDockingView.AddRightSplit(curPres);
+ }
+ DocumentManager.Instance.jumpToDocument(doc, false, undefined, Cast(doc.context, Doc, null));
}
- DocumentManager.Instance.jumpToDocument(doc, false, undefined, Cast(doc.context, Doc, null));
}
}
}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 0aaceb7f4..99ba1c706 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -184,6 +184,10 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
doc.context = this.props.Document;
});
added.map(add => Doc.AddDocToList(Cast(Doc.UserDoc().myCatalog, Doc, null), "data", add));
+ const myPresentations = Doc.UserDoc().myPresentations as Doc;
+ added.map(add => {
+ if (add.type === DocumentType.PRES) Doc.AddDocToList(myPresentations, "data", add);
+ });
// targetDataDoc[this.props.fieldKey] = new List<Doc>([...docList, ...added]);
(targetDataDoc[this.props.fieldKey] as List<Doc>).push(...added);
targetDataDoc[this.props.fieldKey + "-lastModified"] = new DateField(new Date(Date.now()));
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index f6bb375fc..01bfb0453 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1406,7 +1406,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
centeringShiftY={this.centeringShiftY}
presPaths={BoolCast(this.Document.presPathView)}
progressivize={BoolCast(this.Document.editProgressivize)}
- zoomProgressivize={BoolCast(this.Document.editZoomProgressivize)}
+ presPinView={BoolCast(this.Document.presPinView)}
transition={Cast(this.layoutDoc._viewTransition, "string", null)}
viewDefDivClick={this.props.viewDefDivClick}
zoomScaling={this.zoomScaling} panX={this.panX} panY={this.panY}>
@@ -1492,7 +1492,7 @@ interface CollectionFreeFormViewPannableContentsProps {
transition?: string;
presPaths?: boolean;
progressivize?: boolean;
- zoomProgressivize?: boolean;
+ presPinView?: boolean;
}
@observer
@@ -1559,48 +1559,27 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
doc.style.top = toNumber(top, e.movementY) + 'px';
doc.style.left = toNumber(left, e.movementX) + 'px';
}
- this.updateAll(height, width, top, left);
+ // this.updateAll(height, width, top, left);
return false;
}
return true;
}
- @action
- updateAll = (width: number, height: number, top: number, left: number) => {
- const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
- this.updateList(targetDoc, activeItem["viewfinder-width-indexed"], width);
- this.updateList(targetDoc, activeItem["viewfinder-height-indexed"], height);
- this.updateList(targetDoc, activeItem["viewfinder-top-indexed"], top);
- this.updateList(targetDoc, activeItem["viewfinder-left-indexed"], left);
- }
-
- @action
- updateList = (doc: Doc, list: any, val: number) => {
- const x: List<number> = list;
- if (x && x.length >= NumCast(doc.currentFrame) + 1) {
- x[NumCast(doc.currentFrame)] = val;
- list = x;
- } else if (doc && x) {
- x.length = NumCast(doc.currentFrame) + 1;
- x[NumCast(doc.currentFrame)] = val;
- list = x;
- }
- }
-
// scale: NumCast(targetDoc._viewScale),
@computed get zoomProgressivizeContainer() {
- const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
- if (activeItem && activeItem.zoomProgressivize) {
- const vfLeft: number = PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-left-indexed"]);
- const vfWidth: number = PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-width-indexed"]);
- const vfTop: number = PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-top-indexed"]);
- const vfHeight: number = PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-height-indexed"]);
+ const activeItem = PresBox.Instance.activeItem;
+ // const targetDoc = PresBox.Instance.targetDoc;
+ if (activeItem && activeItem.presPinView && activeItem.id) {
+ const vfLeft: number = NumCast(activeItem.presPinViewX);
+ const vfTop: number = NumCast(activeItem.presPinViewY);
+ const vfWidth: number = 100;
+ const vfHeight: number = 100;
+ console.log(vfTop + " | " + vfLeft);
+ console.log(this.props.presPinView);
return (
<>
- {!activeItem.editZoomProgressivize ? (null) : <div id="resizable" className="resizable" onPointerDown={this.onPointerDown} style={{ width: vfWidth, height: vfHeight, top: vfTop, left: vfLeft, position: 'absolute' }}>
- <div className='resizers'>
+ {!this.props.presPinView ? (null) : <div id="resizable" className="resizable" onPointerDown={this.onPointerDown} style={{ width: vfWidth, height: vfHeight, top: vfTop, left: vfLeft, position: 'absolute' }}>
+ <div className='resizers' key={'resizer' + activeItem.id}>
<div id="resizer-tl" className='resizer top-left' onPointerDown={this.onPointerDown}></div>
<div id="resizer-tr" className='resizer top-right' onPointerDown={this.onPointerDown}></div>
<div id="resizer-bl" className='resizer bottom-left' onPointerDown={this.onPointerDown}></div>
@@ -1613,7 +1592,7 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
}
@computed get zoomProgressivize() {
- return PresBox.Instance && this.props.zoomProgressivize ? this.zoomProgressivizeContainer : (null);
+ return PresBox.Instance && PresBox.Instance.activeItem && PresBox.Instance.activeItem.presPinView && PresBox.Instance.layoutDoc.presStatus === 'edit' ? this.zoomProgressivizeContainer : (null);
}
@computed get progressivize() {
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
index 2cfe0183c..5e292a833 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
@@ -16,6 +16,7 @@ export default class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps>
public inkToText: (e: KeyboardEvent | React.PointerEvent | undefined) => void = unimplementedFunction;
public showMarquee: () => void = unimplementedFunction;
public hideMarquee: () => void = unimplementedFunction;
+ public pinWithView: (e: KeyboardEvent | React.PointerEvent | undefined) => void = unimplementedFunction;
constructor(props: Readonly<{}>) {
super(props);
@@ -53,6 +54,14 @@ export default class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps>
<FontAwesomeIcon icon="font" size="lg" />
</button>
</Tooltip>,
+ <Tooltip key="pinWithView" title={<><div className="dash-tooltip">Pin to presentation with selected view</div></>} placement="bottom">
+ <button
+ className="antimodeMenu-button"
+ onPointerDown={this.pinWithView}>
+ <FontAwesomeIcon icon="map-pin" size="lg" />
+ <div style={{ position: 'relative', fontSize: 25, fontWeight: 700, transform: 'translate(-4px, -22px)', color: 'rgba(250,250,250,0.55)' }}>V</div>
+ </button>
+ </Tooltip>,
];
return this.getElement(buttons);
}
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index e5af1b0cc..15f277adb 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -22,6 +22,8 @@ import MarqueeOptionsMenu from "./MarqueeOptionsMenu";
import "./MarqueeView.scss";
import React = require("react");
import { ContextMenuItem } from "../../ContextMenuItem";
+import { CollectionDockingView } from "../CollectionDockingView";
+import { DocumentManager } from "../../../util/DocumentManager";
interface MarqueeViewProps {
getContainerTransform: () => Transform;
@@ -251,6 +253,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
MarqueeOptionsMenu.Instance.showMarquee = this.showMarquee;
MarqueeOptionsMenu.Instance.hideMarquee = this.hideMarquee;
MarqueeOptionsMenu.Instance.jumpTo(e.clientX, e.clientY);
+ MarqueeOptionsMenu.Instance.pinWithView = this.pinWithView;
document.addEventListener("pointerdown", hideMarquee);
} else {
this.hideMarquee();
@@ -382,6 +385,38 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
}
@undoBatch @action
+ pinWithView = (e: KeyboardEvent | React.PointerEvent | undefined) => {
+ const doc = this.props.Document;
+ const bounds = this.Bounds;
+ const selected = this.marqueeSelect(false);
+ const curPres = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
+ if (curPres) {
+ const pinDoc = Doc.MakeAlias(doc);
+ pinDoc.presentationTargetDoc = doc;
+ pinDoc.presZoomButton = true;
+ pinDoc.context = curPres;
+ Doc.AddDocToList(curPres, "data", pinDoc);
+ if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
+ if (!DocumentManager.Instance.getDocumentView(curPres)) {
+ CollectionDockingView.AddRightSplit(curPres);
+ }
+ if (e instanceof KeyboardEvent ? e.key === "c" : true) {
+ const x = this.Bounds.left + this.Bounds.width / 2;
+ const y = this.Bounds.top + this.Bounds.height / 2;
+ const panelWidth: number = this.props.PanelWidth();
+ const panelHeight: number = this.props.PanelHeight();
+ const scale = Math.min(Number(panelWidth) / this.Bounds.width, Number(panelHeight) / this.Bounds.height);
+ pinDoc.presPinView = true;
+ pinDoc.presPinViewX = x;
+ pinDoc.presPinViewY = y;
+ pinDoc.presPinViewScale = scale;
+ }
+ }
+ MarqueeOptionsMenu.Instance.fadeOut(true);
+ this.hideMarquee();
+ }
+
+ @undoBatch @action
collection = (e: KeyboardEvent | React.PointerEvent | undefined) => {
const bounds = this.Bounds;
const selected = this.marqueeSelect(false);
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index d30ea03b1..552cf0888 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -58,9 +58,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@observable private expandBoolean: boolean = false;
@observable private openMovementDropdown: boolean = false;
@observable private openEffectDropdown: boolean = false;
-
@computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); }
@computed get itemIndex() { return NumCast(this.rootDoc._itemIndex); }
+ @computed get activeItem() { return Cast(this.childDocs[this.itemIndex], Doc, null); }
+ @computed get targetDoc() { return Cast(this.activeItem?.presentationTargetDoc, Doc, null); }
@computed get presElement() { return Cast(Doc.UserDoc().presElement, Doc, null); }
constructor(props: any) {
super(props);
@@ -123,31 +124,31 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
next = () => {
this.updateCurrentPresentation();
const activeNext = Cast(this.childDocs[this.itemIndex + 1], Doc, null);
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const presTargetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
- const childDocs = DocListCast(presTargetDoc[Doc.LayoutFieldKey(presTargetDoc)]);
- const currentFrame = Cast(presTargetDoc.currentFrame, "number", null);
- const lastFrame = Cast(presTargetDoc.lastFrame, "number", null);
- const curFrame = NumCast(presTargetDoc.currentFrame);
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
+ const childDocs = DocListCast(targetDoc[Doc.LayoutFieldKey(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 (presTargetDoc.presProgressivize || activeItem.zoomProgressivize || presTargetDoc.scrollProgressivize) internalFrames = true;
+ if (targetDoc.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) {
- presTargetDoc._viewTransition = "all 1s";
- setTimeout(() => presTargetDoc._viewTransition = undefined, 1010);
- presTargetDoc.currentFrame = curFrame + 1;
- if (presTargetDoc.scrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(presTargetDoc, currentFrame);
- if (presTargetDoc.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, presTargetDoc);
- else presTargetDoc.editing = true;
- if (activeItem.zoomProgressivize) this.zoomProgressivizeNext(presTargetDoc);
+ targetDoc._viewTransition = "all 1s";
+ setTimeout(() => targetDoc._viewTransition = undefined, 1010);
+ targetDoc.currentFrame = curFrame + 1;
+ if (targetDoc.scrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(targetDoc, currentFrame);
+ if (targetDoc.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, targetDoc);
+ else targetDoc.editing = true;
+ if (activeItem.zoomProgressivize) this.zoomProgressivizeNext(targetDoc);
// Case 2: Audio or video therefore wait to play the audio or video before moving on
- } else if ((presTargetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio && this.layoutDoc.presStatus !== 'auto') {
+ } else if ((targetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio && this.layoutDoc.presStatus !== 'auto') {
AudioBox.Instance.playFrom(0);
this._moveOnFromAudio = true;
// Case 3: No more frames in current doc and next slide is defined, therefore move to next slide
} else if (this.childDocs[this.itemIndex + 1] !== undefined) {
const nextSelected = this.itemIndex + 1;
- if (presTargetDoc.type === DocumentType.AUDIO) AudioBox.Instance.pause();
+ if (targetDoc.type === DocumentType.AUDIO) AudioBox.Instance.pause();
this.gotoDocument(nextSelected, this.itemIndex);
const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null);
if (activeNext && targetNext.type === DocumentType.AUDIO && activeNext.playAuto) {
@@ -166,15 +167,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@action
back = () => {
this.updateCurrentPresentation();
- const docAtCurrent = this.childDocs[this.itemIndex];
- const targetDoc = Cast(docAtCurrent.presentationTargetDoc, Doc, null);
+ 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 (lastFrame !== undefined && curFrame >= 1) {
- this.prevKeyframe(targetDoc, docAtCurrent);
- } else if (docAtCurrent) {
+ this.prevKeyframe(targetDoc, activeItem);
+ } else if (activeItem) {
let prevSelected = this.itemIndex;
prevSelected = Math.max(0, prevSelected - 1);
this.gotoDocument(prevSelected, this.itemIndex);
@@ -209,8 +210,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
* on the right.
*/
navigateToElement = async (curDoc: Doc) => {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
const srcContext = await DocCastAsync(targetDoc.context);
const presCollection = Cast(this.layoutDoc.presCollection, Doc, null);
const collectionDocView = presCollection ? await DocumentManager.Instance.getDocumentView(presCollection) : undefined;
@@ -271,7 +272,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
* @param presTargetDoc: document for which internal zoom is used
*/
zoomProgressivizeNext = (activeItem: Doc) => {
- const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+ const targetDoc: Doc = this.targetDoc;
const srcContext = Cast(targetDoc?.context, Doc, null);
const docView = DocumentManager.Instance.getDocumentView(targetDoc);
const vfLeft = this.checkList(targetDoc, activeItem["viewfinder-left-indexed"]);
@@ -346,8 +347,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@action
startAutoPres = (startSlide: number) => {
this.updateCurrentPresentation();
- let activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- let targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+ let activeItem: Doc = this.activeItem;
+ let targetDoc: Doc = this.targetDoc;
let duration = NumCast(targetDoc.presDuration) + NumCast(targetDoc.presTransition);
const timer = (ms: number) => new Promise(res => this._presTimer = setTimeout(res, ms));
const load = async () => { // Wrap the loop into an async function for this to work
@@ -401,12 +402,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
startPresentation = (startIndex: number) => {
this.updateCurrentPresentation();
this.childDocs.map(doc => {
- const presTargetDoc = doc.presentationTargetDoc as Doc;
+ const tagDoc = doc.presentationTargetDoc as Doc;
if (doc.presHideTillShownButton && this.childDocs.indexOf(doc) > startIndex) {
- presTargetDoc.opacity = 0;
+ tagDoc.opacity = 0;
}
if (doc.presHideAfterButton && this.childDocs.indexOf(doc) < startIndex) {
- presTargetDoc.opacity = 0;
+ tagDoc.opacity = 0;
}
});
}
@@ -418,11 +419,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@undoBatch
@action
updateMinimize = () => {
+ const docView = DocumentManager.Instance.getDocumentView(this.layoutDoc);
if (this.layoutDoc.inOverlay) {
this.layoutDoc.presStatus = 'edit';
Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
CollectionDockingView.AddRightSplit(this.rootDoc);
this.layoutDoc.inOverlay = false;
+ } else if (this.layoutDoc.context && docView) {
+ this.layoutDoc.presStatus = 'manual';
+ const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+ this.rootDoc.x = pt[0] + (this.props.PanelWidth() - 250);
+ this.rootDoc.y = pt[1] + 10;
+ this.rootDoc._height = 35;
+ this.rootDoc._width = 250;
+ docView.props.removeDocument?.(this.layoutDoc);
+ Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
} else {
this.layoutDoc.presStatus = 'manual';
const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
@@ -453,31 +464,34 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
* When the movement dropdown is changes
*/
@undoBatch
- movementChanged = action((movement: string) => {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+ updateMovement = action((movement: any, activeItem: Doc, targetDoc: Doc) => {
+ console.log(movement);
switch (movement) {
case 'zoom': //Pan and zoom
- activeItem.presZoomButton = !activeItem.presZoomButton;
- if (activeItem.presZoomButton) activeItem.presMovement = 'Zoom';
- else activeItem.presMovement = 'None';
+ console.log('zoom');
activeItem.presNavButton = false;
+ activeItem.presZoomButton = !activeItem.presZoomButton;
+ targetDoc.presTransition = activeItem.presTransition;
+ if (activeItem.presZoomButton) activeItem.presMovement = 'zoom';
+ else activeItem.presMovement = 'none';
break;
case 'pan': //Pan
activeItem.presZoomButton = false;
activeItem.presNavButton = !activeItem.presNavButton;
- if (activeItem.presNavButton) activeItem.presMovement = 'Pan';
- else activeItem.presMovement = 'None';
+ targetDoc.presTransition = activeItem.presTransition;
+ if (activeItem.presNavButton) activeItem.presMovement = 'pan';
+ else activeItem.presMovement = 'none';
break;
case 'jump': //Jump Cut
+ activeItem.presTransition = targetDoc.presTransition;
targetDoc.presTransition = 0;
activeItem.presZoomButton = true;
activeItem.presSwitchButton = !activeItem.presSwitchButton;
- if (activeItem.presSwitchButton) activeItem.presMovement = 'Jump cut';
- else activeItem.presMovement = 'None';
+ if (activeItem.presSwitchButton) activeItem.presMovement = 'jump';
+ else activeItem.presMovement = 'none';
break;
case 'none': default:
- activeItem.presMovement = 'None';
+ activeItem.presMovement = 'none';
activeItem.presZoomButton = false;
activeItem.presNavButton = false;
activeItem.presSwitchButton = false;
@@ -485,6 +499,18 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
}
});
+ setMovementName = action((movement: any): string => {
+ let output: string = 'none';
+ console.log(movement);
+ switch (movement) {
+ case 'zoom': output = 'Zoom'; break; //Pan and zoom
+ case 'pan': output = 'Pan'; break; //Pan
+ case 'jump': output = 'Jump cut'; break; //Jump Cut
+ case 'none': default: output = 'None'; break; //None
+ }
+ return output;
+ })
+
whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive));
// For dragging documents into the presentation trail
addDocumentFilter = (doc: Doc | Doc[]) => {
@@ -501,7 +527,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
return true;
}
childLayoutTemplate = () => this.rootDoc._viewType !== CollectionViewType.Stacking ? undefined : this.presElement;
- removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.dataDoc, this.fieldKey, doc);
+ removeDocument = (doc: Doc) => {
+ Doc.RemoveDocFromList(this.dataDoc, this.fieldKey, doc);
+ };
getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight
panelHeight = () => this.props.PanelHeight() - 40;
active = (outsideReaction?: boolean) => ((Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground) &&
@@ -526,10 +554,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
*/
@computed get listOfSelected() {
const list = this._selectedArray.map((doc: Doc, index: any) => {
- const activeItem = Cast(doc, Doc, null);
- const targetDoc = Cast(activeItem.presentationTargetDoc!, Doc, null);
+ const curDoc = Cast(doc, Doc, null);
+ const tagDoc = Cast(curDoc.presentationTargetDoc!, Doc, null);
return (
- <div className="selectedList-items">{index + 1}. {targetDoc.title}</div>
+ <div className="selectedList-items">{index + 1}. {tagDoc.title}</div>
);
});
return list;
@@ -563,8 +591,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@action
shiftSelect = (doc: Doc, ref: HTMLElement, drag: HTMLElement) => {
this._selectedArray = [];
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- if (activeItem) {
+ // const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+ if (this.activeItem) {
for (let i = Math.min(this.itemIndex, this.childDocs.indexOf(doc)); i <= Math.max(this.itemIndex, this.childDocs.indexOf(doc)); i++) {
this._selectedArray.push(this.childDocs[i]);
this._eleArray.push(ref);
@@ -601,18 +629,33 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
if (this.layoutDoc.presStatus !== "edit") this.startAutoPres(0);
else this.layoutDoc.presStatus = "manual"; if (this._presTimer) clearTimeout(this._presTimer);
handled = true;
- }
- if (e.keyCode === 8) { // delete selected items
+ } if (e.keyCode === 8) { // delete selected items
if (this.layoutDoc.presStatus === "edit") {
this._selectedArray.forEach((doc, i) => {
this.removeDocument(doc);
});
+ this._selectedArray = [];
+ this._eleArray = [];
+ this._dragArray = [];
handled = true;
}
- }
- if (handled) {
+ } if (handled) {
e.stopPropagation();
e.preventDefault();
+ } if ((e.keyCode === 37 || e.keyCode === 38) && e.shiftKey) { // left(37) / a(65) / up(38) to go back
+ if (this.layoutDoc.presStatus === "edit" && this._selectedArray.length > 0) {
+ const index = this.childDocs.indexOf(this._selectedArray[this._selectedArray.length]);
+ if ((index - 1) > 0) this._selectedArray.push(this.childDocs[index - 1]);
+ }
+ handled = true;
+ } if ((e.keyCode === 39 || e.keyCode === 40) && e.shiftKey) { // left(37) / a(65) / up(38) to go back
+ if (this.layoutDoc.presStatus === "edit" && this._selectedArray.length > 0) {
+ const index = this.childDocs.indexOf(this._selectedArray[this._selectedArray.length]);
+ if ((index - 1) > 0) {
+ this._selectedArray.push(this.childDocs[index - 1]);
+ }
+ }
+ handled = true;
}
}
@@ -636,12 +679,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@computed get order() {
const order: JSX.Element[] = [];
this.childDocs.forEach((doc, index) => {
- const targetDoc = Cast(doc.presentationTargetDoc, Doc, null);
- const srcContext = Cast(targetDoc?.context, Doc, null);
+ const tagDoc = Cast(doc.presentationTargetDoc, Doc, null);
+ const srcContext = Cast(tagDoc?.context, Doc, null);
// Case A: Document is contained within the colleciton
if (this.rootDoc.presCollection === srcContext) {
order.push(
- <div className="pathOrder" style={{ top: NumCast(targetDoc.y), left: NumCast(targetDoc.x) }}>
+ <div className="pathOrder" style={{ top: NumCast(tagDoc.y), left: NumCast(tagDoc.x) }}>
<div className="pathOrder-frame">{index + 1}</div>
</div>);
// Case B: Document is not inside of the collection
@@ -666,11 +709,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@computed get paths() {
let pathPoints = "";
this.childDocs.forEach((doc, index) => {
- const targetDoc = Cast(doc.presentationTargetDoc, Doc, null);
- const srcContext = Cast(targetDoc?.context, Doc, null);
- if (targetDoc && this.rootDoc.presCollection === srcContext) {
- const n1x = NumCast(targetDoc.x) + (NumCast(targetDoc._width) / 2);
- const n1y = NumCast(targetDoc.y) + (NumCast(targetDoc._height) / 2);
+ const tagDoc = Cast(doc.presentationTargetDoc, Doc, null);
+ const srcContext = Cast(tagDoc?.context, Doc, null);
+ if (tagDoc && this.rootDoc.presCollection === srcContext) {
+ const n1x = NumCast(tagDoc.x) + (NumCast(tagDoc._width) / 2);
+ const n1y = NumCast(tagDoc.y) + (NumCast(tagDoc._height) / 2);
if (index = 0) pathPoints = n1x + "," + n1y;
else pathPoints = pathPoints + " " + n1x + "," + n1y;
} else {
@@ -701,8 +744,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@action
onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => {
e.stopPropagation();
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
activeItem.presFadeButton = !activeItem.presFadeButton;
if (!activeItem.presFadeButton) {
if (targetDoc) {
@@ -722,9 +765,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
if (change) timeInMS += change;
if (timeInMS < 100) timeInMS = 100;
if (timeInMS > 10000) timeInMS = 10000;
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
- if (targetDoc) targetDoc.presTransition = timeInMS;
+ if (this.targetDoc) this.targetDoc.presTransition = timeInMS;
}
// Converts seconds to ms and updates presDuration
@@ -733,15 +774,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
if (change) timeInMS += change;
if (timeInMS < 100) timeInMS = 100;
if (timeInMS > 20000) timeInMS = 20000;
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
- if (targetDoc) targetDoc.presDuration = timeInMS;
+ if (this.targetDoc) this.targetDoc.presDuration = timeInMS;
}
@computed get transitionDropdown() {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
if (activeItem && targetDoc) {
const transitionSpeed = targetDoc.presTransition ? NumCast(targetDoc.presTransition) / 1000 : 0.5;
let duration = targetDoc.presDuration ? NumCast(targetDoc.presDuration) / 1000 : 2;
@@ -753,16 +792,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
<div className="ribbon-box">
Movement
<div className="presBox-dropdown" onClick={action(e => { e.stopPropagation(); this.openMovementDropdown = !this.openMovementDropdown; })} style={{ borderBottomLeftRadius: this.openMovementDropdown ? 0 : 5, border: this.openMovementDropdown ? 'solid 2px #5B9FDD' : 'solid 1px black' }}>
- {activeItem.presMovement}
+ {this.setMovementName(activeItem.presMovement)}
<FontAwesomeIcon className='presBox-dropdownIcon' style={{ gridColumn: 2, color: this.openMovementDropdown ? '#5B9FDD' : 'black' }} icon={"angle-down"} />
<div className={'presBox-dropdownOptions'} id={'presBoxMovementDropdown'} onPointerDown={e => e.stopPropagation()} style={{ display: this.openMovementDropdown ? "grid" : "none" }}>
- <div className={`presBox-dropdownOption ${activeItem.presMovement === 'None' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('none')}>None</div>
- <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Zoom' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom</div>
- <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Pan' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('pan')}>Pan</div>
- <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Jump cut' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('jump')}>Jump cut</div>
+ <div className={`presBox-dropdownOption ${activeItem.presMovement === 'none' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateMovement('none', activeItem, targetDoc)}>None</div>
+ <div className={`presBox-dropdownOption ${activeItem.presMovement === 'zoom' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateMovement('zoom', activeItem, targetDoc)}>Pan and Zoom</div>
+ <div className={`presBox-dropdownOption ${activeItem.presMovement === 'pan' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateMovement('pan', activeItem, targetDoc)}>Pan</div>
+ <div className={`presBox-dropdownOption ${activeItem.presMovement === 'jump' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateMovement('jump', activeItem, targetDoc)}>Jump cut</div>
</div>
</div>
- <div className="ribbon-doubleButton" style={{ display: activeItem.presMovement === 'Pan' || activeItem.presMovement === 'Zoom' ? "inline-flex" : "none" }}>
+ <div className="ribbon-doubleButton" style={{ display: activeItem.presMovement === 'pan' || activeItem.presMovement === 'zoom' ? "inline-flex" : "none" }}>
<div className="presBox-subheading">Transition Speed</div>
<div className="ribbon-property">
<input className="presBox-input"
@@ -779,8 +818,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
</div>
</div>
</div>
- <input type="range" step="0.1" min="0.1" max="10" value={transitionSpeed} className={`toolbar-slider ${activeItem.presMovement === 'Pan' || activeItem.presMovement === 'Zoom' ? "" : "none"}`} id="toolbar-slider" onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} />
- <div className={`slider-headers ${activeItem.presMovement === 'Pan' || activeItem.presMovement === 'Zoom' ? "" : "none"}`}>
+ <input type="range" step="0.1" min="0.1" max="10" value={transitionSpeed} className={`toolbar-slider ${activeItem.presMovement === 'pan' || activeItem.presMovement === 'zoom' ? "" : "none"}`} id="toolbar-slider" onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} />
+ <div className={`slider-headers ${activeItem.presMovement === 'pan' || activeItem.presMovement === 'zoom' ? "" : "none"}`}>
<div className="slider-text">Fast</div>
<div className="slider-text">Medium</div>
<div className="slider-text">Slow</div>
@@ -858,10 +897,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
}
@computed get effectDirection(): string {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
let effect = '';
- switch (targetDoc.presEffectDirection) {
+ switch (this.targetDoc.presEffectDirection) {
case 'left': effect = "Enter from left"; break;
case 'right': effect = "Enter from right"; break;
case 'top': effect = "Enter from top"; break;
@@ -874,8 +911,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@undoBatch
@action
applyTo = (array: Doc[]) => {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
array.forEach((doc, index) => {
const curDoc = Cast(doc, Doc, null);
const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null);
@@ -885,14 +922,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
tagDoc.presEffect = targetDoc.presEffect;
tagDoc.presEffectDirection = targetDoc.presEffectDirection;
curDoc.presMovement = activeItem.presMovement;
+ this.updateMovement(activeItem.presMovement, curDoc, tagDoc);
curDoc.presHideTillShownButton = activeItem.presHideTillShownButton;
curDoc.presHideAfterButton = activeItem.presHideAfterButton;
}
});
}
@computed get optionsDropdown() {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
if (activeItem && targetDoc) {
return (
<div>
@@ -909,6 +947,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
<div className="ribbon-button" style={{ backgroundColor: activeItem.presPinView ? "#aedef8" : "" }}
onClick={() => {
activeItem.presPinView = !activeItem.presPinView;
+ targetDoc.presPinView = activeItem.presPinView;
if (activeItem.presPinView) {
const x = targetDoc._panX;
const y = targetDoc._panY;
@@ -1067,8 +1106,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
}
createTemplate = (layout: string, input?: string) => {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
let x = 0;
let y = 0;
if (activeItem && targetDoc) {
@@ -1122,7 +1161,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
// Case in which the document has keyframes to navigate to next key frame
@undoBatch
@action
- nextKeyframe = (tagDoc: Doc, activeItem: Doc): void => {
+ nextKeyframe = (tagDoc: Doc, curDoc: Doc): void => {
const childDocs = DocListCast(tagDoc[Doc.LayoutFieldKey(tagDoc)]);
const currentFrame = Cast(tagDoc.currentFrame, "number", null);
if (currentFrame === undefined) {
@@ -1134,20 +1173,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, tagDoc);
tagDoc.currentFrame = Math.max(0, (currentFrame || 0) + 1);
tagDoc.lastFrame = Math.max(NumCast(tagDoc.currentFrame), NumCast(tagDoc.lastFrame));
- if (activeItem.zoomProgressivize) {
+ if (curDoc.zoomProgressivize) {
const resize = document.getElementById('resizable');
if (resize) {
- resize.style.width = this.checkList(tagDoc, activeItem["viewfinder-width-indexed"]) + 'px';
- resize.style.height = this.checkList(tagDoc, activeItem["viewfinder-height-indexed"]) + 'px';
- resize.style.top = this.checkList(tagDoc, activeItem["viewfinder-top-indexed"]) + 'px';
- resize.style.left = this.checkList(tagDoc, activeItem["viewfinder-left-indexed"]) + 'px';
+ resize.style.width = this.checkList(tagDoc, curDoc["viewfinder-width-indexed"]) + 'px';
+ resize.style.height = this.checkList(tagDoc, curDoc["viewfinder-height-indexed"]) + 'px';
+ resize.style.top = this.checkList(tagDoc, curDoc["viewfinder-top-indexed"]) + 'px';
+ resize.style.left = this.checkList(tagDoc, curDoc["viewfinder-left-indexed"]) + 'px';
}
}
}
@undoBatch
@action
- prevKeyframe = (tagDoc: Doc, activeItem: Doc): void => {
+ prevKeyframe = (tagDoc: Doc, actItem: Doc): void => {
const childDocs = DocListCast(tagDoc[Doc.LayoutFieldKey(tagDoc)]);
const currentFrame = Cast(tagDoc.currentFrame, "number", null);
if (currentFrame === undefined) {
@@ -1156,13 +1195,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
}
CollectionFreeFormDocumentView.gotoKeyframe(childDocs.slice());
tagDoc.currentFrame = Math.max(0, (currentFrame || 0) - 1);
- if (activeItem.zoomProgressivize) {
+ if (actItem.zoomProgressivize) {
const resize = document.getElementById('resizable');
if (resize) {
- resize.style.width = this.checkList(tagDoc, activeItem["viewfinder-width-indexed"]) + 'px';
- resize.style.height = this.checkList(tagDoc, activeItem["viewfinder-height-indexed"]) + 'px';
- resize.style.top = this.checkList(tagDoc, activeItem["viewfinder-top-indexed"]) + 'px';
- resize.style.left = this.checkList(tagDoc, activeItem["viewfinder-left-indexed"]) + 'px';
+ resize.style.width = this.checkList(tagDoc, actItem["viewfinder-width-indexed"]) + 'px';
+ resize.style.height = this.checkList(tagDoc, actItem["viewfinder-height-indexed"]) + 'px';
+ resize.style.top = this.checkList(tagDoc, actItem["viewfinder-top-indexed"]) + 'px';
+ resize.style.left = this.checkList(tagDoc, actItem["viewfinder-left-indexed"]) + 'px';
}
}
}
@@ -1171,8 +1210,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
* Returns the collection type as a string for headers
*/
@computed get stringType(): string {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
let type: string = '';
if (activeItem) {
switch (targetDoc.type) {
@@ -1195,11 +1234,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@computed get progressivizeDropdown() {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
- const activeFontColor = targetDoc["pres-text-color"] ? StrCast(targetDoc["pres-text-color"]) : "Black";
- const viewedFontColor = targetDoc["pres-text-viewed-color"] ? StrCast(targetDoc["pres-text-viewed-color"]) : "Black";
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
if (activeItem && targetDoc) {
+ const activeFontColor = targetDoc["pres-text-color"] ? StrCast(targetDoc["pres-text-color"]) : "Black";
+ const viewedFontColor = targetDoc["pres-text-viewed-color"] ? StrCast(targetDoc["pres-text-viewed-color"]) : "Black";
return (
<div>
<div className={`presBox-ribbon ${this.progressivizeTools && this.layoutDoc.presStatus === "edit" ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
@@ -1258,8 +1297,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@undoBatch
@action
switchActive = (color: ColorState) => {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
const val = String(color.hex);
targetDoc["pres-text-color"] = val;
return true;
@@ -1267,16 +1306,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@undoBatch
@action
switchPresented = (color: ColorState) => {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
const val = String(color.hex);
targetDoc["pres-text-viewed-color"] = val;
return true;
}
@computed get activeColorPicker() {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
return !this.openActiveColorPicker ? (null) : <SketchPicker onChange={this.switchActive}
presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
'#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
@@ -1285,8 +1324,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
}
@computed get viewedColorPicker() {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
return !this.openViewedColorPicker ? (null) : <SketchPicker onChange={this.switchPresented}
presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
'#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
@@ -1310,8 +1349,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
//Toggle whether the user edits or not
@action
editZoomProgressivize = (e: React.MouseEvent) => {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
if (!targetDoc.editZoomProgressivize) {
if (!activeItem.zoomProgressivize) activeItem.zoomProgressivize = true; targetDoc.zoomProgressivize = true;
targetDoc.editZoomProgressivize = true;
@@ -1325,8 +1364,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
//Toggle whether the user edits or not
@action
editScrollProgressivize = (e: React.MouseEvent) => {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
if (!targetDoc.editScrollProgressivize) {
if (!targetDoc.scrollProgressivize) { targetDoc.scrollProgressivize = true; activeItem.scrollProgressivize = true; }
targetDoc.editScrollProgressivize = true;
@@ -1339,9 +1378,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@action
progressivizeScroll = (e: React.MouseEvent) => {
e.stopPropagation();
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+ const activeItem: Doc = this.activeItem;
activeItem.scrollProgressivize = !activeItem.scrollProgressivize;
- const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+ const targetDoc: Doc = this.targetDoc;
targetDoc.scrollProgressivize = !targetDoc.scrollProgressivize;
CollectionFreeFormDocumentView.setupScroll(targetDoc, NumCast(targetDoc.currentFrame));
if (targetDoc.editScrollProgressivize) {
@@ -1355,9 +1394,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@action
progressivizeZoom = (e: React.MouseEvent) => {
e.stopPropagation();
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+ const activeItem: Doc = this.activeItem;
activeItem.zoomProgressivize = !activeItem.zoomProgressivize;
- const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+ const targetDoc: Doc = this.targetDoc;
targetDoc.zoomProgressivize = !targetDoc.zoomProgressivize;
CollectionFreeFormDocumentView.setupZoom(activeItem, targetDoc);
if (activeItem.editZoomProgressivize) {
@@ -1370,8 +1409,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
//Progressivize Child Docs
@action
editProgressivize = (e: React.MouseEvent) => {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
targetDoc.currentFrame = targetDoc.lastFrame;
if (!targetDoc.editProgressivize) {
if (!activeItem.presProgressivize) { activeItem.presProgressivize = true; targetDoc.presProgressivize = true; }
@@ -1384,8 +1423,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@action
progressivizeChild = (e: React.MouseEvent) => {
e.stopPropagation();
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+ const activeItem: Doc = this.activeItem;
+ const targetDoc: Doc = this.targetDoc;
const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
if (!activeItem.presProgressivize) {
targetDoc.editing = false;
@@ -1450,8 +1489,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
}
@computed get progressivizeChildDocs() {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+ const targetDoc: Doc = this.targetDoc;
const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
const tags: JSX.Element[] = [];
docs.forEach((doc, index) => {
@@ -1471,8 +1509,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@undoBatch
@action
nextAppearFrame = (doc: Doc, i: number): void => {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+ // const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+ // const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
const appearFrame = Cast(doc.appearFrame, "number", null);
if (appearFrame === undefined) {
doc.appearFrame = 0;
@@ -1484,8 +1522,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@undoBatch
@action
prevAppearFrame = (doc: Doc, i: number): void => {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+ // const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+ // const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
const appearFrame = Cast(doc.appearFrame, "number", null);
if (appearFrame === undefined) {
doc.appearFrame = 0;
@@ -1606,11 +1644,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
}
@computed get playButtonFrames() {
- const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
- const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+ const targetDoc: Doc = this.targetDoc;
return (
<>
- {targetDoc ? <div className="miniPres-button-frame" style={{ display: targetDoc.lastFrame !== undefined && targetDoc.lastFrame >= 0 ? "inline-flex" : "none" }}>
+ {this.targetDoc ? <div className="miniPres-button-frame" style={{ display: targetDoc.lastFrame !== undefined && targetDoc.lastFrame >= 0 ? "inline-flex" : "none" }}>
<div>{targetDoc.currentFrame}</div>
<div className="miniPres-divider" style={{ border: 'solid 0.5px white', height: '60%' }}></div>
<div>{targetDoc.lastFrame}</div>
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index a25a8ee33..127ad9d01 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -205,6 +205,15 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
}
}
+ @action
+ removeItem = (e: React.MouseEvent) => {
+ this.props.removeDocument?.(this.rootDoc);
+ if (PresBox.Instance._selectedArray.includes(this.rootDoc)) {
+ PresBox.Instance._selectedArray.splice(PresBox.Instance._selectedArray.indexOf(this.rootDoc), 1);
+ }
+ e.stopPropagation();
+ }
+
render() {
const className = "presElementBox-item" + (PresBox.Instance._selectedArray.includes(this.rootDoc) ? " presElementBox-active" : "");
const pbi = "presElementBox-interaction";
@@ -253,10 +262,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
<Tooltip title={<><div className="dash-tooltip">{"Presentation pin view"}</div></>}><div className="presElementBox-time" style={{ fontWeight: 700, display: this.rootDoc.presPinView && PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>V</div></Tooltip>
<Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div
className="presElementBox-closeIcon"
- onClick={e => {
- this.props.removeDocument?.(this.rootDoc);
- e.stopPropagation();
- }}>
+ onClick={this.removeItem}>
<FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} />
</div></Tooltip>
<Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"presElementBox-expand" + (this.rootDoc.presExpandInlineButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 23:41:30 +0000