From 8433cc2b1c4d838930c3812d140678011b06e728 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sun, 17 Mar 2019 19:49:33 -0400 Subject: Small image context menu item --- src/client/views/nodes/ImageBox.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index cad8904d0..2db0cc4e2 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -10,6 +10,7 @@ import { ContextMenu } from "../../views/ContextMenu"; import { FieldView, FieldViewProps } from './FieldView'; import "./ImageBox.scss"; import React = require("react") +import { Utils } from '../../../Utils'; @observer export class ImageBox extends React.Component { @@ -89,12 +90,16 @@ export class ImageBox extends React.Component { } } - //REPLACE THIS WITH CAPABILITIES SPECIFIC TO THIS TYPE OF NODE - imageCapability = (e: React.MouseEvent): void => { - } - specificContextMenu = (e: React.MouseEvent): void => { - ContextMenu.Instance.addItem({ description: "Image Capability", event: this.imageCapability }); + let field = this.props.doc.GetT(this.props.fieldKey, ImageField); + if (field && field !== FieldWaiting) { + let url = field.Data.href; + ContextMenu.Instance.addItem({ + description: "Copy path", event: () => { + Utils.CopyText(url) + } + }); + } } render() { -- cgit v1.2.3-70-g09d2 From 1bf3a5a0108704a0204cedcbad6e6d52d19cf982 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 17 Mar 2019 22:04:03 -0400 Subject: moved DocumentContents to DocumentContentsView --- src/client/views/InkingControl.tsx | 8 +++ .../views/collections/CollectionFreeFormView.tsx | 34 ++---------- src/client/views/collections/MarqueeView.tsx | 2 +- src/client/views/collections/PreviewCursor.tsx | 10 ++-- src/client/views/nodes/DocumentContentsView.tsx | 60 +++++++++++++++------- src/client/views/nodes/DocumentView.tsx | 55 ++------------------ 6 files changed, 62 insertions(+), 107 deletions(-) (limited to 'src') diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index fb75ef2a5..6616f68d8 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -9,6 +9,8 @@ import "./InkingCanvas.scss" import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPen, faHighlighter, faEraser, faBan } from '@fortawesome/free-solid-svg-icons'; +import { SelectionManager } from "../util/SelectionManager"; +import { KeyStore } from "../../fields/KeyStore"; library.add(faPen, faHighlighter, faEraser, faBan); @@ -34,6 +36,12 @@ export class InkingControl extends React.Component { @action switchColor = (color: ColorResult): void => { this._selectedColor = color.hex; + if (SelectionManager.SelectedDocuments().length == 1) { + var sdoc = SelectionManager.SelectedDocuments()[0]; + if (sdoc.props.ContainingCollectionView && sdoc.props.ContainingCollectionView) { + sdoc.props.Document.SetText(KeyStore.BackgroundColor, color.hex); + } + } } @action diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 988c9941f..cca57912c 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -8,28 +8,16 @@ import { TextField } from "../../../fields/TextField"; import { DragManager } from "../../util/DragManager"; import { Transform } from "../../util/Transform"; import { undoBatch } from "../../util/UndoManager"; -import { CollectionDockingView } from "../collections/CollectionDockingView"; -import { CollectionPDFView } from "../collections/CollectionPDFView"; -import { CollectionSchemaView } from "../collections/CollectionSchemaView"; -import { CollectionVideoView } from "../collections/CollectionVideoView"; -import { CollectionView } from "../collections/CollectionView"; import { InkingCanvas } from "../InkingCanvas"; -import { AudioBox } from "../nodes/AudioBox"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; -import { DocumentView, DocumentViewProps, DocumentContents } from "../nodes/DocumentView"; -import { FormattedTextBox } from "../nodes/FormattedTextBox"; -import { ImageBox } from "../nodes/ImageBox"; -import { KeyValueBox } from "../nodes/KeyValueBox"; -import { PDFBox } from "../nodes/PDFBox"; -import { VideoBox } from "../nodes/VideoBox"; -import { WebBox } from "../nodes/WebBox"; +import { DocumentContentsView } from "../nodes/DocumentContentsView"; +import { DocumentView, DocumentViewProps } from "../nodes/DocumentView"; import "./CollectionFreeFormView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import { MarqueeView } from "./MarqueeView"; import { PreviewCursor } from "./PreviewCursor"; import React = require("react"); -const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? @observer export class CollectionFreeFormView extends CollectionViewBase { @@ -283,28 +271,14 @@ export class CollectionFreeFormView extends CollectionViewBase { @computed get backgroundView() { return !this.backgroundLayout ? (null) : - ( false} select={() => { }} />); - // ( console.log(test)} - // />); } @computed get overlayView() { return !this.overlayLayout ? (null) : - ( false} select={() => { }} />); - // ( console.log(test)} - // />); } getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).translate(-this.centeringShiftX, -this.centeringShiftY).transform(this.getLocalTransform()) diff --git a/src/client/views/collections/MarqueeView.tsx b/src/client/views/collections/MarqueeView.tsx index 65aaa837f..f5c83a934 100644 --- a/src/client/views/collections/MarqueeView.tsx +++ b/src/client/views/collections/MarqueeView.tsx @@ -121,7 +121,7 @@ export class MarqueeView extends React.Component let centerShiftX = 0 - (selRect.left + selRect.width / 2); // moves each point by the offset that shifts the selection's center to the origin. let centerShiftY = 0 - (selRect.top + selRect.height / 2); let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField); - if (ink && ink != FieldWaiting) { + if (ink && ink != FieldWaiting && ink.Data) { let idata = new Map(); ink.Data.forEach((value: StrokeData, key: string, map: any) => { let inside = InkingCanvas.IntersectStrokeRect(value, selRect); diff --git a/src/client/views/collections/PreviewCursor.tsx b/src/client/views/collections/PreviewCursor.tsx index a1411250a..cbcfa568d 100644 --- a/src/client/views/collections/PreviewCursor.tsx +++ b/src/client/views/collections/PreviewCursor.tsx @@ -1,16 +1,12 @@ -import { trace } from "mobx"; -import "./PreviewCursor.scss"; -import React = require("react"); import { action, IReactionDisposer, observable, reaction } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; -import { FieldWaiting, Opt } from "../../../fields/Field"; -import { KeyStore } from "../../../fields/KeyStore"; -import { ListField } from "../../../fields/ListField"; +import { Opt } from "../../../fields/Field"; import { Documents } from "../../documents/Documents"; -import { SelectionManager } from "../../util/SelectionManager"; import { Transform } from "../../util/Transform"; import { CollectionFreeFormView } from "./CollectionFreeFormView"; +import "./PreviewCursor.scss"; +import React = require("react"); export interface PreviewCursorProps { diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 55b4938a0..ce72ab64b 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -1,33 +1,55 @@ -import { Document } from "../../../fields/Document"; -import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; +import { computed } from "mobx"; +import { observer } from "mobx-react"; +import { FieldWaiting } from "../../../fields/Field"; +import { Key } from "../../../fields/Key"; +import { KeyStore } from "../../../fields/KeyStore"; +import { ListField } from "../../../fields/ListField"; import { CollectionDockingView } from "../collections/CollectionDockingView"; -import { CollectionSchemaView } from "../collections/CollectionSchemaView"; -import { CollectionView, CollectionViewType } from "../collections/CollectionView"; +import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; import { CollectionPDFView } from "../collections/CollectionPDFView"; +import { CollectionSchemaView } from "../collections/CollectionSchemaView"; import { CollectionVideoView } from "../collections/CollectionVideoView"; -import { FormattedTextBox } from "../nodes/FormattedTextBox"; -import { ImageBox } from "../nodes/ImageBox"; -import { VideoBox } from "../nodes/VideoBox"; -import { AudioBox } from "../nodes/AudioBox"; -import { KeyValueBox } from "./KeyValueBox" -import { WebBox } from "../nodes/WebBox"; -import { PDFBox } from "../nodes/PDFBox"; +import { CollectionView } from "../collections/CollectionView"; +import { AudioBox } from "./AudioBox"; +import { DocumentViewProps, JsxBindings } from "./DocumentView"; import "./DocumentView.scss"; +import { FormattedTextBox } from "./FormattedTextBox"; +import { ImageBox } from "./ImageBox"; +import { KeyValueBox } from "./KeyValueBox"; +import { PDFBox } from "./PDFBox"; +import { VideoBox } from "./VideoBox"; +import { WebBox } from "./WebBox"; import React = require("react"); const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? -interface JsxBindings { - Document: Document; - layout: string; - [prop: string]: any; -} -export class DocumentContentsView extends React.PureComponent { +@observer +export class DocumentContentsView extends React.Component boolean, + select: (ctrl: boolean) => void, + layoutKey: Key +}> { + @computed get layout(): string { return this.props.Document.GetText(this.props.layoutKey, "

