From e4a298e8e5410af8654e0e2aafd6e21c212ecee1 Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 28 May 2019 14:36:02 -0400 Subject: added pasting of img url's with ctrl-b, switched stacking view to a masonry view like pinterest. fixed template overlays. --- src/client/documents/Documents.ts | 3 +- src/client/views/Templates.tsx | 10 ++- .../views/collections/CollectionStackingView.scss | 7 ++ .../views/collections/CollectionStackingView.tsx | 62 ++++++++++++--- .../collectionFreeForm/CollectionFreeFormView.scss | 7 ++ .../collections/collectionFreeForm/MarqueeView.tsx | 88 ++++++++++++---------- src/client/views/nodes/ImageBox.tsx | 2 +- 7 files changed, 121 insertions(+), 58 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 1f4b76384..4bc0df31f 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -34,6 +34,7 @@ import { StrokeData, InkField } from "../../new_fields/InkField"; import { dropActionType } from "../util/DragManager"; import { DateField } from "../../new_fields/DateField"; import { UndoManager } from "../util/UndoManager"; +import { RouteStore } from "../../server/RouteStore"; var requestImageSize = require('request-image-size'); export interface DocumentOptions { @@ -218,7 +219,7 @@ export namespace Docs { export function ImageDocument(url: string, options: DocumentOptions = {}) { let inst = CreateInstance(imageProto, new ImageField(new URL(url)), options); - requestImageSize(url) + requestImageSize(window.origin + RouteStore.corsProxy + "/" + url) .then((size: any) => { if (!inst.proto!.nativeWidth) { inst.proto!.nativeWidth = size.width; diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx index 5a99b3d90..303f3f3b8 100644 --- a/src/client/views/Templates.tsx +++ b/src/client/views/Templates.tsx @@ -56,10 +56,12 @@ export namespace Templates { ` ); export const Title = new Template("Title", TemplatePosition.InnerTop, - `
{layout}
-
- {props.Document.title} -
` ); + `
+
{layout}
+
+ {props.Document.title} +
+
` ); export const Bullet = new Template("Bullet", TemplatePosition.InnerTop, `
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 803e680e5..6043a813d 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -31,6 +31,13 @@ align-items: center; } + .collectionStackingview-masonryGrid { + display:grid; + width:100%; + height:100%; + position: absolute; + } + .collectionStackingView-description { font-size: 100%; margin-bottom: 1vw; diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index a1cb73123..a29648d5b 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -1,36 +1,76 @@ import React = require("react"); import { observer } from "mobx-react"; -import { CollectionSubView } from "./CollectionSubView"; -import Measure from "react-measure"; -import { Doc, WidthSym, HeightSym } from "../../../new_fields/Doc"; +import { CollectionSubView, CollectionViewProps, SubCollectionViewProps } from "./CollectionSubView"; +import { Doc, WidthSym, HeightSym, DocListCast } from "../../../new_fields/Doc"; import { DocumentView } from "../nodes/DocumentView"; import { Transform } from "../../util/Transform"; import { emptyFunction, returnOne } from "../../../Utils"; import "./CollectionStackingView.scss"; -import { runInAction, action, observable, computed } from "mobx"; -import { StrCast } from "../../../new_fields/Types"; +import { action, reaction } from "mobx"; +import { StrCast, NumCast } from "../../../new_fields/Types"; +import { Id } from "../../../new_fields/FieldSymbols"; + + @observer export class CollectionStackingView extends CollectionSubView(doc => doc) { getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform(); + constructor(props: SubCollectionViewProps) { + super(props); + // reaction(() => [this.props.PanelHeight() + this.props.PanelWidth(), + // (this.props.ContainingCollectionView && this.props.ContainingCollectionView.props.Document[this.props.ContainingCollectionView.props.fieldKey])], () => { + // if (this.props.ContainingCollectionView) { + // let allItems = DocListCast(this.props.ContainingCollectionView.props.Document[this.props.ContainingCollectionView.props.fieldKey]); + // for (let x = 0; x < allItems.length; x++) { + // resizeGridItem(allItems[x]); + // } + // } + // } + // ); + } + @action moveDocument = (doc: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean): boolean => { this.props.removeDocument(doc); addDocument(doc); return true; } - render() { const docs = this.childDocs; + let gridGap = 10; + let gridSize = 20; + let itemWidth = NumCast(this.props.Document.itemWidth, 250); + let leftMargin = 20; + let topMargin = 20; + let itemCols = Math.ceil(itemWidth / (gridSize + gridGap)); + let cells = Math.floor((this.props.PanelWidth() - leftMargin) / (itemCols * (gridSize + gridGap))); return ( -
e.stopPropagation()}> -
{StrCast(this.props.Document.documentText, StrCast(this.props.Document.title, "stacking collection"))}
-
+
e.stopPropagation()}> +
{docs.map(d => { - return (
+ let colSpan = Math.ceil((itemWidth + gridGap) / (gridSize + gridGap)); + let rowSpan = Math.ceil((itemWidth / d[WidthSym]() * d[HeightSym]() + gridGap) / (gridSize + gridGap)); + return (
.jsx-parser { + z-index:0; + } //nested freeform views // .collectionfreeformview-container { @@ -52,6 +55,10 @@ position: inherit; height: 100%; } + + >.jsx-parser { + z-index:0; + } .formattedTextBox-cont { background: $light-color-secondary; diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 973ebfbdd..64d5301c9 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -83,56 +83,62 @@ export class MarqueeView extends React.Component }); })(); } else if (e.key === "b" && e.ctrlKey) { - //heuristically converts pasted text into a table. - // assumes each entry is separated by a tab - // skips all rows until it gets to a row with more than one entry - // assumes that 1st row has header entry for each column - // assumes subsequent rows have entries for each column header OR - // any row that has only one column is a section header-- this header is then added as a column to subsequent rows until the next header - // assumes each cell is a string or a number e.preventDefault(); - (async () => { - let text: string = await navigator.clipboard.readText(); + navigator.clipboard.readText().then(text => { let ns = text.split("\n").filter(t => t.trim() !== "\r" && t.trim() !== ""); - while (ns.length > 0 && ns[0].split("\t").length < 2) { - ns.splice(0, 1); - } - if (ns.length > 0) { - let columns = ns[0].split("\t"); - let docList: Doc[] = []; - let groupAttr: string | number = ""; - let rowProto = new Doc(); - rowProto.title = rowProto.Id; - rowProto.width = 200; - rowProto.isPrototype = true; - for (let i = 1; i < ns.length - 1; i++) { - let values = ns[i].split("\t"); - if (values.length === 1 && columns.length > 1) { - groupAttr = values[0]; - continue; - } - let docDataProto = Doc.MakeDelegate(rowProto); - docDataProto.isPrototype = true; - columns.forEach((col, i) => docDataProto[columns[i]] = (values.length > i ? ((values[i].indexOf(Number(values[i]).toString()) !== -1) ? Number(values[i]) : values[i]) : undefined)); - if (groupAttr) { - docDataProto._group = groupAttr; - } - docDataProto.title = i.toString(); - let doc = Doc.MakeDelegate(docDataProto); - doc.width = 200; - docList.push(doc); - } - let newCol = Docs.SchemaDocument([...(groupAttr ? ["_group"] : []), ...columns.filter(c => c)], docList, { x: x, y: y, title: "droppedTable", width: 300, height: 100 }); - - this.props.addDocument(newCol, false); + if (ns.length === 1 && text.startsWith("http")) { + this.props.addDocument(Docs.ImageDocument(text, { width: 300, x: x, y: y }), false);// paste an image from its URL in the paste buffer + } else { + this.pasteTable(ns, x, y); } - })(); + }); } else { let newBox = Docs.TextDocument({ width: 200, height: 100, x: x, y: y, title: "-typed text-" }); this.props.addLiveTextDocument(newBox); } e.stopPropagation(); } + //heuristically converts pasted text into a table. + // assumes each entry is separated by a tab + // skips all rows until it gets to a row with more than one entry + // assumes that 1st row has header entry for each column + // assumes subsequent rows have entries for each column header OR + // any row that has only one column is a section header-- this header is then added as a column to subsequent rows until the next header + // assumes each cell is a string or a number + pasteTable(ns: string[], x: number, y: number) { + while (ns.length > 0 && ns[0].split("\t").length < 2) { + ns.splice(0, 1); + } + if (ns.length > 0) { + let columns = ns[0].split("\t"); + let docList: Doc[] = []; + let groupAttr: string | number = ""; + let rowProto = new Doc(); + rowProto.title = rowProto.Id; + rowProto.width = 200; + rowProto.isPrototype = true; + for (let i = 1; i < ns.length - 1; i++) { + let values = ns[i].split("\t"); + if (values.length === 1 && columns.length > 1) { + groupAttr = values[0]; + continue; + } + let docDataProto = Doc.MakeDelegate(rowProto); + docDataProto.isPrototype = true; + columns.forEach((col, i) => docDataProto[columns[i]] = (values.length > i ? ((values[i].indexOf(Number(values[i]).toString()) !== -1) ? Number(values[i]) : values[i]) : undefined)); + if (groupAttr) { + docDataProto._group = groupAttr; + } + docDataProto.title = i.toString(); + let doc = Doc.MakeDelegate(docDataProto); + doc.width = 200; + docList.push(doc); + } + let newCol = Docs.SchemaDocument([...(groupAttr ? ["_group"] : []), ...columns.filter(c => c)], docList, { x: x, y: y, title: "droppedTable", width: 300, height: 100 }); + + this.props.addDocument(newCol, false); + } + } @action onPointerDown = (e: React.PointerEvent): void => { this._downX = this._lastX = e.pageX; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 128f3c6f8..d70068295 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -86,8 +86,8 @@ export class ImageBox extends DocComponent(ImageD onPointerDown = (e: React.PointerEvent): void => { if (e.shiftKey && e.ctrlKey) - e.stopPropagation(); + e.stopPropagation(); // if (Date.now() - this._lastTap < 300) { // if (e.buttons === 1) { // this._downX = e.clientX; -- cgit v1.2.3-70-g09d2