From 3360cbeed45115fb757816a24f34ee812ff8cf19 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 8 Jan 2021 09:17:33 -0500 Subject: fixed resize to not include ContentScale for pick correlation to work --- src/client/views/DocumentDecorations.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 372dc5456..497c66d98 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -423,7 +423,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b const width = (doc._width || 0); let height = (doc._height || (nheight / nwidth * width)); height = !height || isNaN(height) ? 20 : height; - const scale = docView.props.ScreenToLocalTransform().Scale * docView.ContentScale(); + const scale = docView.props.ScreenToLocalTransform().Scale; if (nwidth && nheight) { if (nwidth / nheight !== width / height && !dragBottom) { height = nheight / nwidth * width; -- cgit v1.2.3-70-g09d2 From 5a1225bb4f08e28df1434fd26839f020715d1660 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 8 Jan 2021 09:56:41 -0500 Subject: fixed breaking undo when clicking on individual link blue dot --- src/client/views/nodes/LinkAnchorBox.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src') diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx index e347d1304..d86dfd7b1 100644 --- a/src/client/views/nodes/LinkAnchorBox.tsx +++ b/src/client/views/nodes/LinkAnchorBox.tsx @@ -77,6 +77,7 @@ export class LinkAnchorBox extends ViewBoxBaseComponent Date: Fri, 8 Jan 2021 10:52:07 -0500 Subject: fixed sizing/display of audio box regions --- src/client/views/nodes/AudioBox.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 67d25e525..500d4defa 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -546,10 +546,16 @@ export class AudioBox extends ViewBoxAnnotatableComponent ScriptField)) => { + const markerStyle = (doc: Opt, props: Opt, property: string): any => { + return property.startsWith("backgroundColor") ? "dimGrey" : this.props.styleProvider?.(doc, props, property); + } + const markerDoc = (mark: Doc, script: undefined | (() => ScriptField), width?: number, height?: number) => { return width : this.props.PanelWidth} + PanelHeight={height ? () => height : this.props.PanelHeight} focus={() => this.playLink(mark)} + styleProvider={markerStyle} pointerEvents={"all"} rootSelected={returnFalse} LayoutTemplate={undefined} @@ -611,11 +617,13 @@ export class AudioBox extends ViewBoxAnnotatableComponent { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation(); }} >
this.onPointerDown(e, m, true)}>
- {markerDoc(m, this.rangeScript)} + {markerDoc(m, this.rangeScript, this.props.PanelWidth() * (NumCast(m.audioEnd) - NumCast(m.audioStart)) / this.audioDuration, + .64 * this.props.PanelHeight() / (this.dataDoc.markerAmount + 1))}
this.onPointerDown(e, m, false)}>
: -- cgit v1.2.3-70-g09d2 From e80e0e3938f1f7c5f740553eb5cb7b152f2598e8 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 8 Jan 2021 14:05:00 -0500 Subject: fixed selection of audio region's ScreenToLocal so that doc decorations fit correctly --- src/client/views/nodes/AudioBox.scss | 3 --- src/client/views/nodes/AudioBox.tsx | 46 ++++++++++++++++++++++-------------- 2 files changed, 28 insertions(+), 21 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index f16d13a4e..e5bf9088f 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -125,7 +125,6 @@ margin-top: auto; margin-bottom: auto; width: 100%; - height: 80%; position: relative; padding-right: 5px; display: flex; @@ -135,7 +134,6 @@ margin-top: auto; margin-bottom: auto; margin-right: 2px; - width: 30px; height: 25px; padding: 2px; border-radius: 50%; @@ -163,7 +161,6 @@ .audiobox-timeline { position: relative; - height: 80%; width: 100%; background: white; border: gray solid 1px; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 500d4defa..1c2812e86 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -543,30 +543,35 @@ export class AudioBox extends ViewBoxAnnotatableComponent, props: Opt, property: string): any => { + return property.startsWith("backgroundColor") ? "dimGrey" : this.props.styleProvider?.(doc, props, property); + } render() { const interactive = SnappingManager.GetIsDragging() || this.active() ? "-interactive" : ""; this._first = true; // for indicating the first marker that is rendered - const markerStyle = (doc: Opt, props: Opt, property: string): any => { - return property.startsWith("backgroundColor") ? "dimGrey" : this.props.styleProvider?.(doc, props, property); - } - const markerDoc = (mark: Doc, script: undefined | (() => ScriptField), width?: number, height?: number) => { + const markerDoc = (mark: Doc, script: undefined | (() => ScriptField), x?: number, y?: number, width?: number, height?: number) => { return width : this.props.PanelWidth} PanelHeight={height ? () => height : this.props.PanelHeight} focus={() => this.playLink(mark)} - styleProvider={markerStyle} + styleProvider={this.markerStyle} pointerEvents={"all"} rootSelected={returnFalse} LayoutTemplate={undefined} ContainingCollectionDoc={this.props.Document} removeDocument={this.removeDocument} + ScreenToLocalTransform={x && y ? () => this.props.ScreenToLocalTransform().translate(-x, -y) : this.props.ScreenToLocalTransform} parentActive={returnTrue} onClick={this.layoutDoc.playOnClick ? script : undefined} ignoreAutoHeight={false} bringToFront={emptyFunction} scriptContext={this} />; }; + const heightPercent = 80; + const playheadWidth = 30; + const timelineContentWidth = this.props.PanelWidth() - playheadWidth; + const timelineContentHeight = (this.props.PanelHeight() * heightPercent / 100) * heightPercent / 100; // panelHeight * heightPercent is player height. * heightPercent is timeline height (as per css inline) return
{!this.path ?
@@ -589,10 +594,11 @@ export class AudioBox extends ViewBoxAnnotatableComponent}
:
-
-
-
-
{ e.stopPropagation(); e.preventDefault(); }} +
+
+
+
{ e.stopPropagation(); e.preventDefault(); }} onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { const rect = (e.target as any).getBoundingClientRect(); @@ -609,30 +615,34 @@ export class AudioBox extends ViewBoxAnnotatableComponent {this.waveform}
- {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => - (!m.isLabel) ? - (this.layoutDoc.hideMarkers) ? (null) : + {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => { + const isOverlap = this.isOverlap(m); + return !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.props.PanelWidth() * (NumCast(m.audioEnd) - NumCast(m.audioStart)) / this.audioDuration, - .64 * this.props.PanelHeight() / (this.dataDoc.markerAmount + 1))} + {markerDoc(m, this.rangeScript, + playheadWidth + NumCast(m.audioStart) / this.audioDuration * timelineContentWidth, + .1 * this.props.PanelHeight() + isOverlap / (this.dataDoc.markerAmount + 1) * timelineContentHeight, + timelineContentWidth * (NumCast(m.audioEnd) - NumCast(m.audioStart)) / this.audioDuration, + timelineContentHeight / (this.dataDoc.markerAmount + 1))}
this.onPointerDown(e, m, false)}>
: - (this.layoutDoc.hideLabels) ? (null) : + 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; -- cgit v1.2.3-70-g09d2