aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/DocumentManager.ts4
-rw-r--r--src/client/views/.DS_Storebin6148 -> 6148 bytes
-rw-r--r--src/client/views/collections/CollectionDockingView.scss62
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx24
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx4
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.tsx42
-rw-r--r--src/client/views/nodes/PresBox.scss118
-rw-r--r--src/client/views/nodes/PresBox.tsx436
-rw-r--r--src/client/views/presentationview/PresElementBox.tsx6
9 files changed, 550 insertions, 146 deletions
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 237ea7675..d18eac374 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -127,6 +127,10 @@ export class DocumentManager {
CollectionDockingView.AddRightSplit(doc);
finished?.();
}
+ // static openInPlace = (doc: Doc, finished?: () => void) => {
+ // CollectionDockingView.AddTab(doc);
+ // finished?.();
+ // }
public jumpToDocument = async (
targetDoc: Doc, // document to display
willZoom: boolean, // whether to zoom doc to take up most of screen
diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store
index 3717a2923..3ce88292c 100644
--- a/src/client/views/.DS_Store
+++ b/src/client/views/.DS_Store
Binary files differ
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 1895c06a1..9b14df760 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -18,6 +18,68 @@
}
}
}
+
+.miniPres:hover {
+ opacity: 1;
+}
+
+.miniPres {
+ position: absolute;
+ overflow: hidden;
+ right: 10;
+ top: 10;
+ opacity: 0.1;
+ transition: all 0.4s;
+ /* border: solid 1px; */
+ color: white;
+ /* box-shadow: black 0.4vw 0.4vw 0.8vw; */
+
+ .miniPresOverlay {
+ display: grid;
+ grid-template-columns: auto auto auto auto auto auto auto auto;
+ grid-template-rows: 100%;
+ height: 100%;
+ justify-items: center;
+ align-items: center;
+
+ .miniPres-button-text {
+ display: flex;
+ height: 30;
+ font-weight: 400;
+ min-width: 100%;
+ border-radius: 5px;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.3s;
+ }
+
+ .miniPres-divider {
+ width: 1px;
+ height: 80%;
+ border-right: solid 2px #5a5a5a;
+ }
+
+ .miniPres-button {
+ display: flex;
+ height: 30;
+ min-width: 30;
+ border-radius: 100%;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.3s;
+ }
+
+ .miniPres-button:hover {
+ background-color: #5a5a5a;
+ }
+
+ .miniPres-button-text:hover {
+ background-color: #5a5a5a;
+ }
+ }
+}
+
+
.lm_title {
margin-top: 3px;
border-radius: 5px;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 53b2d5254..b82a33bd8 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -31,6 +31,8 @@ import { SnappingManager } from '../../util/SnappingManager';
import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
import { listSpec } from '../../../fields/Schema';
import { clamp } from 'lodash';
+import { PresBox } from '../nodes/PresBox';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
const _global = (window /* browser */ || global /* node */) as any;
@observer
@@ -838,6 +840,27 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
return false;
}), emptyFunction, emptyFunction);
}
+ getCurrentFrame = (): number => {
+ const presTargetDoc = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex].presentationTargetDoc, Doc, null);
+ const currentFrame = Cast(presTargetDoc.currentFrame, "number", null);
+ return currentFrame;
+ }
+ renderMiniPres() {
+ return <div className="miniPres" style={{
+ width: 400, height: 50, background: '#323232'
+ }}>
+ <div className="miniPresOverlay" >
+ <div className="miniPres-button" onClick={PresBox.Instance.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
+ <div className="miniPres-button" onClick={() => PresBox.Instance.startOrResetPres(PresBox.Instance.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div>
+ <div className="miniPres-button" onClick={PresBox.Instance.next}><FontAwesomeIcon icon={"arrow-right"} /></div>
+ <div className="miniPres-divider"></div>
+ <div className="miniPres-button-text">Slide {PresBox.Instance.itemIndex + 1} / {PresBox.Instance.childDocs.length}</div>
+ {/* <div className="miniPres-button-text">{this.getCurrentFrame}</div> */}
+ <div className="miniPres-divider"></div>
+ <div className="miniPres-button-text" onClick={PresBox.Instance.updateMinimize}>EXIT</div>
+ </div>
+ </div>;
+ }
renderMiniMap() {
return <div className="miniMap" style={{
width: this.returnMiniSize(), height: this.returnMiniSize(), background: StrCast(this._document!._backgroundColor,
@@ -920,6 +943,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
ContainingCollectionView={undefined}
ContainingCollectionDoc={undefined} />
{document._viewType === CollectionViewType.Freeform && !this._document?.hideMinimap ? this.renderMiniMap() : (null)}
+ {document._viewType === CollectionViewType.Freeform && this._document?.miniPres ? this.renderMiniPres() : (null)}
</>;
}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index e22b400c0..79540d19e 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -214,7 +214,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
const layoutDoc = Doc.Layout(d);
if (this.Document.currentFrame !== undefined) {
const vals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.activeFrame, 1000));
- CollectionFreeFormDocumentView.setValues(this.Document.currentFrame, d, x + vals.x - dropPos[0], y + vals.y - dropPos[1], vals.opacity);
+ CollectionFreeFormDocumentView.setValues(this.Document.currentFrame, d, x + vals.x - dropPos[0], y + vals.y - dropPos[1], vals.h, vals.w, vals.opacity);
} else {
d.x = x + NumCast(d.x) - dropPos[0];
d.y = y + NumCast(d.y) - dropPos[1];
@@ -1405,7 +1405,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.zoomProgressivize)}
+ zoomProgressivize={BoolCast(this.Document.editZoomProgressivize)}
transition={Cast(this.layoutDoc._viewTransition, "string", null)}
viewDefDivClick={this.props.viewDefDivClick}
zoomScaling={this.zoomScaling} panX={this.panX} panY={this.panY}>
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 480abdaed..5d1db6de2 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -76,22 +76,30 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
public static getValues(doc: Doc, time: number) {
const timecode = Math.round(time);
return ({
+ h: Cast(doc["h-indexed"], listSpec("number"), [NumCast(doc._height)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number),
+ w: Cast(doc["w-indexed"], listSpec("number"), [NumCast(doc._width)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number),
x: Cast(doc["x-indexed"], listSpec("number"), [NumCast(doc.x)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number),
y: Cast(doc["y-indexed"], listSpec("number"), [NumCast(doc.y)]).reduce((p, y, i) => (i <= timecode && y !== undefined) || p === undefined ? y : p, undefined as any as number),
opacity: Cast(doc["opacity-indexed"], listSpec("number"), [NumCast(doc.opacity, 1)]).reduce((p, o, i) => i <= timecode || p === undefined ? o : p, undefined as any as number),
});
}
- public static setValues(time: number, d: Doc, x?: number, y?: number, opacity?: number) {
+ public static setValues(time: number, d: Doc, x?: number, y?: number, h?: number, w?: number, opacity?: number) {
const timecode = Math.round(time);
+ const hindexed = Cast(d["h-indexed"], listSpec("number"), []).slice();
+ const windexed = Cast(d["w-indexed"], listSpec("number"), []).slice();
const xindexed = Cast(d["x-indexed"], listSpec("number"), []).slice();
const yindexed = Cast(d["y-indexed"], listSpec("number"), []).slice();
const oindexed = Cast(d["opacity-indexed"], listSpec("number"), []).slice();
xindexed[timecode] = x as any as number;
yindexed[timecode] = y as any as number;
+ hindexed[timecode] = h as any as number;
+ windexed[timecode] = w as any as number;
oindexed[timecode] = opacity as any as number;
d["x-indexed"] = new List<number>(xindexed);
d["y-indexed"] = new List<number>(yindexed);
+ d["h-indexed"] = new List<number>(hindexed);
+ d["w-indexed"] = new List<number>(windexed);
d["opacity-indexed"] = new List<number>(oindexed);
}
public static updateKeyframe(docs: Doc[], time: number) {
@@ -99,7 +107,11 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
docs.forEach(doc => {
const xindexed = Cast(doc['x-indexed'], listSpec("number"), null);
const yindexed = Cast(doc['y-indexed'], listSpec("number"), null);
+ const hindexed = Cast(doc['h-indexed'], listSpec("number"), null);
+ const windexed = Cast(doc['w-indexed'], listSpec("number"), null);
const opacityindexed = Cast(doc['opacity-indexed'], listSpec("number"), null);
+ hindexed?.length <= timecode + 1 && hindexed.push(undefined as any as number);
+ windexed?.length <= timecode + 1 && windexed.push(undefined as any as number);
xindexed?.length <= timecode + 1 && xindexed.push(undefined as any as number);
yindexed?.length <= timecode + 1 && yindexed.push(undefined as any as number);
opacityindexed?.length <= timecode + 1 && opacityindexed.push(undefined as any as number);
@@ -118,14 +130,24 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
const height = new List<number>();
const top = new List<number>();
const left = new List<number>();
+ // width.push(100);
+ // height.push(100);
+ // top.push(0);
+ // left.push(0);
width.push(NumCast(doc.width));
height.push(NumCast(doc.height));
top.push(NumCast(doc.height) / -2);
left.push(NumCast(doc.width) / -2);
- doc["width-indexed"] = width;
- doc["height-indexed"] = height;
- doc["top-indexed"] = top;
- doc["left-indexed"] = left;
+ doc["viewfinder-width-indexed"] = width;
+ doc["viewfinder-height-indexed"] = height;
+ doc["viewfinder-top-indexed"] = top;
+ doc["viewfinder-left-indexed"] = left;
+ }
+
+ public static setupScroll(doc: Doc, scrollProgressivize: boolean = false) {
+ const scrollList = new List<number>();
+ scrollList.push(NumCast(doc._scrollTop));
+ doc["scroll-indexed"] = scrollList;
}
public static setupKeyframes(docs: Doc[], timecode: number, progressivize: boolean = false) {
@@ -134,6 +156,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
const curTimecode = progressivize ? i : timecode;
const xlist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
const ylist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
+ const wlist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
+ const hlist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
const olist = new List<number>(numberRange(timecode + 1).map(t => progressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1));
let oarray: List<number>;
console.log(doc.title + "AF: " + doc.appearFrame);
@@ -143,15 +167,21 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
oarray.fill(1, NumCast(doc.appearFrame), timecode);
// oarray.fill(0, 0, NumCast(doc.appearFrame) - 1);
// oarray.fill(1, NumCast(doc.appearFrame), timecode);
- console.log(oarray);
+ // console.log(oarray);
+ wlist[curTimecode] = NumCast(doc._width);
+ hlist[curTimecode] = NumCast(doc._height);
xlist[curTimecode] = NumCast(doc.x);
ylist[curTimecode] = NumCast(doc.y);
doc.xArray = xlist;
doc.yArray = ylist;
doc["x-indexed"] = xlist;
doc["y-indexed"] = ylist;
+ doc["w-indexed"] = wlist;
+ doc["h-indexed"] = hlist;
doc["opacity-indexed"] = oarray;
doc.activeFrame = ComputedField.MakeFunction("self.context?.currentFrame||0");
+ doc._height = ComputedField.MakeInterpolated("h", "activeFrame");
+ doc._width = ComputedField.MakeInterpolated("w", "activeFrame");
doc.x = ComputedField.MakeInterpolated("x", "activeFrame");
doc.y = ComputedField.MakeInterpolated("y", "activeFrame");
doc.opacity = ComputedField.MakeInterpolated("opacity", "activeFrame");
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 45bb4293b..b06503472 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -441,6 +441,7 @@
padding-top: 5px;
padding-bottom: 5px;
border: solid 1px black;
+ // overflow: auto;
::-webkit-scrollbar {
-webkit-appearance: none;
@@ -450,37 +451,127 @@
::-webkit-scrollbar-thumb {
border-radius: 2px;
- background-color: rgb(101, 164, 220);
}
}
.dropdown-play-button {
- font-size: 10;
- margin-left: 10;
- margin-right: 10;
+ font-size: 12;
+ padding-left: 5px;
+ padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
justify-content: left;
- border-bottom: solid 1px lightgrey;
+}
+
+.dropdown-play-button:hover {
+ background-color: lightgrey;
+}
+
+.presBox-button-left {
+ position: relative;
+ align-self: flex-start;
+ justify-self: flex-start;
+ width: 80%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 4px;
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+}
+
+.presBox-button-right {
+ position: relative;
+ text-align: center;
+ border-left: solid 1px darkgrey;
+ width: 20%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 4px;
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+}
+
+.presBox-button-right.active {
+ background-color: #223063;
+ border: #aedcf6 solid 1px;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8);
}
.dropdown-play {
- top: 32px;
+ right: 0px;
+ top: calc(100% + 2px);
display: none;
border-radius: 5px;
width: max-content;
min-height: 20px;
height: max-content;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8);
z-index: 200;
- background-color: #323232;
+ background-color: white;
+ color: black;
position: absolute;
+ overflow: hidden;
}
.dropdown-play.active {
display: block;
}
+.layout-container {
+ overflow-x: scroll;
+ display: flex;
+ width: 100%;
+ /* max-width: 200px; */
+ min-width: 100px;
+ height: 100%;
+ // border: solid 1px;
+ /* display: block; */
+ align-self: center;
+
+ .layout:hover {
+ border: solid 2px #5c9edd;
+ }
+
+ .layout {
+ position: relative;
+ top: 10%;
+ height: 80%;
+ margin-right: 10;
+ min-width: 90px;
+ width: 90px;
+ border: solid black 1px;
+ display: grid;
+ grid-template-rows: 20px 30px;
+ align-items: center;
+ text-align: center;
+
+ .header {
+ font-size: 10;
+ font-weight: 600;
+ width: 70%;
+ height: max-content;
+ align-self: center;
+ justify-self: center;
+ border: solid 0.8px black;
+ }
+
+ .subheader {
+ font-size: 8;
+ font-weight: 400;
+ width: 70%;
+ height: 90%;
+ align-self: center;
+ justify-self: center;
+ border: solid 0.4px black;
+ }
+ }
+}
+
.presBox-buttons {
position: relative;
width: 100%;
@@ -498,15 +589,19 @@
border-radius: 5px;
min-width: 15px;
max-width: 100px;
+ left: 8px;
}
.presBox-presentPanel {
display: flex;
justify-self: end;
width: 100%;
-
+ max-width: 300px;
+ min-width: 150px;
}
+
+
select {
background: #323232;
color: white;
@@ -532,6 +627,10 @@
display: flex;
}
+ .presBox-button.active:hover {
+ background-color: #233163;
+ }
+
.presBox-button.edit {
display: flex;
max-width: 25px;
@@ -542,7 +641,7 @@
min-width: 100px;
width: 100px;
position: absolute;
- right: 0px;
+ right: 8px;
.present-icon {
margin-right: 7px;
@@ -557,6 +656,7 @@
height: 25;
position: relative;
display: inline-block;
+ left: 8px;
}
}
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index ac2288944..221f1e6a0 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -24,11 +24,11 @@ import { HighlightSpanKind } from "typescript";
import { SearchUtil } from "../../util/SearchUtil";
import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
import { child } from "serializr";
-import { Zoom, Fade, Flip, Rotate, Bounce, Roll, LightSpeed } from 'react-reveal';
import { List } from "../../../fields/List";
import { Tooltip } from "@material-ui/core";
import { CollectionFreeFormViewChrome } from "../collections/CollectionMenu";
import { conformsTo } from "lodash";
+import { translate } from "googleapis/build/src/apis/translate";
type PresBoxSchema = makeInterface<[typeof documentSchema]>;
const PresBoxDocument = makeInterface(documentSchema);
@@ -72,11 +72,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
onPointerOver = () => {
document.addEventListener("keydown", this.keyEvents, true);
- // document.addEventListener("keydown", this.keyEvents, false);
}
onPointerLeave = () => {
- // document.removeEventListener("keydown", this.keyEvents, false);
document.removeEventListener("keydown", this.keyEvents, true);
}
@@ -96,18 +94,34 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
presTargetDoc.currentFrame = curFrame + 1;
if (presTargetDoc.zoomProgressivize) {
const srcContext = Cast(presTargetDoc.context, Doc, null);
- if (srcContext) {
- srcContext._panX = this.checkList(presTargetDoc, presTargetDoc["left-indexed"]);
- srcContext._panY = this.checkList(presTargetDoc, presTargetDoc["top-indexed"]);
- srcContext._viewScale = this.checkList(presTargetDoc, presTargetDoc["width-indexed"]);
- }
- presTargetDoc._panY = this.checkList(presTargetDoc, presTargetDoc["left-indexed"]);
- const resize = document.getElementById('resizable');
- if (resize) {
- resize.style.width = this.checkList(presTargetDoc, presTargetDoc["width-indexed"]) + 'px';
- resize.style.height = this.checkList(presTargetDoc, presTargetDoc["height-indexed"]) + 'px';
- resize.style.top = this.checkList(presTargetDoc, presTargetDoc["top-indexed"]) + 'px';
- resize.style.left = this.checkList(presTargetDoc, presTargetDoc["left-indexed"]) + 'px';
+ const srcDocView = DocumentManager.Instance.getDocumentView(srcContext);
+ if (srcContext && srcDocView) {
+ const layoutdoc = Doc.Layout(presTargetDoc);
+ const panelWidth: number = srcDocView.props.PanelWidth();
+ const panelHeight: number = srcDocView.props.PanelHeight();
+ console.log("srcDocView: " + srcDocView.props.PanelWidth());
+ // console.log("layoutdoc._width: " + layoutdoc._width);
+ // console.log("srcContext._width: " + srcContext._width);
+ const newPanX = NumCast(presTargetDoc.x) + NumCast(layoutdoc._width) / 2;
+ const newPanY = NumCast(presTargetDoc.y) + NumCast(layoutdoc._height) / 2;
+ // const newPanX = NumCast(presTargetDoc.x) + panelWidth / 2;
+ // const newPanY = NumCast(presTargetDoc.y) + panelHeight / 2;
+ let newScale = 0.9 * Math.min(Number(panelWidth) / this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]), Number(panelHeight) / this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]));
+ // srcContext._panX = newPanX + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + NumCast(presTargetDoc._panX) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2));
+ // srcContext._panY = newPanY + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + NumCast(presTargetDoc._panY) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2));
+ srcContext._panX = newPanX + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + NumCast(presTargetDoc._panX) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2));
+ srcContext._panY = newPanY + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + NumCast(presTargetDoc._panY) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2));
+ // srcContext._panX = newPanX
+ // srcContext._panY = newPanY
+ srcContext._viewScale = newScale;
+ console.log("X: " + srcContext._panX + ", Y: " + srcContext._panY + ", Scale: " + srcContext._viewScale);
+ const resize = document.getElementById('resizable');
+ if (resize) {
+ resize.style.width = this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) + 'px';
+ resize.style.height = this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) + 'px';
+ resize.style.top = this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + 'px';
+ resize.style.left = this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + 'px';
+ }
}
}
// Case 2: No more frames in current doc and next slide is defined, therefore move to next slide
@@ -322,8 +336,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
this.updateCurrentPresentation();
const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
- if (this._presTimer && this.layoutDoc.presStatus === "auto") {
- clearInterval(this._presTimer);
+ if (this.layoutDoc.presStatus === "auto") {
+ if (this._presTimer) clearInterval(this._presTimer);
this.layoutDoc.presStatus = "manual";
} else {
this.layoutDoc.presStatus = "auto";
@@ -381,28 +395,48 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
});
}
- updateMinimize = action((e: React.ChangeEvent, mode: CollectionViewType) => {
- if (BoolCast(this.layoutDoc.inOverlay) !== (mode === CollectionViewType.Invalid)) {
- if (this.layoutDoc.inOverlay) {
+ updateMinimize = async () => {
+ const docToJump = this.childDocs[0];
+ const aliasOf = await DocCastAsync(docToJump.aliasOf);
+ const srcContext = aliasOf && await DocCastAsync(aliasOf.context);
+ if (srcContext) {
+ if (srcContext.miniPres) {
+ document.removeEventListener("keydown", this.keyEvents, true);
+ srcContext.miniPres = false;
Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
CollectionDockingView.AddRightSplit(this.rootDoc);
this.layoutDoc.inOverlay = false;
} else {
- const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
- this.rootDoc.x = pt[0];// 500;//e.clientX + 25;
- this.rootDoc.y = pt[1];////e.clientY - 25;
+ document.addEventListener("keydown", this.keyEvents, true);
+ srcContext.miniPres = true;
this.props.addDocTab?.(this.rootDoc, "close");
Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
}
+
+
}
- });
+ // if (srcContext) {
+ // Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
+ // CollectionDockingView.AddRightSplit(this.rootDoc);
+ // this.layoutDoc.inOverlay = false;
+ // }
+ // else {
+ // const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+ // this.rootDoc.x = pt[0];// 500;//e.clientX + 25;
+ // this.rootDoc.y = pt[1];////e.clientY - 25;
+ // this.props.addDocTab?.(this.rootDoc, "close");
+ // Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
+ // }
+ // }
+ };
@undoBatch
viewChanged = action((e: React.ChangeEvent) => {
//@ts-ignore
const viewType = e.target.selectedOptions[0].value as CollectionViewType;
viewType === CollectionViewType.Stacking && (this.rootDoc._pivotField = undefined); // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here
- this.updateMinimize(e, this.rootDoc._viewType = viewType);
+ // this.updateMinimize(this.rootDoc._viewType = viewType);
+ if (viewType === CollectionViewType.Stacking) this.rootDoc._gridGap = 5;
});
@undoBatch
@@ -411,19 +445,24 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
if (movement === 'zoom') {
activeItem.presZoomButton = !activeItem.presZoomButton;
- activeItem.presMovement = 'Zoom';
+ if (activeItem.presZoomButton) activeItem.presMovement = 'Zoom';
+ else activeItem.presMovement = 'None';
activeItem.presNavButton = false;
} else if (movement === 'nav') {
activeItem.presZoomButton = false;
- activeItem.presMovement = 'Pan';
activeItem.presNavButton = !activeItem.presNavButton;
+ if (activeItem.presNavButton) activeItem.presMovement = 'Pan';
+ else activeItem.presMovement = 'None';
} else if (movement === 'switch') {
- activeItem.presMovement = 'Switch';
targetDoc.presTransition = 0;
+ activeItem.presSwitchButton = !activeItem.presSwitchButton;
+ if (activeItem.presSwitchButton) activeItem.presMovement = 'Switch';
+ else activeItem.presMovement = 'None';
} else {
activeItem.presMovement = 'None';
activeItem.presZoomButton = false;
activeItem.presNavButton = false;
+ activeItem.presSwitchButton = false;
}
});
@@ -439,7 +478,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
childLayoutTemplate = () => this.rootDoc._viewType !== CollectionViewType.Stacking ? undefined : this.presElement;
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() - 20;
+ panelHeight = () => this.props.PanelHeight() - 40;
active = (outsideReaction?: boolean) => ((Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground) &&
(this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false)
@@ -465,9 +504,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
//Regular click
@action
selectElement = (doc: Doc) => {
- this._selectedArray = [];
+ // this._selectedArray = [];
this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex));
- this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]);
+ // this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]);
console.log(this._selectedArray);
}
@@ -508,11 +547,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
// Ctrl-A to select all
} if ((e.metaKey || e.altKey) && e.keyCode === 65) {
if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs;
- // left / a / up to go back
- } if (e.keyCode === 37 || 65 || 38) {
+ // left(37) / a(65) / up(38) to go back
+ } if (e.keyCode === 37) {
if (this.layoutDoc.presStatus !== "edit") this.back();
- // right / d / down to go to next
- } if (e.keyCode === 39 || 68 || 40) {
+ // right (39) / d(68) / down(40) to go to next
+ } if (e.keyCode === 39) {
if (this.layoutDoc.presStatus !== "edit") this.next();
// spacebar to 'present' or go to next slide
} if (e.keyCode === 32) {
@@ -526,6 +565,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@observable private progressivizeTools: boolean = false;
@observable private moreInfoTools: boolean = false;
@observable private playTools: boolean = false;
+ @observable private presentTools: boolean = false;
@observable private pathBoolean: boolean = false;
@observable private expandBoolean: boolean = false;
@@ -548,6 +588,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
// For toggling the tools for progressivize
@action toggleProgressivize = () => {
this.progressivizeTools = !this.progressivizeTools;
+ const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+ const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+ targetDoc.editZoomProgressivize = false;
+ targetDoc.editProgressivize = false;
this.transitionTools = false;
this.newDocumentTools = false;
this.moreInfoTools = false;
@@ -570,6 +614,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
this.moreInfoTools = false;
}
+ // For toggling the options when the user wants to select play
+ @action togglePresent = () => {
+ this.presentTools = !this.presentTools;
+ this.playTools = false;
+ this.transitionTools = false;
+ this.newDocumentTools = false;
+ this.progressivizeTools = false;
+ this.moreInfoTools = false;
+ }
+
@action toggleAllDropdowns() {
this.transitionTools = false;
this.newDocumentTools = false;
@@ -659,11 +713,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
strokeDasharray: '10 5',
}}
fill="none"
- // markerStart="url(#square)"
- // markerEnd="url(#arrow)"
- marker-start="url(#markerSquare)"
- marker-mid="url(#markerSquare)"
- marker-end="url(#markerArrow)"
+ markerStart="url(#markerSquare)"
+ markerMid="url(#markerSquare)"
+ markerEnd="url(#markerArrow)"
/>);
}
@@ -725,6 +777,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
const transitionThumbLocation = String(-9.48 * Number(transitionSpeed) + 93);
const durationThumbLocation = String(9.48 * Number(duration));
const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None';
+ activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : 'Zoom';
return (
<div className={`presBox-ribbon ${this.transitionTools && this.layoutDoc.presStatus === "edit" ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
<div className="ribbon-box">
@@ -742,8 +795,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
<div className={`presBox-dropdownOption ${activeItem.presMovement === 'Switch' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('switch')}>Switch</div>
</div>
</div>
- <input type="range" step="0.1" min="0.1" max="10" value={transitionSpeed} className={`toolbar-slider ${activeItem.presZoomButton || activeItem.presNavButton ? "" : "none"}`} id="toolbar-slider" onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} />
- <div className={`slider-headers ${activeItem.presZoomButton || activeItem.presNavButton ? "" : "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-value ${activeItem.presZoomButton || activeItem.presNavButton ? "" : "none"}`} style={{ left: transitionThumbLocation + '%' }}>{transitionSpeed}s</div>
<div className="slider-text">Slow</div>
<div className="slider-text"></div>
@@ -784,7 +837,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
<div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Roll'}>Roll</div>
</div>
</div>
- <div className="effectDirection">
+ <div className="effectDirection" style={{ display: effect === 'None' ? "none" : "grid" }}>
<Tooltip title={<><div className="dash-tooltip">{"Enter from left"}</div></>}><div style={{ gridColumn: 1, gridRow: 2, justifySelf: 'center', color: targetDoc.presEffectDirection === "left" ? "#5a9edd" : "black" }} onClick={() => targetDoc.presEffectDirection = 'left'}><FontAwesomeIcon icon={"angle-right"} /></div></Tooltip>
<Tooltip title={<><div className="dash-tooltip">{"Enter from right"}</div></>}><div style={{ gridColumn: 3, gridRow: 2, justifySelf: 'center', color: targetDoc.presEffectDirection === "right" ? "#5a9edd" : "black" }} onClick={() => targetDoc.presEffectDirection = 'right'}><FontAwesomeIcon icon={"angle-left"} /></div></Tooltip>
<Tooltip title={<><div className="dash-tooltip">{"Enter from top"}</div></>}><div style={{ gridColumn: 2, gridRow: 1, justifySelf: 'center', color: targetDoc.presEffectDirection === "top" ? "#5a9edd" : "black" }} onClick={() => targetDoc.presEffectDirection = 'top'}><FontAwesomeIcon icon={"angle-down"} /></div></Tooltip>
@@ -863,6 +916,24 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
<div title="Freeform" className={'ribbon-button'} style={{ background: type === 'freeform' ? "#000000" : "#f6f6f6" }} onClick={action(() => { type = "freeform"; })}>Freeform</div>
</div>
</div>
+ <div className="ribbon-box">
+ Preset layouts:
+ <div className="layout-container">
+ <div className="layout">
+ <div className="header">HEADER</div>
+ <div className="subheader">Content goes here</div>
+ </div>
+ <div className="layout">
+ <div className="header" style={{ gridColumn: 1 / 2, gridRow: 1 }}>HEADER</div>
+ <div className="subheader" style={{ gridColumn: 1, gridRow: 2 }}>Some content</div>
+ <div className="subheader" style={{ gridColumn: 2, gridRow: 2 }}>Some more content</div>
+ </div>
+ <div className="layout">
+ <div className="header">HEADER</div>
+ <div className="subheader">Content goes here</div>
+ </div>
+ </div>
+ </div>
<div className="ribbon-final-box">
<div className="ribbon-final-button" onClick={() => this.createNewSlide(title, type)}>
Create New Slide
@@ -877,10 +948,23 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
return (
<div className={`dropdown-play ${this.playTools ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
<div className="dropdown-play-button" onClick={() => this.startOrResetPres(this.itemIndex)}>
- Start from current slide
+ Present from current slide
</div>
<div className="dropdown-play-button" onClick={() => this.startOrResetPres(0)}>
- Start from first slide
+ Present from first slide
+ </div>
+ </div>
+ );
+ }
+
+ @computed get presentDropdown() {
+ return (
+ <div className={`dropdown-play ${this.presentTools ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
+ <div className="dropdown-play-button" onClick={this.updateMinimize}>
+ Minimize
+ </div>
+ <div className="dropdown-play-button" onClick={() => this.startOrResetPres(0)}>
+ Sidebar view
</div>
</div>
);
@@ -916,10 +1000,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
if (tagDoc.zoomProgressivize) {
const resize = document.getElementById('resizable');
if (resize) {
- resize.style.width = this.checkList(tagDoc, tagDoc["width-indexed"]) + 'px';
- resize.style.height = this.checkList(tagDoc, tagDoc["height-indexed"]) + 'px';
- resize.style.top = this.checkList(tagDoc, tagDoc["top-indexed"]) + 'px';
- resize.style.left = this.checkList(tagDoc, tagDoc["left-indexed"]) + 'px';
+ resize.style.width = this.checkList(tagDoc, tagDoc["viewfinder-width-indexed"]) + 'px';
+ resize.style.height = this.checkList(tagDoc, tagDoc["viewfinder-height-indexed"]) + 'px';
+ resize.style.top = this.checkList(tagDoc, tagDoc["viewfinder-top-indexed"]) + 'px';
+ resize.style.left = this.checkList(tagDoc, tagDoc["viewfinder-left-indexed"]) + 'px';
}
}
}
@@ -938,10 +1022,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
if (tagDoc.zoomProgressivize) {
const resize = document.getElementById('resizable');
if (resize) {
- resize.style.width = this.checkList(tagDoc, tagDoc["width-indexed"]) + 'px';
- resize.style.height = this.checkList(tagDoc, tagDoc["height-indexed"]) + 'px';
- resize.style.top = this.checkList(tagDoc, tagDoc["top-indexed"]) + 'px';
- resize.style.left = this.checkList(tagDoc, tagDoc["left-indexed"]) + 'px';
+ resize.style.width = this.checkList(tagDoc, tagDoc["viewfinder-width-indexed"]) + 'px';
+ resize.style.height = this.checkList(tagDoc, tagDoc["viewfinder-height-indexed"]) + 'px';
+ resize.style.top = this.checkList(tagDoc, tagDoc["viewfinder-top-indexed"]) + 'px';
+ resize.style.left = this.checkList(tagDoc, tagDoc["viewfinder-left-indexed"]) + 'px';
}
}
}
@@ -976,18 +1060,22 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
</div>
</div>
<div className="ribbon-final-box">
- <div className="ribbon-doubleButton">
+ <div className="ribbon-doubleButton" style={{ display: targetDoc.type === "collection" ? "inline-flex" : "none" }}>
<div className="ribbon-button" style={{ backgroundColor: activeItem.presProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeChild}>Child documents</div>
<div className="ribbon-button" style={{ display: activeItem.presProgressivize ? "flex" : "none", backgroundColor: targetDoc.editProgressivize ? "#aedef8" : "" }} onClick={this.editProgressivize}>Edit</div>
</div>
- <div className="ribbon-doubleButton">
- <div className="ribbon-button" onClick={this.progressivizeZoom}>Internal zoom</div>
- <div className="ribbon-button" style={{ display: activeItem.zoomProgressivize ? "flex" : "none", backgroundColor: targetDoc.zoomProgressivize ? "#aedef8" : "" }} onClick={this.zoomProgressivize}>Edit</div>
+ <div className="ribbon-doubleButton" style={{ display: targetDoc.type === "collection" || targetDoc.type === "image" ? "inline-flex" : "none" }}>
+ <div className="ribbon-button" style={{ backgroundColor: activeItem.zoomProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeZoom}>Internal zoom</div>
+ <div className="ribbon-button" style={{ display: activeItem.zoomProgressivize ? "flex" : "none", backgroundColor: targetDoc.editZoomProgressivize ? "#aedef8" : "" }} onClick={this.editZoomProgressivize}>Edit</div>
</div>
- <div className="ribbon-doubleButton">
+ <div className="ribbon-doubleButton" style={{ display: targetDoc.type === "rtf" ? "inline-flex" : "none" }}>
<div className="ribbon-button" onClick={this.progressivizeText}>Text progressivize</div>
<div className="ribbon-button" style={{ display: activeItem.textProgressivize ? "flex" : "none", backgroundColor: targetDoc.textProgressivize ? "#aedef8" : "" }} onClick={this.textProgressivize}>Edit</div>
</div>
+ <div className="ribbon-doubleButton" style={{ display: targetDoc.type === "pdf" ? "inline-flex" : "none" }}>
+ <div className="ribbon-button" onClick={this.progressivizeText}>Scroll progressivize</div>
+ <div className="ribbon-button" style={{ display: activeItem.scrollProgressivize ? "flex" : "none", backgroundColor: targetDoc.editScrollProgressivize ? "#aedef8" : "" }} onClick={this.editScrollProgressivize}>Edit</div>
+ </div>
</div>
</div>
</div>
@@ -995,30 +1083,59 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
}
}
- //Progressivize Zoom
+ //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);
+ if (!targetDoc.editZoomProgressivize) {
+ targetDoc.editZoomProgressivize = true;
+ } else {
+ targetDoc.editZoomProgressivize = false;
+ }
+ }
+
+ //Toggle whether the user edits or not
@action
- zoomProgressivize = (e: React.MouseEvent) => {
+ editScrollProgressivize = (e: React.MouseEvent) => {
const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
- if (targetDoc?.zoomProgressivize) {
- targetDoc.zoomProgressivize = false;
+ if (!targetDoc.editScrollProgressivize) {
+ targetDoc.editScrollProgressivize = true;
} else {
- targetDoc.zoomProgressivize = true;
+ targetDoc.editScrollProgressivize = false;
}
}
+ //Progressivize Zoom
+ @action
+ progressivizeScroll = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+ activeItem.scrollProgressivize = !activeItem.scrollProgressivize;
+ const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+ targetDoc.scrollProgressivize = !targetDoc.zoomProgressivize;
+ CollectionFreeFormDocumentView.setupScroll(targetDoc, true);
+ if (targetDoc.editScrollProgressivize) {
+ targetDoc.editScrollProgressivize = false;
+ targetDoc.currentFrame = 0;
+ targetDoc.lastFrame = 0;
+ }
+ }
+
+ //Progressivize Zoom
@action
progressivizeZoom = (e: React.MouseEvent) => {
e.stopPropagation();
const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
activeItem.zoomProgressivize = !activeItem.zoomProgressivize;
const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
- const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
targetDoc.zoomProgressivize = !targetDoc.zoomProgressivize;
- console.log(targetDoc.zoomProgressivize);
- if (activeItem.zoomProgressivize) {
- console.log("progressivize");
+ CollectionFreeFormDocumentView.setupZoom(targetDoc, true);
+ if (targetDoc.editZoomProgressivize) {
+ targetDoc.editZoomProgressivize = false;
targetDoc.currentFrame = 0;
+ targetDoc.lastFrame = 0;
}
}
@@ -1081,9 +1198,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
targetDoc.editProgressivize = false;
activeItem.presProgressivize = false;
targetDoc.presProgressivize = false;
- docs.forEach((doc, index) => {
- doc.appearFrame = 0;
- });
+ // docs.forEach((doc, index) => {
+ // doc.appearFrame = 0;
+ // });
targetDoc.currentFrame = 0;
targetDoc.lastFrame = 0;
}
@@ -1130,6 +1247,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
private _isDraggingBR = false;
private _isDraggingBL = false;
private _isDragging = false;
+ // private _drag = "";
+
+ // onPointerDown = (e: React.PointerEvent): void => {
+ // e.stopPropagation();
+ // e.preventDefault();
+ // if (e.button === 0) {
+ // this._drag = e.currentTarget.id;
+ // console.log(this._drag);
+ // }
+ // document.removeEventListener("pointermove", this.onPointerMove);
+ // document.addEventListener("pointermove", this.onPointerMove);
+ // document.removeEventListener("pointerup", this.onPointerUp);
+ // document.addEventListener("pointerup", this.onPointerUp);
+ // }
+
//Adds event listener so knows pointer is down and moving
onPointerMid = (e: React.PointerEvent): void => {
@@ -1203,87 +1335,136 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
onPointerMove = (e: PointerEvent): void => {
const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+ const tagDocView = DocumentManager.Instance.getDocumentView(targetDoc);
e.stopPropagation();
e.preventDefault();
const doc = document.getElementById('resizable');
- if (doc) {
+ if (doc && tagDocView) {
+ console.log(tagDocView.props.ScreenToLocalTransform().Scale);
let height = doc.offsetHeight;
let width = doc.offsetWidth;
let top = doc.offsetTop;
let left = doc.offsetLeft;
+ // const newHeightB = height += (e.movementY * NumCast(targetDoc._viewScale));
+ // const newHeightT = height -= (e.movementY * NumCast(targetDoc._viewScale));
+ // const newWidthR = width += (e.movementX * NumCast(targetDoc._viewScale));
+ // const newWidthL = width -= (e.movementX * NumCast(targetDoc._viewScale));
+ // const newLeft = left += (e.movementX * NumCast(targetDoc._viewScale));
+ // const newTop = top += (e.movementY * NumCast(targetDoc._viewScale));
+ // switch (this._drag) {
+ // case "": break;
+ // case "resizer-br":
+ // doc.style.height = newHeightB + 'px';
+ // doc.style.width = newWidthR + 'px';
+ // break;
+ // case "resizer-bl":
+ // doc.style.height = newHeightB + 'px';
+ // doc.style.width = newWidthL + 'px';
+ // doc.style.left = newLeft + 'px';
+ // break;
+ // case "resizer-tr":
+ // doc.style.width = newWidthR + 'px';
+ // doc.style.height = newHeightT + 'px';
+ // doc.style.top = newTop + 'px';
+ // case "resizer-tl":
+ // doc.style.width = newWidthL + 'px';
+ // doc.style.height = newHeightT + 'px';
+ // doc.style.top = newTop + 'px';
+ // doc.style.left = newLeft + 'px';
+ // case "resizable":
+ // doc.style.top = newTop + 'px';
+ // doc.style.left = newLeft + 'px';
+ // }
//Bottom right
if (this._isDraggingBR) {
- const newHeight = height += e.movementY;
+ const newHeight = height += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
doc.style.height = newHeight + 'px';
- const newWidth = width += e.movementX;
+ const newWidth = width += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
doc.style.width = newWidth + 'px';
// Bottom left
} else if (this._isDraggingBL) {
- const newHeight = height += e.movementY;
+ const newHeight = height += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
doc.style.height = newHeight + 'px';
- const newWidth = width -= e.movementX;
+ const newWidth = width -= (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
doc.style.width = newWidth + 'px';
- const newLeft = left += e.movementX;
+ const newLeft = left += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
doc.style.left = newLeft + 'px';
// Top right
} else if (this._isDraggingTR) {
- const newWidth = width += e.movementX;
+ const newWidth = width += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
doc.style.width = newWidth + 'px';
- const newHeight = height -= e.movementY;
+ const newHeight = height -= (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
doc.style.height = newHeight + 'px';
- const newTop = top += e.movementY;
+ const newTop = top += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
doc.style.top = newTop + 'px';
// Top left
} else if (this._isDraggingTL) {
- const newWidth = width -= e.movementX;
+ const newWidth = width -= (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
doc.style.width = newWidth + 'px';
- const newHeight = height -= e.movementY;
+ const newHeight = height -= (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
doc.style.height = newHeight + 'px';
- const newTop = top += e.movementY;
+ const newTop = top += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
doc.style.top = newTop + 'px';
- const newLeft = left += e.movementX;
+ const newLeft = left += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
doc.style.left = newLeft + 'px';
} else if (this._isDragging) {
- const newTop = top += e.movementY;
+ const newTop = top += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
doc.style.top = newTop + 'px';
- const newLeft = left += e.movementX;
+ const newLeft = left += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
doc.style.left = newLeft + 'px';
}
- this.updateList(targetDoc, targetDoc["width-indexed"], width);
- this.updateList(targetDoc, targetDoc["height-indexed"], height);
- this.updateList(targetDoc, targetDoc["top-indexed"], top);
- this.updateList(targetDoc, targetDoc["left-indexed"], left);
+ this.updateList(targetDoc, targetDoc["viewfinder-width-indexed"], width);
+ this.updateList(targetDoc, targetDoc["viewfinder-height-indexed"], height);
+ this.updateList(targetDoc, targetDoc["viewfinder-top-indexed"], top);
+ this.updateList(targetDoc, targetDoc["viewfinder-left-indexed"], left);
}
}
@action
checkList = (doc: Doc, list: any): number => {
const x: List<number> = list;
- return x[NumCast(doc.currentFrame)];
+ if (x && x.length >= NumCast(doc.currentFrame) + 1) {
+ return x[NumCast(doc.currentFrame)];
+ } else {
+ x.length = NumCast(doc.currentFrame) + 1;
+ x[NumCast(doc.currentFrame)] = x[NumCast(doc.currentFrame) - 1];
+ return x[NumCast(doc.currentFrame)];
+ }
+
}
@action
updateList = (doc: Doc, list: any, val: number) => {
const x: List<number> = list;
- x[NumCast(doc.currentFrame)] = val;
- list = x;
+ if (x && x.length >= NumCast(doc.currentFrame) + 1) {
+ x[NumCast(doc.currentFrame)] = val;
+ list = x;
+ } else {
+ x.length = NumCast(doc.currentFrame) + 1;
+ x[NumCast(doc.currentFrame)] = val;
+ list = x;
+ }
+
}
+ // scale: NumCast(targetDoc._viewScale),
@computed get zoomProgressivizeContainer() {
const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
- CollectionFreeFormDocumentView.setupZoom(targetDoc, true);
-
- return (
- <div id="resizable" className="resizable" onPointerDown={this.onPointerMid} style={{ width: this.checkList(targetDoc, targetDoc["width-indexed"]), height: this.checkList(targetDoc, targetDoc["height-indexed"]), top: this.checkList(targetDoc, targetDoc["top-indexed"]), left: this.checkList(targetDoc, targetDoc["left-indexed"]), position: 'absolute' }}>
- <div className='resizers'>
- <div className='resizer top-left' onPointerDown={this.onPointerTL}></div>
- <div className='resizer top-right' onPointerDown={this.onPointerTR}></div>
- <div className='resizer bottom-left' onPointerDown={this.onPointerBL}></div>
- <div className='resizer bottom-right' onPointerDown={this.onPointerBR}></div>
- </div>
- </div>
- );
+ if (targetDoc.editZoomProgressivize) {
+ return (
+ <>
+ <div id="resizable" className="resizable" onPointerDown={this.onPointerMid} style={{ width: this.checkList(targetDoc, targetDoc["viewfinder-width-indexed"]), height: this.checkList(targetDoc, targetDoc["viewfinder-height-indexed"]), top: this.checkList(targetDoc, targetDoc["viewfinder-top-indexed"]), left: this.checkList(targetDoc, targetDoc["viewfinder-left-indexed"]), position: 'absolute' }}>
+ <div className='resizers'>
+ <div id="resizer-tl" className='resizer top-left' onPointerDown={this.onPointerTL}></div>
+ <div id="resizer-tr" className='resizer top-right' onPointerDown={this.onPointerTR}></div>
+ <div id="resizer-bl" className='resizer bottom-left' onPointerDown={this.onPointerBL}></div>
+ <div id="resizer-br" className='resizer bottom-right' onPointerDown={this.onPointerBR}></div>
+ </div>
+ </div>
+ </>
+ );
+ } else return null;
}
@computed get progressivizeChildDocs() {
@@ -1341,9 +1522,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
return (<div></div>);
}
- @observable
- toolbarWidth = (): number => {
- console.log(this.props.PanelWidth());
+ @computed
+ get toolbarWidth(): number {
const width = this.props.PanelWidth();
return width;
}
@@ -1361,8 +1541,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
<Tooltip title={<><div className="dash-tooltip">{"View paths"}</div></>}><div className={`toolbar-button ${this.pathBoolean ? "active" : ""}`}>
<FontAwesomeIcon icon={"exchange-alt"} onClick={this.viewPaths} />
</div></Tooltip>
- <Tooltip title={<><div className="dash-tooltip">{this.expandBoolean ? "Expand all" : "Minimize all"}</div></>}>
- <div className={`toolbar-button ${this.expandBoolean ? "" : "active"}`} onClick={() => { this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = false; else doc.presExpandInlineButton = true; }); }}>
+ <Tooltip title={<><div className="dash-tooltip">{this.expandBoolean ? "Minimize all" : "Expand all"}</div></>}>
+ <div className={`toolbar-button ${this.expandBoolean ? "active" : ""}`} onClick={() => { this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = true; else doc.presExpandInlineButton = false; }); }}>
<FontAwesomeIcon icon={"eye"} />
</div>
</Tooltip>
@@ -1370,13 +1550,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
<div className="toolbar-divider" />
<Tooltip title={<><div className="dash-tooltip">{"Transitions"}</div></>}><div className={`toolbar-button ${this.transitionTools ? "active" : ""}`} onClick={this.toggleTransitionTools}>
<FontAwesomeIcon icon={"rocket"} />
- <div style={{ display: this.toolbarWidth() > 380 ? "block" : "none" }} className="toolbar-buttonText">&nbsp; Transitions</div>
+ <div style={{ display: this.props.PanelWidth() > 430 ? "block" : "none" }} className="toolbar-buttonText">&nbsp; Transitions</div>
<FontAwesomeIcon className={`dropdown ${this.transitionTools ? "active" : ""}`} icon={"angle-down"} />
</div></Tooltip>
<div className="toolbar-divider" />
<Tooltip title={<><div className="dash-tooltip">{"Progressivize"}</div></>}><div className={`toolbar-button ${this.progressivizeTools ? "active" : ""}`} onClick={this.toggleProgressivize}>
<FontAwesomeIcon icon={"tasks"} />
- <div style={{ display: this.toolbarWidth() > 380 ? "block" : "none" }} className="toolbar-buttonText">&nbsp; Progressivize</div>
+ <div style={{ display: this.props.PanelWidth() > 430 ? "block" : "none" }} className="toolbar-buttonText">&nbsp; Progressivize</div>
<FontAwesomeIcon className={`dropdown ${this.progressivizeTools ? "active" : ""}`} icon={"angle-down"} />
</div></Tooltip>
<div className="toolbar-divider" />
@@ -1401,9 +1581,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
<div className="toolbar-button" style={{ position: 'absolute', right: 23, transform: 'rotate(45deg)', fontSize: 16 }}>
<FontAwesomeIcon className={"toolbar-thumbtack"} icon={"thumbtack"} />
</div>
- <Fade left when={this.moreInfoTools}>
- <h1>uppercase</h1>
- </Fade>
<div className={`toolbar-button ${this.moreInfoTools ? "active" : ""}`} onClick={this.toggleMoreInfo}>
<div className={`toolbar-moreInfo ${this.moreInfoTools ? "active" : ""}`}>
<div className="toolbar-moreInfoBall" />
@@ -1425,22 +1602,29 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
onPointerDown={e => e.stopPropagation()}
onChange={this.viewChanged}
value={mode}>
- <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Invalid}>Min</option>
+ {/* <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Invalid}>Min</option> */}
<option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Stacking}>List</option>
- <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Time}>Time</option>
+ {/* <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Time}>Time</option> */}
<option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Carousel}>Slides</option>
</select>
<div className="presBox-presentPanel">
- <div className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`} title={"Reset Presentation" + this.layoutDoc.presStatus ? "" : " From Start"} style={{ gridColumn: 2 }} onClick={() => this.startOrResetPres(0)}>
- <FontAwesomeIcon icon={"clock"} /> &nbsp;
- <FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} />
- <div className="toolbar-divider" style={{ marginLeft: 5 }} />
- <FontAwesomeIcon onClick={e => { e.stopPropagation; this.togglePlay(); }} className="dropdown" icon={"angle-down"} />
- {this.playDropdown}
- </div>
- <div className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`} title="Present" onClick={() => this.layoutDoc.presStatus = "manual"}>
- <FontAwesomeIcon className="present-icon" icon={"play-circle"} /> Present
- </div>
+ <span className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`} title={"Reset Presentation" + this.layoutDoc.presStatus ? "" : " From Start"} style={{ minWidth: 60, gridColumn: 2 }}>
+ <div className="presBox-button-left" onClick={() => this.startOrResetPres(0)}>
+ <FontAwesomeIcon icon={"clock"} /> &nbsp;
+ <FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} />
+ </div>
+ <div className={`presBox-button-right ${this.playTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePlay(); }}>
+ <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.playTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
+ {this.playDropdown}
+ </div>
+ </span>
+ <span className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`} title="Present">
+ <div className="presBox-button-left" onClick={() => this.layoutDoc.presStatus = "manual"}><FontAwesomeIcon icon={"play-circle"} /> &nbsp; Present </div>
+ <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePresent(); }}>
+ <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.presentTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
+ {this.presentDropdown}
+ </div>
+ </span>
<div className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`} title="Back" onClick={this.back}>
<FontAwesomeIcon icon={"arrow-left"} />
</div>
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 6c6bad06a..4d1195808 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -260,11 +260,11 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
<div className="presElementBox-name">
{`${this.targetDoc?.title}`}
</div>
- <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presElementBox-time">{this.transition}</div></Tooltip>
- <Tooltip title={<><div className="dash-tooltip">{"Duration of visibility"}</div></>}><div className="presElementBox-time">{this.duration}</div></Tooltip>
+ <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.transition}</div></Tooltip>
+ <Tooltip title={<><div className="dash-tooltip">{"Duration of visibility"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.duration}</div></Tooltip>
<Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div
className="presElementBox-closeIcon"
- onPointerDown={e => e.stopPropagation()}
+ // onPointerDown={e => e.stopPropagation()}
onClick={e => {
this.props.removeDocument?.(this.rootDoc);
e.stopPropagation();
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 16:41:46 +0000