From 3576c88e3c5bc9c6745c2f7fa70721c4057cae0e Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 27 Jan 2021 10:42:42 -0500 Subject: fixed runtime error warning --- .../collectionFreeForm/CollectionFreeFormView.tsx | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 6619205af..73375569f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1651,18 +1651,15 @@ class CollectionFreeFormViewPannableContents extends React.Component - {!this.props.presPinView ? (null) :
-
-
-
-
-
-
-
} - - ); + return !this.props.presPinView ? (null) : +
+
+
+
+
+
+
+
; } } -- cgit v1.2.3-70-g09d2 From bc8504151c8b6cb8c427f1f3c97c7f44eebc9426 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 27 Jan 2021 16:33:45 -0500 Subject: updated documentdecorations title display to be more visible on complex backgrounds. fixed link following behavior (espicall from presentations) to timeline annotations. --- src/client/views/DocComponent.tsx | 5 ++- src/client/views/DocumentDecorations.scss | 38 ++++++++++++---------- src/client/views/DocumentDecorations.tsx | 6 ++-- src/client/views/MainView.scss | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 10 +++--- src/client/views/nodes/PresBox.tsx | 7 ++-- 6 files changed, 39 insertions(+), 29 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx') diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index 8d545c61b..99f13295d 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -131,7 +131,10 @@ export function ViewBoxAnnotatableComponent

