From b481a3a3d95a7481c785373b9a088c442488dfde Mon Sep 17 00:00:00 2001 From: monikahedman Date: Tue, 14 Jan 2020 17:27:26 -0500 Subject: initial stylistic changes --- src/client/views/animationtimeline/Timeline.scss | 30 +++-- src/client/views/animationtimeline/Timeline.tsx | 18 +-- .../views/animationtimeline/TimelineOverview.scss | 138 +++++++++++---------- 3 files changed, 97 insertions(+), 89 deletions(-) (limited to 'src') diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss index 76c8475d1..83988e324 100644 --- a/src/client/views/animationtimeline/Timeline.scss +++ b/src/client/views/animationtimeline/Timeline.scss @@ -1,6 +1,6 @@ @import "./../globalCssVariables.scss"; - +$timelineColor: #9acedf; .timeline-toolbox { position: absolute; @@ -13,6 +13,10 @@ align-items: center; top: 20px; + .timeline-icon { + color: $timelineColor; + } + div { padding: 0px; margin-left: 10px; @@ -24,7 +28,7 @@ width: auto; white-space: nowrap; font-size: 16px; - color: grey; + color: black; letter-spacing: 2px; text-transform: uppercase; } @@ -33,7 +37,7 @@ height: 40px; width: 80px; background-color: white; - border: 2px solid grey; + border: 2px solid black; border-radius: 20px; animation-fill-mode: forwards; animation-duration: 500ms; @@ -50,7 +54,7 @@ height: 35px; width: 35px; background-color: white; - border: 1px solid grey; + border: 1px solid black; border-radius: 20px; transition: transform 500ms ease-in-out; margin-left: 0px; @@ -65,7 +69,7 @@ width: 120px; white-space: nowrap; font-size: 16px; - color: grey; + color: black; letter-spacing: 2px; text-transform: uppercase; padding-left: 5px; @@ -112,13 +116,13 @@ pointer-events: none; .scrubberhead { - top: -30px; - height: 30px; - width: 30px; - background-color: transparent; + top: -20px; + height: 20px; + width: 20px; + background-color: white; border-radius: 50%; - border: 5px solid black; - left: -15px; + border: 3px solid black; + left: -9px; position: absolute; pointer-events: all; } @@ -132,7 +136,7 @@ overflow: hidden; background-color: white; position: absolute; - box-shadow: -10px 0px 10px 10px grey; + // box-shadow: -10px 0px 10px 10px red; } } @@ -156,7 +160,7 @@ float: left; border-style: solid; overflow-y: scroll; - overflow-x: hidden; + overflow-x: hidden; } } diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index fedffe8c1..589470111 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -8,7 +8,7 @@ import { Cast, NumCast, StrCast, BoolCast } from "../../../new_fields/Types"; import { List } from "../../../new_fields/List"; import { Doc, DocListCast } from "../../../new_fields/Doc"; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faPlayCircle, faBackward, faForward, faGripLines,faPauseCircle, faEyeSlash,faEye,faCheckCircle, faTimesCircle } from "@fortawesome/free-solid-svg-icons"; +import { faPlayCircle, faBackward, faForward, faGripLines, faPauseCircle, faEyeSlash, faEye, faCheckCircle, faTimesCircle } from "@fortawesome/free-solid-svg-icons"; import { ContextMenu } from "../ContextMenu"; import { TimelineOverview } from "./TimelineOverview"; import { FieldViewProps } from "../nodes/FieldView"; @@ -43,14 +43,14 @@ export class Timeline extends React.Component { //readonly constants private readonly DEFAULT_TICK_SPACING: number = 50; - private readonly MAX_TITLE_HEIGHT = 75; + private readonly MAX_TITLE_HEIGHT = 75; private readonly MAX_CONTAINER_HEIGHT: number = 800; private readonly DEFAULT_TICK_INCREMENT: number = 1000; //height variables private DEFAULT_CONTAINER_HEIGHT: number = 330; private MIN_CONTAINER_HEIGHT: number = 205; - + //react refs @observable private _trackbox = React.createRef(); @observable private _titleContainer = React.createRef(); @@ -224,7 +224,7 @@ export class Timeline extends React.Component { e.stopPropagation(); let scrubberbox = this._infoContainer.current!; let left = scrubberbox.getBoundingClientRect().left; - let offsetX = Math.round(e.clientX - left) * this.props.ScreenToLocalTransform().Scale; + let offsetX = Math.round(e.clientX - left) * this.props.ScreenToLocalTransform().Scale; this.changeCurrentBarX(offsetX + this._visibleStart); //changes scrubber to clicked scrubber position } @@ -403,9 +403,9 @@ export class Timeline extends React.Component { let size = 40 * scale; //50 is default return (
-
-
-
+
+
+
Timeline Overview
Mode: {this.props.Document.isATOn ? "Authoring" : "Play"}
@@ -460,7 +460,7 @@ export class Timeline extends React.Component { roundToggle.style.transform = "translate(45px, 0px)"; roundToggle.style.animationName = "turnon"; roundToggleContainer.style.animationName = "turnon"; - roundToggleContainer.style.backgroundColor = "green"; + roundToggleContainer.style.backgroundColor = "#9acedf"; timelineContainer.style.top = "0px"; this.props.Document.isATOn = true; } @@ -499,7 +499,7 @@ export class Timeline extends React.Component { render() { return (
-
+
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss index c7f9bd059..c643b978b 100644 --- a/src/client/views/animationtimeline/TimelineOverview.scss +++ b/src/client/views/animationtimeline/TimelineOverview.scss @@ -1,85 +1,89 @@ -@import "./../globalCssVariables.scss"; +@import "./../globalCssVariables.scss"; +$timelineColor: #9acedf; -.timeline-overview-container{ - padding: 0px; - margin: 0px; - width: 300px; +.timeline-overview-container { + padding: 0px; + margin: 0px; + width: 300px; height: 40px; - background: white; - position: relative; - border: 2px solid black; - - .timeline-overview-visible{ - position: absolute; - height: 100%; - background: green; + background: white; + position: relative; + border: 2px solid black; + + .timeline-overview-visible { + position: absolute; + height: 98%; + background: $timelineColor; display: inline-block; - margin: 0px; - padding: 0px; + margin: 0px; + padding: 0px; } - .timeline-overview-scrubber-container{ - margin: 0px; - padding: 0px; - position: absolute; + + .timeline-overview-scrubber-container { + margin: 0px; + padding: 0px; + position: absolute; height: 100%; - width: 2px; - top: 0px; - left: 0px; + width: 2px; + top: 0px; + left: 0px; z-index: 1001; - background-color:black; - display: inline-block; + background-color: black; + display: inline-block; - .timeline-overview-scrubber-head{ - padding: 0px; - margin: 0px; - position:absolute; - height: 30px; - width: 30px; - background-color:transparent; - border-radius: 50%; - border: 5px solid black; - left: -15px; - top: -30px; + .timeline-overview-scrubber-head { + padding: 0px; + margin: 0px; + position: absolute; + height: 10px; + width: 10px; + // background-color: black; + border-radius: 50%; + // border: 3px solid black; + left: -4px; + // top: -30px; + top: -10px; } } } -.timeline-play-bar{ - position: relative; - padding: 0px; - margin: 0px; - width: 300px; - height: 4px; - background-color: grey; +.timeline-play-bar { + position: relative; + padding: 0px; + margin: 0px; + width: 300px; + height: 4px; + background-color: $timelineColor; border-radius: 20px; - cursor: pointer; - - .timeline-play-head{ - position: absolute; - padding: 0px; - margin: 0px; - width: 20px; - height: 20px; - border-radius: 50%; - background-color: white; - border: 3px grey solid; - left: 0px; - top: -10px; - cursor: pointer; + cursor: pointer; + + .timeline-play-head { + position: absolute; + padding: 0px; + margin: 0px; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: white; + border: 3px $timelineColor; + left: 0px; + top: -10px; + cursor: pointer; } -} -.timeline-play-tail{ - position: absolute; - padding: 0px; - margin: 0px; - height: 4px; - width: 0px; - z-index: 1000; - background-color: green; +} + +.timeline-play-tail { + position: absolute; + padding: 0px; + margin: 0px; + height: 4px; + width: 0px; + z-index: 1000; + background-color: $timelineColor; border-radius: 20px; - margin-top: -4px; - cursor: pointer; + margin-top: -4px; + cursor: pointer; } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 95e321930a5e6f5a6fd86047542615dff49813f2 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Tue, 14 Jan 2020 19:35:47 -0500 Subject: color fixes --- src/client/views/animationtimeline/Timeline.scss | 9 ++++++++- src/client/views/animationtimeline/Timeline.tsx | 4 ++-- src/client/views/animationtimeline/TimelineOverview.scss | 6 +++--- 3 files changed, 13 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss index 83988e324..060627c17 100644 --- a/src/client/views/animationtimeline/Timeline.scss +++ b/src/client/views/animationtimeline/Timeline.scss @@ -54,7 +54,7 @@ $timelineColor: #9acedf; height: 35px; width: 35px; background-color: white; - border: 1px solid black; + border: 3px solid black; border-radius: 20px; transition: transform 500ms ease-in-out; margin-left: 0px; @@ -80,6 +80,13 @@ $timelineColor: #9acedf; height: 100%; width: 1px; background-color: black; + color: black; +} + +.number-label { + color: black; + padding-left: 5px; + } .timeline-container { diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index 589470111..2332b4d5f 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -131,7 +131,7 @@ export class Timeline extends React.Component { drawTicks = () => { let ticks = []; for (let i = 0; i < this._time / this._tickIncrement; i++) { - ticks.push(

{this.toReadTime(i * this._tickIncrement)}

); + ticks.push(

{this.toReadTime(i * this._tickIncrement)}

); } return ticks; } @@ -457,7 +457,7 @@ export class Timeline extends React.Component { timelineContainer.style.top = `${-this._containerHeight}px`; this.props.Document.isATOn = false; } else { - roundToggle.style.transform = "translate(45px, 0px)"; + roundToggle.style.transform = "translate(40px, 0px)"; roundToggle.style.animationName = "turnon"; roundToggleContainer.style.animationName = "turnon"; roundToggleContainer.style.backgroundColor = "#9acedf"; diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss index c643b978b..3517d3f39 100644 --- a/src/client/views/animationtimeline/TimelineOverview.scss +++ b/src/client/views/animationtimeline/TimelineOverview.scss @@ -38,7 +38,7 @@ $timelineColor: #9acedf; position: absolute; height: 10px; width: 10px; - // background-color: black; + background-color: black; border-radius: 50%; // border: 3px solid black; left: -4px; @@ -68,9 +68,9 @@ $timelineColor: #9acedf; height: 20px; border-radius: 50%; background-color: white; - border: 3px $timelineColor; + border: 3px solid $timelineColor; left: 0px; - top: -10px; + top: -8px; cursor: pointer; } } -- cgit v1.2.3-70-g09d2 From da6ce86f604ad5a6e7857f073ebba0095fc5d467 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Tue, 14 Jan 2020 20:02:57 -0500 Subject: more minor changes --- src/client/views/animationtimeline/Timeline.scss | 20 ++++++++++++-------- src/client/views/animationtimeline/Timeline.tsx | 7 ++++--- 2 files changed, 16 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss index 060627c17..02c1bdb16 100644 --- a/src/client/views/animationtimeline/Timeline.scss +++ b/src/client/views/animationtimeline/Timeline.scss @@ -1,6 +1,7 @@ @import "./../globalCssVariables.scss"; $timelineColor: #9acedf; +$timelineDark: #77a1aa; .timeline-toolbox { position: absolute; @@ -78,15 +79,15 @@ $timelineColor: #9acedf; .tick { height: 100%; - width: 1px; + width: 2px; background-color: black; color: black; } .number-label { color: black; - padding-left: 5px; - + transform: rotate(-90deg) translate(-15px, 8px); + font-size: .85em; } .timeline-container { @@ -94,7 +95,7 @@ $timelineColor: #9acedf; height: 300px; position: absolute; background-color: $light-color-secondary; - box-shadow: 0px 10px 20px; + border-bottom: 2px solid $timelineDark; transition: transform 500ms ease; .info-container { @@ -139,7 +140,7 @@ $timelineColor: #9acedf; top: 30px; height: calc(100% - 30px); width: 100%; - border: 1px; + border: 2px solid black; overflow: hidden; background-color: white; position: absolute; @@ -155,6 +156,9 @@ $timelineColor: #9acedf; width: 100px; background-color: white; overflow: hidden; + border-left: 2px solid black; + border-top: 2px solid black; + border-bottom: 2px solid black; .datapane { top: 0px; @@ -172,10 +176,10 @@ $timelineColor: #9acedf; } .resize { - bottom: 5px; + bottom: 0px; position: absolute; - height: 30px; - width: 50px; + height: 20px; + width: 40px; left: calc(50% - 25px); } } diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index 2332b4d5f..37d93f6c1 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -401,11 +401,12 @@ export class Timeline extends React.Component { */ private timelineToolBox = (scale: number) => { let size = 40 * scale; //50 is default + let iconSize = 25; return (
-
-
-
+
+
+
Timeline Overview
Mode: {this.props.Document.isATOn ? "Authoring" : "Play"}
-- cgit v1.2.3-70-g09d2 From 68a8c2bdbeafc7bc799884a6c1dcea86dbfd9f27 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Fri, 24 Jan 2020 15:04:59 -0500 Subject: change branch --- src/client/views/animationtimeline/Timeline.scss | 92 ++++++++--- src/client/views/animationtimeline/Timeline.tsx | 88 ++++++++-- .../views/animationtimeline/TimelineOverview.scss | 29 ++-- .../views/animationtimeline/TimelineOverview.tsx | 180 ++++++++++++++------- 4 files changed, 284 insertions(+), 105 deletions(-) (limited to 'src') diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss index 02c1bdb16..a8dd9b9e7 100644 --- a/src/client/views/animationtimeline/Timeline.scss +++ b/src/client/views/animationtimeline/Timeline.scss @@ -10,39 +10,79 @@ $timelineDark: #77a1aa; display: flex; align-items: flex-start; flex-direction: row; - justify-content: space-evenly; + // justify-content: space-evenly; align-items: center; - top: 20px; + top: 3px; + width: 100%; - .timeline-icon { - color: $timelineColor; + .overview-tool { + display: flex; + justify-content: center; } - div { - padding: 0px; + .playbackControls { + display: flex; + margin-left: 30px; + max-width: 84px; + width: 84px; + + .timeline-icon { + color: $timelineColor; + margin-left: 3px; + } + + } + + .grid-box { + display: grid; + grid-template-columns: [first] 50% [line2] 25% [line3] 25%; + width: calc(100% - 150px); + // width: 100%; margin-left: 10px; + + .time-box { + margin-left: 5px; + display: flex; + } + + .mode-box { + display: flex; + margin-left: 5px; + } + + .overview-box { + width: 100%; + display: flex; + } + + div { + padding: 0px; + // margin-left: 10px; + } } .animation-text { - font-size: 20px; + // font-size: 16px; height: auto; width: auto; white-space: nowrap; - font-size: 16px; + font-size: 14px; color: black; letter-spacing: 2px; text-transform: uppercase; } .round-toggle { - height: 40px; - width: 80px; + height: 20px; + width: 40px; + min-width: 40px; background-color: white; - border: 2px solid black; + border: 2px solid $timelineDark; border-radius: 20px; animation-fill-mode: forwards; animation-duration: 500ms; top: 30px; + margin-left: 5px; input { position: absolute; @@ -52,29 +92,30 @@ $timelineDark: #77a1aa; } .round-toggle-slider { - height: 35px; - width: 35px; + height: 17px; + width: 17px; background-color: white; - border: 3px solid black; - border-radius: 20px; + border: 2px solid $timelineDark; + border-radius: 50%; transition: transform 500ms ease-in-out; margin-left: 0px; - margin-top: 0.5px; + // margin-top: 0.5px; } } } .time-input { - height: 40px; - width: 120px; + height: 20px; + // width: 120px; + width: 100%; white-space: nowrap; - font-size: 16px; + font-size: 12px; color: black; letter-spacing: 2px; text-transform: uppercase; padding-left: 5px; - + margin-left: 5px; } .tick { @@ -99,7 +140,7 @@ $timelineDark: #77a1aa; transition: transform 500ms ease; .info-container { - margin-top: 80px; + margin-top: 50px; right: 20px; position: absolute; height: calc(100% - 100px); @@ -138,9 +179,12 @@ $timelineDark: #77a1aa; .trackbox { top: 30px; + // TODO: where is this 30px coming from? height: calc(100% - 30px); + // height: 100%; width: 100%; - border: 2px solid black; + border-top: 2px solid black; + border-bottom: 2px solid black; overflow: hidden; background-color: white; position: absolute; @@ -150,7 +194,7 @@ $timelineDark: #77a1aa; } .title-container { - margin-top: 110px; + margin-top: 80px; margin-left: 20px; height: calc(100% - 100px - 30px); width: 100px; @@ -159,6 +203,7 @@ $timelineDark: #77a1aa; border-left: 2px solid black; border-top: 2px solid black; border-bottom: 2px solid black; + border-right: 2px solid $timelineDark; .datapane { top: 0px; @@ -181,6 +226,7 @@ $timelineDark: #77a1aa; height: 20px; width: 40px; left: calc(50% - 25px); + color: $timelineDark; } } diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index 37d93f6c1..e6201d431 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -3,7 +3,7 @@ import "./Timeline.scss"; import { listSpec } from "../../../new_fields/Schema"; import { observer } from "mobx-react"; import { Track } from "./Track"; -import { observable, action, computed, runInAction } from "mobx"; +import { observable, action, computed, runInAction, IReactionDisposer, reaction } from "mobx"; import { Cast, NumCast, StrCast, BoolCast } from "../../../new_fields/Types"; import { List } from "../../../new_fields/List"; import { Doc, DocListCast } from "../../../new_fields/Doc"; @@ -77,6 +77,11 @@ export class Timeline extends React.Component { @observable private _doubleClickEnabled = false; @observable private _titleHeight = 0; + // so a reaction can be made + @observable public _isAuthoring = this.props.Document.isATOn; + @observable private _resizeReaction?: IReactionDisposer; + @observable private _panelWidth = 0; + /** * collection get method. Basically defines what defines collection's children. These will be tracked in the timeline. Do not edit. */ @@ -114,6 +119,19 @@ export class Timeline extends React.Component { this.props.Document.isATOn = !this.props.Document.isATOn; //turns the boolean on, saying AT (animation timeline) is on this.toggleHandle(); }); + + this._resizeReaction = reaction( + () => this.props.PanelWidth, + () => { + // if (!this.props.parent._isAuthoring) { + // runInAction(() => { + console.log("resizing"); + // this.setOverviewWidth(); + // }); + // } + }, + ); + } componentWillUnmount() { @@ -402,19 +420,58 @@ export class Timeline extends React.Component { private timelineToolBox = (scale: number) => { let size = 40 * scale; //50 is default let iconSize = 25; + + //decides if information should be omitted because the timeline is very small + // if its less than 950 pixels then it's going to be overlapping + let shouldCompress = false; + let width: number = this.props.PanelWidth(); + if (width < 850) { + shouldCompress = true; + } + + let modeString, overviewString, lengthString; + let modeType = this.props.Document.isATOn ? "Author" : "Play"; + + if (!shouldCompress) { + modeString = "Mode: " + modeType; + overviewString = "Overview:"; + lengthString = "Length: "; + } + else { + modeString = modeType; + overviewString = ""; + lengthString = ""; + } + + + // let modeType: string = this.props.Document.isATOn ? "Author" : "Play"; + // let modeString: string = "Mode: " + modeType; + // let overviewString: string = "Overview:"; + // let lengthString: string = "Length: "; + return (
-
-
-
-
Timeline Overview
- -
Mode: {this.props.Document.isATOn ? "Authoring" : "Play"}
-
-
+
+
+
+
+
+
+
+
{overviewString}
+ +
+
+
{modeString}
+
+
+
+
+
+
{lengthString}
+ +
-
Length:
-
); } @@ -457,13 +514,15 @@ export class Timeline extends React.Component { roundToggleContainer.style.backgroundColor = "white"; timelineContainer.style.top = `${-this._containerHeight}px`; this.props.Document.isATOn = false; + this._isAuthoring = false; } else { - roundToggle.style.transform = "translate(40px, 0px)"; + roundToggle.style.transform = "translate(20px, 0px)"; roundToggle.style.animationName = "turnon"; roundToggleContainer.style.animationName = "turnon"; roundToggleContainer.style.backgroundColor = "#9acedf"; timelineContainer.style.top = "0px"; this.props.Document.isATOn = true; + this._isAuthoring = true; } } @@ -498,6 +557,11 @@ export class Timeline extends React.Component { * basically the only thing you need to edit besides render methods in track (individual track lines) and keyframe (green region) */ render() { + console.log(this.props.PanelWidth()); + runInAction(() => { + this._panelWidth = this.props.PanelWidth(); + console.log("changing!!") + }); return (
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss index 3517d3f39..a0b9d462b 100644 --- a/src/client/views/animationtimeline/TimelineOverview.scss +++ b/src/client/views/animationtimeline/TimelineOverview.scss @@ -1,23 +1,34 @@ @import "./../globalCssVariables.scss"; $timelineColor: #9acedf; +$timelineDark: #77a1aa; + +.timelineOverview-bounding { + width: 100%; + margin-right: 10px; +} .timeline-overview-container { - padding: 0px; - margin: 0px; - width: 300px; - height: 40px; + // padding: 0px; + margin-right: 5px; + // margin: 0px; + margin-left: 5px; + // width: 300px; + width: 100%; + height: 25px; background: white; position: relative; - border: 2px solid black; + border: 2px solid $timelineDark; + // width: 100%; .timeline-overview-visible { position: absolute; - height: 98%; + height: 21px; background: $timelineColor; display: inline-block; margin: 0px; padding: 0px; + // top: 1px; } .timeline-overview-scrubber-container { @@ -38,9 +49,9 @@ $timelineColor: #9acedf; position: absolute; height: 10px; width: 10px; - background-color: black; + background-color: white; border-radius: 50%; - // border: 3px solid black; + border: 2px solid black; left: -4px; // top: -30px; top: -10px; @@ -54,7 +65,7 @@ $timelineColor: #9acedf; position: relative; padding: 0px; margin: 0px; - width: 300px; + 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 4741969dc..4907a1ae1 100644 --- a/src/client/views/animationtimeline/TimelineOverview.tsx +++ b/src/client/views/animationtimeline/TimelineOverview.tsx @@ -1,101 +1,159 @@ -import * as React from "react"; -import {observable, action} from "mobx"; -import {observer} from "mobx-react"; -import "./TimelineOverview.scss"; +import * as React from "react"; +import { observable, action, computed, runInAction, reaction, IReactionDisposer } from "mobx"; +import { observer } from "mobx-react"; +import "./TimelineOverview.scss"; +import * as $ from 'jquery'; +import { Timeline } from "./Timeline"; - -interface TimelineOverviewProps{ - totalLength: number; - visibleLength:number; - visibleStart:number; - currentBarX:number; - isAuthoring: boolean; - changeCurrentBarX: (pixel:number) => void; - movePanX: (pixel:number) => any; +interface TimelineOverviewProps { + totalLength: number; + visibleLength: number; + visibleStart: number; + currentBarX: number; + isAuthoring: boolean; + parent: Timeline; + changeCurrentBarX: (pixel: number) => void; + movePanX: (pixel: number) => any; } @observer export class TimelineOverview extends React.Component{ - @observable private _visibleRef = React.createRef(); - @observable private _scrubberRef = React.createRef(); - private readonly DEFAULT_HEIGHT = 50; - private readonly DEFAULT_WIDTH = 300; + @observable private _visibleRef = React.createRef(); + @observable private _scrubberRef = React.createRef(); + @observable private overviewBarWidth: number = 0; + @observable private _authoringReaction?: IReactionDisposer; + @observable private _resizeReaction?: IReactionDisposer; + private readonly DEFAULT_HEIGHT = 50; + private readonly DEFAULT_WIDTH = 300; + + componentDidMount = () => { + this.setOverviewWidth(); + + this._authoringReaction = reaction( + () => this.props.parent._isAuthoring, + () => { + if (!this.props.parent._isAuthoring) { + runInAction(() => { + this.setOverviewWidth(); + }); + } + }, + ); + // this._resizeReaction = reaction( + // () => this.props.parent.props.PanelWidth, + // () => { + // // if (!this.props.parent._isAuthoring) { + // // runInAction(() => { + // console.log("resizing"); + // this.setOverviewWidth(); + // // }); + // // } + // }, + // ); + } + + componentWillUnmount = () => { + this._authoringReaction && this._authoringReaction(); + this._resizeReaction && this._resizeReaction(); + } @action - onPointerDown = (e:React.PointerEvent) => { - e.stopPropagation(); - e.preventDefault(); - document.removeEventListener("pointermove", this.onPanX); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointermove", this.onPanX); - document.addEventListener("pointerup", this.onPointerUp); + setOverviewWidth() { + let width = $("#timelineOverview").width(); + if (width) this.overviewBarWidth = width; + else this.overviewBarWidth = 0; + } + + @action + onPointerDown = (e: React.PointerEvent) => { + e.stopPropagation(); + e.preventDefault(); + document.removeEventListener("pointermove", this.onPanX); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointermove", this.onPanX); + document.addEventListener("pointerup", this.onPointerUp); } @action onPanX = (e: PointerEvent) => { - e.stopPropagation(); - e.preventDefault(); - let movX = (this.props.visibleStart / this.props.totalLength)* (this.DEFAULT_WIDTH) + e.movementX; - this.props.movePanX((movX / (this.DEFAULT_WIDTH )) * this.props.totalLength); + e.stopPropagation(); + e.preventDefault(); + let 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); + + // console.log(this.props.totalLength); } @action onPointerUp = (e: PointerEvent) => { - e.stopPropagation(); - e.preventDefault(); - document.removeEventListener("pointermove", this.onPanX); - document.removeEventListener("pointerup", this.onPointerUp); + e.stopPropagation(); + e.preventDefault(); + document.removeEventListener("pointermove", this.onPanX); + document.removeEventListener("pointerup", this.onPointerUp); } @action - onScrubberDown = ( e:React.PointerEvent) => { - e.preventDefault(); - e.stopPropagation(); - document.removeEventListener("pointermove", this.onScrubberMove); - document.removeEventListener("pointerup", this.onScrubberUp); - document.addEventListener("pointermove", this.onScrubberMove); + onScrubberDown = (e: React.PointerEvent) => { + e.preventDefault(); + e.stopPropagation(); + 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; - let offsetX = Math.round(e.clientX - left); - this.props.changeCurrentBarX((offsetX / (this.DEFAULT_WIDTH) * this.props.totalLength) + this.props.currentBarX); + e.preventDefault(); + e.stopPropagation(); + let scrubberRef = this._scrubberRef.current!; + let left = scrubberRef.getBoundingClientRect().left; + let offsetX = Math.round(e.clientX - left); + this.props.changeCurrentBarX((offsetX / (this.DEFAULT_WIDTH) * this.props.totalLength) + this.props.currentBarX); } @action - onScrubberUp = (e:PointerEvent) => { - e.preventDefault(); - e.stopPropagation(); - document.removeEventListener("pointermove", this.onScrubberMove); + onScrubberUp = (e: PointerEvent) => { + e.preventDefault(); + e.stopPropagation(); + document.removeEventListener("pointermove", this.onScrubberMove); document.removeEventListener("pointerup", this.onScrubberUp); } - render(){ + render() { + // calculates where everything should fall based on its size + let percentVisible = this.props.visibleLength / this.props.totalLength; + let visibleBarWidth = percentVisible * this.overviewBarWidth; + + let percentScrubberStart = this.props.currentBarX / this.props.totalLength; + let scrubberStart = percentScrubberStart * this.overviewBarWidth; + + let percentBarStart = this.props.visibleStart / this.props.totalLength; + let barStart = percentBarStart * this.overviewBarWidth; + let timeline = this.props.isAuthoring ? [ -
-
, -
+ +
+
, +
-
+
] : [ -
-
-
, -
- ]; - return( -
+
+
+
, +
+ ]; + return ( +
{timeline}
- ); + ); } } -- cgit v1.2.3-70-g09d2 From 2320240229cd8e89e8f5abe917053caad7bf38c2 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Sat, 1 Feb 2020 13:50:32 -0500 Subject: overveiw resize --- src/client/views/animationtimeline/Timeline.tsx | 18 ++++++++++++++++-- .../views/animationtimeline/TimelineOverview.tsx | 4 ++++ 2 files changed, 20 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index e6201d431..8b943f209 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -449,6 +449,9 @@ export class Timeline extends React.Component { // let overviewString: string = "Overview:"; // let lengthString: string = "Length: "; + console.log("visible: " + this._visibleLength) + console.log("total: " + this._totalLength) + return (
@@ -459,7 +462,7 @@ export class Timeline extends React.Component {
{overviewString}
- +
{modeString}
@@ -551,17 +554,28 @@ export class Timeline extends React.Component { } + @action.bound + changeLenths() { + if (this._infoContainer.current) { + this._visibleLength = this._infoContainer.current!.getBoundingClientRect().width; //the visible length of the timeline (the length that you current see) + this._visibleStart = this._infoContainer.current!.scrollLeft; //where the div starts + } + } + /** * if you have any question here, just shoot me an email or text. * basically the only thing you need to edit besides render methods in track (individual track lines) and keyframe (green region) */ render() { - console.log(this.props.PanelWidth()); + // console.log(this.props.PanelWidth()); runInAction(() => { this._panelWidth = this.props.PanelWidth(); + this.changeLenths(); console.log("changing!!") }); + + // change visible and total width return (
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx index 4907a1ae1..caa97bb70 100644 --- a/src/client/views/animationtimeline/TimelineOverview.tsx +++ b/src/client/views/animationtimeline/TimelineOverview.tsx @@ -15,6 +15,7 @@ interface TimelineOverviewProps { parent: Timeline; changeCurrentBarX: (pixel: number) => void; movePanX: (pixel: number) => any; + panelWidth: number; } @@ -125,8 +126,11 @@ export class TimelineOverview extends React.Component{ } render() { + + console.log("helo") // calculates where everything should fall based on its size let percentVisible = this.props.visibleLength / this.props.totalLength; + console.log(this.props.visibleLength) let visibleBarWidth = percentVisible * this.overviewBarWidth; let percentScrubberStart = this.props.currentBarX / this.props.totalLength; -- cgit v1.2.3-70-g09d2