From f0781beeadf54bfc7cd4709ace9f49b1bb7e7a0d Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 5 Aug 2020 20:03:37 -0400 Subject: ff --- .../views/nodes/formattedText/FormattedTextBox.tsx | 42 ++++++++++++---------- 1 file changed, 23 insertions(+), 19 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 5f0f33351..2711a08c0 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -23,7 +23,7 @@ import { PrefetchProxy } from '../../../../fields/Proxy'; import { RichTextField } from "../../../../fields/RichTextField"; import { RichTextUtils } from '../../../../fields/RichTextUtils'; import { createSchema, makeInterface } from "../../../../fields/Schema"; -import { Cast, DateCast, NumCast, StrCast, ScriptCast } from "../../../../fields/Types"; +import { Cast, DateCast, NumCast, StrCast, ScriptCast, BoolCast } from "../../../../fields/Types"; import { TraceMobx, OVERRIDE_ACL, GetEffectiveAcl } from '../../../../fields/util'; import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, numberRange, returnOne, returnZero, Utils, setupMoveUpEvents } from '../../../../Utils'; import { GoogleApiClientUtils, Pulls, Pushes } from '../../../apis/google_docs/GoogleApiClientUtils'; @@ -296,6 +296,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp public highlightSearchTerms = (terms: string[], alt: boolean) => { if (this._editorView && (this._editorView as any).docView && terms.some(t => t)) { + const mark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight); const activeMark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight, { selected: true }); const res = terms.filter(t => t).map(term => this.findInNode(this._editorView!, this._editorView!.state.doc, term)); @@ -303,30 +304,33 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp let tr = this._editorView.state.tr; const flattened: TextSelection[] = []; res.map(r => r.map(h => flattened.push(h))); + if (BoolCast(Doc.GetProto(this.dataDoc).resetSearch) === true) { + this._searchIndex = 0; + Doc.GetProto(this.dataDoc).resetSearch = undefined; + this.dumbthing = true; + } + else { + this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; + if (alt === true) { + if (this._searchIndex > 1) { + this._searchIndex += -2; + } + else if (this._searchIndex === 1) { + this._searchIndex = length - 1; + } + else if (this._searchIndex === 0 && length !== 1) { + this._searchIndex = length - 2; + } + + } + } const lastSel = Math.min(flattened.length - 1, this._searchIndex); flattened.forEach((h: TextSelection, ind: number) => tr = tr.addMark(h.from, h.to, ind === lastSel ? activeMark : mark)); - this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView()); - if (alt === true) { - if (this._searchIndex > 1) { - this._searchIndex += -2; - } - else if (this._searchIndex === 1) { - this._searchIndex = length - 1; - } - else if (this._searchIndex === 0 && length !== 1) { - this._searchIndex = length - 2; - } - - } - else { - - } - const index = this._searchIndex; - Doc.GetProto(this.dataDoc).searchIndex = index; + console.log(this._searchIndex); } } -- cgit v1.2.3-70-g09d2 From 9526353b2eca02cb472291e28f16e578dcbb826e Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Thu, 6 Aug 2020 12:37:51 -0400 Subject: reverting: --- src/client/views/MainView.tsx | 2 +- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 1 - src/client/views/search/SearchBox.tsx | 3 ++- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 1b2dd1c44..20d4ecf2c 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -195,7 +195,7 @@ export class MainView extends React.Component { let check = false; const icon = "icon"; targets.forEach((thing) => { - if (thing.className.toString() === "collectionSchemaView-table" || (thing as any)?.dataset[icon] === "filter" || thing.className.toString() === "beta" || thing.className.toString() === "collectionSchemaView-menuOptions-wrapper") { + if (thing.className.toString() === "collectionSchemaView-table" || (thing as any)?.dataset[icon] === "filter" || thing.className.toString() === "beta" || thing.className.toString() === "collectionSchemaView-menuOptions-wrapper" || thing.className.toString() === "collectionSchemaView-container") { check = true; } }); diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 2711a08c0..6865efa5b 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -307,7 +307,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp if (BoolCast(Doc.GetProto(this.dataDoc).resetSearch) === true) { this._searchIndex = 0; Doc.GetProto(this.dataDoc).resetSearch = undefined; - this.dumbthing = true; } else { this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 68afcf60c..c4923947e 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -590,7 +590,8 @@ export class SearchBox extends ViewBoxBaseComponent Date: Sat, 8 Aug 2020 15:52:16 -0700 Subject: working version of click and drag --- src/client/views/nodes/AudioBox.scss | 15 ++++++ src/client/views/nodes/AudioBox.tsx | 102 +++++++++++++++++++++++++++++++---- 2 files changed, 107 insertions(+), 10 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 306062ced..c0743933e 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -150,6 +150,21 @@ z-index: 1000; overflow: hidden; + .audiobox-container { + position: absolute; + width: 10px; + top: 2.5%; + height: 0px; + background: lightblue; + border-radius: 5px; + // box-shadow: black 2px 2px 1px; + opacity: 0.3; + z-index: 500; + border-style: solid; + border-color: darkblue; + border-width: 1px; + } + .audiobox-current { width: 1px; height: 100%; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index f01382d43..db87b15d1 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -60,20 +60,26 @@ export class AudioBox extends ViewBoxAnnotatableComponent = []; _first: boolean = false; _dragging = false; _count: Array = []; _timeline: Opt; _duration = 0; + @observable _visible: boolean = false; + _containerX: number = 0; + _containerY: number = 0; + @observable _currX: number = 0; + @observable _currY: number = 0; + _invertedX: boolean = false; + _invertedY: boolean = false; private _isPointerDown = false; private _currMarker: any; @observable _position: number = 0; @observable _buckets: Array = new Array(); - @observable private _height: number = NumCast(this.layoutDoc.height); + @observable _waveHeight = this.layoutDoc._height; @observable private _paused: boolean = false; @observable private static _scrubTime = 0; @computed get audioState(): undefined | "recording" | "paused" | "playing" { return this.dataDoc.audioState as (undefined | "recording" | "paused" | "playing"); } @@ -355,6 +361,74 @@ export class AudioBox extends ViewBoxAnnotatableComponent { + e.stopPropagation(); + e.preventDefault(); + this._isPointerDown = true; + this._timeline?.setPointerCapture(e.pointerId); + + this.start(this._ele!.currentTime); + + const rect = (e.target as any).getBoundingClientRect(); + this._containerX = this._currX = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); + this._containerY = this._currY = (e.clientY - rect.y) / rect.height; + console.log(rect.height); + + document.removeEventListener("pointermove", this.onPointerMoveTimeline); + document.addEventListener("pointermove", this.onPointerMoveTimeline); + document.removeEventListener("pointerup", this.onPointerUpTimeline); + document.addEventListener("pointerup", this.onPointerUpTimeline); + + } + + // ending the drag event for marker resizing + @action + onPointerUpTimeline = (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isPointerDown = false; + + const rect = (e.target as any).getBoundingClientRect(); + const time = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration) + this._visible ? this.end(time) : this._start = 0; + this._visible = false; + + this._containerX = 0; + this._containerY = 0; + this._timeline?.releasePointerCapture(e.pointerId); + + document.removeEventListener("pointermove", this.onPointerMoveTimeline); + document.removeEventListener("pointerup", this.onPointerUpTimeline); + } + + // resizes the marker while dragging + @action + onPointerMoveTimeline = (e: PointerEvent) => { + e.stopPropagation(); + e.preventDefault(); + + if (!this._isPointerDown) { + return; + } + this._visible = true; + const rect = (e.target as any).getBoundingClientRect(); + console.log(rect.height); + + this._currX = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); + this._currY = (e.clientY - rect.y) / rect.height; + + (this._currX - this._containerX < 0) ? this._invertedX = true : this._invertedX = false; + + this._currY - this._containerY < 0 ? this._invertedY = true : this._invertedY = false; + console.log(this._invertedY); + } + + @computed get container() { + return
+ } + // creates a new label @action newMarker(marker: Doc) { @@ -376,7 +450,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent { if (height) { - this._height = 0.8 * NumCast(this.layoutDoc._height); + const height = 0.8 * NumCast(this.layoutDoc._height); let canvas2 = document.getElementsByTagName("canvas")[0]; if (canvas2) { let oldWidth = canvas2.width; let oldHeight = canvas2.height; - canvas2.style.height = `${this._height}`; + canvas2.style.height = `${height}`; canvas2.style.width = `${width}`; let ratio1 = oldWidth / window.innerWidth; @@ -580,7 +657,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent -
+
{this.waveform}
{DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => { @@ -666,7 +746,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation() }} > +
{ this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation() }} >
this.onPointerDown(e, m, true)}>
{ if (e.button === 0 && !e.ctrlKey) { const wasPaused = this.audioState === "paused"; this.playFrom(linkTime); e.stopPropagation(); e.preventDefault(); } }} />
; })} + {this._visible ? this.container : null} +
{ e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / NumCast(this.dataDoc.duration, 1) * 100}%`, pointerEvents: "none" }} /> {this.audio}
-- cgit v1.2.3-70-g09d2 From e8907b549dce6c991de92c9e8038e08c76725b18 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Sat, 8 Aug 2020 17:16:14 -0700 Subject: changed to 100% height and added minimum width dragged --- src/client/views/nodes/AudioBox.tsx | 29 ++++++++++------------------- 1 file changed, 10 insertions(+), 19 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index db87b15d1..9d3d157c3 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -7,7 +7,7 @@ import { AudioField, nullAudio } from "../../../fields/URLField"; import { ViewBoxAnnotatableComponent } from "../DocComponent"; import { makeInterface, createSchema } from "../../../fields/Schema"; import { documentSchema } from "../../../fields/documentSchemas"; -import { Utils, returnTrue, emptyFunction, returnOne, returnTransparent, returnFalse, returnZero, formatTime } from "../../../Utils"; +import { Utils, returnTrue, emptyFunction, returnOne, returnTransparent, returnFalse, returnZero, formatTime, setupMoveUpEvents } from "../../../Utils"; import { runInAction, observable, reaction, IReactionDisposer, computed, action, trace, toJS } from "mobx"; import { DateField } from "../../../fields/DateField"; import { SelectionManager } from "../../util/SelectionManager"; @@ -25,6 +25,7 @@ import { List } from "../../../fields/List"; import { Scripting } from "../../util/Scripting"; import Waveform from "react-audio-waveform" import axios from "axios" +import { DragManager } from "../../util/DragManager"; const _global = (window /* browser */ || global /* node */) as any; declare class MediaRecorder { @@ -66,17 +67,13 @@ export class AudioBox extends ViewBoxAnnotatableComponent = []; _timeline: Opt; _duration = 0; - @observable _visible: boolean = false; _containerX: number = 0; - _containerY: number = 0; - @observable _currX: number = 0; - @observable _currY: number = 0; _invertedX: boolean = false; - _invertedY: boolean = false; - private _isPointerDown = false; private _currMarker: any; + @observable _visible: boolean = false; + @observable _currX: number = 0; @observable _position: number = 0; @observable _buckets: Array = new Array(); @observable _waveHeight = this.layoutDoc._height; @@ -373,14 +370,11 @@ export class AudioBox extends ViewBoxAnnotatableComponent 15) ? this.end(time) : this._start = 0; this._visible = false; this._containerX = 0; - this._containerY = 0; this._timeline?.releasePointerCapture(e.pointerId); document.removeEventListener("pointermove", this.onPointerMoveTimeline); @@ -414,19 +409,15 @@ export class AudioBox extends ViewBoxAnnotatableComponent
+ return
} // creates a new label -- cgit v1.2.3-70-g09d2 From 1032f8b421402371be4e4d62171bc837fdcb4368 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Sat, 8 Aug 2020 17:31:54 -0700 Subject: changed from alt to shift key --- src/client/views/nodes/AudioBox.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 9d3d157c3..9347e9b5b 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -719,15 +719,15 @@ export class AudioBox extends ViewBoxAnnotatableComponent
{this.waveform} -- cgit v1.2.3-70-g09d2 From 25fa93e7060c8f8561c294c7309c763e3b8f9313 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Sat, 8 Aug 2020 18:23:50 -0700 Subject: minor fixes --- src/client/views/nodes/AudioBox.tsx | 4 ++-- src/server/index.ts | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 59b60defa..4805b8643 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -739,8 +739,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation(); }} >
this.onPointerDown(e, m, true)}>
diff --git a/src/server/index.ts b/src/server/index.ts index 9185e3c5e..4ac4de847 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -105,7 +105,6 @@ function routeSetter({ isRelease, addSupervisedRoute, logRegistrationOutcome }: const serve: PublicHandler = ({ req, res }) => { const detector = new mobileDetect(req.headers['user-agent'] || ""); const filename = detector.mobile() !== null ? 'mobile/image.html' : 'index.html'; - console.log(detector.is("iPhone")); res.sendFile(path.join(__dirname, '../../deploy/' + filename)); }; -- cgit v1.2.3-70-g09d2 From ce3e3b1b217a02a65a3bc4eae5eccb7ca0842fac Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 9 Aug 2020 10:57:25 -0400 Subject: cleaning up AudioBox --- src/Utils.ts | 4 +- src/client/views/nodes/AudioBox.scss | 3 +- src/client/views/nodes/AudioBox.tsx | 357 +++++++++++------------------------ 3 files changed, 117 insertions(+), 247 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/Utils.ts b/src/Utils.ts index 0be27b25d..d9a5353e8 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -547,7 +547,7 @@ export function setupMoveUpEvents( target: object, e: React.PointerEvent, moveEvent: (e: PointerEvent, down: number[], delta: number[]) => boolean, - upEvent: (e: PointerEvent) => void, + upEvent: (e: PointerEvent, movement: number[]) => void, clickEvent: (e: PointerEvent, doubleTap?: boolean) => void, stopPropagation: boolean = true, stopMovePropagation: boolean = true @@ -571,7 +571,7 @@ export function setupMoveUpEvents( const _upEvent = (e: PointerEvent): void => { (target as any)._doubleTap = (Date.now() - (target as any)._lastTap < 300); (target as any)._lastTap = Date.now(); - upEvent(e); + upEvent(e, [e.clientX - (target as any)._downX, e.clientY - (target as any)._downY]); if (Math.abs(e.clientX - (target as any)._downX) < 4 && Math.abs(e.clientY - (target as any)._downY) < 4) { clickEvent(e, (target as any)._doubleTap); } diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index c0743933e..973de979e 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -179,7 +179,8 @@ height: 100%; overflow: hidden; z-index: -1000; - bottom: -30%; + bottom: 0; + pointer-events: none; } .audiobox-linker, diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 4805b8643..0fb191c05 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -31,9 +31,7 @@ declare class MediaRecorder { // whatever MediaRecorder has constructor(e: any); } -export const audioSchema = createSchema({ - playOnSelect: "boolean" -}); +export const audioSchema = createSchema({ playOnSelect: "boolean" }); type AudioDocument = makeInterface<[typeof documentSchema, typeof audioSchema]>; const AudioDocument = makeInterface(documentSchema, audioSchema); @@ -66,13 +64,11 @@ export class AudioBox extends ViewBoxAnnotatableComponent = []; _timeline: Opt; _duration = 0; - _containerX: number = 0; - _invertedX: boolean = false; - private _isPointerDown = false; + _markerStart: number = 0; private _currMarker: any; @observable _visible: boolean = false; - @observable _currX: number = 0; + @observable _markerEnd: number = 0; @observable _position: number = 0; @observable _buckets: Array = new Array(); @observable _waveHeight: number | undefined = this.layoutDoc._height; @@ -82,6 +78,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { runInAction(() => AudioBox._scrubTime = 0); runInAction(() => AudioBox._scrubTime = timeInMillisFrom1970); }; @computed get recordingStart() { return Cast(this.dataDoc[this.props.fieldKey + "-recordingStart"], DateField)?.date.getTime(); } + @computed get audioDuration() { return NumCast(this.dataDoc.duration); } async slideTemplate() { return (await Cast((await Cast(Doc.UserDoc().slidesBtn, Doc) as Doc).dragFactory, Doc) as Doc); } constructor(props: Readonly) { @@ -137,21 +134,11 @@ export class AudioBox extends ViewBoxAnnotatableComponent { + playFrom = (seekTimeInSeconds: number, endTime: number = this.audioDuration) => { let play; clearTimeout(play); this._duration = endTime - seekTimeInSeconds; @@ -218,7 +205,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent this.audioState = "playing"); - if (endTime !== this.dataDoc.duration) { + if (endTime !== this.audioDuration) { play = setTimeout(() => this.pause(), (this._duration) * 1000); // use setTimeout to play a specific duration } } else { @@ -230,11 +217,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent { if (this.audioState === "recording") { + setTimeout(this.updateRecordTime, 30); if (this._paused) { - setTimeout(this.updateRecordTime, 30); this._pausedTime += (new Date().getTime() - this._recordStart) / 1000; } else { - setTimeout(this.updateRecordTime, 30); this.layoutDoc.currentTimecode = (new Date().getTime() - this._recordStart - this.pauseTime) / 1000; } } @@ -353,74 +339,55 @@ export class AudioBox extends ViewBoxAnnotatableComponent { - e.stopPropagation(); - e.preventDefault(); - this._isPointerDown = true; - this._timeline?.setPointerCapture(e.pointerId); - - this.start(this._ele!.currentTime); - const rect = (e.target as any).getBoundingClientRect(); - this._containerX = this._currX = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); - - document.removeEventListener("pointermove", this.onPointerMoveTimeline); - document.addEventListener("pointermove", this.onPointerMoveTimeline); - document.removeEventListener("pointerup", this.onPointerUpTimeline); - document.addEventListener("pointerup", this.onPointerUpTimeline); + const toTimeline = (screen_delta: number) => screen_delta / rect.width * this.audioDuration; + this._markerStart = this._markerEnd = toTimeline(e.clientX - rect.x); + setupMoveUpEvents(this, e, action((e: PointerEvent) => { + this._visible = true; + this._markerEnd = toTimeline(e.clientX - rect.x); + if (this._markerEnd < this._markerStart) { + const tmp = this._markerStart; + this._markerStart = this._markerEnd; + this._markerEnd = tmp; + } + return false; + }), + action((e: PointerEvent, movement: number[]) => { + if (Math.abs(movement[0]) > 15) { + this.createNewMarker(this._markerStart, toTimeline(e.clientX - rect.x)); + } + this._visible = false; + }), + emptyFunction); } - - // ending the drag event for marker resizing - @action - onPointerUpTimeline = (e: PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - this._isPointerDown = false; - - const rect = (e.target as any).getBoundingClientRect(); - const time = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); - - // if drag is greater than 15px (didn't use setupMoveEvent) - (this._visible && Math.abs(this._currX - this._containerX) * rect.width / NumCast(this.dataDoc.duration) > 15) ? this.end(time) : this._start = 0; - this._visible = false; - - this._containerX = 0; - this._timeline?.releasePointerCapture(e.pointerId); - - document.removeEventListener("pointermove", this.onPointerMoveTimeline); - document.removeEventListener("pointerup", this.onPointerUpTimeline); + // returns the selection container + @computed get container() { + return
} - // resizes the marker while dragging + // creates a new marker @action - onPointerMoveTimeline = (e: PointerEvent) => { - e.stopPropagation(); - e.preventDefault(); - - if (!this._isPointerDown) { - return; - } - this._visible = true; - const rect = (e.target as any).getBoundingClientRect(); - - this._currX = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); - - (this._currX - this._containerX < 0) ? this._invertedX = true : this._invertedX = false; + createNewMarker(audioStart: number, audioEnd: number) { + const newMarker = Docs.Create.LabelDocument({ + title: ComputedField.MakeFunction(`formatToTime(self.audioStart) + "-" + formatToTime(self.audioEnd)`) as any, isLabel: false, + useLinkSmallAnchor: true, hideLinkButton: true, audioStart, audioEnd, _showSidebar: false, + _autoHeight: true, annotationOn: this.props.Document + }) + this.addMark(newMarker); } - // returns the selection container - @computed get container() { - return
- } - - // creates a new label + // adds an annotation marker or label @action - newMarker(marker: Doc) { + addMark(marker: Doc) { marker.data = ""; if (this.dataDoc[this.annotationKey]) { this.dataDoc[this.annotationKey].push(marker); @@ -429,104 +396,39 @@ export class AudioBox extends ViewBoxAnnotatableComponent([newMarker]); - } - - this._start = 0; - } - // starting the drag event for marker resizing onPointerDown = (e: React.PointerEvent, m: any, left: boolean): void => { - e.stopPropagation(); - e.preventDefault(); - this._isPointerDown = true; this._currMarker = m; - this._timeline?.setPointerCapture(e.pointerId); this._left = left; - - document.removeEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointerup", this.onPointerUp); - } - - // ending the drag event for marker resizing - @action - onPointerUp = (e: PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - this._isPointerDown = false; - this._dragging = false; - const rect = (e.target as any).getBoundingClientRect(); - this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); - - this._timeline?.releasePointerCapture(e.pointerId); - - document.removeEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - } - - // resizes the marker while dragging - onPointerMove = async (e: PointerEvent) => { - e.stopPropagation(); - e.preventDefault(); - - if (!this._isPointerDown) { - return; - } - - const rect = await (e.target as any).getBoundingClientRect(); - - const newTime = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); - - this.changeMarker(this._currMarker, newTime); + const toTimeline = (screen_delta: number) => screen_delta / rect.width * this.audioDuration; + setupMoveUpEvents(this, e, () => { + this.changeMarker(this._currMarker, toTimeline(e.clientX - rect.x)); + return false; + }, + () => this._ele!.currentTime = this.layoutDoc.currentTimecode = toTimeline(e.clientX - rect.x), + emptyFunction); } // updates the marker with the new time @action changeMarker = (m: any, time: any) => { - DocListCast(this.dataDoc[this.annotationKey]).forEach((marker: Doc) => { - if (this.isSame(marker, m)) { - this._left ? marker.audioStart = time : marker.audioEnd = time; - } - }); + DocListCast(this.dataDoc[this.annotationKey]).filter(marker => this.isSame(marker, m)).forEach(marker => + this._left ? marker.audioStart = time : marker.audioEnd = time); } // checks if the two markers are the same with start and end time isSame = (m1: any, m2: any) => { - if (m1.audioStart === m2.audioStart && m1.audioEnd === m2.audioEnd) { - return true; - } - return false; + return m1.audioStart === m2.audioStart && m1.audioEnd === m2.audioEnd; } // instantiates a new array of size 500 for marker layout markers = () => { - const increment = NumCast(this.layoutDoc.duration) / 500; + const increment = this.audioDuration / 500; this._count = []; for (let i = 0; i < 500; i++) { this._count.push([increment * i, 0]); } - } // makes sure no markers overlaps each other by setting the correct position and width @@ -551,7 +453,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent= m.audioStart && this._count[i][0] <= m.audioEnd) { this._count[i][1] = max; } - } if (this.dataDoc.markerAmount < max) { @@ -567,8 +468,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent; } @@ -612,10 +513,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent { const observer = new _global.ResizeObserver(action((entries: any) => { - for (const entry of entries) { - this.update(entry.contentRect.width, entry.contentRect.height); - this._position = entry.contentRect.width; - } + Array.from(entries).map(e => e as any).filter(e => e.contentRect.width).forEach(e => { + this.update(e.contentRect.width, e.contentRect.height); + this._position = e.contentRect.width; + }) })); timeline && observer.observe(timeline); @@ -625,36 +526,29 @@ export class AudioBox extends ViewBoxAnnotatableComponent { + const scaleCanvas = (canvas: HTMLCanvasElement) => { + let oldWidth = canvas.width; + let oldHeight = canvas.height; + canvas.style.height = `${height}`; + canvas.style.width = `${width}`; + + const ratio1 = oldWidth / window.innerWidth; + const ratio2 = oldHeight / window.innerHeight; + const context = canvas.getContext('2d'); + if (context) { + context.scale(ratio1, ratio2); + } + } if (height) { const height = 0.8 * NumCast(this.layoutDoc._height); let canvas2 = document.getElementsByTagName("canvas")[0]; if (canvas2) { - let oldWidth = canvas2.width; - let oldHeight = canvas2.height; - canvas2.style.height = `${height}`; - canvas2.style.width = `${width}`; - - const ratio1 = oldWidth / window.innerWidth; - const ratio2 = oldHeight / window.innerHeight; - const context = canvas2.getContext('2d'); - if (context) { - context.scale(ratio1, ratio2); - } + scaleCanvas(canvas2); } const canvas1 = document.getElementsByTagName("canvas")[1]; if (canvas1) { - const oldWidth = canvas1.width; - const oldHeight = canvas1.height; - canvas1.style.height = `${height}`; - canvas1.style.width = `${width}`; - - const ratio1 = oldWidth / window.innerWidth; - const ratio2 = oldHeight / window.innerHeight; - const context = canvas1.getContext('2d'); - if (context) { - context.scale(ratio1, ratio2); - } + scaleCanvas(canvas1); const parent = canvas1.parentElement; if (parent) { @@ -666,16 +560,28 @@ export class AudioBox extends ViewBoxAnnotatableComponent AudioBox.RangeScript; - labelScript = () => AudioBox.LabelScript; - // for indicating the first marker that is rendered - reset = () => this._first = true; - render() { const interactive = this.active() ? "-interactive" : ""; - this.reset(); + this._first = true; // for indicating the first marker that is rendered this.path && this._buckets.length !== 100 ? this.peaks : null; // render waveform if audio is done recording + const markerDoc = (mark: Doc, script: undefined | (() => ScriptField)) => { + return + } return
{!this.path ?
@@ -708,81 +614,44 @@ export class AudioBox extends ViewBoxAnnotatableComponent -
+
{this.waveform}
- {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => { - let rect; + {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => (!m.isLabel) ? (this.layoutDoc.hideMarkers) ? (null) : - rect = -
{ this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation(); }} >
this.onPointerDown(e, m, true)}>
- + {markerDoc(m, this.rangeScript)}
this.onPointerDown(e, m, false)}>
: (this.layoutDoc.hideLabels) ? (null) : - rect = -
- -
; - return rect; - })} +
+ {markerDoc(m, this.labelScript)} +
+ )} {DocListCast(this.dataDoc.links).map((l, i) => { - let la1 = l.anchor1 as Doc; let la2 = l.anchor2 as Doc; let linkTime = NumCast(l.anchor2_timecode); @@ -797,7 +666,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent e.stopPropagation()}> +
e.stopPropagation()}>
Doc.linkFollowHighlight(la1)} - onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { const wasPaused = this.audioState === "paused"; this.playFrom(linkTime); e.stopPropagation(); e.preventDefault(); } }} /> + onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { this.playFrom(linkTime); e.stopPropagation(); e.preventDefault(); } }} />
; })} {this._visible ? this.container : null} -
{ e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / NumCast(this.dataDoc.duration, 1) * 100}%`, pointerEvents: "none" }} /> +
{ e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / this.audioDuration * 100}%`, pointerEvents: "none" }} /> {this.audio}
{formatTime(Math.round(NumCast(this.layoutDoc.currentTimecode)))}
- {formatTime(Math.round(NumCast(this.dataDoc.duration)))} + {formatTime(Math.round(this.audioDuration))}
-- cgit v1.2.3-70-g09d2 From 3ca9aa0d915e9000f78d528fa59639512f8c4d25 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 9 Aug 2020 11:37:31 -0400 Subject: more audioBox cleanup/fixes --- src/client/views/nodes/AudioBox.tsx | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 0fb191c05..4c5d7fa0f 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -62,6 +62,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent = []; + _audioRef = React.createRef(); _timeline: Opt; _duration = 0; _markerStart: number = 0; @@ -71,12 +72,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent = new Array(); - @observable _waveHeight: number | undefined = this.layoutDoc._height; + @observable _waveHeight: Opt = this.layoutDoc._height; @observable private _paused: boolean = false; @observable private static _scrubTime = 0; @computed get audioState(): undefined | "recording" | "paused" | "playing" { return this.dataDoc.audioState as (undefined | "recording" | "paused" | "playing"); } set audioState(value) { this.dataDoc.audioState = value; } - public static SetScrubTime = (timeInMillisFrom1970: number) => { runInAction(() => AudioBox._scrubTime = 0); runInAction(() => AudioBox._scrubTime = timeInMillisFrom1970); }; + public static SetScrubTime = action((timeInMillisFrom1970: number) => { AudioBox._scrubTime = 0; AudioBox._scrubTime = timeInMillisFrom1970; }); @computed get recordingStart() { return Cast(this.dataDoc[this.props.fieldKey + "-recordingStart"], DateField)?.date.getTime(); } @computed get audioDuration() { return NumCast(this.dataDoc.duration); } async slideTemplate() { return (await Cast((await Cast(Doc.UserDoc().slidesBtn, Doc) as Doc).dragFactory, Doc) as Doc); } @@ -155,6 +156,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent AudioBox._scrubTime, (time) => this.layoutDoc.playOnSelect && this.playFromTime(AudioBox._scrubTime)); + setTimeout(() => { + const rect = this._timeline?.getBoundingClientRect(); + rect && this.update(rect.width, rect.height); + }, 1000); } // for updating the timecode @@ -541,12 +546,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent } - return
+ return
{!this.path ?
@@ -614,7 +620,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / this.audioDuration * 100}%`, pointerEvents: "none" }} /> +
{ e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / this.audioDuration * 100}%`, pointerEvents: "none" }} /> {this.audio}
-- cgit v1.2.3-70-g09d2 From ab15a89319e53697a770929ed2ccd732c3d91ed2 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 9 Aug 2020 12:51:04 -0400 Subject: fixed audio box waveform to resize cleanly --- src/client/views/nodes/AudioBox.scss | 8 +++++ src/client/views/nodes/AudioBox.tsx | 63 +++--------------------------------- 2 files changed, 13 insertions(+), 58 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 973de979e..0d787d9af 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -181,6 +181,14 @@ z-index: -1000; bottom: 0; pointer-events: none; + div { + height: 100% !important; + width: 100% !important; + } + canvas { + height: 100% !important; + width: 100% !important; + } } .audiobox-linker, diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 4c5d7fa0f..bc89cb6f9 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -156,10 +156,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent AudioBox._scrubTime, (time) => this.layoutDoc.playOnSelect && this.playFromTime(AudioBox._scrubTime)); - setTimeout(() => { - const rect = this._timeline?.getBoundingClientRect(); - rect && this.update(rect.width, rect.height); - }, 1000); } // for updating the timecode @@ -376,7 +372,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent
+ }}>
; } // creates a new marker @@ -386,7 +382,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { - const observer = new _global.ResizeObserver(action((entries: any) => { - Array.from(entries).map(e => e as any).filter(e => e.contentRect.width).forEach(e => { - this.update(e.contentRect.width, e.contentRect.height); - this._position = e.contentRect.width; - }) - })); - timeline && observer.observe(timeline); - - this._timeline = timeline; - } - - // update the width and height of the audio waveform - @action - update = (width: number, height: number) => { - const scaleCanvas = (canvas: HTMLCanvasElement) => { - let oldWidth = canvas.width; - let oldHeight = canvas.height; - canvas.style.height = `${height}`; - canvas.style.width = `${width}`; - - const ratio1 = oldWidth / window.innerWidth; - const ratio2 = oldHeight / window.innerHeight; - const context = canvas.getContext('2d'); - if (context) { - context.scale(ratio1, ratio2); - } - } - if (height) { - const height = 0.8 * NumCast(this.layoutDoc._height); - let canvas2 = this._timeline?.getElementsByTagName("canvas")[0]; - if (canvas2) { - scaleCanvas(canvas2); - } - - const canvas1 = this._timeline?.getElementsByTagName("canvas")[1]; - if (canvas1) { - scaleCanvas(canvas1); - - const parent = canvas1.parentElement; - if (parent) { - parent.style.width = `${width}`; - parent.style.height = `${height}`; - } - } - } - } - rangeScript = () => AudioBox.RangeScript; labelScript = () => AudioBox.LabelScript; @@ -585,8 +532,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent - } + scriptContext={this} />; + }; return
{!this.path ? @@ -613,7 +560,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent
-
{ e.stopPropagation(); e.preventDefault(); }} +
{ e.stopPropagation(); e.preventDefault(); }} onPointerDown={e => { e.stopPropagation(); e.preventDefault(); -- cgit v1.2.3-70-g09d2 From cc1d3df760efef033f5d5f03336cf7769b4dbfbf Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 9 Aug 2020 20:36:39 -0400 Subject: added '*' prefix for matching related families of fields in SchemaView & Search. --- src/client/documents/Documents.ts | 6 ++++++ src/client/views/collections/CollectionSchemaCells.tsx | 11 +++++++++-- src/client/views/collections/CollectionSubView.tsx | 2 -- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 3 +-- src/client/views/search/SearchBox.tsx | 2 +- 5 files changed, 17 insertions(+), 7 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 070068401..7b11cf0b7 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -865,6 +865,12 @@ export namespace DocUtils { const facet = filterFacets[facetKey]; const satisfiesFacet = Object.keys(facet).some(value => { if (facet[value] === "match") { + if (facetKey.startsWith("*")) { // fields starting with a '*' are used to match families of related fields. ie, *lastModified will match text-lastModified, data-lastModified, etc + const allKeys = Array.from(Object.keys(d)); + allKeys.push(...Object.keys(Doc.GetProto(d))); + const keys = allKeys.filter(key => key.includes(facetKey.substring(1))); + return keys.some(key => Field.toString(d[key] as Field).includes(value)); + } return d[facetKey] === undefined || Field.toString(d[facetKey] as Field).includes(value); } return (facet[value] === "x") !== Doc.matchFieldValue(d, facetKey, value); diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index d11d6a5ba..8a1dd8472 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -189,7 +189,14 @@ export class CollectionSchemaCell extends React.Component { ContentScaling: returnOne }; - const field = props.Document[props.fieldKey]; + let matchedKeys = [props.fieldKey]; + if (props.fieldKey.startsWith("*")) { + const allKeys = Array.from(Object.keys(props.Document)); + allKeys.push(...Array.from(Object.keys(Doc.GetProto(props.Document)))); + matchedKeys = allKeys.filter(key => key.includes(props.fieldKey.substring(1))); + } + const fieldKey = matchedKeys.length ? matchedKeys[0] : props.fieldKey; + const field = props.Document[fieldKey]; const doc = FieldValue(Cast(field, Doc)); const fieldIsDoc = (type === "document" && typeof field === "object") || (typeof field === "object" && doc); @@ -210,7 +217,7 @@ export class CollectionSchemaCell extends React.Component { }; let contents: any = "incorrect type"; - if (type === undefined) contents = ; + if (type === undefined) contents = ; if (type === "number") contents = typeof field === "number" ? NumCast(field) : "--" + typeof field + "--"; if (type === "string") contents = typeof field === "string" ? (StrCast(field) === "" ? "--" : StrCast(field)) : "--" + typeof field + "--"; if (type === "boolean") contents = typeof field === "boolean" ? (BoolCast(field) ? "true" : "false") : "--" + typeof field + "--"; diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 72aece284..d1aeb1b65 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -182,8 +182,6 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: } childDocs = docsforFilter; - - const docFilters = this.docFilters(); const docRangeFilters = this.props.ignoreFields?.includes("_docRangeFilters") ? [] : Cast(this.props.Document._docRangeFilters, listSpec("string"), []); return this.props.Document.dontRegisterView ? docs : DocUtils.FilterDocs(docs, this.docFilters(), docRangeFilters, viewSpecScript); diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index b0bf54be6..7d4bd5dd3 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -250,8 +250,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) { if (!this._applyingChange && json.replace(/"selection":.*/, "") !== curProto?.Data.replace(/"selection":.*/, "")) { this._applyingChange = true; - const lastmodified = "lastmodified"; - (curText !== Cast(this.dataDoc[this.fieldKey], RichTextField)?.Text) && (this.dataDoc[this.props.fieldKey + "-lastModified"] = new DateField(new Date(Date.now()))) && (this.dataDoc[lastmodified] = new DateField(new Date(Date.now()))); + (curText !== Cast(this.dataDoc[this.fieldKey], RichTextField)?.Text) && (this.dataDoc[this.props.fieldKey + "-lastModified"] = new DateField(new Date(Date.now()))); if ((!curTemp && !curProto) || curText || curLayout?.Data.includes("dash")) { // if no template, or there's text that didn't come from the layout template, write it to the document. (if this is driven by a template, then this overwrites the template text which is intended) if (json.replace(/"selection":.*/, "") !== curLayout?.Data.replace(/"selection":.*/, "")) { if (!this._pause && !this.layoutDoc._timeStampOnEnter) { diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 1e44a379b..25fc8ff0b 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -628,7 +628,7 @@ export class SearchBox extends ViewBoxBaseComponent(["title", "author", "lastModified", "text"]); + const headers = new Set(["title", "author", "*lastModified", "text"]); if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { if (this.noresults === "") { this.noresults = "No search results :("; -- cgit v1.2.3-70-g09d2 From 3ee0b9320fff9910c38bbef04e4866c6746316b8 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 9 Aug 2020 21:45:17 -0400 Subject: more audiobox cleanup. fixed dropping links onto audio box regions/labels. --- src/client/views/nodes/AudioBox.tsx | 125 +++++++++++++++--------------------- 1 file changed, 51 insertions(+), 74 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index bc89cb6f9..709422f35 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -25,6 +25,7 @@ import { List } from "../../../fields/List"; import { Scripting } from "../../util/Scripting"; import Waveform from "react-audio-waveform"; import axios from "axios"; +import { SnappingManager } from "../../util/SnappingManager"; const _global = (window /* browser */ || global /* node */) as any; declare class MediaRecorder { @@ -85,14 +86,21 @@ export class AudioBox extends ViewBoxAnnotatableComponent) { super(props); - // onClick play script - if (!AudioBox.RangeScript) { - AudioBox.RangeScript = ScriptField.MakeScript(`scriptContext.playFrom((this.audioStart), (this.audioEnd))`, { scriptContext: "any" })!; - } + // onClick play scripts + AudioBox.RangeScript = AudioBox.RangeScript || ScriptField.MakeScript(`scriptContext.playFrom((this.audioStart), (this.audioEnd))`, { scriptContext: "any" })!; + AudioBox.LabelScript = AudioBox.LabelScript || ScriptField.MakeScript(`scriptContext.playFrom((this.audioStart))`, { scriptContext: "any" })!; + } - if (!AudioBox.LabelScript) { - AudioBox.LabelScript = ScriptField.MakeScript(`scriptContext.playFrom((this.audioStart))`, { scriptContext: "any" })!; + getLinkData(l: Doc) { + let la1 = l.anchor1 as Doc; + let la2 = l.anchor2 as Doc; + let linkTime = NumCast(l.anchor2_timecode); + if (Doc.AreProtosEqual(la1, this.dataDoc)) { + la1 = l.anchor2 as Doc; + la2 = l.anchor1 as Doc; + linkTime = NumCast(l.anchor1_timecode); } + return { la1, la2, linkTime }; } componentWillUnmount() { @@ -110,7 +118,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { if (scrollLinkId) { DocListCast(this.dataDoc.links).filter(l => l[Id] === scrollLinkId).map(l => { - const linkTime = Doc.AreProtosEqual(l.anchor1 as Doc, this.dataDoc) ? NumCast(l.anchor1_timecode) : NumCast(l.anchor2_timecode); + const { linkTime } = this.getLinkData(l); setTimeout(() => { this.playFromTime(linkTime); Doc.linkFollowHighlight(l); }, 250); }); Doc.SetInPlace(this.layoutDoc, "scrollToLinkID", undefined, false); @@ -124,17 +132,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent { - let la1 = l.anchor1 as Doc; - let la2 = l.anchor2 as Doc; + DocListCast(this.dataDoc.links).map(l => { + let { la1, la2, linkTime } = this.getLinkData(l); if (la1 === sel || la2 === sel) { // if the selected document is linked to this audio - let linkTime = NumCast(l.anchor2_timecode); let endTime; - if (Doc.AreProtosEqual(la1, this.dataDoc)) { - la1 = l.anchor2 as Doc; - la2 = l.anchor1 as Doc; - linkTime = NumCast(l.anchor1_timecode); - } if (la2.audioStart) linkTime = NumCast(la2.audioStart); if (la1.audioStart) linkTime = NumCast(la1.audioStart); @@ -164,12 +165,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent this.dataDoc.duration = htmlEle.duration); DocListCast(this.dataDoc.links).map(l => { - let la1 = l.anchor1 as Doc; - let linkTime = NumCast(l.anchor2_timecode); - if (Doc.AreProtosEqual(la1, this.dataDoc)) { - linkTime = NumCast(l.anchor1_timecode); - la1 = l.anchor2 as Doc; - } + const { la1, linkTime } = this.getLinkData(l); if (linkTime > NumCast(this.layoutDoc.currentTimecode) && linkTime < htmlEle.currentTime) { Doc.linkFollowHighlight(la1); } @@ -349,47 +345,33 @@ export class AudioBox extends ViewBoxAnnotatableComponent screen_delta / rect.width * this.audioDuration; this._markerStart = this._markerEnd = toTimeline(e.clientX - rect.x); - setupMoveUpEvents(this, e, action((e: PointerEvent) => { - this._visible = true; - this._markerEnd = toTimeline(e.clientX - rect.x); - if (this._markerEnd < this._markerStart) { - const tmp = this._markerStart; - this._markerStart = this._markerEnd; - this._markerEnd = tmp; - } - return false; - }), - action((e: PointerEvent, movement: number[]) => { - if (Math.abs(movement[0]) > 15) { - this.createNewMarker(this._markerStart, toTimeline(e.clientX - rect.x)); + setupMoveUpEvents(this, e, + action((e: PointerEvent) => { + this._visible = true; + this._markerEnd = toTimeline(e.clientX - rect.x); + if (this._markerEnd < this._markerStart) { + const tmp = this._markerStart; + this._markerStart = this._markerEnd; + this._markerEnd = tmp; } + return false; + }), + action((e: PointerEvent, movement: number[]) => { + (Math.abs(movement[0]) > 15) && this.createMarker(this._markerStart, toTimeline(e.clientX - rect.x)); this._visible = false; }), - emptyFunction); - } - // returns the selection container - @computed get container() { - return
; + (e: PointerEvent) => e.shiftKey && this.createMarker(this._ele!.currentTime) + ); } - // creates a new marker @action - createNewMarker(audioStart: number, audioEnd: number) { - const newMarker = Docs.Create.LabelDocument({ - title: ComputedField.MakeFunction(`formatToTime(self.audioStart) + "-" + formatToTime(self.audioEnd)`) as any, isLabel: false, + createMarker(audioStart: number, audioEnd?: number) { + const marker = Docs.Create.LabelDocument({ + title: ComputedField.MakeFunction(`formatToTime(self.audioStart) + "-" + formatToTime(self.audioEnd)`) as any, isLabel: audioEnd === undefined, useLinkSmallAnchor: true, hideLinkButton: true, audioStart, audioEnd, _showSidebar: false, _autoHeight: true, annotationOn: this.props.Document }); - this.addMark(newMarker); - } - - // adds an annotation marker or label - @action - addMark(marker: Doc) { - marker.data = ""; + marker.data = ""; // clears out the label's text so that only its border will display if (this.dataDoc[this.annotationKey]) { this.dataDoc[this.annotationKey].push(marker); } else { @@ -403,10 +385,11 @@ export class AudioBox extends ViewBoxAnnotatableComponent screen_delta / rect.width * this.audioDuration; - setupMoveUpEvents(this, e, () => { - this.changeMarker(this._currMarker, toTimeline(e.clientX - rect.x)); - return false; - }, + setupMoveUpEvents(this, e, + () => { + this.changeMarker(this._currMarker, toTimeline(e.clientX - rect.x)); + return false; + }, () => this._ele!.currentTime = this.layoutDoc.currentTimecode = toTimeline(e.clientX - rect.x), emptyFunction); } @@ -462,6 +445,13 @@ export class AudioBox extends ViewBoxAnnotatableComponent; + } + // returns the audio waveform @computed get waveform() { return AudioBox.LabelScript; render() { - const interactive = this.active() ? "-interactive" : ""; + const interactive = SnappingManager.GetIsDragging() || this.active() ? "-interactive" : ""; this._first = true; // for indicating the first marker that is rendered this.path && this._buckets.length !== 100 ? this.peaks : null; // render waveform if audio is done recording const markerDoc = (mark: Doc, script: undefined | (() => ScriptField)) => { @@ -562,8 +552,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent
{ e.stopPropagation(); e.preventDefault(); }} onPointerDown={e => { - e.stopPropagation(); - e.preventDefault(); if (e.button === 0 && !e.ctrlKey) { const rect = (e.target as any).getBoundingClientRect(); @@ -575,9 +563,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent
{this.waveform} @@ -605,15 +590,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent )} {DocListCast(this.dataDoc.links).map((l, i) => { - let la1 = l.anchor1 as Doc; - let la2 = l.anchor2 as Doc; - let linkTime = NumCast(l.anchor2_timecode); - if (Doc.AreProtosEqual(la1, this.dataDoc)) { - la1 = l.anchor2 as Doc; - la2 = l.anchor1 as Doc; - linkTime = NumCast(l.anchor1_timecode); - } - + let { la1, la2, linkTime } = this.getLinkData(l); if (la2.audioStart && !la2.audioEnd) { linkTime = NumCast(la2.audioStart); } @@ -639,7 +616,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { if (e.button === 0 && !e.ctrlKey) { this.playFrom(linkTime); e.stopPropagation(); e.preventDefault(); } }} />
; })} - {this._visible ? this.container : null} + {this._visible ? this.selectionContainer : null}
{ e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / this.audioDuration * 100}%`, pointerEvents: "none" }} /> {this.audio} -- cgit v1.2.3-70-g09d2 From dc0ffc050b5b11e345245927f3d8a813937e588d Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 9 Aug 2020 22:48:26 -0400 Subject: starting to fix link following behavior to audio regions. --- src/client/util/DocumentManager.ts | 2 +- src/client/views/linking/LinkEditor.tsx | 6 +- src/client/views/nodes/AudioBox.scss | 5 + src/client/views/nodes/AudioBox.tsx | 256 ++++++++++++++++---------------- 4 files changed, 140 insertions(+), 129 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 523dbfca0..bd57e7f48 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -152,7 +152,7 @@ export class DocumentManager { const first = getFirstDocView(annotatedDoc); if (first) { annotatedDoc = first.props.Document; - docView?.props.focus(annotatedDoc, false); + first.props.focus(annotatedDoc, false); } } if (docView) { // we have a docView already and aren't forced to create a new one ... just focus on the document. TODO move into view if necessary otherwise just highlight? diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 5832a2181..3ef391a5d 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -355,11 +355,11 @@ export class LinkEditor extends React.Component { this.openDropdown = !this.openDropdown; } - @undoBatch @action - changeFollowBehavior = (follow: string) => { + @undoBatch + changeFollowBehavior = action((follow: string) => { this.openDropdown = false; Doc.GetProto(this.props.linkDoc).followLinkLocation = follow; - } + }) @computed get followingDropdown() { diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 0d787d9af..c80e3af24 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -8,6 +8,11 @@ position: relative; cursor: default; + .audiobox-inner { + width:100%; + height: 100%; + } + .audiobox-buttons { display: flex; width: 100%; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 709422f35..0ea624edf 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -128,37 +128,41 @@ export class AudioBox extends ViewBoxAnnotatableComponent SelectionManager.SelectedDocuments(), selected => { - const sel = selected.length ? selected[0].props.Document : undefined; - let link; - if (sel) { - // for determining if the link is created after recording (since it will use linkTime rather than creation date) - DocListCast(this.dataDoc.links).map(l => { - let { la1, la2, linkTime } = this.getLinkData(l); - if (la1 === sel || la2 === sel) { // if the selected document is linked to this audio - let endTime; - if (la2.audioStart) linkTime = NumCast(la2.audioStart); - if (la1.audioStart) linkTime = NumCast(la1.audioStart); - - if (la1.audioEnd) endTime = NumCast(la1.audioEnd); - if (la2.audioEnd) endTime = NumCast(la2.audioEnd); - - if (linkTime) { - link = true; - this.layoutDoc.playOnSelect && this.recordingStart && sel && !Doc.AreProtosEqual(sel, this.props.Document) && (endTime ? this.playFrom(linkTime, endTime) : this.playFrom(linkTime)); - } - } - }); - } - - // for links created during recording - if (!link) { - this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime()); - this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause(); + if (this.layoutDoc.playOnSelect) { + const sel = selected.length ? selected[0].props.Document : undefined; + const link = sel && DocListCast(this.dataDoc.links).forEach(l => (l.anchor1 === sel || l.anchor2 === sel) && this.playLink(l), false); + // for links created during recording + if (!link) { + this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime()); + this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause(); + } } }); this._scrubbingDisposer = reaction(() => AudioBox._scrubTime, (time) => this.layoutDoc.playOnSelect && this.playFromTime(AudioBox._scrubTime)); } + playLink = (doc: Doc) => { + let link = false; + !Doc.AreProtosEqual(doc, this.props.Document) && DocListCast(this.props.Document.links).forEach(l => { + if (l.anchor1 === doc || l.anchor2 === doc) { + const { la1, la2, linkTime } = this.getLinkData(l); + let startTime = linkTime; + if (la2.audioStart) startTime = NumCast(la2.audioStart); + if (la1.audioStart) startTime = NumCast(la1.audioStart); + + let endTime; + if (la1.audioEnd) endTime = NumCast(la1.audioEnd); + if (la2.audioEnd) endTime = NumCast(la2.audioEnd); + + if (startTime) { + link = true; + this.recordingStart && (endTime ? this.playFrom(startTime, endTime) : this.playFrom(startTime)); + } + } + }); + return link; + } + // for updating the timecode timecodeChanged = () => { const htmlEle = this._ele; @@ -511,6 +515,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent ScriptField)) => { return this.playLink(mark)} pointerEvents={true} NativeHeight={returnZero} NativeWidth={returnZero} @@ -524,112 +529,113 @@ export class AudioBox extends ViewBoxAnnotatableComponent; }; - return
- {!this.path ? -
-
- -
- {this.audioState === "recording" ? -
e.stopPropagation()}> -
- -
-
- -
-
{formatTime(Math.round(NumCast(this.layoutDoc.currentTimecode)))}
+ return
+
+ {!this.path ? +
+
+
- : - } -
: -
-
-
-
-
{ e.stopPropagation(); e.preventDefault(); }} - onPointerDown={e => { - if (e.button === 0 && !e.ctrlKey) { - const rect = (e.target as any).getBoundingClientRect(); - - if (e.target !== this._audioRef.current) { - const wasPaused = this.audioState === "paused"; - this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * this.audioDuration; - wasPaused && this.pause(); +
: +
+
+
+
+
{ e.stopPropagation(); e.preventDefault(); }} + onPointerDown={e => { + if (e.button === 0 && !e.ctrlKey) { + const rect = (e.target as any).getBoundingClientRect(); + + if (e.target !== this._audioRef.current) { + const wasPaused = this.audioState === "paused"; + this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * this.audioDuration; + wasPaused && this.pause(); + } + + this.onPointerDownTimeline(e); + } + }}> +
+ {this.waveform} +
+ {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => + (!m.isLabel) ? + (this.layoutDoc.hideMarkers) ? (null) : +
{ this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation(); }} > +
this.onPointerDown(e, m, true)}>
+ {markerDoc(m, this.rangeScript)} +
this.onPointerDown(e, m, false)}>
+
+ : + (this.layoutDoc.hideLabels) ? (null) : +
+ {markerDoc(m, this.labelScript)} +
+ )} + {DocListCast(this.dataDoc.links).map((l, i) => { + const { la1, la2, linkTime } = this.getLinkData(l); + let startTime = linkTime; + if (la2.audioStart && !la2.audioEnd) { + startTime = NumCast(la2.audioStart); } - this.onPointerDownTimeline(e); - } - }}> -
- {this.waveform} + return !linkTime ? (null) : +
e.stopPropagation()}> + +
Doc.linkFollowHighlight(la1)} + onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { this.playFrom(startTime); e.stopPropagation(); e.preventDefault(); } }} /> +
; + })} + {this._visible ? this.selectionContainer : null} + +
{ e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / this.audioDuration * 100}%`, pointerEvents: "none" }} /> + {this.audio} +
+
+ {formatTime(Math.round(NumCast(this.layoutDoc.currentTimecode)))} +
+
+ {formatTime(Math.round(this.audioDuration))}
- {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => - (!m.isLabel) ? - (this.layoutDoc.hideMarkers) ? (null) : -
{ this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation(); }} > -
this.onPointerDown(e, m, true)}>
- {markerDoc(m, this.rangeScript)} -
this.onPointerDown(e, m, false)}>
-
- : - (this.layoutDoc.hideLabels) ? (null) : -
- {markerDoc(m, this.labelScript)} -
- )} - {DocListCast(this.dataDoc.links).map((l, i) => { - let { la1, la2, linkTime } = this.getLinkData(l); - if (la2.audioStart && !la2.audioEnd) { - linkTime = NumCast(la2.audioStart); - } - - return !linkTime ? (null) : -
e.stopPropagation()}> - -
Doc.linkFollowHighlight(la1)} - onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { this.playFrom(linkTime); e.stopPropagation(); e.preventDefault(); } }} /> -
; - })} - {this._visible ? this.selectionContainer : null} - -
{ e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / this.audioDuration * 100}%`, pointerEvents: "none" }} /> - {this.audio} -
-
- {formatTime(Math.round(NumCast(this.layoutDoc.currentTimecode)))} -
-
- {formatTime(Math.round(this.audioDuration))}
-
- } + }
; } } -- cgit v1.2.3-70-g09d2 From 1d2851b237fd41f8a8726244b095986699f513a5 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 9 Aug 2020 23:09:49 -0400 Subject: fixed playing audio on link follow when audio opens on right or in tab --- src/client/views/linking/LinkMenuItem.tsx | 9 ++++++++- src/client/views/nodes/AudioBox.tsx | 4 +++- 2 files changed, 11 insertions(+), 2 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index b95fccf2a..21c666a4d 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -162,7 +162,14 @@ export class LinkMenuItem extends React.Component { } if (linkDoc.followLinkLocation && linkDoc.followLinkLocation !== "Default") { - this.props.addDocTab(this.props.destinationDoc, StrCast(linkDoc.followLinkLocation)); + const annotationOn = this.props.destinationDoc.annotationOn as Doc; + this.props.addDocTab(annotationOn instanceof Doc ? annotationOn : this.props.destinationDoc, StrCast(linkDoc.followLinkLocation)); + if (annotationOn) { + setTimeout(() => { + const dv = DocumentManager.Instance.getFirstDocumentView(this.props.destinationDoc); + dv?.props.focus(this.props.destinationDoc, false); + }); + } } else { DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false); } diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 0ea624edf..d689aeadc 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -195,7 +195,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent this.playFrom(seekTimeInSeconds, endTime), 500); + } else if (this._ele && AudioBox.Enabled) { if (seekTimeInSeconds < 0) { if (seekTimeInSeconds > -1) { setTimeout(() => this.playFrom(0), -seekTimeInSeconds * 1000); -- cgit v1.2.3-70-g09d2 From b096129d54238bc4cea735cd2db8e5f3e94613b7 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 9 Aug 2020 23:23:06 -0400 Subject: fixed playing audio links on select. --- src/client/views/nodes/AudioBox.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index d689aeadc..289388320 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -128,14 +128,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent SelectionManager.SelectedDocuments(), selected => { - if (this.layoutDoc.playOnSelect) { - const sel = selected.length ? selected[0].props.Document : undefined; - const link = sel && DocListCast(this.dataDoc.links).forEach(l => (l.anchor1 === sel || l.anchor2 === sel) && this.playLink(l), false); - // for links created during recording - if (!link) { - this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime()); - this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause(); - } + const sel = selected.length ? selected[0].props.Document : undefined; + const link = sel && DocListCast(this.dataDoc.links).forEach(l => (l.anchor1 === sel || l.anchor2 === sel) && this.playLink(sel), false); + // for links created during recording + if (!link) { + this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime()); + this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause(); } }); this._scrubbingDisposer = reaction(() => AudioBox._scrubTime, (time) => this.layoutDoc.playOnSelect && this.playFromTime(AudioBox._scrubTime)); -- cgit v1.2.3-70-g09d2 From f557c78db9a77812ab398aaff08d9511c1c65fc9 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 10 Aug 2020 18:07:51 +0530 Subject: prevented infinite loop in distributeAcls + allowed change of alias x, y, width, height in owned collection + changes to removeDocument calls in many places + comments etc --- src/client/util/KeyCodes.ts | 2 +- src/client/util/SharingManager.tsx | 4 +++- src/client/views/DocComponent.tsx | 6 +++++- src/client/views/DocumentDecorations.tsx | 10 +--------- src/client/views/GlobalKeyHandler.ts | 9 +-------- src/client/views/PropertiesButtons.tsx | 10 +--------- src/client/views/collections/CollectionLinearView.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 6 +++++- .../views/collections/collectionFreeForm/MarqueeView.tsx | 9 +-------- src/client/views/nodes/DocumentView.tsx | 15 ++++----------- src/fields/util.ts | 10 +++++++--- 11 files changed, 30 insertions(+), 53 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/util/KeyCodes.ts b/src/client/util/KeyCodes.ts index cacb72a57..de2457a5a 100644 --- a/src/client/util/KeyCodes.ts +++ b/src/client/util/KeyCodes.ts @@ -131,6 +131,6 @@ export class KeyCodes { public static NUM_7: number = 55; public static NUM_8: number = 56; public static NUM_9: number = 57; - public static SUBSTRACT: number = 189; + public static SUBTRACT: number = 189; public static ADD: number = 187; } \ No newline at end of file diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index d50a132f8..48a3c023f 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -179,6 +179,9 @@ export default class SharingManager extends React.Component<{}> { if (group.docsShared) DocListCast(group.docsShared).forEach(doc => Doc.IndexOf(doc, DocListCast(user.notificationDoc[storage])) === -1 && Doc.AddDocToList(user.notificationDoc, storage, doc)); } + /** + * Called from the properties sidebar to change permissions of a user. + */ shareFromPropertiesSidebar = (shareWith: string, permission: SharingPermissions, target: Doc) => { const user = this.users.find(({ user: { email } }) => email === (shareWith === "Me" ? Doc.CurrentUserEmail : shareWith)); if (user) this.setInternalSharing(user, permission, target); @@ -228,7 +231,6 @@ export default class SharingManager extends React.Component<{}> { const key = user.email.replace('.', '_'); const ACL = `ACL-${key}`; - target.author === Doc.CurrentUserEmail && distributeAcls(ACL, permission as SharingPermissions, target); if (permission !== SharingPermissions.None) { diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index eea133ed9..f453b02b8 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -129,7 +129,11 @@ export function ViewBoxAnnotatableComponent

docs.includes(v)); // can't assign new List(result) to this because you can't assign new values in addonly if (toRemove.length !== 0) { - toRemove.forEach(doc => Doc.RemoveDocFromList(targetDataDoc, this.annotationKey, doc)); + const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc; + toRemove.forEach(doc => { + Doc.RemoveDocFromList(targetDataDoc, this.props.fieldKey, doc); + recent && Doc.AddDocToList(recent, "data", doc, undefined, true, true); + }); return true; } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index f1169763e..804c60ec8 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -197,17 +197,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> @action onCloseClick = async (e: React.MouseEvent | undefined) => { if (!e?.button) { - const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc; const selected = SelectionManager.SelectedDocuments().slice(); SelectionManager.DeselectAll(); - - selected.map(dv => { - const effectiveAcl = GetEffectiveAcl(dv.props.Document); - if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) { // deletes whatever you have the right to delete - recent && Doc.AddDocToList(recent, "data", dv.props.Document, undefined, true, true); - dv.props.removeDocument?.(dv.props.Document); - } - }); + selected.map(dv => dv.props.removeDocument?.(dv.props.Document)); } } @action diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 0ea02e3cb..2b31a8612 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -118,16 +118,9 @@ export default class KeyManager { } } - const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc; const selected = SelectionManager.SelectedDocuments().slice(); UndoManager.RunInBatch(() => { - selected.map(dv => { - const effectiveAcl = GetEffectiveAcl(dv.props.Document); - if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) { // deletes whatever you have the right to delete - recent && Doc.AddDocToList(recent, "data", dv.props.Document, undefined, true, true); - dv.props.removeDocument?.(dv.props.Document); - } - }); + selected.map(dv => dv.props.removeDocument?.(dv.props.Document)); }, "delete"); SelectionManager.DeselectAll(); break; diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 5e25ead87..0ca28df9c 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -432,16 +432,8 @@ export class PropertiesButtons extends React.Component<{}, {}> { @undoBatch @action deleteDocument = () => { - const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc; const selected = SelectionManager.SelectedDocuments().slice(); - - selected.map(dv => { - const effectiveAcl = GetEffectiveAcl(dv.props.Document); - if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) { // deletes whatever you have the right to delete - recent && Doc.AddDocToList(recent, "data", dv.props.Document, undefined, true, true); - dv.props.removeDocument?.(dv.props.Document); - } - }); + selected.map(dv => dv.props.removeDocument?.(dv.props.Document)); this.selectedDoc && (this.selectedDoc.deleted = true); this.selectedDocumentView?.props.ContainingCollectionView?.removeDocument(this.selectedDocumentView?.props.Document); SelectionManager.DeselectAll(); diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx index 3cf46dbed..e1b07077e 100644 --- a/src/client/views/collections/CollectionLinearView.tsx +++ b/src/client/views/collections/CollectionLinearView.tsx @@ -119,7 +119,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { // transform: this.props.Document.linearViewIsExpanded ? "" : "rotate(45deg)" }} onPointerDown={e => e.stopPropagation()} > -

+

+

{BoolCast(this.props.Document.linearViewIsExpanded) ? "–" : "+"}

; return
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 0feec3fbd..852826ebc 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -199,7 +199,11 @@ export class CollectionView extends Touchable docs.includes(v)); if (toRemove.length !== 0) { - toRemove.forEach(doc => Doc.RemoveDocFromList(targetDataDoc, this.props.fieldKey, doc)); + const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc; + toRemove.forEach(doc => { + Doc.RemoveDocFromList(targetDataDoc, this.props.fieldKey, doc); + recent && Doc.AddDocToList(recent, "data", doc, undefined, true, true); + }); return true; } } diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 858f33291..a23f03e2a 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -345,14 +345,7 @@ export class MarqueeView extends React.Component { - const effectiveAcl = GetEffectiveAcl(doc); - if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) { // deletes whatever you have the right to delete - recent && Doc.AddDocToList(recent, "data", doc, undefined, true, true); - this.props.removeDocument(doc); - } - }); + this.props.removeDocument(selected); this.cleanupInteractions(false); MarqueeOptionsMenu.Instance.fadeOut(true); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 47e1b2715..52748ba0a 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -570,17 +570,9 @@ export class DocumentView extends DocComponent(Docu if (Doc.UserDoc().activeWorkspace === this.props.Document) { alert("Can't delete the active workspace"); } else { - const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc; const selected = SelectionManager.SelectedDocuments().slice(); SelectionManager.DeselectAll(); - - selected.map(dv => { - const effectiveAcl = GetEffectiveAcl(dv.props.Document); - if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) { // deletes whatever you have the right to delete - recent && Doc.AddDocToList(recent, "data", dv.props.Document, undefined, true, true); - dv.props.removeDocument?.(dv.props.Document); - } - }); + selected.map(dv => dv.props.removeDocument?.(dv.props.Document)); this.props.Document.deleted = true; this.props.removeDocument?.(this.props.Document); @@ -776,8 +768,9 @@ export class DocumentView extends DocComponent(Docu Doc.AreProtosEqual(this.props.Document, Doc.UserDoc()) && moreItems.push({ description: "Toggle Always Show Link End", event: () => Doc.UserDoc()["documentLinksButton-hideEnd"] = !Doc.UserDoc()["documentLinksButton-hideEnd"], icon: "eye" }); } - const effectiveAcl = GetEffectiveAcl(this.props.Document); - (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) && moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" }); + // const effectiveAcl = GetEffectiveAcl(this.props.Document); + // (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) && + moreItems.push({ description: "Close", event: this.deleteClicked, icon: "trash" }); !more && cm.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" }); cm.moveAfter(cm.findByDescription("More...")!, cm.findByDescription("OnClick...")!); diff --git a/src/fields/util.ts b/src/fields/util.ts index 4c71572db..7d3268b80 100644 --- a/src/fields/util.ts +++ b/src/fields/util.ts @@ -167,6 +167,9 @@ export function GetEffectiveAcl(target: any, in_prop?: string | symbol | number) // if the ACL is being overriden or the property being modified is one of the playground fields (which can be freely modified) if (_overrideAcl || (in_prop && DocServer.PlaygroundFields?.includes(in_prop.toString()))) return AclEdit; + // if it's your alias then you can manipulate the x, y, width, height + if ((target.aliasOf || target.__fields?.aliasOf) && Doc.CurrentUserEmail === (target.__fields?.author || target.author) && (in_prop && ["_width", "_height", "x", "y"].includes(in_prop.toString()))) return AclEdit; + let effectiveAcl = AclPrivate; const HierarchyMapping = new Map([ [AclPrivate, 0], @@ -218,9 +221,10 @@ export function distributeAcls(key: string, acl: SharingPermissions, target: Doc changed = true; // maps over the aliases of the document - if (target.aliases) { - DocListCast(target.aliases).map(alias => { - distributeAcls(key, acl, alias, inheritingFromCollection); + const aliases = DocListCast(target.aliases); + if (aliases.length) { + aliases.map(alias => { + alias !== target && distributeAcls(key, acl, alias, inheritingFromCollection); }); } -- cgit v1.2.3-70-g09d2 From 03ae3477dac354eff9178dac701ee40e394434c9 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 10 Aug 2020 10:37:07 -0400 Subject: fixed issues with presentationBox grabbing all keyboard events and preventing title edits among others. fixed runtime errors. fixed groupManager to open again. --- src/client/util/SettingsManager.tsx | 2 +- src/client/views/GlobalKeyHandler.ts | 4 +++- .../views/collections/CollectionDockingView.tsx | 12 +++++++---- .../collectionFreeForm/MarqueeOptionsMenu.tsx | 12 ++++------- src/client/views/nodes/PresBox.tsx | 24 ++++++++++++++++++---- 5 files changed, 36 insertions(+), 18 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 513cece40..e3b91925a 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -146,7 +146,7 @@ export default class SettingsManager extends React.Component<{}> { @computed get accountsContent() { return
- +
; } diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 0ea02e3cb..182f6397c 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -108,7 +108,9 @@ export default class KeyManager { GoogleAuthenticationManager.Instance.cancel(); SharingManager.Instance.close(); GroupManager.Instance.close(); - CollectionFreeFormViewChrome.Instance.clearKeep(); + CollectionFreeFormViewChrome.Instance?.clearKeep(); + window.getSelection()?.empty(); + document.body.focus(); break; case "delete": case "backspace": diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 7e096fa37..0c93b4e63 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -513,7 +513,11 @@ export class CollectionDockingView extends React.Component tab.titleElement[0].focus(); + tab.titleElement[0].onclick = (e: any) => { + if (Date.now() - tab.titleElement[0].lastClick < 1000) tab.titleElement[0].select(); + tab.titleElement[0].lastClick = Date.now(); + tab.titleElement[0].focus(); + } tab.titleElement[0].onchange = (e: any) => { tab.titleElement[0].size = e.currentTarget.value.length + 1; Doc.GetProto(doc).title = e.currentTarget.value, true; @@ -691,8 +695,8 @@ export class DockedFrameRenderer extends React.Component { return (this.props as any).glContainer.parent.parent; } get _tab(): any { - const tab = (this.props as any).glContainer.tab.element[0] as HTMLElement; - return tab.getElementsByClassName("lm_title")?.[0]; + const tab = (this.props as any).glContainer.tab?.element[0] as HTMLElement; + return tab?.getElementsByClassName("lm_title")?.[0]; } constructor(props: any) { super(props); @@ -757,7 +761,7 @@ export class DockedFrameRenderer extends React.Component { this._tabReaction = reaction(() => ({ views: SelectionManager.SelectedDocuments(), color: StrCast(this._document?._backgroundColor, "white") }), (data) => { const selected = data.views.some(v => Doc.AreProtosEqual(v.props.Document, this._document)); - this._tab.style.backgroundColor = selected ? data.color : ""; + this._tab && (this._tab.style.backgroundColor = selected ? data.color : ""); } ); } diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx index d27ca7c3a..f1df7998b 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx @@ -25,34 +25,30 @@ export default class MarqueeOptionsMenu extends AntimodeMenu { render() { const buttons = [ -
Create a Collection
} placement="bottom"> +
Create a Collection
} placement="bottom"> , -
Summarize Documents
} placement="bottom"> +
Summarize Documents
} placement="bottom"> , -
Delete Documents
} placement="bottom"> +
Delete Documents
} placement="bottom"> , -
Change to Text
} placement="bottom"> +
Change to Text
} placement="bottom"> diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index b7af4683e..849fc4076 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -83,6 +83,7 @@ export class PresBox extends ViewBoxBaseComponent } @computed get isPres(): boolean { if (this.selectedDoc?.type === DocumentType.PRES) { + document.removeEventListener("keydown", this.keyEvents, true); document.addEventListener("keydown", this.keyEvents, true); return true; } else { @@ -91,6 +92,9 @@ export class PresBox extends ViewBoxBaseComponent } } @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } + componentWillUnmount() { + document.removeEventListener("keydown", this.keyEvents, true); + } componentDidMount() { this.rootDoc.presBox = this.rootDoc; @@ -517,29 +521,41 @@ export class PresBox extends ViewBoxBaseComponent // Key for when the presentaiton is active (according to Selection Manager) @action keyEvents = (e: KeyboardEvent) => { - e.stopPropagation(); - e.preventDefault(); - + let handled = false; + const anchorNode = document.activeElement as HTMLDivElement; + if (anchorNode && anchorNode.className?.includes("lm_title")) return; if (e.keyCode === 27) { // Escape key if (this.layoutDoc.presStatus === "edit") this._selectedArray = []; else this.layoutDoc.presStatus = "edit"; + handled = true; } if ((e.metaKey || e.altKey) && e.keyCode === 65) { // Ctrl-A to select all - if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs; + if (this.layoutDoc.presStatus === "edit") { + this._selectedArray = this.childDocs; + handled = true; + } } if (e.keyCode === 37 || e.keyCode === 38) { // left(37) / a(65) / up(38) to go back this.back(); + handled = true; } if (e.keyCode === 39 || e.keyCode === 40) { // right (39) / d(68) / down(40) to go to next this.next(); + handled = true; } if (e.keyCode === 32) { // spacebar to 'present' or autoplay if (this.layoutDoc.presStatus !== "edit") this.startAutoPres(0); else this.layoutDoc.presStatus = "manual"; + handled = true; } if (e.keyCode === 8) { // delete selected items if (this.layoutDoc.presStatus === "edit") { this._selectedArray.forEach((doc, i) => { this.removeDocument(doc); }); + handled = true; } } + if (handled) { + e.stopPropagation(); + e.preventDefault(); + } } /** -- cgit v1.2.3-70-g09d2 From 6f43b77ee032d8c5dcd8424aa17ee8bac22ae1ff Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 10 Aug 2020 21:45:27 -0400 Subject: fixed ctrl-drag for text to scale properly. added horizontal resize for web pages to add white space. --- src/client/views/DocumentDecorations.tsx | 29 ++++++++++++++++------------- src/client/views/nodes/PDFBox.tsx | 2 +- 2 files changed, 17 insertions(+), 14 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index f1169763e..552d504c0 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -418,6 +418,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> this._snapX = thisPt.thisX; this._snapY = thisPt.thisY; let dragBottom = false; + let dragRight = false; let dX = 0, dY = 0, dW = 0, dH = 0; const unfreeze = () => SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => @@ -465,6 +466,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> case "documentDecorations-rightResizer": unfreeze(); dW = move[0]; + dragRight = true; break; } @@ -482,7 +484,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (nwidth / nheight !== width / height) { height = nheight / nwidth * width; } - if (!e.ctrlKey && (!dragBottom || !element.layoutDoc._fitWidth)) { // ctrl key enables modification of the nativeWidth or nativeHeight durin the interaction + if (e.ctrlKey || (!dragBottom || !element.layoutDoc._fitWidth)) { // ctrl key enables modification of the nativeWidth or nativeHeight durin the interaction if (Math.abs(dW) > Math.abs(dH)) dH = dW * nheight / nwidth; else dW = dH * nwidth / nheight; } @@ -492,33 +494,34 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> doc.x = (doc.x || 0) + dX * (actualdW - width); doc.y = (doc.y || 0) + dY * (actualdH - height); const fixedAspect = (nwidth && nheight); + const fieldKey = Doc.LayoutFieldKey(doc); if (fixedAspect && (!nwidth || !nheight)) { - doc._nativeWidth = nwidth = doc._width || 0; - doc._nativeHeight = nheight = doc._height || 0; + doc[DataSym][fieldKey + "-nativeWidth"] = doc._nativeWidth = nwidth = doc._width || 0; + doc[DataSym][fieldKey + "-nativeHeight"] = doc._nativeHeight = nheight = doc._height || 0; } const anno = Cast(doc.annotationOn, Doc, null); if (e.ctrlKey && anno) { dW !== 0 && runInAction(() => { const dataDoc = anno[DataSym]; - const fieldKey = Doc.LayoutFieldKey(anno); - const nw = NumCast(dataDoc[fieldKey + "-nativeWidth"]); - const nh = NumCast(dataDoc[fieldKey + "-nativeHeight"]); - dataDoc[fieldKey + "-nativeWidth"] = nw + (dW > 0 ? 10 : -10); - dataDoc[fieldKey + "-nativeHeight"] = nh + (dW > 0 ? 10 : -10) * nh / nw; + const annoFieldKey = Doc.LayoutFieldKey(anno); + const nw = NumCast(dataDoc[annoFieldKey + "-nativeWidth"]); + const nh = NumCast(dataDoc[annoFieldKey + "-nativeHeight"]); + dataDoc[annoFieldKey + "-nativeWidth"] = nw + (dW > 0 ? 10 : -10); + dataDoc[annoFieldKey + "-nativeHeight"] = nh + (dW > 0 ? 10 : -10) * nh / nw; }); } else if (nwidth > 0 && nheight > 0) { - if (Math.abs(dW) > Math.abs(dH)) { - if (!fixedAspect || e.ctrlKey) { - doc._nativeWidth = actualdW / (doc._width || 1) * (doc._nativeWidth || 0); + if (Math.abs(dW) > Math.abs(dH) || dragRight) { + if (!fixedAspect || (dragRight && e.ctrlKey)) { + doc[DataSym][fieldKey + "-nativeWidth"] = doc._nativeWidth = actualdW / (doc._width || 1) * (doc._nativeWidth || 0); } doc._width = actualdW; if (fixedAspect && !doc._fitWidth) doc._height = nheight / nwidth * doc._width; else if (!fixedAspect || !e.ctrlKey) doc._height = actualdH; } else { - if (!fixedAspect || e.ctrlKey || (dragBottom && element.layoutDoc._fitWidth)) { - doc._nativeHeight = actualdH / (doc._height || 1) * (doc._nativeHeight || 0); + if (!fixedAspect || (dragBottom && (e.ctrlKey || element.layoutDoc._fitWidth))) { + doc[DataSym][fieldKey + "-nativeHeight"] = doc._nativeHeight = actualdH / (doc._height || 1) * (doc._nativeHeight || 0); } doc._height = actualdH; if (fixedAspect && !doc._fitWidth) doc._width = nwidth / nheight * doc._height; diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 323da1233..2fdb87e63 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -91,7 +91,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent { this.dataDoc[this.props.fieldKey + "-numPages"] = np; - this.dataDoc[this.props.fieldKey + "-nativeWidth"] = this.Document._nativeWidth = nw * 96 / 72; + this.dataDoc[this.props.fieldKey + "-nativeWidth"] = this.Document._nativeWidth = Math.max(NumCast(this.dataDoc[this.props.fieldKey + "-nativeWidth"]), nw * 96 / 72); this.dataDoc[this.props.fieldKey + "-nativeHeight"] = this.Document._nativeHeight = nh * 96 / 72; !this.Document._fitWidth && (this.Document._height = this.Document[WidthSym]() * (nh / nw)); } -- cgit v1.2.3-70-g09d2 From 201dc881e15292ee4a013c72b9e473779cf14e18 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 11 Aug 2020 10:22:54 -0400 Subject: updated how background colors work --- src/client/documents/Documents.ts | 1 + src/client/util/CurrentUserUtils.ts | 13 ++++-- src/client/util/SettingsManager.tsx | 2 +- src/client/views/MainView.tsx | 6 +-- .../views/collections/CollectionCarouselView.tsx | 2 +- .../views/collections/CollectionDockingView.tsx | 4 +- .../views/collections/CollectionTreeView.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- .../collections/collectionFreeForm/MarqueeView.tsx | 46 ++++++++++------------ .../views/nodes/CollectionFreeFormDocumentView.tsx | 4 +- src/client/views/nodes/DocHolderBox.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 4 +- src/client/views/nodes/FieldView.tsx | 2 +- src/client/views/nodes/FontIconBox.tsx | 2 +- src/client/views/nodes/LinkBox.tsx | 2 +- src/client/views/nodes/MenuIconBox.tsx | 6 +-- 16 files changed, 51 insertions(+), 49 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 070fdf407..956a5645c 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -174,6 +174,7 @@ export interface DocumentOptions { onPointerUp?: ScriptField; dropConverter?: ScriptField; // script to run when documents are dropped on this Document. dragFactory?: Doc; // document to create when dragging with a suitable onDragStart script + clickFactory?: Doc; // document to create when clicking on a button with a suitable onClick script onDragStart?: ScriptField; //script to execute at start of drag operation -- e.g., when a "creator" button is dragged this script generates a different document to drop clipboard?: Doc; UseCors?: boolean; diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index e8c4da425..10fdbf534 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -387,7 +387,7 @@ export class CurrentUserUtils { static creatorBtnDescriptors(doc: Doc): { title: string, toolTip: string, icon: string, drag?: string, ignoreClick?: boolean, - click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, noviceMode?: boolean + click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, noviceMode?: boolean, clickFactory?: Doc }[] { if (doc.emptyPresentation === undefined) { doc.emptyPresentation = Docs.Create.PresDocument(new List(), @@ -397,6 +397,9 @@ export class CurrentUserUtils { doc.emptyCollection = Docs.Create.FreeformDocument([], { _nativeWidth: undefined, _nativeHeight: undefined, _width: 150, _height: 100, title: "freeform", system: true }); } + if (doc.emptyPane === undefined) { + doc.emptyPane = Docs.Create.FreeformDocument([], { _nativeWidth: undefined, _nativeHeight: undefined, title: "Untitled Collection", system: true }); + } if (doc.emptyComparison === undefined) { doc.emptyComparison = Docs.Create.ComparisonDocument({ title: "compare", _width: 300, _height: 300, system: true }); } @@ -427,7 +430,7 @@ export class CurrentUserUtils { this.setupActiveMobileMenu(doc); } return [ - { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc, noviceMode: true }, + { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.clickFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc, noviceMode: true, clickFactory: doc.emptyPane as Doc, }, { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc, noviceMode: true }, { toolTip: "Drag a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc }, { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc, noviceMode: true }, @@ -466,7 +469,7 @@ export class CurrentUserUtils { } } const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title)); - const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory, noviceMode }) => Docs.Create.FontIconDocument({ + const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory, noviceMode, clickFactory }) => Docs.Create.FontIconDocument({ _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, icon, title, @@ -480,6 +483,7 @@ export class CurrentUserUtils { backgroundColor, removeDropProperties: new List(["dropAction"]), dragFactory, + clickFactory, userDoc: noviceMode ? undefined as any : doc, hidden: noviceMode ? undefined as any : ComputedField.MakeFunction("self.userDoc.noviceMode"), system: true })); @@ -908,7 +912,8 @@ export class CurrentUserUtils { doc.fontFamily = StrCast(doc.fontFamily, "Arial"); doc.fontColor = StrCast(doc.fontColor, "black"); doc.fontHighlight = StrCast(doc.fontHighlight, ""); - doc.defaultColor = StrCast(doc.defaultColor, "white"); + doc["default-collection-background"] = StrCast(doc["default-collection-background"], "white"); + doc["default-collection-nested-background"] = Cast(doc["default-collection-nested-background"], "string", null); doc.noviceMode = BoolCast(doc.noviceMode, true); doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); // diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index e3b91925a..737682cf7 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -56,7 +56,7 @@ export default class SettingsManager extends React.Component<{}> { @undoBatch selectUserMode = action((e: React.ChangeEvent) => Doc.UserDoc().noviceMode = (e.currentTarget as any)?.value === "Novice"); @undoBatch changeFontFamily = action((e: React.ChangeEvent) => Doc.UserDoc().fontFamily = (e.currentTarget as any).value); @undoBatch changeFontSize = action((e: React.ChangeEvent) => Doc.UserDoc().fontSize = (e.currentTarget as any).value); - @undoBatch switchColor = action((color: ColorState) => Doc.UserDoc().defaultColor = String(color.hex)); + @undoBatch switchColor = action((color: ColorState) => Doc.UserDoc()["default-collection-background"] = String(color.hex)); @undoBatch playgroundModeToggle = action(() => { this.playgroundMode = !this.playgroundMode; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 4d5dfc99e..3cbc00c92 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -258,7 +258,7 @@ export class MainView extends React.Component { y: 400, _width: this._panelWidth * .7 - this.propertiesWidth() * 0.7, _height: this._panelHeight, - title: "Collection " + workspaceCount, + title: "Untitled Collection", }; const freeformDoc = CurrentUserUtils.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions); const workspaceDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600, path: [Doc.UserDoc().myCatalog as Doc] }], { title: `Workspace ${workspaceCount}` }, id, "row"); @@ -332,7 +332,7 @@ export class MainView extends React.Component { getPHeight = () => this._panelHeight; getContentsHeight = () => this._panelHeight - this._buttonBarHeight; - defaultBackgroundColors = (doc: Opt) => { + defaultBackgroundColors = (doc: Opt, renderDepth: number) => { if (this.panelContent === doc?.title) return "lightgrey"; if (doc?.type === DocumentType.COL) { @@ -342,7 +342,7 @@ export class MainView extends React.Component { || doc.title === "Advanced Item Prototypes" || doc.title === "all Creators") { return "lightgrey"; } - return StrCast(Doc.UserDoc().defaultColor); + return renderDepth > 0 ? StrCast(Doc.UserDoc()["default-collection-nested-background"]) : StrCast(Doc.UserDoc()["default-collection-background"]); } if (this.darkScheme) { switch (doc?.type) { diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 27aea4b99..8a27f8102 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -64,7 +64,7 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument)
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 3691e844f..7db846f72 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -758,7 +758,7 @@ export class DockedFrameRenderer extends React.Component { this.props.glContainer.layoutManager.on("activeContentItemChanged", this.onActiveContentItemChanged); this.props.glContainer.on("tab", this.onActiveContentItemChanged); this.onActiveContentItemChanged(); - this._tabReaction = reaction(() => ({ views: SelectionManager.SelectedDocuments(), color: StrCast(this._document?._backgroundColor, "white") }), + this._tabReaction = reaction(() => ({ views: SelectionManager.SelectedDocuments(), color: StrCast(this._document?._backgroundColor, this._document && CollectionDockingView.Instance.props.backgroundColor?.(this._document, 0) || "white") }), (data) => { const selected = data.views.some(v => Doc.AreProtosEqual(v.props.Document, this._document)); this._tab && (this._tab.style.backgroundColor = selected ? data.color : ""); @@ -896,7 +896,7 @@ export class DockedFrameRenderer extends React.Component { renderMiniMap() { return
{ - let clusterColor = this.props.backgroundColor?.(doc); + let clusterColor = this.props.backgroundColor?.(doc, this.props.renderDepth + 1); const cluster = NumCast(doc.cluster); if (this.Document.useClusters) { if (this._clusterSets.length <= cluster) { diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 1a708d67d..68b8ed041 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -21,6 +21,7 @@ import { CollectionView } from "../CollectionView"; import MarqueeOptionsMenu from "./MarqueeOptionsMenu"; import "./MarqueeView.scss"; import React = require("react"); +import { ContextMenuItem } from "../../ContextMenuItem"; interface MarqueeViewProps { getContainerTransform: () => Transform; @@ -70,23 +71,19 @@ export class MarqueeView extends React.Component { //make textbox and add it to this collection // tslint:disable-next-line:prefer-const - let [x, y] = this.props.getTransform().transformPoint(this._downX, this._downY); + const cm = ContextMenu.Instance; + const [x, y] = this.props.getTransform().transformPoint(this._downX, this._downY); if (e.key === "?") { - ContextMenu.Instance.setDefaultItem("?", (str: string) => { - const textDoc = Docs.Create.WebDocument(`https://bing.com/search?q=${str}`, { - _width: 200, x, y, _nativeHeight: 962, _nativeWidth: 850, isAnnotating: false, - title: "bing", UseCors: true - }); - this.props.addDocTab(textDoc, "onRight"); - }); + cm.setDefaultItem("?", (str: string) => this.props.addDocTab( + Docs.Create.WebDocument(`https://bing.com/search?q=${str}`, { _width: 200, x, y, _nativeHeight: 962, _nativeWidth: 850, isAnnotating: false, title: "bing", UseCors: true }), "onRight")); - ContextMenu.Instance.displayMenu(this._downX, this._downY); + cm.displayMenu(this._downX, this._downY); e.stopPropagation(); } else if (e.key === ":") { DocUtils.addDocumentCreatorMenuItems(this.props.addLiveTextDocument, this.props.addDocument, x, y); - ContextMenu.Instance.displayMenu(this._downX, this._downY); + cm.displayMenu(this._downX, this._downY); e.stopPropagation(); } else if (e.key === "a" && (e.ctrlKey || e.metaKey)) { e.preventDefault(); @@ -359,24 +356,23 @@ export class MarqueeView extends React.Component, options: DocumentOptions, id?: string) => Doc>, isBackground?: boolean) => { - const bounds = this.Bounds; - // const inkData = this.ink ? this.ink.inkData : undefined; - const newCollection = (creator || Docs.Create.FreeformDocument)(selected, { - x: bounds.left, - y: bounds.top, - _panX: 0, - _panY: 0, - isBackground, - backgroundColor: this.props.isAnnotationOverlay ? "#00000015" : isBackground ? "cyan" : undefined, - _width: bounds.width, - _height: bounds.height, - title: "a nested collection", - }); + getCollection = action((selected: Doc[], creator: Opt<(documents: Array, options: DocumentOptions, id?: string) => Doc>, isBackground?: boolean) => { + const newCollection = creator ? creator(selected, { title: "nested stack", }) : ((doc: Doc) => { + Doc.GetProto(doc).data = new List(selected); + Doc.GetProto(doc).title = "nested freeform"; + doc._panX = doc._panY = 0; + return doc; + })(Doc.MakeCopy(Doc.UserDoc().emptyCollection as Doc, true)); + newCollection.isBackground = isBackground; + newCollection.backgroundColor = this.props.isAnnotationOverlay ? "#00000015" : isBackground ? "cyan" : undefined; + newCollection._width = this.Bounds.width; + newCollection._height = this.Bounds.height; + newCollection.x = this.Bounds.left; + newCollection.y = this.Bounds.top; selected.forEach(d => d.context = newCollection); this.hideMarquee(); return newCollection; - } + }); @action pileup = (e: KeyboardEvent | React.PointerEvent | undefined) => { diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 42a42ddf1..63869bd50 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -267,13 +267,13 @@ export class CollectionFreeFormDocumentView extends DocComponent this.nativeHeight; render() { TraceMobx(); - const backgroundColor = StrCast(this.layoutDoc._backgroundColor) || StrCast(this.layoutDoc.backgroundColor) || StrCast(this.Document.backgroundColor) || this.props.backgroundColor?.(this.Document); + const backgroundColor = StrCast(this.layoutDoc._backgroundColor) || StrCast(this.layoutDoc.backgroundColor) || StrCast(this.Document.backgroundColor) || this.props.backgroundColor?.(this.Document, this.props.renderDepth); return
boolean; pinToPres: (document: Doc) => void; backgroundHalo?: () => boolean; - backgroundColor?: (doc: Doc) => string | undefined; + backgroundColor?: (doc: Doc, renderDepth: number) => string | undefined; forcedBackgroundColor?: (doc: Doc) => string | undefined; opacity?: () => number | undefined; ChromeHeight?: () => number; @@ -1004,7 +1004,7 @@ export class DocumentView extends DocComponent(Docu if (!(this.props.Document instanceof Doc)) return (null); if (GetEffectiveAcl(this.props.Document) === AclPrivate) return (null); if (this.props.Document.hidden) return (null); - const backgroundColor = Doc.UserDoc().renderStyle === "comic" ? undefined : this.props.forcedBackgroundColor?.(this.Document) || StrCast(this.layoutDoc._backgroundColor) || StrCast(this.layoutDoc.backgroundColor) || StrCast(this.Document.backgroundColor) || this.props.backgroundColor?.(this.Document); + const backgroundColor = Doc.UserDoc().renderStyle === "comic" ? undefined : this.props.forcedBackgroundColor?.(this.Document) || StrCast(this.layoutDoc._backgroundColor) || StrCast(this.layoutDoc.backgroundColor) || StrCast(this.Document.backgroundColor) || this.props.backgroundColor?.(this.Document, this.props.renderDepth); const opacity = Cast(this.layoutDoc._opacity, "number", Cast(this.layoutDoc.opacity, "number", Cast(this.Document.opacity, "number", null))); const finalOpacity = this.props.opacity ? this.props.opacity() : opacity; const finalColor = this.layoutDoc.type === DocumentType.FONTICON || this.layoutDoc._viewType === CollectionViewType.Linear ? undefined : backgroundColor; diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index e631ad5fe..fe0ea80d5 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -38,7 +38,7 @@ export interface FieldViewProps { pinToPres: (document: Doc) => void; removeDocument?: (document: Doc | Doc[]) => boolean; moveDocument?: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; - backgroundColor?: (document: Doc) => string | undefined; + backgroundColor?: (document: Doc, renderDepth: number) => string | undefined; ScreenToLocalTransform: () => Transform; bringToFront: (doc: Doc, sendToBack?: boolean) => void; active: (outsideReaction?: boolean) => boolean; diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx index a6b1678b5..144defbb0 100644 --- a/src/client/views/nodes/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox.tsx @@ -61,7 +61,7 @@ export class FontIconBox extends DocComponent( render() { const label = StrCast(this.rootDoc.label, StrCast(this.rootDoc.title)); const color = StrCast(this.layoutDoc.color, this._foregroundColor); - const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc))); + const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc, this.props.renderDepth))); const shape = StrCast(this.layoutDoc.iconShape, "round"); const button =