From 94137cb3a771ec6afd803f3cff97da86a14dd54f Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Fri, 26 Jun 2020 01:46:52 +0530 Subject: background colour + comments --- .../collectionGrid/CollectionGridView.scss | 3 +- .../collectionGrid/CollectionGridView.tsx | 41 +++++++++++++++++++++- 2 files changed, 41 insertions(+), 3 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index 9c2d5cbff..4d8473be9 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -8,7 +8,6 @@ .collectionGridView-gridContainer { height: 100%; overflow-y: auto; - background-color: white; overflow-x: hidden; display: flex; @@ -22,7 +21,7 @@ } .react-grid-layout { - width : 100%; + width: 100%; } .react-grid-item>.react-resizable-handle { diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 2015ca930..72577e921 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -47,6 +47,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @computed get flexGrid() { return BoolCast(this.props.Document.gridFlex, true); } // is grid static/flexible i.e. whether nodes be moved around and resized @computed get compaction() { return StrCast(this.props.Document.gridStartCompaction, StrCast(this.props.Document.gridCompaction, "vertical")); } // is grid static/flexible i.e. whether nodes be moved around and resized + /** + * Sets up the listeners for the list of documents and the reset button. + */ componentDidMount() { this._changeListenerDisposer = reaction(() => this.childLayoutPairs, (pairs) => { const newLayouts: Layout[] = []; @@ -68,11 +71,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { }); } + /** + * Disposes the listeners. + */ componentWillUnmount() { this._changeListenerDisposer?.(); this._resetListenerDisposer?.(); } + /** + * @returns the default location of the grid node (i.e. when the grid is static) + * @param index + */ unflexedPosition(index: number): Omit { return { x: (index % Math.floor(this.numCols / this.defaultW)) * this.defaultW, @@ -83,6 +93,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { }; } + /** + * Maps the x- and y- coordinates of the event to a grid cell. + */ screenToCell(sx: number, sy: number) { const pt = this.props.ScreenToLocalTransform().transformPoint(sx, sy); const x = Math.floor(pt[0] / this.colWidthPlusGap); @@ -90,10 +103,16 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { return { x, y }; } + /** + * Creates a layout object for a grid item + */ makeLayoutItem = (doc: Doc, pos: { x: number, y: number }, Static: boolean = false, w: number = this.defaultW, h: number = this.defaultH) => { return ({ i: doc[Id], w, h, x: pos.x, y: pos.y, static: Static }); } + /** + * Adds a layout to the list of layouts. + */ addLayoutItem = (layouts: Layout[], layout: Layout) => { const f = layouts.findIndex(l => l.i === layout.i); f !== -1 && layouts.splice(f, 1); @@ -215,6 +234,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.savedLayoutList.map((layout, index) => Object.assign(layout, this.unflexedPosition(index))); } + /** + * Handles internal drop of Dash documents. + */ @action onInternalDrop = (e: Event, de: DragManager.DropEvent) => { const savedLayouts = this.savedLayoutList; @@ -227,6 +249,16 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { return false; } + /** + * Handles external drop of images/PDFs etc from outside Dash. + */ + @action + onExternalDrop = async (e: React.DragEvent): Promise => { + const where = this.screenToCell(e.clientX, e.clientY); + super.onExternalDrop(e, { x: where.x, y: where.y }); + + } + /** * Handles the change in the value of the rowHeight slider. */ @@ -234,6 +266,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { onSliderChange = (event: React.ChangeEvent) => { this._rowHeight = event.currentTarget.valueAsNumber; } + /** + * Handles the user clicking on the slider. + */ @action onSliderDown = (e: React.PointerEvent) => { this._rowHeight = this.rowHeight; // uses _rowHeight during dragging and sets doc's rowHeight when finished so that operation is undoable @@ -253,6 +288,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { ContextMenu.Instance.addItem({ description: "Display", subitems: displayOptionsMenu, icon: "tv" }); } + /** + * Handles text document creation on double click. + */ onPointerDown = (e: React.PointerEvent) => { if (this.props.active(true)) { setupMoveUpEvents(this, e, returnFalse, returnFalse, @@ -276,8 +314,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
this.onPointerDown(e)} > + onPointerDown={e => this.onPointerDown(e)}>
e.stopPropagation()} onScroll={action(e => { if (!this.props.isSelected()) e.currentTarget.scrollTop = this._scroll; -- cgit v1.2.3-70-g09d2 From 7c93a65535a278dd1381b27fbd4c3869eed19527 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Fri, 3 Jul 2020 20:22:52 +0900 Subject: pin and icon --- src/client/views/AntimodeMenu.tsx | 7 +- src/client/views/GestureOverlay.tsx | 10 +- src/client/views/MainView.tsx | 11 +- .../collectionFreeForm/InkOptionsMenu.scss | 5 + .../collectionFreeForm/InkOptionsMenu.tsx | 267 ++++++++++++++------- 5 files changed, 202 insertions(+), 98 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx index 3e4d20fea..d83ac434c 100644 --- a/src/client/views/AntimodeMenu.tsx +++ b/src/client/views/AntimodeMenu.tsx @@ -137,13 +137,18 @@ export default abstract class AntimodeMenu extends React.Component { protected getElement(buttons: JSX.Element[]) { return (
+ style={{ + left: this._left, top: this._top, opacity: this._opacity, transitionProperty: this._transitionProperty, transitionDuration: this._transitionDuration, transitionDelay: this._transitionDelay, + position: this.Pinned ? "unset" : undefined + }}>
{buttons}
); } + + protected getElementWithRows(rows: JSX.Element[], numRows: number, hasDragger: boolean = true) { return (
{ @@ -885,7 +891,9 @@ export default class GestureOverlay extends Touchable { render() { return ( -
+ +
{this.showMobileInkOverlay ? : <>} {this.elements} diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 8f5a31b6c..afdff4ed8 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -453,10 +453,12 @@ export class MainView extends React.Component { @computed get mainContent() { const sidebar = this.userDoc?.["tabs-panelContainer"]; + console.log(InkOptionsMenu.Instance?.Pinned); return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
@@ -593,7 +595,10 @@ export class MainView extends React.Component { - + + + + {this.mainContent} @@ -606,7 +611,7 @@ export class MainView extends React.Component { - + {this.snapLines} diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss index a9fab4c1e..7329f4fc1 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss @@ -26,6 +26,11 @@ /* Make the buttons appear below each other */ } +.btn-draw { + display: inline; + /* Make the buttons appear below each other */ +} + .btn2-group { display: block; background: #323232; diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index f1032adaa..7de70b8cd 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -17,6 +17,7 @@ import { DocumentType } from "../../../documents/DocumentTypes"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; import { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faSleigh, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve, } from "@fortawesome/free-solid-svg-icons"; +import { Cast, StrCast, BoolCast } from "../../../../fields/Types"; library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve); @@ -28,36 +29,67 @@ export default class InkOptionsMenu extends AntimodeMenu { private _width = ["1", "5", "10", "100"]; // private _buttons = ["circle", "triangle", "rectangle", "arrow", "line"]; // private _icons = ["O", "∆", "ロ", "➜", "-"]; - private _buttons = ["circle", "triangle", "rectangle", "line", "noRec", "",]; - private _icons = ["O", "∆", "ロ", "⎯", "✖︎", " "]; + // private _buttons = ["circle", "triangle", "rectangle", "line", "noRec", "",]; + // private _icons = ["O", "∆", "ロ", "⎯⎯⎯", "✖︎", " "]; //arrowStart and arrowEnd must match and defs must exist in Inking Stroke - private _arrowStart = ["arrowHead", "arrowHead", "dot", "dot", "none"]; - private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"]; - private _arrowIcons = ["→", "↔︎", "•", "••", " "]; + // private _arrowStart = ["arrowHead", "arrowHead", "dot", "dot", "none"]; + // private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"]; + // private _arrowIcons = ["→", "↔︎", "•", "••", " "]; + private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"]; + private _head = ["none", "arrowHead", "arrowHead", "none", "arrowHead", "arrowHead", "none", "none", "none"]; + private _end = ["none", "none", "arrowEnd", "none", "none", "arrowEnd", "none", "none", "none"]; + private _shape = ["", "", "", "", "", "", "rectangle", "circle", "triangle"]; + + @observable _shapesNum = this._shape.length; + @observable _selected = this._shapesNum; + + @observable private collapsed: boolean = false; @observable _colorBtn = false; @observable _widthBtn = false; @observable _fillBtn = false; - @observable _arrowBtn = false; - @observable _dashBtn = false; - @observable _shapeBtn = false; + // @observable _arrowBtn = false; + // @observable _dashBtn = false; + // @observable _shapeBtn = false; constructor(props: Readonly<{}>) { super(props); InkOptionsMenu.Instance = this; this._canFade = false; // don't let the inking menu fade away + this.Pinned = BoolCast(Doc.UserDoc()["inkOptionsMenu-pinned"]); + } - getColors = () => { - return this._palette; + @action + toggleMenuPin = (e: React.MouseEvent) => { + Doc.UserDoc()["inkOptionsMenu-pinned"] = this.Pinned = !this.Pinned; + if (!this.Pinned) { + // this.fadeOut(true); + } } @action - changeArrow = (arrowStart: string, arrowEnd: string) => { - SetActiveArrowStart(arrowStart); - SetActiveArrowEnd(arrowEnd); + protected toggleCollapse = (e: React.MouseEvent) => { + this.collapsed = !this.collapsed; + setTimeout(() => { + const x = Math.min(this._left, window.innerWidth - InkOptionsMenu.Instance.width); + InkOptionsMenu.Instance.jumpTo(x, this._top, true); + }, 0); + } + + + + + getColors = () => { + return this._palette; } + // @action + // changeArrow = (arrowStart: string, arrowEnd: string) => { + // SetActiveArrowStart(arrowStart); + // SetActiveArrowEnd(arrowEnd); + // } + @action changeColor = (color: string, type: string) => { const col: ColorState = { @@ -116,40 +148,77 @@ export default class InkOptionsMenu extends AntimodeMenu { this.editProperties(ActiveDash(), "dash"); } - @computed get arrowPicker() { - var currIcon; - for (var i = 0; i < this._arrowStart.length; i++) { - if (this._arrowStart[i] === ActiveArrowStart() && this._arrowEnd[i] === ActiveArrowEnd()) { - currIcon = this._arrowIcons[i]; - if (this._arrowIcons[i] === " ") { - currIcon = "➤"; - } - } - } - var arrowPicker = ; - if (this._arrowBtn) { - arrowPicker =
- {arrowPicker} - {this._arrowStart.map((arrowStart, i) => { - return ; - })} -
; - } - return arrowPicker; + @computed get drawButtons() { + const drawButtons =
+ {this._draw.map((icon, i) => { + return ; + })}
; + return drawButtons; } + // @computed get arrowPicker() { + // var currIcon; + // for (var i = 0; i < this._arrowStart.length; i++) { + // if (this._arrowStart[i] === ActiveArrowStart() && this._arrowEnd[i] === ActiveArrowEnd()) { + // currIcon = this._arrowIcons[i]; + // if (this._arrowIcons[i] === " ") { + // currIcon = "➤"; + // } + // } + // } + // var arrowPicker = ; + // if (this._arrowBtn) { + // arrowPicker =
+ // {arrowPicker} + // {this._arrowStart.map((arrowStart, i) => { + // return ; + // })} + //
; + // } + // return arrowPicker; + // } + @computed get widthPicker() { var widthPicker = ; - if (this._shapeBtn) { - shapePicker =
- {shapePicker} - {this._buttons.map((btn, i) => { - var ttl = btn; - if (btn === "") { - ttl = "no shape"; - } - if (btn === "noRec") { - ttl = "disable shape recognition"; - } - return ; - })} -
; - } - return shapePicker; - } + // @computed get shapePicker() { + // var currIcon; + // if (GestureOverlay.Instance.InkShape === "") { + // currIcon = ; + // } else { + // for (var i = 0; i < this._icons.length; i++) { + // if (GestureOverlay.Instance.InkShape === this._buttons[i]) { + // currIcon = this._icons[i]; + // } + // } + // } + // var shapePicker = ; + // if (this._shapeBtn) { + // shapePicker =
+ // {shapePicker} + // {this._buttons.map((btn, i) => { + // var ttl = btn; + // if (btn === "") { + // ttl = "no shape"; + // } + // if (btn === "noRec") { + // ttl = "disable shape recognition"; + // } + // return ; + // })} + //
; + // } + // return shapePicker; + // } @computed get bezierButton() { return , - this.shapePicker, - this.bezierButton, + // this.shapePicker, + // this.bezierButton, this.widthPicker, this.colorPicker, this.fillPicker, - this.arrowPicker, - this.dashButton, + this.drawButtons, + // this.arrowPicker, + // this.dashButton, + + ]; + + // return this.getElement(buttons); return this.getElement(buttons); } } Scripting.addGlobal(function activatePen(penBtn: any) { if (penBtn) { - Doc.SetSelectedTool(InkTool.Pen); + //no longer changes to inkmode + // Doc.SetSelectedTool(InkTool.Pen); InkOptionsMenu.Instance.jumpTo(300, 300); + InkOptionsMenu.Instance.Pinned = true; + } else { - Doc.SetSelectedTool(InkTool.None); + // Doc.SetSelectedTool(InkTool.None); + InkOptionsMenu.Instance.Pinned = false; InkOptionsMenu.Instance.fadeOut(true); + } }); \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 3beca8e7d268dc7b67b20b2c8760ea5e4b6fdb88 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 8 Jul 2020 18:59:37 -0500 Subject: added dashDragging event --- src/client/util/DragManager.ts | 48 ++++++++++++++++++++++ .../collectionFreeForm/CollectionFreeFormView.tsx | 15 +++++++ src/client/views/nodes/DocumentLinksButton.tsx | 2 +- 3 files changed, 64 insertions(+), 1 deletion(-) (limited to 'src/client/views/collections') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 2ceafff30..64c3d8458 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -427,6 +427,54 @@ export namespace DragManager { }, dragData.droppedDocuments); } + const target = document.elementFromPoint(e.x, e.y); + + const complete = new DragCompleteEvent(false, dragData); + + if (target) { + target.dispatchEvent( + new CustomEvent("dashDragging", { + bubbles: true, + detail: { + shiftKey: e.shiftKey, + altKey: e.altKey, + metaKey: e.metaKey, + ctrlKey: e.ctrlKey, + clientX: e.clientX, + clientY: e.clientY, + dataTransfer: new DataTransfer, + button: e.button, + buttons: e.buttons, + getModifierState: e.getModifierState, + movementX: e.movementX, + movementY: e.movementY, + pageX: e.pageX, + pageY: e.pageY, + relatedTarget: e.relatedTarget, + screenX: e.screenX, + screenY: e.screenY, + detail: e.detail, + view: e.view ? e.view : new Window, + nativeEvent: new DragEvent("dashDragging"), + currentTarget: target, + target: target, + bubbles: true, + cancelable: true, + defaultPrevented: true, + eventPhase: e.eventPhase, + isTrusted: true, + preventDefault: e.preventDefault, + isDefaultPrevented: () => true, + stopPropagation: e.stopPropagation, + isPropagationStopped: () => true, + persist: emptyFunction, + timeStamp: e.timeStamp, + type: "dashDragging" + } + }) + ); + } + const { thisX, thisY } = snapDrag(e, xFromLeft, yFromTop, xFromRight, yFromBottom); const moveX = thisX - lastX; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 9bf425db2..5a762a85c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1143,10 +1143,19 @@ export class CollectionFreeFormView extends CollectionSubView this.doLayoutComputation, (elements) => this._layoutElements = elements || [], { fireImmediately: true, name: "doLayout" }); + + const handler = (e: Event) => this.handleDragging(e, (e as CustomEvent).detail); + + document.addEventListener("dashDragging", handler); } + componentWillUnmount() { this._layoutComputeReaction?.(); + + const handler = (e: Event) => this.handleDragging(e, (e as CustomEvent).detail); + document.removeEventListener("dashDragging", handler); } + @computed get views() { return this._layoutElements.filter(ele => ele.bounds && !ele.bounds.z).map(ele => ele.ele); } elementFunc = () => this._layoutElements; @@ -1155,6 +1164,12 @@ export class CollectionFreeFormView extends CollectionSubView { + console.log(de.clientX); + console.log(de.clientX); + } + promoteCollection = undoBatch(action(() => { const childDocs = this.childDocs.slice(); childDocs.forEach(doc => { diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 7fb447cab..44e72215d 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -152,7 +152,7 @@ export class DocumentLinksButton extends React.Component
Date: Thu, 9 Jul 2020 01:54:29 -0500 Subject: started dragging pans screen (needs cleaning) --- src/client/util/LinkManager.ts | 2 + .../collectionFreeForm/CollectionFreeFormView.tsx | 105 ++++++++++++++++++--- 2 files changed, 96 insertions(+), 11 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts index 6da581f35..50f3fc1d6 100644 --- a/src/client/util/LinkManager.ts +++ b/src/client/util/LinkManager.ts @@ -3,6 +3,7 @@ import { List } from "../../fields/List"; import { listSpec } from "../../fields/Schema"; import { Cast, StrCast } from "../../fields/Types"; import { Scripting } from "./Scripting"; +import { undoBatch } from "./UndoManager"; /* * link doc: @@ -52,6 +53,7 @@ export class LinkManager { return false; } + @undoBatch public deleteLink(linkDoc: Doc): boolean { if (LinkManager.Instance.LinkManagerDoc && linkDoc instanceof Doc) { Doc.RemoveDocFromList(LinkManager.Instance.LinkManagerDoc, "data", linkDoc); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 5a762a85c..a3d3a210d 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -101,6 +101,10 @@ export class CollectionFreeFormView extends CollectionSubView(); + @observable _marqueeRef = React.createRef(); + @observable canPanX: boolean = true; + @observable canPanY: boolean = true; + @computed get fitToContentScaling() { return this.fitToContent ? NumCast(this.layoutDoc.fitToContentScaling, 1) : 1; } @computed get fitToContent() { return (this.props.fitToBox || this.Document._fitToBox) && !this.isAnnotationOverlay; } @computed get parentScaling() { return this.props.ContentScaling && this.fitToContent && !this.isAnnotationOverlay ? this.props.ContentScaling() : 1; } @@ -1164,10 +1168,87 @@ export class CollectionFreeFormView extends CollectionSubView + @action handleDragging = (e: Event, de: DragEvent) => { - console.log(de.clientX); - console.log(de.clientX); + + const nw = NumCast(this.Document._nativeWidth, this.props.NativeWidth()); + const nh = NumCast(this.Document._nativeHeight, this.props.NativeHeight()); + const hscale = nh ? this.props.PanelHeight() / nh : 1; + const wscale = nw ? this.props.PanelWidth() / nw : 1; + + if (this._marqueeRef) { + if (this._marqueeRef.current) { + + // console.log("left: " + this._marqueeRef.current.clientLeft); + // console.log("width: " + this._marqueeRef.current.clientWidth); + // console.log("client x: " + de.clientX); + + // console.log("top: " + this._marqueeRef.current.clientTop); + // console.log("height: " + this._marqueeRef.current.clientHeight); + // console.log("client y: " + de.clientY); + + + if (this._marqueeRef.current.clientWidth > 0) { + if (de.clientX - 315 - this._marqueeRef.current.clientLeft < 25) { + console.log("PAN left "); + if (this.canPanX) { + this.Document._panX = de.clientX - 20 - this._marqueeRef.current.clientLeft; + setTimeout(action(() => { + this.canPanX = true; + this.panX(); + }), 2500); + this.canPanX = false; + } + } else if (de.clientX - 315 - this._marqueeRef.current.clientLeft - + this._marqueeRef.current.clientWidth < 25) { + console.log("PAN right "); + if (this.canPanX) { + this.Document._panX = de.clientX - 315 - this._marqueeRef.current.clientLeft - + this._marqueeRef.current.clientWidth; + + setTimeout(action(() => { + this.panX(); + this.canPanX = true; + }), 2500); + this.canPanX = false; + } + + } + } + + if (this._marqueeRef.current.clientHeight > 0) { + if (de.clientY - 120 - this._marqueeRef.current.clientTop < 25) { + console.log("PAN top "); + if (this.canPanY) { + this.Document._panY = de.clientY - 20 - this._marqueeRef.current.clientTop; + setTimeout(action(() => { + this.canPanY = true; + this.panY(); + }), 2500); + this.canPanY = false; + } + } else if (de.clientY - 120 - this._marqueeRef.current.clientTop - + this._marqueeRef.current.clientHeight < 25) { + console.log("PAN bottom "); + if (this.canPanY) { + this.Document._panY = de.clientY - 120 - this._marqueeRef.current.clientTop - + this._marqueeRef.current.clientHeight; + + setTimeout(action(() => { + this.panY(); + this.canPanY = true; + }), 2500); + this.canPanY = false; + } + + } + + } + } + } } promoteCollection = undoBatch(action(() => { @@ -1351,7 +1432,8 @@ export class CollectionFreeFormView extends CollectionSubView - - {this.children} - +
+ + {this.children} +
{this.showTimeline ? : (null)} ; } -- cgit v1.2.3-70-g09d2 From 58865aa5f27fa4a23af3a589bfc45868c7a77151 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 9 Jul 2020 11:31:04 -0400 Subject: fixed issues with frame based animations for annotations on images,etc. --- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 6 +++--- src/client/views/presentationview/PresElementBox.tsx | 4 +++- 3 files changed, 7 insertions(+), 5 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 9bf425db2..60c9d7f4a 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1065,7 +1065,7 @@ export class CollectionFreeFormView extends CollectionSubView) { const layoutDocs = this.childLayoutPairs.map(pair => pair.layout); - const initResult = this.Document.arrangeInit && this.Document.arrangeInit.script.run({ docs: layoutDocs, collection: this.Document }, console.log); + const initResult = this.Document.arrangeInit?.script.run({ docs: layoutDocs, collection: this.Document }, console.log); const state = initResult?.success ? initResult.result.scriptState : undefined; const elements = initResult?.success ? this.viewDefsToJSX(initResult.result.views) : []; diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index a3020f912..d79e2c9ff 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -73,9 +73,9 @@ export class CollectionFreeFormDocumentView extends DocComponent (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number), - y: Cast(doc["y-indexed"], listSpec("number"), []).reduce((p, y, i) => (i <= timecode && y !== undefined) || p === undefined ? y : p, undefined as any as number), - opacity: Cast(doc["opacity-indexed"], listSpec("number"), []).reduce((p, o, i) => i <= timecode || p === undefined ? o : p, undefined as any as number), + x: Cast(doc["x-indexed"], listSpec("number"), [NumCast(doc.x)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number), + y: Cast(doc["y-indexed"], listSpec("number"), [NumCast(doc.y)]).reduce((p, y, i) => (i <= timecode && y !== undefined) || p === undefined ? y : p, undefined as any as number), + opacity: Cast(doc["opacity-indexed"], listSpec("number"), [NumCast(doc.opacity, 1)]).reduce((p, o, i) => i <= timecode || p === undefined ? o : p, undefined as any as number), }); } diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 6fd3455b6..4c0972736 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -15,6 +15,7 @@ import { FieldView, FieldViewProps } from '../nodes/FieldView'; import "./PresElementBox.scss"; import React = require("react"); import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; +import { DocumentType } from "../../documents/DocumentTypes"; export const presSchema = createSchema({ presentationTargetDoc: Doc, @@ -100,7 +101,8 @@ export class PresElementBox extends ViewBoxBaseComponent Date: Thu, 9 Jul 2020 11:36:48 -0400 Subject: from last --- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 60c9d7f4a..d9aabd7c2 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -205,7 +205,7 @@ export class CollectionFreeFormView extends CollectionSubView Date: Thu, 9 Jul 2020 11:52:05 -0400 Subject: fixed observing docking view golden layout window size changes. --- src/client/views/collections/CollectionDockingView.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 79c577b6d..f408e24a8 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -390,6 +390,12 @@ export class CollectionDockingView extends React.Component void = () => { if (this._containerRef.current) { + const observer = new _global.ResizeObserver(action((entries: any) => { + for (const entry of entries) { + this.onResize(null as any); + } + })); + observer.observe(this._containerRef.current); this.reactionDisposer = reaction( () => this.props.Document.dockingConfig, () => { @@ -646,16 +652,8 @@ export class CollectionDockingView extends React.Component 0) { return
Nested workspaces can't be rendered
; } - return ( - - {({ measureRef }) => -
- - } - - ); + return