From 90c45914694a971c1b3cb356921c04f337625db5 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 30 Apr 2020 00:06:08 -0400 Subject: fixes for snapping & timeline. changed looi of document decorations --- src/client/util/DragManager.ts | 8 ++--- src/client/views/DocumentDecorations.scss | 34 +++++++++++++++++++++- src/client/views/DocumentDecorations.tsx | 9 +++--- src/client/views/MainView.tsx | 1 - src/client/views/MetadataEntryMenu.scss | 9 +++--- src/client/views/animationtimeline/Timeline.tsx | 33 ++++++++------------- .../collectionFreeForm/CollectionFreeFormView.tsx | 14 ++++++--- .../views/nodes/formattedText/FormattedTextBox.tsx | 8 +++-- 8 files changed, 74 insertions(+), 42 deletions(-) (limited to 'src') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 36c26fe2c..bccdf38ce 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -310,10 +310,10 @@ export namespace DragManager { const currTop = e.pageY - yFromTop; const currRight = e.pageX + xFromRight; const currBottom = e.pageY + yFromBottom; - const closestLeft = vertSnapLines.reduce((prev, curr) => Math.abs(prev - currLeft) > Math.abs(curr - currLeft) ? curr : prev); - const closestTop = horizSnapLines.reduce((prev, curr) => Math.abs(prev - currTop) > Math.abs(curr - currTop) ? curr : prev); - const closestRight = vertSnapLines.reduce((prev, curr) => Math.abs(prev - currRight) > Math.abs(curr - currRight) ? curr : prev); - const closestBottom = horizSnapLines.reduce((prev, curr) => Math.abs(prev - currBottom) > Math.abs(curr - currBottom) ? curr : prev); + const closestLeft = vertSnapLines.reduce((prev, curr) => Math.abs(prev - currLeft) > Math.abs(curr - currLeft) ? curr : prev, currLeft); + const closestTop = horizSnapLines.reduce((prev, curr) => Math.abs(prev - currTop) > Math.abs(curr - currTop) ? curr : prev, currTop); + const closestRight = vertSnapLines.reduce((prev, curr) => Math.abs(prev - currRight) > Math.abs(curr - currRight) ? curr : prev, currRight); + const closestBottom = horizSnapLines.reduce((prev, curr) => Math.abs(prev - currBottom) > Math.abs(curr - currBottom) ? curr : prev, currBottom); const distFromClosestLeft = Math.abs(e.pageX - xFromLeft - closestLeft); const distFromClosestTop = Math.abs(e.pageY - yFromTop - closestTop); const distFromClosestRight = Math.abs(e.pageX + xFromRight - closestRight); diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 28cf9fd47..61d517d43 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -21,9 +21,13 @@ $linkGap : 3px; background: none; } + .documentDecorations-resizer { pointer-events: auto; background: $alt-accent; + opacity: 0.1; + } + .documentDecorations-resizer:hover { opacity: 1; } @@ -80,7 +84,20 @@ $linkGap : 3px; #documentDecorations-topLeftResizer, #documentDecorations-bottomRightResizer { cursor: nwse-resize; - background: dimGray; + background: unset; + opacity: 1; + } + #documentDecorations-topLeftResizer { + border-left: black 2px solid; + border-top: black solid 2px; + } + #documentDecorations-bottomRightResizer { + border-right: black 2px solid; + border-bottom: black solid 2px; + } + #documentDecorations-topLeftResizer:hover, + #documentDecorations-bottomRightResizer:hover { + opacity: 1; } #documentDecorations-bottomRightResizer { @@ -89,8 +106,23 @@ $linkGap : 3px; #documentDecorations-topRightResizer, #documentDecorations-bottomLeftResizer { + cursor: nesw-resize; + background: unset; + opacity: 1; + } + #documentDecorations-topRightResizer { + border-right: black 2px solid; + border-top: black 2px solid; + } + #documentDecorations-bottomLeftResizer { + border-left: black 2px solid; + border-bottom: black 2px solid; + } + #documentDecorations-topRightResizer:hover, + #documentDecorations-bottomLeftResizer:hover { cursor: nesw-resize; background: dimGray; + opacity: 1; } #documentDecorations-topResizer, diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 312acd5b2..973ec2e89 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -473,10 +473,11 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}>
e.preventDefault()}>
- {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) :
e.preventDefault()}> - -
} + {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) : +
e.preventDefault()}> + +
}
e.preventDefault()}>
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 62b2d1d18..e5a8ebcb5 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -42,7 +42,6 @@ import { OverlayView } from './OverlayView'; import PDFMenu from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; import { ScriptField } from '../../new_fields/ScriptField'; -import { DragManager } from '../util/DragManager'; import { TimelineMenu } from './animationtimeline/TimelineMenu'; @observer diff --git a/src/client/views/MetadataEntryMenu.scss b/src/client/views/MetadataEntryMenu.scss index 5776cf070..28de0b7a5 100644 --- a/src/client/views/MetadataEntryMenu.scss +++ b/src/client/views/MetadataEntryMenu.scss @@ -9,9 +9,10 @@ } .metadataEntry-autoSuggester { - width: 100%; + width: 80%; height: 100%; - padding-right: 10px; + margin: 0; + display: inline-block; } #metadataEntry-outer { @@ -25,7 +26,7 @@ flex-direction: column; } .metadataEntry-inputArea { - display:flex; + display:inline-block; flex-direction: row; } @@ -44,7 +45,7 @@ .react-autosuggest__input { border: 1px solid #aaa; border-radius: 4px; - width: 100%; + width: 75%; } .react-autosuggest__input--focused { diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx index fe1e40778..77656b85f 100644 --- a/src/client/views/animationtimeline/Timeline.tsx +++ b/src/client/views/animationtimeline/Timeline.tsx @@ -71,7 +71,6 @@ export class Timeline extends React.Component { @observable private _tickIncrement = this.DEFAULT_TICK_INCREMENT; @observable private _time = 100000; //DEFAULT @observable private _playButton = faPlayCircle; - @observable private _timelineVisible = false; @observable private _mouseToggled = false; @observable private _doubleClickEnabled = false; @observable private _titleHeight = 0; @@ -336,20 +335,6 @@ export class Timeline extends React.Component { } - /** - * context menu function. - * opens the timeline or closes the timeline. - * Used in: Freeform - */ - timelineContextMenu = (e: React.MouseEvent): void => { - ContextMenu.Instance.addItem({ - description: (this._timelineVisible ? "Close" : "Open") + " Animation Timeline", event: action(() => { - this._timelineVisible = !this._timelineVisible; - }), icon: this._timelineVisible ? faEyeSlash : faEye - }); - } - - /** * timeline zoom function * use mouse middle button to zoom in/out the timeline @@ -463,7 +448,7 @@ export class Timeline extends React.Component {
-
+
{this.timeIndicator(lengthString, totalTime)}
this.resetView(this.props.Document)}>
this.setView(this.props.Document)}>
@@ -481,10 +466,16 @@ export class Timeline extends React.Component { ); } else { + const ctime = `Current: ${this.getCurrentTime()}`; + const ttime = `Total: ${this.toReadTime(this._time)}`; return (
-
{`Current: ${this.getCurrentTime()}`}
-
{`Total: ${this.toReadTime(this._time)}`}
+
+ {ctime} +
+
+ {ttime} +
); } @@ -601,8 +592,8 @@ export class Timeline extends React.Component { trace(); // change visible and total width return ( -
-
+
+
{this.drawTicks()} @@ -611,7 +602,7 @@ export class Timeline extends React.Component {
{DocListCast(this.children).map(doc => - this.mapOfTracks.push(ref)} node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} transform={this.props.ScreenToLocalTransform()} time={this._time} tickSpacing={this._tickSpacing} tickIncrement={this._tickIncrement} collection={this.props.Document} timelineVisible={this._timelineVisible} /> + this.mapOfTracks.push(ref)} node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} transform={this.props.ScreenToLocalTransform()} time={this._time} tickSpacing={this._tickSpacing} tickIncrement={this._tickIncrement} collection={this.props.Document} timelineVisible={true} /> )}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 0c9403429..77de486d9 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1,5 +1,5 @@ import { library } from "@fortawesome/fontawesome-svg-core"; -import { faEye } from "@fortawesome/free-regular-svg-icons"; +import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons"; import { faBraille, faChalkboard, faCompass, faCompressArrowsAlt, faExpandArrowsAlt, faFileUpload, faPaintBrush, faTable, faUpload } from "@fortawesome/free-solid-svg-icons"; import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; @@ -1093,7 +1093,6 @@ export class CollectionFreeFormView extends CollectionSubView { this.props.Document._panX = this.props.Document._panY = 0; this.props.Document.scale = 1; }, icon: "compress-arrows-alt" }); optionItems.push({ description: `${this.Document._LODdisable ? "Enable LOD" : "Disable LOD"}`, event: () => this.Document._LODdisable = !this.Document._LODdisable, icon: "table" }); optionItems.push({ description: `${this.fitToContent ? "Unset" : "Set"} Fit To Container`, event: () => this.Document._fitToBox = !this.fitToContent, icon: !this.fitToContent ? "expand-arrows-alt" : "compress-arrows-alt" }); @@ -1130,8 +1129,15 @@ export class CollectionFreeFormView extends CollectionSubView { + this._timelineVisible = !this._timelineVisible; + }), icon: this._timelineVisible ? faEyeSlash : faEye + }); } + @observable _timelineVisible = false; intersectRect(r1: { left: number, top: number, width: number, height: number }, r2: { left: number, top: number, width: number, height: number }) { @@ -1215,7 +1221,7 @@ export class CollectionFreeFormView extends CollectionSubView {this.children} - + {this._timelineVisible ? : (null)} ; } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 2038efbc6..4df693c9a 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -435,9 +435,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this.rootDoc.isTemplateForField = ""; this.rootDoc.layoutKey = "layout"; this.rootDoc.isTemplateDoc = makeTemplate(this.rootDoc, true, title); - this.rootDoc._width = this.layoutDoc._width || 300; // the width and height are stored on the template, since we're getting rid of the old template - this.rootDoc._height = this.layoutDoc._height || 200; // we need to copy them over to the root. This should probably apply to all '_' fields - this.rootDoc._backgroundColor = Cast(this.layoutDoc._backgroundColor, "string", null); + setTimeout(() => { + this.rootDoc._width = this.layoutDoc._width || 300; // the width and height are stored on the template, since we're getting rid of the old template + this.rootDoc._height = this.layoutDoc._height || 200; // we need to copy them over to the root. This should probably apply to all '_' fields + this.rootDoc._backgroundColor = Cast(this.layoutDoc._backgroundColor, "string", null); + }, 10); Doc.AddDocToList(Cast(Doc.UserDoc()["template-notes"], Doc, null), "data", this.rootDoc); }, icon: "eye" }); -- cgit v1.2.3-70-g09d2