Error loading layout data

"); } + @computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array()); } + @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array()); } + + CreateBindings(): JsxBindings { + let bindings: JsxBindings = { ...this.props, }; + for (const key of this.layoutKeys) { + bindings[key.Name + "Key"] = key; // this maps string values of the form Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data + } + for (const key of this.layoutFields) { + let field = this.props.Document.Get(key); + bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field; + } + return bindings; + } + render() { return { console.log(test) }} /> diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 3e691ee6d..b36d47b8b 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,11 +1,12 @@ import { action, computed, IReactionDisposer, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; -import { Field, FieldWaiting, Opt } from "../../../fields/Field"; +import { Field, Opt } from "../../../fields/Field"; import { Key } from "../../../fields/Key"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; import { TextField } from "../../../fields/TextField"; +import { Utils } from "../../../Utils"; import { Documents } from "../../documents/Documents"; import { DocumentManager } from "../../util/DocumentManager"; import { DragManager } from "../../util/DragManager"; @@ -14,22 +15,9 @@ import { Transform } from "../../util/Transform"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionView, CollectionViewType } from "../collections/CollectionView"; import { ContextMenu } from "../ContextMenu"; +import { DocumentContentsView } from "./DocumentContentsView"; import "./DocumentView.scss"; import React = require("react"); -import { DocumentContentsView } from "./DocumentContentsView"; -import { Utils } from "../../../Utils"; -import { FormattedTextBox } from "./FormattedTextBox"; -import { ImageBox } from "./ImageBox"; -import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; -import { CollectionSchemaView } from "../collections/CollectionSchemaView"; -import { CollectionPDFView } from "../collections/CollectionPDFView"; -import { CollectionVideoView } from "../collections/CollectionVideoView"; -import { WebBox } from "./WebBox"; -import { KeyValueBox } from "./KeyValueBox"; -import { PDFBox } from "./PDFBox"; -import { VideoBox } from "./VideoBox"; -import { AudioBox } from "./AudioBox"; -const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? export interface DocumentViewProps { @@ -87,7 +75,7 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs { return args; } -interface JsxBindings { +export interface JsxBindings { Document: Document; isSelected: () => boolean; select: (isCtrlPressed: boolean) => void; @@ -96,40 +84,7 @@ interface JsxBindings { [prop: string]: any; } -@observer -export class DocumentContents extends React.Component boolean, - select: (ctrl: boolean) => void, - layoutKey: Key -}> { - @computed get layout(): string { return this.props.Document.GetText(this.props.layoutKey, "

Error loading layout data

"); } - @computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array()); } - @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array()); } - - CreateBindings(): JsxBindings { - let bindings: JsxBindings = { - ...this.props, - }; - for (const key of this.layoutKeys) { - bindings[key.Name + "Key"] = key; // this maps string values of the form Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data - } - for (const key of this.layoutFields) { - let field = this.props.Document.Get(key); - bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field; - } - return bindings; - } - render() { - return { console.log(test) }} - /> - } -} @observer export class DocumentView extends React.Component { @@ -377,7 +332,7 @@ export class DocumentView extends React.Component { onDrop={this.onDrop} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} > - + ) } -- cgit v1.2.3-70-g09d2