diff options
Diffstat (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')
| -rw-r--r-- | src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 129 |
1 files changed, 67 insertions, 62 deletions
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 4537ce3eb..376af0b36 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -1,23 +1,30 @@ import { computed, trace, action } from "mobx"; import { observer } from "mobx-react"; -import { KeyStore } from "../../../fields/KeyStore"; -import { NumberField } from "../../../fields/NumberField"; -import { Document } from "../../../fields/Document"; import { Transform } from "../../util/Transform"; -import { DocumentView, DocumentViewProps } from "./DocumentView"; +import { DocumentView, DocumentViewProps, positionSchema } from "./DocumentView"; import "./DocumentView.scss"; import React = require("react"); +import { DocComponent } from "../DocComponent"; +import { createSchema, makeInterface, listSpec } from "../../../new_fields/Schema"; +import { FieldValue, Cast, NumCast } from "../../../new_fields/Types"; import { OmitKeys, Utils } from "../../../Utils"; import { SelectionManager } from "../../util/SelectionManager"; -import { ListField } from "../../../fields/ListField"; -import { BooleanField } from "../../../fields/BooleanField"; import { matchedData } from "express-validator/filter"; +import { Doc } from "../../../new_fields/Doc"; export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { } +const schema = createSchema({ + zoom: "number", + zIndex: "number" +}); + +type FreeformDocument = makeInterface<[typeof schema, typeof positionSchema]>; +const FreeformDocument = makeInterface(schema, positionSchema); + @observer -export class CollectionFreeFormDocumentView extends React.Component<CollectionFreeFormDocumentViewProps> { +export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeFormDocumentViewProps, FreeformDocument>(FreeformDocument) { private _mainCont = React.createRef<HTMLDivElement>(); private _downX: number = 0; private _downY: number = 0; @@ -25,31 +32,33 @@ export class CollectionFreeFormDocumentView extends React.Component<CollectionFr @computed get transform() { return `scale(${this.props.ContentScaling()}, ${this.props.ContentScaling()}) translate(${this.X}px, ${this.Y}px) scale(${this.zoom}, ${this.zoom}) `; } - @computed get X() { return this.props.Document.GetNumber(KeyStore.X, 0); } - @computed get Y() { return this.props.Document.GetNumber(KeyStore.Y, 0); } - @computed get zoom() { return 1 / this.props.Document.GetNumber(KeyStore.ZoomBasis, 1); } - @computed get nativeWidth() { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); } - @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); } - @computed get width() { return this.props.Document.Width(); } - @computed get height() { return this.props.Document.Height(); } - @computed get zIndex() { return this.props.Document.GetNumber(KeyStore.ZIndex, 0); } + + @computed get X() { return FieldValue(this.Document.x, 0); } + @computed get Y() { return FieldValue(this.Document.y, 0); } + @computed get zoom(): number { return 1 / FieldValue(this.Document.zoom, 1); } + @computed get nativeWidth(): number { return FieldValue(this.Document.nativeWidth, 0); } + @computed get nativeHeight(): number { return FieldValue(this.Document.nativeHeight, 0); } + @computed get width(): number { return FieldValue(this.Document.width, 0); } + @computed get height(): number { return FieldValue(this.Document.height, 0); } + @computed get zIndex(): number { return FieldValue(this.Document.zIndex, 0); } + set width(w: number) { - this.props.Document.SetData(KeyStore.Width, w, NumberField); + this.Document.width = w; if (this.nativeWidth && this.nativeHeight) { - this.props.Document.SetNumber(KeyStore.Height, this.nativeHeight / this.nativeWidth * w); + this.Document.height = this.nativeHeight / this.nativeWidth * w; } } set height(h: number) { - this.props.Document.SetData(KeyStore.Height, h, NumberField); + this.Document.height = h; if (this.nativeWidth && this.nativeHeight) { - this.props.Document.SetNumber(KeyStore.Width, this.nativeWidth / this.nativeHeight * h); + this.Document.width = this.nativeWidth / this.nativeHeight * h; } } set zIndex(h: number) { - this.props.Document.SetData(KeyStore.ZIndex, h, NumberField); + this.Document.zIndex = h; } - contentScaling = () => (this.nativeWidth > 0 ? this.width / this.nativeWidth : 1); + contentScaling = () => this.nativeWidth > 0 ? this.width / this.nativeWidth : 1; panelWidth = () => this.props.PanelWidth(); panelHeight = () => this.props.PanelHeight(); toggleMinimized = () => this.toggleIcon(); @@ -59,7 +68,7 @@ export class CollectionFreeFormDocumentView extends React.Component<CollectionFr @computed get docView() { - return <DocumentView {...OmitKeys(this.props, ['zoomFade'])} + return <DocumentView {...OmitKeys(this.props, ['zoomFade']).omit} toggleMinimized={this.toggleMinimized} ContentScaling={this.contentScaling} ScreenToLocalTransform={this.getTransform} @@ -68,30 +77,30 @@ export class CollectionFreeFormDocumentView extends React.Component<CollectionFr />; } - animateBetweenIcon(first: boolean, icon: number[], targ: number[], width: number, height: number, stime: number, target: Document, maximizing: boolean) { + animateBetweenIcon(first: boolean, icon: number[], targ: number[], width: number, height: number, stime: number, target: Doc, maximizing: boolean) { setTimeout(() => { let now = Date.now(); let progress = Math.min(1, (now - stime) / 200); let pval = maximizing ? [icon[0] + (targ[0] - icon[0]) * progress, icon[1] + (targ[1] - icon[1]) * progress] : [targ[0] + (icon[0] - targ[0]) * progress, targ[1] + (icon[1] - targ[1]) * progress]; - target.SetNumber(KeyStore.Width, maximizing ? 25 + (width - 25) * progress : width + (25 - width) * progress); - target.SetNumber(KeyStore.Height, maximizing ? 25 + (height - 25) * progress : height + (25 - height) * progress); - target.SetNumber(KeyStore.X, pval[0]); - target.SetNumber(KeyStore.Y, pval[1]); + target.width = maximizing ? 25 + (width - 25) * progress : width + (25 - width) * progress; + target.height = maximizing ? 25 + (height - 25) * progress : height + (25 - height) * progress; + target.x = pval[0]; + target.y = pval[1]; if (first) { - target.SetBoolean(KeyStore.IsMinimized, false); + target.isMinimized = false; } if (now < stime + 200) { this.animateBetweenIcon(false, icon, targ, width, height, stime, target, maximizing); } else { if (!maximizing) { - target.SetBoolean(KeyStore.IsMinimized, true); - target.SetNumber(KeyStore.X, targ[0]); - target.SetNumber(KeyStore.Y, targ[1]); - target.SetNumber(KeyStore.Width, width); - target.SetNumber(KeyStore.Height, height); + target.isMinimized = true; + target.x = targ[0]; + target.y = targ[1]; + target.width = width; + target.height = height; } (target as any).isIconAnimating = false; } @@ -102,30 +111,28 @@ export class CollectionFreeFormDocumentView extends React.Component<CollectionFr public toggleIcon = async (): Promise<void> => { SelectionManager.DeselectAll(); let isMinimized: boolean | undefined; - let minimizedDocSet = await this.props.Document.GetTAsync(KeyStore.LinkTags, ListField); + let minimizedDocSet = Cast(this.props.Document.linkTags, listSpec(Doc)); if (!minimizedDocSet) return; - minimizedDocSet.Data.map(async minimizedDoc => { + minimizedDocSet.map(async minimizedDoc => { if (minimizedDoc instanceof Document) { this.props.addDocument && this.props.addDocument(minimizedDoc, false); - let maximizedDoc = await minimizedDoc.GetTAsync(KeyStore.MaximizedDoc, Document); - if (maximizedDoc instanceof Document && !(maximizedDoc as any).isIconAnimating) { + let maximizedDoc = await Cast(minimizedDoc.maximizedDoc, Doc); + if (maximizedDoc && !(maximizedDoc as any).isIconAnimating) { (maximizedDoc as any).isIconAnimating = true; if (isMinimized === undefined) { - let maximizedDocMinimizedState = await maximizedDoc.GetTAsync(KeyStore.IsMinimized, BooleanField); - isMinimized = (maximizedDocMinimizedState && maximizedDocMinimizedState.Data) ? true : false; + let maximizedDocMinimizedState = Cast(maximizedDoc.isMinimized, "boolean"); + isMinimized = (maximizedDocMinimizedState) ? true : false; } - let minx = await minimizedDoc.GetTAsync(KeyStore.X, NumberField); - let miny = await minimizedDoc.GetTAsync(KeyStore.Y, NumberField); - let maxx = await maximizedDoc.GetTAsync(KeyStore.X, NumberField); - let maxy = await maximizedDoc.GetTAsync(KeyStore.Y, NumberField); - let maxw = await maximizedDoc.GetTAsync(KeyStore.Width, NumberField); - let maxh = await maximizedDoc.GetTAsync(KeyStore.Height, NumberField); + let minx = NumCast(minimizedDoc.x, undefined); + let miny = NumCast(minimizedDoc.y, undefined); + let maxx = NumCast(maximizedDoc.x, undefined); + let maxy = NumCast(maximizedDoc.y, undefined); + let maxw = NumCast(maximizedDoc.width, undefined); + let maxh = NumCast(maximizedDoc.height, undefined); if (minx !== undefined && miny !== undefined && maxx !== undefined && maxy !== undefined && - maxw !== undefined && maxh !== undefined) - this.animateBetweenIcon( - true, - [minx.Data, miny.Data], [maxx.Data, maxy.Data], maxw.Data, maxh.Data, - Date.now(), maximizedDoc, isMinimized); + maxw !== undefined && maxh !== undefined) { + this.animateBetweenIcon(true, [minx, miny], [maxx, maxy], maxw, maxh, Date.now(), maximizedDoc, isMinimized); + } } } @@ -135,30 +142,28 @@ export class CollectionFreeFormDocumentView extends React.Component<CollectionFr this._downX = e.clientX; this._downY = e.clientY; } - onClick = (e: React.MouseEvent): void => { + onClick = async (e: React.MouseEvent) => { e.stopPropagation(); if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) { - this.props.Document.GetTAsync(KeyStore.MaximizedDoc, Document).then(maxdoc => { - if (maxdoc instanceof Document) { // bcz: need a better way to associate behaviors with click events on widget-documents - this.props.addDocument && this.props.addDocument(maxdoc, false); - this.toggleIcon(); - } - }); + const maxDoc = await Cast(this.props.Document.maximizedDoc, Doc); + if (maxDoc) { // bcz: need a better way to associate behaviors with click events on widget-documents + this.props.addDocument && this.props.addDocument(maxDoc, false); + this.toggleIcon(); + } } } borderRounding = () => { - let br = this.props.Document.GetNumber(KeyStore.BorderRounding, 0); + let br = NumCast(this.props.Document.borderRounding); return br >= 0 ? br : - this.props.Document.GetNumber(KeyStore.NativeWidth, 0) === 0 ? + NumCast(this.props.Document.nativeWidth) === 0 ? Math.min(this.props.PanelWidth(), this.props.PanelHeight()) - : - Math.min(this.props.Document.GetNumber(KeyStore.NativeWidth, 0), this.props.Document.GetNumber(KeyStore.NativeHeight, 0)); + : Math.min(this.Document.nativeWidth || 0, this.Document.nativeHeight || 0); } render() { - let maximizedDoc = this.props.Document.GetT(KeyStore.MaximizedDoc, Document); + let maximizedDoc = FieldValue(Cast(this.props.Document.maximizedDoc, Doc)); let zoomFade = 1; //var zoom = doc.GetNumber(KeyStore.ZoomBasis, 1); let transform = this.getTransform().scale(this.contentScaling()).inverse(); |