aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json8
-rw-r--r--package.json2
-rw-r--r--src/client/views/animationtimeline/Timeline.tsx2
-rw-r--r--src/client/views/animationtimeline/TimelineOverview.scss2
-rw-r--r--src/client/views/animationtimeline/TimelineOverview.tsx35
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx33
6 files changed, 46 insertions, 36 deletions
diff --git a/package-lock.json b/package-lock.json
index 379cd3337..1f87e1493 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14244,7 +14244,8 @@
"fsevents": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz",
- "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA=="
+ "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==",
+ "optional": true
},
"get-caller-file": {
"version": "2.0.5",
@@ -16134,6 +16135,11 @@
"setimmediate": "^1.0.4"
}
},
+ "tiny-timer": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/tiny-timer/-/tiny-timer-1.4.0.tgz",
+ "integrity": "sha512-NZCayn+Y2OaDaBtVQmx8Lx/SggG9qGGINYoPNmXpqvj8ue7E24H9ZgI+02I9BZSMWCW8keOXsw2R3hSzk7aALQ=="
+ },
"tinycolor2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
diff --git a/package.json b/package.json
index b6beb5a3a..155026d2c 100644
--- a/package.json
+++ b/package.json
@@ -237,4 +237,4 @@
"xoauth2": "^1.2.0",
"youtube": "^0.1.0"
}
-} \ No newline at end of file
+}
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 5d5e78652..2ac7e6c92 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -343,7 +343,7 @@ export class Timeline extends React.Component<FieldViewProps> {
* context menu function.
* opens the timeline or closes the timeline.
*/
- timelineContextMenu = (e: MouseEvent): void => {
+ timelineContextMenu = (e: React.MouseEvent): void => {
ContextMenu.Instance.addItem({
description: (this._timelineVisible ? "Close" : "Open") + " Animation Timeline", event: action(() => {
this._timelineVisible = !this._timelineVisible;
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss
index b54399307..283163ea7 100644
--- a/src/client/views/animationtimeline/TimelineOverview.scss
+++ b/src/client/views/animationtimeline/TimelineOverview.scss
@@ -72,7 +72,7 @@ $timelineDark: #77a1aa;
position: relative;
padding: 0px;
margin: 0px;
- // width: 100%;
+ width: 100%;
height: 4px;
background-color: $timelineColor;
border-radius: 20px;
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 5d6378068..6358982c4 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -55,7 +55,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
@action
setOverviewWidth() {
- let width = $("#timelineOverview").width();
+ const width = $("#timelineOverview").width();
// console.log($("timelineOverview"))
if (width) this.overviewBarWidth = width;
// else this.overviewBarWidth = 0;
@@ -77,7 +77,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
onPanX = (e: PointerEvent) => {
e.stopPropagation();
e.preventDefault();
- let movX = (this.props.visibleStart / this.props.totalLength) * (this.DEFAULT_WIDTH) + e.movementX;
+ const movX = (this.props.visibleStart / this.props.totalLength) * (this.DEFAULT_WIDTH) + e.movementX;
// let movX = (this.props.visibleStart / this.props.totalLength) * (this.overviewWidth) + e.movementX;
this.props.movePanX((movX / (this.DEFAULT_WIDTH)) * this.props.totalLength);
// this.props.movePanX((movX / (this.overviewWidth) * this.props.totalLength);
@@ -95,22 +95,22 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
onScrubberDown = (e: React.PointerEvent) => {
e.preventDefault();
e.stopPropagation();
- if (!this.props.isAuthoring) {
+ // if (!this.props.isAuthoring) {
document.removeEventListener("pointermove", this.onScrubberMove);
document.removeEventListener("pointerup", this.onScrubberUp);
document.addEventListener("pointermove", this.onScrubberMove);
document.addEventListener("pointerup", this.onScrubberUp);
- }
+ // }
}
@action
onScrubberMove = (e: PointerEvent) => {
e.preventDefault();
e.stopPropagation();
- let scrubberRef = this._scrubberRef.current!;
- let left = scrubberRef.getBoundingClientRect().left;
+ const scrubberRef = this._scrubberRef.current!;
+ const left = scrubberRef.getBoundingClientRect().left;
// left = e.screenX;
- let offsetX = Math.round(e.clientX - left);
+ const offsetX = Math.round(e.clientX - left);
this.props.changeCurrentBarX((offsetX / (this.DEFAULT_WIDTH) * this.props.totalLength) + this.props.currentBarX);
// this.props.changeCurrentBarX(e.screenX)
}
@@ -125,9 +125,9 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
@action
getTimes() {
- let vis = KeyframeFunc.convertPixelTime(this.props.visibleLength, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
- let x = KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
- let start = KeyframeFunc.convertPixelTime(this.props.visibleStart, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
+ const vis = KeyframeFunc.convertPixelTime(this.props.visibleLength, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
+ const x = KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
+ const start = KeyframeFunc.convertPixelTime(this.props.visibleStart, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
this.visibleTime = vis;
this.currentX = x;
this.visibleStart = start;
@@ -137,19 +137,20 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
}
render() {
+ console.log("RERENDERED!");
this.setOverviewWidth();
this.getTimes();
- let percentVisible = this.visibleTime / this.props.time;
- let visibleBarWidth = percentVisible * this.overviewBarWidth;
+ const percentVisible = this.visibleTime / this.props.time;
+ const visibleBarWidth = percentVisible * this.overviewBarWidth;
- let percentScrubberStart = this.currentX / this.props.time;
- let scrubberStart = percentScrubberStart * this.overviewBarWidth;
+ const percentScrubberStart = this.currentX / this.props.time;
+ const scrubberStart = percentScrubberStart * this.overviewBarWidth;
- let percentBarStart = this.visibleStart / this.props.time;
- let barStart = percentBarStart * this.overviewBarWidth;
+ const percentBarStart = this.visibleStart / this.props.time;
+ const barStart = percentBarStart * this.overviewBarWidth;
- let timeline = this.props.isAuthoring ? [
+ const timeline = this.props.isAuthoring ? [
<div key="timeline-overview-container" className="timeline-overview-container" id="timelineOverview">
<div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{ left: `${barStart}px`, width: `${visibleBarWidth}px` }} onPointerDown={this.onPointerDown}></div>,
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index c61dcd21f..56b3b3bc0 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -966,7 +966,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
onContextMenu = (e: React.MouseEvent) => {
const layoutItems: ContextMenuProps[] = [];
-
layoutItems.push({ description: "reset view", event: () => { this.props.Document._panX = this.props.Document._panY = 0; this.props.Document.scale = 1; }, icon: "compress-arrows-alt" });
layoutItems.push({ description: `${this.Document._LODdisable ? "Enable LOD" : "Disable LOD"}`, event: () => this.Document._LODdisable = !this.Document._LODdisable, icon: "table" });
layoutItems.push({ description: `${this.fitToContent ? "Unset" : "Set"} Fit To Container`, event: () => this.Document._fitToBox = !this.fitToContent, icon: !this.fitToContent ? "expand-arrows-alt" : "compress-arrows-alt" });
@@ -1019,6 +1018,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
icon: "eye"
});
ContextMenu.Instance.addItem({ description: "Freeform Options ...", subitems: layoutItems, icon: "eye" });
+ this._timelineRef.current!.timelineContextMenu(e);
}
@@ -1070,21 +1070,24 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
// if isAnnotationOverlay is set, then children will be stored in the extension document for the fieldKey.
// otherwise, they are stored in fieldKey. All annotations to this document are stored in the extension document
// let lodarea = this.Document[WidthSym]() * this.Document[HeightSym]() / this.props.ScreenToLocalTransform().Scale / this.props.ScreenToLocalTransform().Scale;
- return <div className={"collectionfreeformview-container"}
- ref={this.createDashEventsTarget}
- onWheel={this.onPointerWheel}//pointerEvents: SelectionManager.GetIsDragging() ? "all" : undefined,
- onPointerDown={this.onPointerDown} onPointerMove={this.onCursorMove} onDrop={this.onDrop.bind(this)} onContextMenu={this.onContextMenu}
- style={{
- pointerEvents: SelectionManager.GetIsDragging() ? "all" : undefined,
- transform: this.contentScaling ? `scale(${this.contentScaling})` : "",
- transformOrigin: this.contentScaling ? "left top" : "",
- width: this.contentScaling ? `${100 / this.contentScaling}%` : "",
- height: this.contentScaling ? `${100 / this.contentScaling}%` : this.isAnnotationOverlay ? (this.props.Document.scrollHeight ? this.Document.scrollHeight : "100%") : this.props.PanelHeight()
- }}>
- {!this.Document._LODdisable && !this.props.active() && !this.props.isAnnotationOverlay && !this.props.annotationsKey && this.props.renderDepth > 0 ? // && this.props.CollectionView && lodarea < NumCast(this.Document.LODarea, 100000) ?
- this.placeholder : this.marqueeView}
+ return <div>
+ <div className={"collectionfreeformview-container"}
+ ref={this.createDashEventsTarget}
+ onWheel={this.onPointerWheel}//pointerEvents: SelectionManager.GetIsDragging() ? "all" : undefined,
+ onPointerDown={this.onPointerDown} onPointerMove={this.onCursorMove} onDrop={this.onDrop.bind(this)} onContextMenu={this.onContextMenu}
+ style={{
+ pointerEvents: SelectionManager.GetIsDragging() ? "all" : undefined,
+ transform: this.contentScaling ? `scale(${this.contentScaling})` : "",
+ transformOrigin: this.contentScaling ? "left top" : "",
+ width: this.contentScaling ? `${100 / this.contentScaling}%` : "",
+ height: this.contentScaling ? `${100 / this.contentScaling}%` : this.isAnnotationOverlay ? (this.props.Document.scrollHeight ? this.Document.scrollHeight : "100%") : this.props.PanelHeight()
+ }}>
+ {/* <Timeline ref={this._timelineRef} {...this.props} /> */}
+ {!this.Document._LODdisable && !this.props.active() && !this.props.isAnnotationOverlay && !this.props.annotationsKey && this.props.renderDepth > 0 ? // && this.props.CollectionView && lodarea < NumCast(this.Document.LODarea, 100000) ?
+ this.placeholder : this.marqueeView}
+ <CollectionFreeFormOverlayView elements={this.elementFunc} />
+ </div>
<Timeline ref={this._timelineRef} {...this.props} />
- <CollectionFreeFormOverlayView elements={this.elementFunc} />
</div>;
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 14:03:34 +0000