From 99cc00b9a0d83413acf99d8c1e9854484e831069 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 20 Oct 2019 23:39:47 -0400 Subject: fixes to imagebox/keyvalue to get images to show up --- src/client/views/nodes/ImageBox.scss | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src/client/views/nodes/ImageBox.scss') diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index 2b81c16c0..c5265556e 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -11,6 +11,9 @@ .imageBox-container { border-radius: inherit; + width:100%; + height:100%; + position: absolute; } .imageBox-cont-interactive { -- cgit v1.2.3-70-g09d2 From cf6949fd114c2619caeaeda0652b1f3a36a69d99 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 21 Oct 2019 01:31:29 -0400 Subject: start of ImageBox cleanup --- .../views/collections/CollectionBaseView.tsx | 8 +- .../collections/CollectionMasonryViewFieldRow.tsx | 9 +- src/client/views/nodes/ImageBox.scss | 5 + src/client/views/nodes/ImageBox.tsx | 113 +++------------------ 4 files changed, 27 insertions(+), 108 deletions(-) (limited to 'src/client/views/nodes/ImageBox.scss') diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index 15853fcae..c46648ac1 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -1,18 +1,16 @@ import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; +import { DateField } from '../../../new_fields/DateField'; import { Doc, DocListCast } from '../../../new_fields/Doc'; -import { Id } from '../../../new_fields/FieldSymbols'; -import { List } from '../../../new_fields/List'; import { listSpec } from '../../../new_fields/Schema'; -import { BoolCast, Cast, NumCast, PromiseValue, StrCast, FieldValue } from '../../../new_fields/Types'; +import { BoolCast, Cast, FieldValue, PromiseValue, StrCast } from '../../../new_fields/Types'; +import { ImageField } from '../../../new_fields/URLField'; import { DocumentManager } from '../../util/DocumentManager'; import { SelectionManager } from '../../util/SelectionManager'; import { ContextMenu } from '../ContextMenu'; import { FieldViewProps } from '../nodes/FieldView'; import './CollectionBaseView.scss'; -import { DateField } from '../../../new_fields/DateField'; -import { ImageField } from '../../../new_fields/URLField'; export enum CollectionViewType { Invalid, diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx index 1709b9c99..4259e948b 100644 --- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx +++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx @@ -4,12 +4,12 @@ import { faPalette } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, observable } from "mobx"; import { observer } from "mobx-react"; -import { Doc, WidthSym } from "../../../new_fields/Doc"; -import { Id } from "../../../new_fields/FieldSymbols"; +import Measure from "react-measure"; +import { Doc } from "../../../new_fields/Doc"; import { PastelSchemaPalette, SchemaHeaderField } from "../../../new_fields/SchemaHeaderField"; import { ScriptField } from "../../../new_fields/ScriptField"; -import { NumCast, StrCast } from "../../../new_fields/Types"; -import { Utils, numberRange } from "../../../Utils"; +import { StrCast } from "../../../new_fields/Types"; +import { numberRange } from "../../../Utils"; import { Docs } from "../../documents/Documents"; import { DragManager } from "../../util/DragManager"; import { CompileScript } from "../../util/Scripting"; @@ -20,7 +20,6 @@ import { anchorPoints, Flyout } from "../DocumentDecorations"; import { EditableView } from "../EditableView"; import { CollectionStackingView } from "./CollectionStackingView"; import "./CollectionStackingView.scss"; -import Measure from "react-measure"; library.add(faPalette); diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index c5265556e..57c024bbf 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -7,6 +7,7 @@ max-width: 100%; max-height: 100%; pointer-events: none; + background:transparent; } .imageBox-container { @@ -52,6 +53,10 @@ padding: 3px; background: white; cursor: pointer; + opacity:0.15; +} +#google-photos:hover{ + opacity: 1; } #google-tags { diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index ff129cf1d..fbf05d148 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -57,29 +57,16 @@ const ImageDocument = makeInterface(pageSchema, documentSchema); @observer export class ImageBox extends DocAnnotatableComponent(ImageDocument) { - public static LayoutString(fieldExt?: string) { return FieldView.LayoutString(ImageBox, "data", fieldExt); } - @observable static _showControls: boolean; private _imgRef: React.RefObject = React.createRef(); - private _downX: number = 0; - private _downY: number = 0; - private _lastTap: number = 0; + private _dropDisposer?: DragManager.DragDropDisposer; @observable private _isOpen: boolean = false; - private dropDisposer?: DragManager.DragDropDisposer; - @observable private hoverActive = false; + @observable private _audioState = 0; + @observable static _showControls: boolean; protected createDropTarget = (ele: HTMLDivElement) => { - if (this.dropDisposer) { - this.dropDisposer(); - } - if (ele) { - this.dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.drop.bind(this) } }); - } - } - onDrop = (e: React.DragEvent) => { - e.stopPropagation(); - e.preventDefault(); - console.log("IMPLEMENT ME PLEASE"); + this._dropDisposer && this._dropDisposer(); + ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.drop.bind(this) } })); } @undoBatch @@ -97,29 +84,6 @@ export class ImageBox extends DocAnnotatableComponent { - if (e.shiftKey && e.ctrlKey) { - e.stopPropagation(); // allows default system drag drop of images with shift+ctrl only - } - // if (Date.now() - this._lastTap < 300) { - // if (e.buttons === 1) { - // this._downX = e.clientX; - // this._downY = e.clientY; - // document.removeEventListener("pointerup", this.onPointerUp); - // document.addEventListener("pointerup", this.onPointerUp); - // } - // } else { - // this._lastTap = Date.now(); - // } - } - @action - onPointerUp = (e: PointerEvent): void => { - document.removeEventListener("pointerup", this.onPointerUp); - if (Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2) { - this._isOpen = true; - } - e.stopPropagation(); - } @action lightbox = (images: string[]) => { @@ -193,12 +157,10 @@ export class ImageBox extends DocAnnotatableComponent { - let field = Cast(this.Document[this.props.fieldKey], ImageField); + const field = Cast(this.Document[this.props.fieldKey], ImageField); if (field) { - let url = field.url.href; let funcs: ContextMenuProps[] = []; - funcs.push({ description: "Copy path", event: () => Utils.CopyText(url), icon: "expand-arrows-alt" }); - funcs.push({ description: "Record 1sec audio", event: this.recordAudioAnnotation, icon: "expand-arrows-alt" }); + funcs.push({ description: "Copy path", event: () => Utils.CopyText(field.url.href), icon: "expand-arrows-alt" }); funcs.push({ description: "Rotate", event: this.rotate, icon: "expand-arrows-alt" }); let existingAnalyze = ContextMenu.Instance.findByDescription("Analyzers..."); @@ -214,12 +176,10 @@ export class ImageBox extends DocAnnotatableComponent { let converter = (results: any) => { let faceDocs = new List(); - results.map((face: CognitiveServices.Image.Face) => faceDocs.push(Docs.Get.DocumentHierarchyFromJson(face, `Face: ${face.faceId}`)!)); + results.reduce((face: CognitiveServices.Image.Face, faceDocs: List) => faceDocs.push(Docs.Get.DocumentHierarchyFromJson(face, `Face: ${face.faceId}`)!), new List()); return faceDocs; }; - if (this.url) { - CognitiveServices.Image.Appliers.ProcessImage(this.extensionDoc, ["faces"], this.url, Service.Face, converter); - } + this.url && CognitiveServices.Image.Appliers.ProcessImage(this.extensionDoc, ["faces"], this.url, Service.Face, converter); } generateMetadata = (threshold: Confidence = Confidence.Excellent) => { @@ -236,31 +196,14 @@ export class ImageBox extends DocAnnotatableComponent -
-
{ e.stopPropagation(); this.onDotDown(i); }} /> -
- ); - } - choosePath(url: URL) { const lower = url.href.toLowerCase(); if (url.protocol === "data") { @@ -305,13 +248,9 @@ export class ImageBox extends DocAnnotatableComponent { - console.log(err); - }); + .catch((err: any) => console.log(err)); } - @observable _audioState = 0; - @action onPointerEnter = () => { let self = this; @@ -330,20 +269,6 @@ export class ImageBox extends DocAnnotatableComponent self._audioState = 0); - // } - // }); - // } - // } } audioDown = () => this.recordAudioAnnotation(); @@ -353,7 +278,6 @@ export class ImageBox extends DocAnnotatableComponent window.open(remoteUrl)} />); } @@ -364,7 +288,6 @@ export class ImageBox extends DocAnnotatableComponent this.hoverActive = true)} - onPointerLeave={action(() => this.hoverActive = false)} - onDrop={this.onDrop} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}> +
}
- {paths.length > 1 ? this.dots(paths) : (null)}
{this.considerGooglePhotosLink()} - {/* {this.lightbox(paths)} */}
); } render() { - trace(); if (!Doc.UpdateDocumentExtensionForField(this.dataDoc, this.props.fieldKey)) return (null); return (
Date: Tue, 19 Nov 2019 11:58:09 -0500 Subject: fixed drawing on images, pdfs, and videos --- src/client/views/DocComponent.tsx | 2 ++ .../collectionFreeForm/CollectionFreeFormView.tsx | 34 +++++++--------------- src/client/views/nodes/FormattedTextBox.tsx | 2 +- src/client/views/nodes/ImageBox.scss | 1 + src/client/views/nodes/ImageBox.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 2 +- src/client/views/pdf/PDFViewer.scss | 7 ++++- src/client/views/pdf/PDFViewer.tsx | 6 ++-- 8 files changed, 26 insertions(+), 30 deletions(-) (limited to 'src/client/views/nodes/ImageBox.scss') diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index 961a5a016..286a77f81 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -84,6 +84,8 @@ export function DocAnnotatableComponent

(schema whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive)); active = () => ((InkingControl.Instance.selectedTool === InkTool.None && !this.props.Document.isBackground) && (this.props.Document.forceActive || this.props.isSelected() || this._isChildActive || this.props.renderDepth === 0) ? true : false) + annotationsActive = () => (InkingControl.Instance.selectedTool !== InkTool.None || + (this.props.Document.forceActive || this.props.isSelected() || this._isChildActive || this.props.renderDepth === 0) ? true : false) } return Component; } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 3b313c34a..2a63a3074 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -4,43 +4,41 @@ import { faBraille, faChalkboard, faCompass, faCompressArrowsAlt, faExpandArrows import { action, computed, observable, trace } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../../new_fields/Doc"; +import { documentSchema, positionSchema } from "../../../../new_fields/documentSchemas"; import { Id } from "../../../../new_fields/FieldSymbols"; -import { InkField, PointData, InkTool } from "../../../../new_fields/InkField"; +import { InkTool } from "../../../../new_fields/InkField"; import { createSchema, makeInterface } from "../../../../new_fields/Schema"; import { ScriptField } from "../../../../new_fields/ScriptField"; import { BoolCast, Cast, DateCast, NumCast, StrCast } from "../../../../new_fields/Types"; import { CurrentUserUtils } from "../../../../server/authentication/models/current_user_utils"; import { aggregateBounds, emptyFunction, intersectRect, returnOne, Utils } from "../../../../Utils"; -import { CognitiveServices } from "../../../cognitive_services/CognitiveServices"; import { DocServer } from "../../../DocServer"; import { Docs } from "../../../documents/Documents"; import { DocumentType } from "../../../documents/DocumentTypes"; import { DocumentManager } from "../../../util/DocumentManager"; import { DragManager } from "../../../util/DragManager"; import { HistoryUtil } from "../../../util/History"; +import { InteractionUtils } from "../../../util/InteractionUtils"; import { SelectionManager } from "../../../util/SelectionManager"; import { Transform } from "../../../util/Transform"; import { undoBatch, UndoManager } from "../../../util/UndoManager"; import { COLLECTION_BORDER_WIDTH } from "../../../views/globalCssVariables.scss"; import { ContextMenu } from "../../ContextMenu"; import { ContextMenuProps } from "../../ContextMenuItem"; -import { InkingCanvas } from "../../InkingCanvas"; +import { InkingControl } from "../../InkingControl"; +import { CreatePolyline } from "../../InkingStroke"; import { CollectionFreeFormDocumentView } from "../../nodes/CollectionFreeFormDocumentView"; import { DocumentViewProps } from "../../nodes/DocumentView"; import { FormattedTextBox } from "../../nodes/FormattedTextBox"; import { pageSchema } from "../../nodes/ImageBox"; +import PDFMenu from "../../pdf/PDFMenu"; import { CollectionSubView } from "../CollectionSubView"; import { computePivotLayout, ViewDefResult } from "./CollectionFreeFormLayoutEngines"; import { CollectionFreeFormRemoteCursors } from "./CollectionFreeFormRemoteCursors"; import "./CollectionFreeFormView.scss"; +import MarqueeOptionsMenu from "./MarqueeOptionsMenu"; import { MarqueeView } from "./MarqueeView"; import React = require("react"); -import { InteractionUtils } from "../../../util/InteractionUtils"; -import MarqueeOptionsMenu from "./MarqueeOptionsMenu"; -import PDFMenu from "../../pdf/PDFMenu"; -import { documentSchema, positionSchema } from "../../../../new_fields/documentSchemas"; -import { InkingControl } from "../../InkingControl"; -import { InkingStroke, CreatePolyline } from "../../InkingStroke"; library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload); @@ -273,7 +271,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { onPointerDown = (e: React.PointerEvent): void => { if (e.nativeEvent.cancelBubble) return; this._hitCluster = this.props.Document.useClusters ? this.pickCluster(this.getTransform().transformPoint(e.clientX, e.clientY)) !== -1 : false; - if (e.button === 0 && !e.shiftKey && !e.altKey && !e.ctrlKey && (!this.isAnnotationOverlay || this.zoomScaling() !== 1) && this.props.active()) { + if (e.button === 0 && !e.shiftKey && !e.altKey && !e.ctrlKey && this.props.active()) { document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); document.addEventListener("pointermove", this.onPointerMove); @@ -344,14 +342,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { return [[range[0][0] > x ? x : range[0][0], range[0][1] < xe ? xe : range[0][1]], [range[1][0] > y ? y : range[1][0], range[1][1] < ye ? ye : range[1][1]]]; }, [[minx, maxx], [miny, maxy]]); - let ink = this.extensionDoc && Cast(this.extensionDoc.ink, InkField); - if (ink && ink.inkData) { - // ink.inkData.forEach((value: PointData, key: string) => { - // let bounds = InkingCanvas.StrokeRect(value); - // ranges[0] = [Math.min(ranges[0][0], bounds.left), Math.max(ranges[0][1], bounds.right)]; - // ranges[1] = [Math.min(ranges[1][0], bounds.top), Math.max(ranges[1][1], bounds.bottom)]; - // }); - } let cscale = this.props.ContainingCollectionDoc ? NumCast(this.props.ContainingCollectionDoc.scale) : 1; let panelDim = this.props.ScreenToLocalTransform().transformDirection(this.props.PanelWidth() / this.zoomScaling() * cscale, @@ -757,11 +747,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { } analyzeStrokes = async () => { - const extensionDoc = this.extensionDoc; - let data = extensionDoc && Cast(extensionDoc.ink, InkField); - if (data && extensionDoc) { - CognitiveServices.Inking.Appliers.ConcatenateHandwriting(extensionDoc, ["inkAnalysis", "handwriting"], data.inkData); - } + // CognitiveServices.Inking.Appliers.ConcatenateHandwriting(this.dataDoc, ["inkAnalysis", "handwriting"], data.inkData); } onContextMenu = (e: React.MouseEvent) => { @@ -852,8 +838,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { children = () => { let eles: JSX.Element[] = []; - this.currentStroke && (eles.push(this.currentStroke)); this.extensionDoc && (eles.push(...this.childViews())); + this.currentStroke && (eles.push(this.currentStroke)); eles.push(); return eles; } diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 4a79a44d4..4ecdc95ac 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -1058,7 +1058,7 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps & focus={this.props.focus} isSelected={this.props.isSelected} select={emptyFunction} - active={this.active} + active={this.annotationsActive} ContentScaling={returnOne} whenActiveChanged={this.whenActiveChanged} removeDocument={this.removeDocument} diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index 57c024bbf..dcecbdc6e 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -11,6 +11,7 @@ } .imageBox-container { + pointer-events: all; border-radius: inherit; width:100%; height:100%; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 2a81c3577..5d40e274f 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -343,7 +343,7 @@ export class ImageBox extends DocAnnotatableComponent (this.Document.scrollHeight || this.Document.nativeHeight || 0); panelHeight = () => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : (this.Document.nativeWidth || 0); @computed get overlayLayer() { - return

+ return