effectiveAcl === AclEdit || effectiveAcl === AclAdmin || GetEffectiveAcl(doc) === AclAdmin); if (docs.length) { const docs = doc instanceof Doc ? [doc] : doc; - docs.map(doc => doc.isPushpin = doc.annotationOn = undefined); + docs.map(doc => { + Doc.SetInPlace(doc, "isPushpin", undefined, true); + Doc.SetInPlace(doc, "annotationOn", undefined, true); + }); const targetDataDoc = this.dataDoc; const value = DocListCast(targetDataDoc[annotationKey ?? this.annotationKey]); const toRemove = value.filter(v => docs.includes(v)); diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index f9b8c1940..22e120167 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -79,7 +79,7 @@ $linkGap : 3px; grid-column: 5; grid-row: 4; border-radius: 100%; - background: dimgray; + background: black; height: 8; right: -12; top: 12; @@ -145,7 +145,7 @@ $linkGap : 3px; .documentDecorations-topRightResizer:hover, .documentDecorations-bottomLeftResizer:hover { cursor: nesw-resize; - background: dimGray; + background: black; opacity: 1; } @@ -169,6 +169,14 @@ $linkGap : 3px; cursor: pointer; } + .documentDecorations-titleBackground { + background: #ffffffcf; + border-radius: 8px; + width: 100%; + height: 100%; + position: absolute; + } + .documentDecorations-title { opacity: 1; grid-column-start: 2; @@ -177,26 +185,22 @@ $linkGap : 3px; overflow: hidden; text-align: center; display: flex; - border-bottom: solid 1px; - margin-left: 10px; - width: calc(100% - 10px); + margin-left: 5px; + height: 22px; + position: absolute; + .documentDecorations-titleSpan { + width: 100%; + border-radius: 8px; + background: #ffffffcf; + position: absolute; + display: inline-block; + cursor: move; + } } .focus-visible { margin-left: 0px; } - - .publishBox { - width: 20px; - height: 22px; - grid-column-start: 3; - grid-column-end: 4; - pointer-events: all; - background: darkgray; - display: inline-block; - position: absolute; - right: 0; - } } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 54e0a7ac7..8d8f4cd3b 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -577,8 +577,8 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b const titleArea = this._edtingTitle ? this.titleBlur(true)} onChange={action(e => this._accumulatedTitle = e.target.value)} onKeyPress={this.titleEntered} /> : -

- {`${this.selectionTitle}`} +
+ {`${this.selectionTitle}`}
; let inMainMenuPanel = false; @@ -612,7 +612,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b top: bounds.y - this._resizeBorderWidth / 2 - this._titleHeight, }}> {closeIcon} - {bounds.r - bounds.x < 100 ? null : titleArea} + {titleArea} {seldoc.props.hideResizeHandles ? (null) : <> {SelectionManager.Views().length !== 1 || seldoc.Document.type === DocumentType.INK ? (null) : diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index d6a455a22..8ccb64744 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -61,7 +61,7 @@ } .mainView-container { - color: dimgray; + color: black; .lm_title { background: #cacaca; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 73375569f..8c3f0997f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -931,11 +931,13 @@ export class CollectionFreeFormView extends CollectionSubView self._dragArray.splice(0, self._dragArray.length, ...dragViewCache); self._eleArray.splice(0, self._eleArray.length, ...eleViewCache); }); - const openInTab = () => { - collectionDocView ? collectionDocView.props.addDocTab(targetDoc, "") : this.props.addDocTab(targetDoc, ":left"); + const openInTab = (doc: Doc, finished?: () => void) => { + collectionDocView ? collectionDocView.props.addDocTab(doc, "") : this.props.addDocTab(doc, ":left"); this.layoutDoc.presCollection = targetDoc; // this still needs some fixing setTimeout(resetSelection, 500); + doc !== targetDoc && setTimeout(() => finished?.(), 100); /// give it some time to create the targetDoc if we're opening up its context }; // If openDocument is selected then it should open the document for the user if (activeItem.openDocument) { - openInTab(); + openInTab(targetDoc); } else if (curDoc.presMovement === PresMovement.Pan && targetDoc) { await DocumentManager.Instance.jumpToDocument(targetDoc, false, openInTab, srcContext, undefined, undefined, undefined, includesDoc || tab ? undefined : resetSelection); // documents open in new tab instead of on right } else if ((curDoc.presMovement === PresMovement.Zoom || curDoc.presMovement === PresMovement.Jump) && targetDoc) { -- cgit v1.2.3-70-g09d2 From 01923ad2a499c6b8f571d5bc3eafaf006c91d8e4 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 28 Jan 2021 11:59:25 -0500 Subject: fixed warnings in freeformview focusDocument. enabled zooming in on images/videos. --- .../collectionFreeForm/CollectionFreeFormView.tsx | 17 +++++++++++------ src/client/views/nodes/VideoBox.tsx | 6 +----- 2 files changed, 12 insertions(+), 11 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 8c3f0997f..4d277dc1c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -816,8 +816,11 @@ export class CollectionFreeFormView extends CollectionSubView NumCast(anchor.anchorStartTime, NumCast(anchor._timecodeToShow, NumCast(anchor.videoStart))); - anchorEnd = (anchor: Doc, defaultVal: any = null) => NumCast(anchor.anchorEndTime, NumCast(anchor._timecodeToHide, NumCast(anchor.videoEnd, defaultVal))); - getAnchor = () => { return this._stackedTimeline.current?.createAnchor(Cast(this.layoutDoc._currentTimecode, "number", null)) || this.rootDoc; } @@ -534,8 +531,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent; } - contentFunc = () => [this.youtubeVideoId ? this.youtubeContent : this.content]; - @computed get annotationLayer() { return
; } @@ -549,6 +544,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent [this.youtubeVideoId ? this.youtubeContent : this.content]; scaling = () => this.props.scaling?.() || 1; panelWidth = () => this.props.PanelWidth() * this.heightPercent / 100; panelHeight = () => this.layoutDoc._fitWidth ? this.panelWidth() / Doc.NativeAspect(this.rootDoc) : this.props.PanelHeight() * this.heightPercent / 100; -- cgit v1.2.3-70-g09d2 From b11652e06205bf214f9504330df3980af643a7cc Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 28 Jan 2021 20:51:39 -0500 Subject: fixed up double click behavior in general but specifically for Audio/Video timelines --- src/Utils.ts | 15 ++++++++---- .../collections/CollectionStackedTimeline.tsx | 27 ++++++++-------------- .../collectionFreeForm/CollectionFreeFormView.tsx | 5 ++-- 3 files changed, 23 insertions(+), 24 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx') diff --git a/src/Utils.ts b/src/Utils.ts index dcfb579ca..39fc3dae4 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -612,10 +612,20 @@ export function setupMoveUpEvents( upEvent: (e: PointerEvent, movement: number[], isClick: boolean) => any, clickEvent: (e: PointerEvent, doubleTap?: boolean) => any, stopPropagation: boolean = true, - stopMovePropagation: boolean = true + stopMovePropagation: boolean = true, + noDoubleTapTimeout?: () => void ) { + const doubleTapTimeout = 300; + (target as any)._doubleTap = (Date.now() - (target as any)._lastTap < doubleTapTimeout); + (target as any)._lastTap = Date.now(); (target as any)._downX = (target as any)._lastX = e.clientX; (target as any)._downY = (target as any)._lastY = e.clientY; + if (!(target as any)._doubleTime && noDoubleTapTimeout) { + (target as any)._doubleTime = setTimeout(() => { + noDoubleTapTimeout?.(); + (target as any)._doubleTime = undefined; + }, doubleTapTimeout); + } const _moveEvent = (e: PointerEvent): void => { if (Math.abs(e.clientX - (target as any)._downX) > Utils.DRAG_THRESHOLD || Math.abs(e.clientY - (target as any)._downY) > Utils.DRAG_THRESHOLD) { @@ -633,10 +643,7 @@ export function setupMoveUpEvents( (target as any)._lastY = e.clientY; stopMovePropagation && e.stopPropagation(); }; - (target as any)._doubleTap = false; const _upEvent = (e: PointerEvent): void => { - (target as any)._doubleTap = (Date.now() - (target as any)._lastTap < 300); - (target as any)._lastTap = Date.now(); const isClick = Math.abs(e.clientX - (target as any)._downX) < 4 && Math.abs(e.clientY - (target as any)._downY) < 4; upEvent(e, [e.clientX - (target as any)._downX, e.clientY - (target as any)._downY], isClick); if (isClick) { diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index 11a74c4bc..1ccf474f2 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -1,5 +1,5 @@ import React = require("react"); -import { action, computed, IReactionDisposer, observable } from "mobx"; +import { action, computed, IReactionDisposer, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; import { computedFn } from "mobx-utils"; import { Doc, Opt } from "../../../fields/Doc"; @@ -41,7 +41,6 @@ export class CollectionStackedTimeline extends CollectionSubView CollectionStackedTimeline.SelectingRegion = undefined); } anchorStart = (anchor: Doc) => NumCast(anchor._timecodeToShow, NumCast(anchor[this.props.startTag])); @@ -116,19 +114,13 @@ export class CollectionStackedTimeline extends CollectionSubView { - this._doubleTime = undefined; - this.props.setTime((clientX - rect.x) / rect.width * this.duration); - }, 300); // 300ms is double-tap timeout - } const wasSelecting = CollectionStackedTimeline.SelectingRegion === this; - if (!wasSelecting) { - this._markerStart = this._markerEnd = this.toTimeline(clientX - rect.x, rect.width); - CollectionStackedTimeline.SelectingRegion = this; - } setupMoveUpEvents(this, e, action(e => { + if (!wasSelecting && CollectionStackedTimeline.SelectingRegion !== this) { + this._markerStart = this._markerEnd = this.toTimeline(clientX - rect.x, rect.width); + CollectionStackedTimeline.SelectingRegion = this; + } this._markerEnd = this.toTimeline(e.clientX - rect.x, rect.width); return false; }), @@ -149,7 +141,8 @@ export class CollectionStackedTimeline extends CollectionSubView !wasPlaying && this.props.setTime((clientX - rect.x) / rect.width * this.duration)); } } @@ -219,13 +212,13 @@ export class CollectionStackedTimeline extends CollectionSubView { const rect = (e.target as any).getBoundingClientRect(); return this.toTimeline(e.clientX - rect.x, rect.width); - } + }; const changeAnchor = (anchor: Doc, left: boolean, time: number) => { const timelineOnly = Cast(anchor[this.props.startTag], "number", null) !== undefined; if (timelineOnly) Doc.SetInPlace(anchor, left ? this.props.startTag : this.props.endTag, time, true); else left ? anchor._timecodeToShow = time : anchor._timecodeToHide = time; return false; - } + }; setupMoveUpEvents(this, e, (e) => changeAnchor(anchor, left, newTime(e)), (e) => { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 4d277dc1c..6c7512f7c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -818,9 +818,8 @@ export class CollectionFreeFormView extends CollectionSubView