From d236da11dcd635440eecb897a195df8ade4ca7b0 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 4 Jul 2019 18:20:54 -0400 Subject: added dropping and reordering within Stacking views. needs GUI feedback. --- .../views/collections/CollectionStackingView.tsx | 58 +++++++++++++++++++++- 1 file changed, 57 insertions(+), 1 deletion(-) (limited to 'src/client/views/collections/CollectionStackingView.tsx') diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index b10907937..6b4eddec9 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -11,6 +11,8 @@ import { CollectionSchemaPreview } from "./CollectionSchemaView"; import "./CollectionStackingView.scss"; import { CollectionSubView } from "./CollectionSubView"; import { resolve } from "bluebird"; +import { undoBatch } from "../../util/UndoManager"; +import { DragManager } from "../../util/DragManager"; @observer export class CollectionStackingView extends CollectionSubView(doc => doc) { @@ -96,8 +98,10 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { ; }); } + docXfs: any[] = [] @computed get children() { + this.docXfs.length = 0; return this.childDocs.filter(d => !d.isMinimized).map((d, i) => { let aspect = d.nativeHeight ? NumCast(d.nativeWidth) / NumCast(d.nativeHeight) : undefined; let dref = React.createRef(); @@ -105,6 +109,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { let width = () => d.nativeWidth ? Math.min(d[WidthSym](), this.columnWidth) : this.columnWidth; let height = () => aspect ? width() / aspect : d[HeightSym](); let rowSpan = Math.ceil((height() + this.gridGap) / (this._gridSize + this.gridGap)); + this.docXfs.push({ dxf: dxf, width: width, height: height }); return (
doc) { }); } } + + @undoBatch + @action + drop = (e: Event, de: DragManager.DropEvent) => { + let targInd = -1; + let where = [de.x, de.y]; + if (de.data instanceof DragManager.DocumentDragData) { + this.docXfs.map((cd, i) => { + let pos = cd.dxf().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap); + let pos1 = cd.dxf().inverse().transformPoint(cd.width(), cd.height()); + if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && where[1] < pos1[1]) { + targInd = i; + } + }) + } + if (super.drop(e, de)) { + if (targInd !== -1) { + let newDoc = de.data.droppedDocuments[0]; + let docs = this.childDocList; + if (docs) { + let srcInd = docs.indexOf(newDoc); + docs.splice(srcInd, 1); + docs.splice(targInd > srcInd ? targInd - 1 : targInd, 0, newDoc); + } + } + } + return false; + } + @undoBatch + @action + onDrop = (e: React.DragEvent): void => { + let where = [e.clientX, e.clientY]; + let targInd = -1; + this.docXfs.map((cd, i) => { + let pos = cd.dxf().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap); + let pos1 = cd.dxf().inverse().transformPoint(cd.width(), cd.height()); + if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && where[1] < pos1[1]) { + targInd = i; + } + }) + super.onDrop(e, {}, () => { + if (targInd !== -1) { + let newDoc = this.childDocs[this.childDocs.length - 1]; + let docs = this.childDocList; + if (docs) { + docs.splice(docs.length - 1, 1); + docs.splice(targInd, 0, newDoc); + } + } + }); + } render() { let cols = this.singleColumn ? 1 : Math.max(1, Math.min(this.childDocs.filter(d => !d.isMinimized).length, Math.floor((this.props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap)))); let templatecols = ""; for (let i = 0; i < cols; i++) templatecols += `${this.columnWidth}px `; return ( -
e.stopPropagation()} > +
e.stopPropagation()} >
Date: Sat, 6 Jul 2019 00:30:52 -0400 Subject: don't understand what could be happening.. --- src/client/views/DocumentDecorations.tsx | 6 ++-- src/client/views/MainView.tsx | 39 ++++++++++++++++------ .../views/collections/CollectionStackingView.tsx | 8 ++--- src/client/views/nodes/DocumentView.tsx | 4 +-- src/new_fields/util.ts | 2 +- .../authentication/models/current_user_utils.ts | 10 +++++- 6 files changed, 48 insertions(+), 21 deletions(-) (limited to 'src/client/views/collections/CollectionStackingView.tsx') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index c7990647a..e565566c7 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -536,8 +536,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> let scale = element.props.ScreenToLocalTransform().Scale * element.props.ContentScaling(); let actualdW = Math.max(width + (dW * scale), 20); let actualdH = Math.max(height + (dH * scale), 20); - doc.x = (doc.x || 0) + dX * (actualdW - width); - doc.y = (doc.y || 0) + dY * (actualdH - height); + // doc.x = (doc.x || 0) + dX * (actualdW - width); + // doc.y = (doc.y || 0) + dY * (actualdH - height); let proto = Doc.GetProto(element.props.Document); let fixedAspect = e.ctrlKey || (!BoolCast(proto.ignoreAspect, false) && nwidth && nheight); if (fixedAspect && (!nwidth || !nheight)) { @@ -567,7 +567,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> } else { dW && (doc.width = actualdW); dH && (doc.height = actualdH); - Doc.SetInPlace(element.props.Document, "autoHeight", undefined, true); + //Doc.SetInPlace(element.props.Document, "autoHeight", undefined, true); } } }); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 82b17f142..f9a5b2bb7 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -1,7 +1,7 @@ import { IconName, library } from '@fortawesome/fontawesome-svg-core'; import { faArrowDown, faArrowUp, faBell, faCheck, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup, faPenNib, faRedoAlt, faTable, faThumbtack, faTree, faUndoAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, configure, observable, runInAction } from 'mobx'; +import { action, computed, configure, observable, runInAction, reaction } from 'mobx'; import { observer } from 'mobx-react'; import "normalize.css"; import * as React from 'react'; @@ -72,6 +72,31 @@ export class MainView extends React.Component { window.removeEventListener("pointerup", this.pointerUp); window.addEventListener("pointerup", this.pointerUp); + + reaction(() => { + let workspaces = CurrentUserUtils.UserDocument.workspaces; + let recent = CurrentUserUtils.UserDocument.recentlyClosed; + let fakeLibrary = CurrentUserUtils.UserDocument.fakeLibrary; + if (!(recent instanceof Doc)) return 0; + if (!(workspaces instanceof Doc)) return 0; + if (!(fakeLibrary instanceof Doc)) return 0; + let workspacesDoc = workspaces; + let recentDoc = recent; + let fakeLibraryDoc = fakeLibrary; + // console.log("pheight = " + this.getPHeight() + " " + workspacesDoc[HeightSym]() + " " + recentDoc[HeightSym]()); + let libraryHeight = this.getPHeight() - workspacesDoc[HeightSym]() - recentDoc[HeightSym](); + return libraryHeight; + }, (libraryHeight: number) => { + let fakeLibrary = CurrentUserUtils.UserDocument.fakeLibrary; + let cuser: Doc = fakeLibrary as Doc;//CurrentUserUtils.UserDocument; + console.log("BEFORE:" + cuser.title + ".height =" + cuser[HeightSym]() + "& .plight = " + cuser.plight); + if (libraryHeight && Math.abs(cuser[HeightSym]() - libraryHeight) > 5) { + console.log("ASSIGN to height & plight:" + libraryHeight); + cuser.height = libraryHeight; + cuser.plight = libraryHeight; + } + console.log("AFTER:" + cuser.title + ".height =" + cuser[HeightSym]() + "& .plight= " + cuser.plight); + }, { fireImmediately: true }); } pointerDown = (e: PointerEvent) => this.isPointerDown = true; @@ -285,24 +310,18 @@ export class MainView extends React.Component { CollectionDockingView.Instance.AddRightSplit(doc, undefined); } }; + computing = false; @computed get flyout() { let sidebar = CurrentUserUtils.UserDocument.sidebar; let workspaces = CurrentUserUtils.UserDocument.workspaces; let recent = CurrentUserUtils.UserDocument.recentlyClosed; + let fakeLibrary = CurrentUserUtils.UserDocument.fakeLibrary; if (!(sidebar instanceof Doc)) return (null); if (!(recent instanceof Doc)) return (null); if (!(workspaces instanceof Doc)) return (null); - let workspacesDoc = workspaces; + if (!(fakeLibrary instanceof Doc)) return (null); let sidebarDoc = sidebar; - let recentDoc = recent; - let library = CurrentUserUtils.UserDocument; - let gridGap = NumCast(sidebar.gridGap, 10); - let yMargin = NumCast(sidebar.yMargin, 2 * gridGap); - let libraryHeight = this.getPHeight() - workspacesDoc[HeightSym]() - recentDoc[HeightSym]() - 2 * gridGap - 2 * yMargin; - if (Math.abs(library[HeightSym]() - libraryHeight) > 25) { - setTimeout(() => CurrentUserUtils.UserDocument.height = libraryHeight, 0); - } return doc) { () => { if (this.singleColumn) { let children = this.childDocs.filter(d => !d.isMinimized); - this.props.Document.height = children.reduce((height, d, i) => - height + this.singleColDocHeight(d) + (i === children.length - 1 ? this.yMargin : this.gridGap) - , this.yMargin); + let hgtbefore = this.props.Document.height; + // this.props.Document.height = children.reduce((height, d, i) => + // height + this.singleColDocHeight(d) + (i === children.length - 1 ? this.yMargin : this.gridGap) + // , this.yMargin); } }, { fireImmediately: true }); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index a84cac37f..8ecc77946 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -564,8 +564,8 @@ export class DocumentView extends DocComponent(Docu }); } - onPointerEnter = (e: React.PointerEvent): void => { this.props.Document.libraryBrush = true; }; - onPointerLeave = (e: React.PointerEvent): void => { this.props.Document.libraryBrush = false; }; + onPointerEnter = (e: React.PointerEvent): void => { }//this.props.Document.libraryBrush = true; }; + onPointerLeave = (e: React.PointerEvent): void => { }//this.props.Document.libraryBrush = false; }; isSelected = () => SelectionManager.IsSelected(this); @action select = (ctrlPressed: boolean) => { SelectionManager.SelectDoc(this, ctrlPressed); }; diff --git a/src/new_fields/util.ts b/src/new_fields/util.ts index abb777adf..c7bcdca34 100644 --- a/src/new_fields/util.ts +++ b/src/new_fields/util.ts @@ -2,7 +2,6 @@ import { UndoManager } from "../client/util/UndoManager"; import { Doc, Field } from "./Doc"; import { SerializationHelper } from "../client/util/SerializationHelper"; import { ProxyField } from "./Proxy"; -import { FieldValue } from "./Types"; import { RefField } from "./RefField"; import { ObjectField } from "./ObjectField"; import { action } from "mobx"; @@ -13,6 +12,7 @@ function _readOnlySetter(): never { throw new Error("Documents can't be modified in read-only mode"); } const _setterImpl = action(function (target: any, prop: string | symbol | number, value: any, receiver: any): boolean { + console.log("-set " + target[SelfProxy].title + "(" + target[SelfProxy][prop] + ")." + prop.toString() + " = " + value); if (SerializationHelper.IsSerializing()) { target[prop] = value; return true; diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index 30a6f108a..3e7b407a8 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -34,6 +34,9 @@ export class CurrentUserUtils { doc.title = this.email; this.updateUserDocument(doc); doc.data = new List(); + doc.gridGap = 5; + doc.xMargin = 5; + doc.yMargin = 5; doc.excludeFromLibrary = true; doc.optionalRightCollection = Docs.StackingDocument([], { title: "New mobile uploads" }); // doc.library = Docs.TreeDocument([doc], { title: `Library: ${CurrentUserUtils.email}` }); @@ -53,8 +56,13 @@ export class CurrentUserUtils { recentlyClosed.excludeFromLibrary = true; doc.recentlyClosed = recentlyClosed; } + if (doc.fakeLibrary === undefined) { + const recentlyClosed = Docs.TreeDocument([], { title: "Fake Library", height: 200 }); + recentlyClosed.excludeFromLibrary = true; + doc.fakeLibrary = recentlyClosed; + } if (doc.sidebar === undefined) { - const sidebar = Docs.StackingDocument([doc.workspaces as Doc, doc, doc.recentlyClosed as Doc], { title: "Sidebar" }); + const sidebar = Docs.StackingDocument([doc.workspaces as Doc, doc.fakeLibrary as Doc, doc.recentlyClosed as Doc], { title: "Sidebar" }); sidebar.excludeFromLibrary = true; sidebar.gridGap = 5; sidebar.xMargin = 5; -- cgit v1.2.3-70-g09d2 From d07b56aec1b1698d8a49283aade3c12c82ae1d0b Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sat, 6 Jul 2019 02:36:54 -0400 Subject: fixed sidebar problems with doc decorations. --- src/client/views/DocumentDecorations.tsx | 6 +++--- src/client/views/MainView.tsx | 25 ++++------------------ .../views/collections/CollectionStackingView.tsx | 21 +++++++++--------- src/client/views/nodes/DocumentView.tsx | 4 ++-- src/new_fields/util.ts | 2 +- .../authentication/models/current_user_utils.ts | 7 +----- 6 files changed, 21 insertions(+), 44 deletions(-) (limited to 'src/client/views/collections/CollectionStackingView.tsx') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index e565566c7..c7990647a 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -536,8 +536,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> let scale = element.props.ScreenToLocalTransform().Scale * element.props.ContentScaling(); let actualdW = Math.max(width + (dW * scale), 20); let actualdH = Math.max(height + (dH * scale), 20); - // doc.x = (doc.x || 0) + dX * (actualdW - width); - // doc.y = (doc.y || 0) + dY * (actualdH - height); + doc.x = (doc.x || 0) + dX * (actualdW - width); + doc.y = (doc.y || 0) + dY * (actualdH - height); let proto = Doc.GetProto(element.props.Document); let fixedAspect = e.ctrlKey || (!BoolCast(proto.ignoreAspect, false) && nwidth && nheight); if (fixedAspect && (!nwidth || !nheight)) { @@ -567,7 +567,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> } else { dW && (doc.width = actualdW); dH && (doc.height = actualdH); - //Doc.SetInPlace(element.props.Document, "autoHeight", undefined, true); + Doc.SetInPlace(element.props.Document, "autoHeight", undefined, true); } } }); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f9a5b2bb7..8e5bb3615 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -1,7 +1,7 @@ import { IconName, library } from '@fortawesome/fontawesome-svg-core'; import { faArrowDown, faArrowUp, faBell, faCheck, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup, faPenNib, faRedoAlt, faTable, faThumbtack, faTree, faUndoAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, configure, observable, runInAction, reaction } from 'mobx'; +import { action, computed, configure, observable, runInAction, reaction, trace } from 'mobx'; import { observer } from 'mobx-react'; import "normalize.css"; import * as React from 'react'; @@ -76,26 +76,16 @@ export class MainView extends React.Component { reaction(() => { let workspaces = CurrentUserUtils.UserDocument.workspaces; let recent = CurrentUserUtils.UserDocument.recentlyClosed; - let fakeLibrary = CurrentUserUtils.UserDocument.fakeLibrary; if (!(recent instanceof Doc)) return 0; if (!(workspaces instanceof Doc)) return 0; - if (!(fakeLibrary instanceof Doc)) return 0; let workspacesDoc = workspaces; let recentDoc = recent; - let fakeLibraryDoc = fakeLibrary; - // console.log("pheight = " + this.getPHeight() + " " + workspacesDoc[HeightSym]() + " " + recentDoc[HeightSym]()); - let libraryHeight = this.getPHeight() - workspacesDoc[HeightSym]() - recentDoc[HeightSym](); + let libraryHeight = this.getPHeight() - workspacesDoc[HeightSym]() - recentDoc[HeightSym]() + CurrentUserUtils.UserDocument[HeightSym]() * 0.00001; return libraryHeight; }, (libraryHeight: number) => { - let fakeLibrary = CurrentUserUtils.UserDocument.fakeLibrary; - let cuser: Doc = fakeLibrary as Doc;//CurrentUserUtils.UserDocument; - console.log("BEFORE:" + cuser.title + ".height =" + cuser[HeightSym]() + "& .plight = " + cuser.plight); - if (libraryHeight && Math.abs(cuser[HeightSym]() - libraryHeight) > 5) { - console.log("ASSIGN to height & plight:" + libraryHeight); - cuser.height = libraryHeight; - cuser.plight = libraryHeight; + if (libraryHeight && Math.abs(CurrentUserUtils.UserDocument[HeightSym]() - libraryHeight) > 5) { + CurrentUserUtils.UserDocument.height = libraryHeight; } - console.log("AFTER:" + cuser.title + ".height =" + cuser[HeightSym]() + "& .plight= " + cuser.plight); }, { fireImmediately: true }); } @@ -310,17 +300,10 @@ export class MainView extends React.Component { CollectionDockingView.Instance.AddRightSplit(doc, undefined); } }; - computing = false; @computed get flyout() { let sidebar = CurrentUserUtils.UserDocument.sidebar; - let workspaces = CurrentUserUtils.UserDocument.workspaces; - let recent = CurrentUserUtils.UserDocument.recentlyClosed; - let fakeLibrary = CurrentUserUtils.UserDocument.fakeLibrary; if (!(sidebar instanceof Doc)) return (null); - if (!(recent instanceof Doc)) return (null); - if (!(workspaces instanceof Doc)) return (null); - if (!(fakeLibrary instanceof Doc)) return (null); let sidebarDoc = sidebar; return doc) { () => { if (this.singleColumn) { let children = this.childDocs.filter(d => !d.isMinimized); - let hgtbefore = this.props.Document.height; - // this.props.Document.height = children.reduce((height, d, i) => - // height + this.singleColDocHeight(d) + (i === children.length - 1 ? this.yMargin : this.gridGap) - // , this.yMargin); + this.props.Document.height = children.reduce((height, d, i) => + height + this.singleColDocHeight(d) + (i === children.length - 1 ? this.yMargin : this.gridGap) + , this.yMargin); } }, { fireImmediately: true }); } @@ -54,10 +53,12 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { addDocument(doc); return true; } - getDocTransform(doc: Doc, dref: HTMLDivElement) { - let { scale, translateX, translateY } = Utils.GetScreenTransform(dref); + getDocTransform(doc: Doc, ind: number, width: number) { + let localY = this.childDocs.filter(d => !d.isMinimized).reduce((height, d, i) => + height + (i < ind ? this.singleColDocHeight(d) + this.gridGap : 0), this.yMargin); + let translate = this.props.ScreenToLocalTransform().inverse().transformPoint((this.props.PanelWidth() - width) / 2, localY); let outerXf = Utils.GetScreenTransform(this._masonryGridRef!); - let offset = this.props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY); + let offset = this.props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translate[0], outerXf.translateY - translate[1]); return this.props.ScreenToLocalTransform().translate(offset[0], offset[1]).scale(NumCast(doc.width, 1) / this.columnWidth); } createRef = (ele: HTMLDivElement | null) => { @@ -70,13 +71,11 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { let children = this.childDocs.filter(d => !d.isMinimized); return children.map((d, i) => { let layoutDoc = Doc.expandTemplateLayout(d, this.props.DataDoc); - let dref = React.createRef(); - let dxf = () => this.getDocTransform(layoutDoc, dref.current!).scale(this.columnWidth / d[WidthSym]()); let width = () => d.nativeWidth ? Math.min(d[WidthSym](), this.columnWidth) : this.columnWidth; let height = () => this.singleColDocHeight(layoutDoc); + let dxf = () => this.getDocTransform(layoutDoc, i, width()).scale(this.columnWidth / d[WidthSym]()); return
(Docu }); } - onPointerEnter = (e: React.PointerEvent): void => { }//this.props.Document.libraryBrush = true; }; - onPointerLeave = (e: React.PointerEvent): void => { }//this.props.Document.libraryBrush = false; }; + onPointerEnter = (e: React.PointerEvent): void => { this.props.Document.libraryBrush = true; }; + onPointerLeave = (e: React.PointerEvent): void => { this.props.Document.libraryBrush = false; }; isSelected = () => SelectionManager.IsSelected(this); @action select = (ctrlPressed: boolean) => { SelectionManager.SelectDoc(this, ctrlPressed); }; diff --git a/src/new_fields/util.ts b/src/new_fields/util.ts index c7bcdca34..b5e50d501 100644 --- a/src/new_fields/util.ts +++ b/src/new_fields/util.ts @@ -12,7 +12,7 @@ function _readOnlySetter(): never { throw new Error("Documents can't be modified in read-only mode"); } const _setterImpl = action(function (target: any, prop: string | symbol | number, value: any, receiver: any): boolean { - console.log("-set " + target[SelfProxy].title + "(" + target[SelfProxy][prop] + ")." + prop.toString() + " = " + value); + //console.log("-set " + target[SelfProxy].title + "(" + target[SelfProxy][prop] + ")." + prop.toString() + " = " + value); if (SerializationHelper.IsSerializing()) { target[prop] = value; return true; diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index 3e7b407a8..e328d6e5c 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -56,13 +56,8 @@ export class CurrentUserUtils { recentlyClosed.excludeFromLibrary = true; doc.recentlyClosed = recentlyClosed; } - if (doc.fakeLibrary === undefined) { - const recentlyClosed = Docs.TreeDocument([], { title: "Fake Library", height: 200 }); - recentlyClosed.excludeFromLibrary = true; - doc.fakeLibrary = recentlyClosed; - } if (doc.sidebar === undefined) { - const sidebar = Docs.StackingDocument([doc.workspaces as Doc, doc.fakeLibrary as Doc, doc.recentlyClosed as Doc], { title: "Sidebar" }); + const sidebar = Docs.StackingDocument([doc.workspaces as Doc, doc, doc.recentlyClosed as Doc], { title: "Sidebar" }); sidebar.excludeFromLibrary = true; sidebar.gridGap = 5; sidebar.xMargin = 5; -- cgit v1.2.3-70-g09d2 From 21129629b2b8e74b294f3a9118df761e220eec5e Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sat, 6 Jul 2019 18:42:47 -0400 Subject: fixed multi-column stackingviews. improved layout of stackingview when it has a title --- src/client/views/collections/CollectionStackingView.scss | 14 ++++++++++++-- src/client/views/collections/CollectionStackingView.tsx | 15 +++++++++++---- 2 files changed, 23 insertions(+), 6 deletions(-) (limited to 'src/client/views/collections/CollectionStackingView.tsx') diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 034a09eaa..bc733f152 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -16,7 +16,7 @@ align-items: center; } - .collectionStackingView-masonrySingle, .collectionStackingView-masonryGrid{ + .collectionStackingView-masonrySingle, .collectionStackingView-masonryGrid { width:100%; height:100%; position: absolute; @@ -25,7 +25,17 @@ left: 0; width: 100%; position: absolute; - + } + .collectionStackingView-masonrySingle { + width:100%; + height:100%; + position: absolute; + display:flex; + flex-direction: column; + top: 0; + left: 0; + width: 100%; + position: absolute; } .collectionStackingView-description { diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index b0fd865c6..578791bc8 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -53,7 +53,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { addDocument(doc); return true; } - getDocTransform(doc: Doc, ind: number, width: number) { + getSingleDocTransform(doc: Doc, ind: number, width: number) { let localY = this.childDocs.filter(d => !d.isMinimized).reduce((height, d, i) => height + (i < ind ? this.singleColDocHeight(d) + this.gridGap : 0), this.yMargin); let translate = this.props.ScreenToLocalTransform().inverse().transformPoint((this.props.PanelWidth() - width) / 2, localY); @@ -73,10 +73,11 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { let layoutDoc = Doc.expandTemplateLayout(d, this.props.DataDoc); let width = () => d.nativeWidth ? Math.min(d[WidthSym](), this.columnWidth) : this.columnWidth; let height = () => this.singleColDocHeight(layoutDoc); - let dxf = () => this.getDocTransform(layoutDoc, i, width()).scale(this.columnWidth / d[WidthSym]()); + let dxf = () => this.getSingleDocTransform(layoutDoc, i, width()).scale(this.columnWidth / d[WidthSym]()); + let gap = i === 0 ? 0 : this.gridGap; return
+ style={{ width: width(), display: "inline-block", marginTop: gap, height: `${height() / (this.props.Document[HeightSym]() - 2 * this.yMargin) * 100}%` }} > doc) {
; }); } + getDocTransform(doc: Doc, dref: HTMLDivElement) { + let { scale, translateX, translateY } = Utils.GetScreenTransform(dref); + let outerXf = Utils.GetScreenTransform(this._masonryGridRef!); + let offset = this.props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY); + return this.props.ScreenToLocalTransform().translate(offset[0], offset[1]).scale(NumCast(doc.width, 1) / this.columnWidth); + } docXfs: any[] = [] @computed get children() { this.docXfs.length = 0; - return this.childDocs.filter(d => !d.isMinimized).map((d, i) => { + return this.childDocs.filter((d, i) => !d.isMinimized).map((d, i) => { let aspect = d.nativeHeight ? NumCast(d.nativeWidth) / NumCast(d.nativeHeight) : undefined; let dref = React.createRef(); let dxf = () => this.getDocTransform(d, dref.current!).scale(this.columnWidth / d[WidthSym]()); -- cgit v1.2.3-70-g09d2 From a0688bd6417ef886eccac9051014470ebebf8847 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sat, 6 Jul 2019 19:15:40 -0400 Subject: cleanup --- .../views/collections/CollectionStackingView.tsx | 26 +++++++++------------- 1 file changed, 10 insertions(+), 16 deletions(-) (limited to 'src/client/views/collections/CollectionStackingView.tsx') diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 578791bc8..5f81579a8 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -24,6 +24,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { @computed get gridGap() { return NumCast(this.props.Document.gridGap, 10); } @computed get singleColumn() { return BoolCast(this.props.Document.singleColumn, true); } @computed get columnWidth() { return this.singleColumn ? (this.props.PanelWidth() / (this.props as any).ContentScaling() - 2 * this.xMargin) : Math.min(this.props.PanelWidth() - 2 * this.xMargin, NumCast(this.props.Document.columnWidth, 250)); } + @computed get filteredChildren() { return this.childDocs.filter(d => !d.isMinimized); } singleColDocHeight(d: Doc) { let nw = NumCast(d.nativeWidth); @@ -34,14 +35,10 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { } componentDidMount() { this._heightDisposer = reaction(() => [this.yMargin, this.gridGap, this.columnWidth, this.childDocs.map(d => [d.height, d.width, d.zoomBasis, d.nativeHeight, d.nativeWidth, d.isMinimized])], - () => { - if (this.singleColumn) { - let children = this.childDocs.filter(d => !d.isMinimized); - this.props.Document.height = children.reduce((height, d, i) => - height + this.singleColDocHeight(d) + (i === children.length - 1 ? this.yMargin : this.gridGap) - , this.yMargin); - } - }, { fireImmediately: true }); + () => this.singleColumn && + (this.props.Document.height = this.filteredChildren.reduce((height, d, i) => + height + this.singleColDocHeight(d) + (i === this.filteredChildren.length - 1 ? this.yMargin : this.gridGap), this.yMargin)) + , { fireImmediately: true }); } componentWillUnmount() { if (this._heightDisposer) this._heightDisposer(); @@ -49,12 +46,10 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { @action moveDocument = (doc: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean): boolean => { - this.props.removeDocument(doc); - addDocument(doc); - return true; + return this.props.removeDocument(doc) && addDocument(doc); } getSingleDocTransform(doc: Doc, ind: number, width: number) { - let localY = this.childDocs.filter(d => !d.isMinimized).reduce((height, d, i) => + let localY = this.filteredChildren.reduce((height, d, i) => height + (i < ind ? this.singleColDocHeight(d) + this.gridGap : 0), this.yMargin); let translate = this.props.ScreenToLocalTransform().inverse().transformPoint((this.props.PanelWidth() - width) / 2, localY); let outerXf = Utils.GetScreenTransform(this._masonryGridRef!); @@ -68,8 +63,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { @computed get singleColumnChildren() { - let children = this.childDocs.filter(d => !d.isMinimized); - return children.map((d, i) => { + return this.filteredChildren.map((d, i) => { let layoutDoc = Doc.expandTemplateLayout(d, this.props.DataDoc); let width = () => d.nativeWidth ? Math.min(d[WidthSym](), this.columnWidth) : this.columnWidth; let height = () => this.singleColDocHeight(layoutDoc); @@ -108,7 +102,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { @computed get children() { this.docXfs.length = 0; - return this.childDocs.filter((d, i) => !d.isMinimized).map((d, i) => { + return this.filteredChildren.map((d, i) => { let aspect = d.nativeHeight ? NumCast(d.nativeWidth) / NumCast(d.nativeHeight) : undefined; let dref = React.createRef(); let dxf = () => this.getDocTransform(d, dref.current!).scale(this.columnWidth / d[WidthSym]()); @@ -229,7 +223,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { }); } render() { - let cols = this.singleColumn ? 1 : Math.max(1, Math.min(this.childDocs.filter(d => !d.isMinimized).length, + let cols = this.singleColumn ? 1 : Math.max(1, Math.min(this.filteredChildren.length, Math.floor((this.props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap)))); let templatecols = ""; for (let i = 0; i < cols; i++) templatecols += `${this.columnWidth}px `; -- cgit v1.2.3-70-g09d2 From db9323fd2d44e665378d93d31bf343f8cc2e283d Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sat, 6 Jul 2019 19:50:02 -0400 Subject: fixed reordering in stacking view with minimized docs --- src/client/views/collections/CollectionStackingView.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'src/client/views/collections/CollectionStackingView.tsx') diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 5f81579a8..aea74321e 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -187,14 +187,14 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { }) } if (super.drop(e, de)) { - if (targInd !== -1) { - let newDoc = de.data.droppedDocuments[0]; - let docs = this.childDocList; - if (docs) { - let srcInd = docs.indexOf(newDoc); - docs.splice(srcInd, 1); - docs.splice(targInd > srcInd ? targInd - 1 : targInd, 0, newDoc); - } + let newDoc = de.data.droppedDocuments[0]; + let docs = this.childDocList; + if (docs) { + if (targInd === -1) targInd = docs.length; + else targInd = docs.indexOf(this.filteredChildren[targInd]); + let srcInd = docs.indexOf(newDoc); + docs.splice(srcInd, 1); + docs.splice(targInd > srcInd ? targInd - 1 : targInd, 0, newDoc); } } return false; -- cgit v1.2.3-70-g09d2