diff options
Diffstat (limited to 'src/client/documents/Documents.ts')
| -rw-r--r-- | src/client/documents/Documents.ts | 193 |
1 files changed, 132 insertions, 61 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 64abd4f57..1c13eb079 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -19,7 +19,7 @@ import { AggregateFunction } from "../northstar/model/idea/idea"; import { MINIMIZED_ICON_SIZE } from "../views/globalCssVariables.scss"; import { IconBox } from "../views/nodes/IconBox"; import { OmitKeys, JSONUtils } from "../../Utils"; -import { Field, Doc, Opt, DocListCastAsync } from "../../new_fields/Doc"; +import { Field, Doc, Opt, DocListCastAsync, FieldResult, DocListCast } from "../../new_fields/Doc"; import { ImageField, VideoField, AudioField, PdfField, WebField, YoutubeField } from "../../new_fields/URLField"; import { HtmlField } from "../../new_fields/HtmlField"; import { List } from "../../new_fields/List"; @@ -51,40 +51,53 @@ import { DocuLinkBox } from "../views/nodes/DocuLinkBox"; import { DocumentBox } from "../views/nodes/DocumentBox"; import { InkingStroke } from "../views/InkingStroke"; import { InkField } from "../../new_fields/InkField"; +import { InkingControl } from "../views/InkingControl"; +import { RichTextField } from "../../new_fields/RichTextField"; const requestImageSize = require('../util/request-image-size'); const path = require('path'); export interface DocumentOptions { + _autoHeight?: boolean; + _panX?: number; + _panY?: number; + _width?: number; + _height?: number; + _nativeWidth?: number; + _nativeHeight?: number; + _fitWidth?: boolean; + _fitToBox?: boolean; // whether a freeformview should zoom/scale to create a shrinkwrapped view of its contents + _LODdisable?: boolean; + _dropAction?: dropActionType; + _chromeStatus?: string; + _viewType?: number; + _gridGap?: number; // gap between items in masonry view + _xMargin?: number; // gap between left edge of document and start of masonry/stacking layouts + _yMargin?: number; // gap between top edge of dcoument and start of masonry/stacking layouts + _textTemplate?: RichTextField; // template used by a formattedTextBox to create a text box to render + _itemIndex?: number; // which item index the carousel viewer is showing + _hideSidebar?: boolean; //whether an annotationsidebar should be displayed for text docuemnts x?: number; y?: number; z?: number; + layoutKey?: string; type?: string; - width?: number; - height?: number; - nativeWidth?: number; - nativeHeight?: number; title?: string; - panX?: number; - panY?: number; page?: number; scale?: number; - fitWidth?: boolean; + isDisplayPanel?: boolean; // whether the panel functions as GoldenLayout "stack" used to display documents forceActive?: boolean; preventTreeViewOpen?: boolean; // ignores the treeViewOpen Doc flag which allows a treeViewItem's expande/collapse state to be independent of other views of the same document in the tree view layout?: string | Doc; hideHeadings?: boolean; // whether stacking view column headings should be hidden - isTemplateField?: boolean; + isTemplateForField?: string; // the field key for which the containing document is a rendering template isTemplateDoc?: boolean; templates?: List<string>; - viewType?: number; - backgroundColor?: string; + backgroundColor?: string | ScriptField; ignoreClick?: boolean; lockedPosition?: boolean; // lock the x,y coordinates of the document so that it can't be dragged lockedTransform?: boolean; // lock the panx,pany and scale parameters of the document so that it be panned/zoomed opacity?: number; defaultBackgroundColor?: string; - dropAction?: dropActionType; - chromeStatus?: string; columnWidth?: number; fontSize?: number; curPage?: number; @@ -96,29 +109,36 @@ export interface DocumentOptions { sectionFilter?: string; // field key used to determine headings for sections in stacking and masonry views schemaColumns?: List<SchemaHeaderField>; dockingConfig?: string; - autoHeight?: boolean; annotationOn?: Doc; removeDropProperties?: List<string>; // list of properties that should be removed from a document when it is dropped. e.g., a creator button may be forceActive to allow it be dragged, but the forceActive property can be removed from the dropped document dbDoc?: Doc; ischecked?: ScriptField; // returns whether a font icon box is checked activePen?: Doc; // which pen document is currently active (used as the radio button state for the 'unhecked' pen tool scripts) onClick?: ScriptField; + onChildClick?: ScriptField; // script given to children of a collection to execute when they are clicked onPointerDown?: ScriptField; onPointerUp?: ScriptField; dragFactory?: Doc; // document to create when dragging with a suitable onDragStart script onDragStart?: ScriptField; //script to execute at start of drag operation -- e.g., when a "creator" button is dragged this script generates a different document to drop + clipboard?: Doc; //script to execute at start of drag operation -- e.g., when a "creator" button is dragged this script generates a different document to drop icon?: string; - gridGap?: number; // gap between items in masonry view - xMargin?: number; // gap between left edge of document and start of masonry/stacking layouts - yMargin?: number; // gap between top edge of dcoument and start of masonry/stacking layouts sourcePanel?: Doc; // panel to display in 'targetContainer' as the result of a button onClick script targetContainer?: Doc; // document whose proto will be set to 'panel' as the result of a onClick click script dropConverter?: ScriptField; // script to run when documents are dropped on this Document. strokeWidth?: number; color?: string; + treeViewHideTitle?: boolean; // whether to hide the title of a tree view + treeViewOpen?: boolean; // whether this document is expanded in a tree view + treeViewChecked?: ScriptField; // script to call when a tree view checkbox is checked + isFacetFilter?: boolean; // whether document functions as a facet filter in a tree view limitHeight?: number; // maximum height for newly created (eg, from pasting) text documents // [key: string]: Opt<Field>; pointerHack?: boolean; // for buttons, allows onClick handler to fire onPointerDown + isExpanded?: boolean; // is linear view expanded + textTransform?: string; // is linear view expanded + letterSpacing?: string; // is linear view expanded + flexDirection?: "unset" | "row" | "column" | "row-reverse" | "column-reverse"; + selectedIndex?: number; } class EmptyBox { @@ -146,19 +166,19 @@ export namespace Docs { const TemplateMap: TemplateMap = new Map([ [DocumentType.TEXT, { layout: { view: FormattedTextBox, dataField: data }, - options: { height: 150, backgroundColor: "#f1efeb", defaultBackgroundColor: "#f1efeb" } + options: { _height: 150, backgroundColor: "#f1efeb", defaultBackgroundColor: "#f1efeb" } }], [DocumentType.HIST, { layout: { view: HistogramBox, dataField: data }, - options: { height: 300, backgroundColor: "black" } + options: { _height: 300, backgroundColor: "black" } }], [DocumentType.QUERY, { layout: { view: QueryBox, dataField: data }, - options: { width: 400 } + options: { _width: 400 } }], [DocumentType.COLOR, { layout: { view: ColorBox, dataField: data }, - options: { nativeWidth: 220, nativeHeight: 300 } + options: { _nativeWidth: 220, _nativeHeight: 300 } }], [DocumentType.IMG, { layout: { view: ImageBox, dataField: data }, @@ -166,19 +186,19 @@ export namespace Docs { }], [DocumentType.WEB, { layout: { view: WebBox, dataField: data }, - options: { height: 300 } + options: { _height: 300 } }], [DocumentType.COL, { layout: { view: CollectionView, dataField: data }, - options: { panX: 0, panY: 0, scale: 1, width: 500, height: 500 } + options: { _panX: 0, _panY: 0, scale: 1, _width: 500, _height: 500 } }], [DocumentType.KVP, { layout: { view: KeyValueBox, dataField: data }, - options: { height: 150 } + options: { _height: 150 } }], [DocumentType.DOCUMENT, { layout: { view: DocumentBox, dataField: data }, - options: { height: 250 } + options: { _height: 250 } }], [DocumentType.VID, { layout: { view: VideoBox, dataField: data }, @@ -186,7 +206,7 @@ export namespace Docs { }], [DocumentType.AUDIO, { layout: { view: AudioBox, dataField: data }, - options: { height: 35, backgroundColor: "lightGray" } + options: { _height: 35, backgroundColor: "lightGray" } }], [DocumentType.PDF, { layout: { view: PDFBox, dataField: data }, @@ -194,11 +214,11 @@ export namespace Docs { }], [DocumentType.ICON, { layout: { view: IconBox, dataField: data }, - options: { width: Number(MINIMIZED_ICON_SIZE), height: Number(MINIMIZED_ICON_SIZE) }, + options: { _width: Number(MINIMIZED_ICON_SIZE), _height: Number(MINIMIZED_ICON_SIZE) }, }], [DocumentType.IMPORT, { layout: { view: DirectoryImportBox, dataField: data }, - options: { height: 150 } + options: { _height: 150 } }], [DocumentType.LINKDOC, { data: new List<Doc>(), @@ -216,7 +236,7 @@ export namespace Docs { }], [DocumentType.FONTICON, { layout: { view: FontIconBox, dataField: data }, - options: { width: 40, height: 40, borderRounding: "100%" }, + options: { _width: 40, _height: 40, borderRounding: "100%" }, }], [DocumentType.LINKFOLLOW, { layout: { view: LinkFollowBox, dataField: data } @@ -231,7 +251,7 @@ export namespace Docs { ]); // All document prototypes are initialized with at least these values - const defaultOptions: DocumentOptions = { x: 0, y: 0, width: 300 }; + const defaultOptions: DocumentOptions = { x: 0, y: 0, _width: 300 }; const suffix = "Proto"; /** @@ -309,7 +329,8 @@ export namespace Docs { // whatever options pertain to this specific prototype const options = { title, type, baseProto: true, ...defaultOptions, ...(template.options || {}) }; options.layout = layout.view.LayoutString(layout.dataField); - return Doc.assign(new Doc(prototypeId, true), { ...options }); + const doc = Doc.assign(new Doc(prototypeId, true), { layoutKey: "layout", ...options }); + return doc; } } @@ -320,7 +341,8 @@ export namespace Docs { */ export namespace Create { - const delegateKeys = ["x", "y", "width", "height", "panX", "panY", "nativeWidth", "nativeHeight", "dropAction", "annotationOn", "forceActive", "fitWidth"]; + const delegateKeys = ["x", "y", "layoutKey", "_width", "_height", "_panX", "_panY", "_viewType", "_nativeWidth", "_nativeHeight", "_dropAction", "_annotationOn", + "_chromeStatus", "_forceActive", "_autoHeight", "_fitWidth", "_LODdisable", "_itemIndex", "_hideSidebar"]; /** * This function receives the relevant document prototype and uses @@ -358,7 +380,7 @@ export namespace Docs { AudioBox.ActiveRecordings.map(d => DocUtils.MakeLink({ doc: viewDoc }, { doc: d }, "audio link", "link to audio: " + d.title)); - return Doc.assign(viewDoc, delegateProps); + return Doc.assign(viewDoc, delegateProps, true); } /** @@ -390,11 +412,11 @@ export namespace Docs { requestImageSize(target) .then((size: any) => { const aspect = size.height / size.width; - if (!inst.nativeWidth) { - inst.nativeWidth = size.width; + if (!inst._nativeWidth) { + inst._nativeWidth = size.width; } - inst.nativeHeight = NumCast(inst.nativeWidth) * aspect; - inst.height = NumCast(inst.width) * aspect; + inst._nativeHeight = NumCast(inst._nativeWidth) * aspect; + inst._height = NumCast(inst._width) * aspect; }) .catch((err: any) => console.log(err)); // } @@ -428,8 +450,8 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.COLOR), "", options); } - export function TextDocument(options: DocumentOptions = {}) { - return InstanceFromProto(Prototypes.get(DocumentType.TEXT), "", options); + export function TextDocument(text: string, options: DocumentOptions = {}) { + return InstanceFromProto(Prototypes.get(DocumentType.TEXT), text, options); } export function InkDocument(color: string, tool: number, strokeWidth: number, points: { X: number, Y: number }[], options: DocumentOptions = {}) { @@ -453,7 +475,7 @@ export namespace Docs { const ctlog = await Gateway.Instance.GetSchema(url, schemaName); if (ctlog && ctlog.schemas) { const schema = ctlog.schemas[0]; - const schemaDoc = Docs.Create.TreeDocument([], { ...options, nativeWidth: undefined, nativeHeight: undefined, width: 150, height: 100, title: schema.displayName! }); + const schemaDoc = Docs.Create.TreeDocument([], { ...options, _nativeWidth: undefined, _nativeHeight: undefined, _width: 150, _height: 100, title: schema.displayName! }); const schemaDocuments = Cast(schemaDoc.data, listSpec(Doc), []); if (!schemaDocuments) { return; @@ -470,13 +492,13 @@ export namespace Docs { new AttributeTransformationModel(atmod, AggregateFunction.None), new AttributeTransformationModel(atmod, AggregateFunction.Count), new AttributeTransformationModel(atmod, AggregateFunction.Count)); - docs.push(Docs.Create.HistogramDocument(histoOp, { ...columnOptions, width: 200, height: 200, title: attr.displayName! })); + docs.push(Docs.Create.HistogramDocument(histoOp, { ...columnOptions, _width: 200, _height: 200, title: attr.displayName! })); } })); }); return schemaDoc; } - return Docs.Create.TreeDocument([], { width: 50, height: 100, title: schemaName }); + return Docs.Create.TreeDocument([], { _width: 50, _height: 100, title: schemaName }); } export function WebDocument(url: string, options: DocumentOptions = {}) { @@ -496,27 +518,35 @@ export namespace Docs { } export function FreeformDocument(documents: Array<Doc>, options: DocumentOptions, id?: string) { - return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, viewType: CollectionViewType.Freeform }, id); + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, _viewType: CollectionViewType.Freeform }, id); } export function LinearDocument(documents: Array<Doc>, options: DocumentOptions, id?: string) { - return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { chromeStatus: "collapsed", backgroundColor: "black", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, viewType: CollectionViewType.Linear }, id); + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _chromeStatus: "collapsed", backgroundColor: "black", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, _viewType: CollectionViewType.Linear }, id); + } + + export function CarouselDocument(documents: Array<Doc>, options: DocumentOptions) { + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, _viewType: CollectionViewType.Carousel }); } export function SchemaDocument(schemaColumns: SchemaHeaderField[], documents: Array<Doc>, options: DocumentOptions) { - return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { chromeStatus: "collapsed", schemaColumns: new List(schemaColumns), ...options, viewType: CollectionViewType.Schema }); + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _chromeStatus: "collapsed", schemaColumns: new List(schemaColumns), ...options, _viewType: CollectionViewType.Schema }); } export function TreeDocument(documents: Array<Doc>, options: DocumentOptions) { - return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, viewType: CollectionViewType.Tree }); + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, _viewType: CollectionViewType.Tree }); } export function StackingDocument(documents: Array<Doc>, options: DocumentOptions) { - return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, viewType: CollectionViewType.Stacking }); + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, _viewType: CollectionViewType.Stacking }); + } + + export function MulticolumnDocument(documents: Array<Doc>, options: DocumentOptions) { + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, _viewType: CollectionViewType.Multicolumn }); } export function MasonryDocument(documents: Array<Doc>, options: DocumentOptions) { - return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, viewType: CollectionViewType.Masonry }); + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, _viewType: CollectionViewType.Masonry }); } export function ButtonDocument(options?: DocumentOptions) { @@ -537,7 +567,7 @@ export namespace Docs { } export function DockDocument(documents: Array<Doc>, config: string, options: DocumentOptions, id?: string) { - const inst = InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, viewType: CollectionViewType.Docking, dockingConfig: config }, id); + const inst = InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _viewType: CollectionViewType.Docking, dockingConfig: config }, id); Doc.GetProto(inst).data = new List<Doc>(documents); return inst; } @@ -653,28 +683,70 @@ export namespace Docs { throw new Error(`How did ${data} of type ${typeof data} end up in JSON?`); }; + export function DocumentFromField(target: Doc, fieldKey: string, proto?: Doc, options?: DocumentOptions): Doc | undefined { + let created: Doc | undefined; + let layout: ((fieldKey: string) => string) | undefined; + const field = target[fieldKey]; + const resolved = options || {}; + if (field instanceof ImageField) { + created = Docs.Create.ImageDocument((field).url.href, resolved); + layout = ImageBox.LayoutString; + } else if (field instanceof Doc) { + created = field; + } else if (field instanceof VideoField) { + created = Docs.Create.VideoDocument((field).url.href, resolved); + layout = VideoBox.LayoutString; + } else if (field instanceof PdfField) { + created = Docs.Create.PdfDocument((field).url.href, resolved); + layout = PDFBox.LayoutString; + } else if (field instanceof IconField) { + created = Docs.Create.IconDocument((field).icon, resolved); + layout = IconBox.LayoutString; + } else if (field instanceof AudioField) { + created = Docs.Create.AudioDocument((field).url.href, resolved); + layout = AudioBox.LayoutString; + } else if (field instanceof HistogramField) { + created = Docs.Create.HistogramDocument((field).HistoOp, resolved); + layout = HistogramBox.LayoutString; + } else if (field instanceof InkField) { + const { selectedColor, selectedWidth, selectedTool } = InkingControl.Instance; + created = Docs.Create.InkDocument(selectedColor, selectedTool, Number(selectedWidth), (field).inkData, resolved); + layout = InkingStroke.LayoutString; + } else if (field instanceof List && field[0] instanceof Doc) { + created = Docs.Create.StackingDocument(DocListCast(field), resolved); + layout = CollectionView.LayoutString; + } else { + created = Docs.Create.TextDocument("", { ...{ _width: 200, _height: 25, _autoHeight: true }, ...resolved }); + layout = FormattedTextBox.LayoutString; + } + created.layout = layout?.(fieldKey); + created.title = fieldKey; + proto && (created.proto = Doc.GetProto(proto)); + return created; + } + export async function DocumentFromType(type: string, path: string, options: DocumentOptions): Promise<Opt<Doc>> { let ctor: ((path: string, options: DocumentOptions) => (Doc | Promise<Doc | undefined>)) | undefined = undefined; if (type.indexOf("image") !== -1) { ctor = Docs.Create.ImageDocument; - if (!options.width) options.width = 300; + if (!options._width) options._width = 300; } if (type.indexOf("video") !== -1) { ctor = Docs.Create.VideoDocument; - if (!options.width) options.width = 600; - if (!options.height) options.height = options.width * 2 / 3; + if (!options._width) options._width = 600; + if (!options._height) options._height = options._width * 2 / 3; } if (type.indexOf("audio") !== -1) { ctor = Docs.Create.AudioDocument; } if (type.indexOf("pdf") !== -1) { ctor = Docs.Create.PdfDocument; - if (!options.width) options.width = 400; - if (!options.height) options.height = options.width * 1200 / 927; + if (!options._width) options._width = 400; + if (!options._height) options._height = options._width * 1200 / 927; } if (type.indexOf("excel") !== -1) { ctor = Docs.Create.DBDocument; - options.dropAction = "copy"; + options._dropAction = "copy"; } if (type.indexOf("html") !== -1) { if (path.includes(window.location.hostname)) { @@ -685,15 +757,15 @@ export namespace Docs { const alias = Doc.MakeAlias(field); alias.x = options.x || 0; alias.y = options.y || 0; - alias.width = options.width || 300; - alias.height = options.height || options.width || 300; + alias._width = options._width || 300; + alias._height = options._height || options._width || 300; return alias; } return undefined; }); } ctor = Docs.Create.WebDocument; - options = { height: options.width, ...options, title: path, nativeWidth: undefined }; + options = { _height: options._width, ...options, title: path, _nativeWidth: undefined }; } return ctor ? ctor(path, options) : undefined; } @@ -733,7 +805,6 @@ export namespace DocUtils { }); } - @undoBatch export function MakeLink(source: { doc: Doc, ctx?: Doc }, target: { doc: Doc, ctx?: Doc }, title: string = "", description: string = "", id?: string) { const sv = DocumentManager.Instance.getDocumentView(source.doc); if (sv && sv.props.ContainingCollectionDoc === target.doc) return; @@ -755,8 +826,8 @@ export namespace DocUtils { linkDocProto.anchor2Groups = new List<Doc>([]); linkDocProto.anchor1Timecode = source.doc.currentTimecode; linkDocProto.anchor2Timecode = target.doc.currentTimecode; - linkDocProto.layoutKey1 = DocuLinkBox.LayoutString("anchor1"); - linkDocProto.layoutKey2 = DocuLinkBox.LayoutString("anchor2"); + linkDocProto.layout_key1 = DocuLinkBox.LayoutString("anchor1"); + linkDocProto.layout_key2 = DocuLinkBox.LayoutString("anchor2"); linkDocProto.width = linkDocProto.height = 0; linkDocProto.isBackground = true; linkDocProto.isButton = true; |