From 7e439440a1d7fc3e3b29333b0502d6ed4d178309 Mon Sep 17 00:00:00 2001 From: vkalev Date: Wed, 18 Aug 2021 12:12:23 -0400 Subject: highlighter tool added & working --- src/client/util/InteractionUtils.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'src/client/util/InteractionUtils.tsx') diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index e009fb3a9..15a6709a2 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -3,6 +3,8 @@ import * as beziercurve from 'bezier-curve'; import * as fitCurve from 'fit-curve'; import "./InteractionUtils.scss"; import { Utils } from "../../Utils"; +import { CurrentUserUtils } from "./CurrentUserUtils"; +import { InkTool } from "../../fields/InkField"; export namespace InteractionUtils { export const MOUSETYPE = "mouse"; @@ -139,7 +141,7 @@ export namespace InteractionUtils { export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color: string, width: number, strokeWidth: number, bezier: string, fill: string, arrowStart: string, arrowEnd: string, - dash: string | undefined, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean, nodefs: boolean) { + dash: string | undefined, scalex: number, scaley: number, shape: string, pevents: string, opacity: number, nodefs: boolean) { let pts: { X: number; Y: number; }[] = []; if (shape) { //if any of the shape are true pts = makePolygon(shape, points); @@ -210,7 +212,7 @@ export namespace InteractionUtils { style={{ // filter: drawHalo ? "url(#inkSelectionHalo)" : undefined, fill: fill ? fill : "none", - opacity: 1.0, + opacity: opacity, // opacity: strokeWidth !== width ? 0.5 : undefined, pointerEvents: pevents as any, stroke: color ?? "rgb(0, 0, 0)", -- cgit v1.2.3-70-g09d2 From b04ec7f52265a27e9d72a3738fa474cfaefcdcd9 Mon Sep 17 00:00:00 2001 From: vkalev Date: Sat, 21 Aug 2021 16:55:55 -0400 Subject: added unrounded endpoints for highlight ink strokes --- src/client/util/InteractionUtils.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/util/InteractionUtils.tsx') diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 15a6709a2..a11c090a7 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -217,8 +217,8 @@ export namespace InteractionUtils { pointerEvents: pevents as any, stroke: color ?? "rgb(0, 0, 0)", strokeWidth: strokeWidth, - strokeLinejoin: "round", - strokeLinecap: "round", + strokeLinejoin: color === "rgba(245, 230, 95, 0.75)" ? "miter" : "round", + strokeLinecap: color === "rgba(245, 230, 95, 0.75)" ? "square" : "round", strokeDasharray: dashArray }} markerStart={`url(#${arrowStart + "Start" + defGuid})`} -- cgit v1.2.3-70-g09d2 From c9c9d00b581bc7f80edbf7848a8ffb3a8e64f005 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 10 Sep 2021 10:14:04 -0400 Subject: event handling fixes for ink. double click on deselected ink takes shows handles. lightbox view works. transparent fills are not selectable. --- src/client/util/InteractionUtils.tsx | 2 +- src/client/views/InkingStroke.tsx | 48 ++++++++++++++++------ src/client/views/nodes/DocumentContentsView.tsx | 1 - src/client/views/nodes/DocumentView.tsx | 8 ++-- .../views/nodes/formattedText/FormattedTextBox.tsx | 3 +- 5 files changed, 41 insertions(+), 21 deletions(-) (limited to 'src/client/util/InteractionUtils.tsx') diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index e009fb3a9..8429a806a 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -209,7 +209,7 @@ export namespace InteractionUtils { points={strpts} style={{ // filter: drawHalo ? "url(#inkSelectionHalo)" : undefined, - fill: fill ? fill : "none", + fill: fill && fill !== "transparent" ? fill : "none", opacity: 1.0, // opacity: strokeWidth !== width ? 0.5 : undefined, pointerEvents: pevents as any, diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index db09849fd..dc2a5b39b 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -1,26 +1,26 @@ import React = require("react"); -import { action, observable } from "mobx"; +import { action, IReactionDisposer, observable, reaction } from "mobx"; import { observer } from "mobx-react"; import { Doc } from "../../fields/Doc"; import { documentSchema } from "../../fields/documentSchemas"; import { InkData, InkField, InkTool } from "../../fields/InkField"; import { makeInterface } from "../../fields/Schema"; -import { Cast, StrCast, NumCast } from "../../fields/Types"; +import { Cast, NumCast, StrCast } from "../../fields/Types"; import { TraceMobx } from "../../fields/util"; -import { setupMoveUpEvents, emptyFunction, returnFalse } from "../../Utils"; +import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../Utils"; import { CognitiveServices } from "../cognitive_services/CognitiveServices"; +import { CurrentUserUtils } from "../util/CurrentUserUtils"; import { InteractionUtils } from "../util/InteractionUtils"; import { Scripting } from "../util/Scripting"; import { ContextMenu } from "./ContextMenu"; import { ViewBoxBaseComponent } from "./DocComponent"; -import "./InkStroke.scss"; -import { FieldView, FieldViewProps } from "./nodes/FieldView"; -import { InkStrokeProperties } from "./InkStrokeProperties"; -import { CurrentUserUtils } from "../util/CurrentUserUtils"; +import { GestureOverlay } from "./GestureOverlay"; +import { Colors } from "./global/globalEnums"; import { InkControls } from "./InkControls"; import { InkHandles } from "./InkHandles"; -import { Colors } from "./global/globalEnums"; -import { GestureOverlay } from "./GestureOverlay"; +import "./InkStroke.scss"; +import { InkStrokeProperties } from "./InkStrokeProperties"; +import { FieldView, FieldViewProps } from "./nodes/FieldView"; type InkDocument = makeInterface<[typeof documentSchema]>; const InkDocument = makeInterface(documentSchema); @@ -29,6 +29,8 @@ const InkDocument = makeInterface(documentSchema); export class InkingStroke extends ViewBoxBaseComponent(InkDocument) { static readonly MaskDim = 50000; @observable private _properties?: InkStrokeProperties; + _handledClick = false; // flag denoting whether ink stroke has handled a psuedo-click onPointerUp so that the real onClick event can be stopPropagated + _selDisposer: IReactionDisposer | undefined; constructor(props: FieldViewProps & InkDocument) { super(props); @@ -36,6 +38,14 @@ export class InkingStroke extends ViewBoxBaseComponent this.props.isSelected(), // react to stroke being deselected by turning off ink handles + selected => !selected && this.toggleControlButton()); + } + componentWillUnmount() { + this._selDisposer?.(); + } + public static LayoutString(fieldStr: string) { return FieldView.LayoutString(InkingStroke, fieldStr); } @@ -53,14 +63,26 @@ export class InkingStroke extends ViewBoxBaseComponent { + if (this._handledClick) { + e.stopPropagation(); //stop the event so that docView won't open the lightbox + } + } + /** * Handles the movement of the entire ink object when the user clicks and drags. */ onPointerDown = (e: React.PointerEvent) => { + this._handledClick = false; if (this.props.isSelected(true)) { setupMoveUpEvents(this, e, returnFalse, emptyFunction, - action((e: PointerEvent, doubleTap: boolean | undefined) => - doubleTap && this._properties && (this._properties._controlButton = true)) + action((e: PointerEvent, doubleTap: boolean | undefined) => { + doubleTap = doubleTap || this.props.docViewPath().lastElement()?.docView?._pendingDoubleClick; + if (doubleTap && this._properties) { + this._properties._controlButton = true; + this._handledClick = true; // mark the double-click pseudo pointerevent so we can block the real mouse event from propagating to DocumentView + } + }), this._properties?._controlButton, this._properties?._controlButton ); } } @@ -77,7 +99,6 @@ export class InkingStroke extends ViewBoxBaseComponent { const cm = ContextMenu.Instance; if (cm) { diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index fad905d6d..dbab5e762 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -113,7 +113,6 @@ export class DocumentContentsView extends React.Component number, setHeight: (height: number) => void, layoutKey: string, - hideOnLeave?: boolean, }> { @computed get layout(): string { TraceMobx(); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 8b19fb204..a2d2f17b6 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -808,7 +808,7 @@ export class DocumentViewInternal extends DocComponent; return
+
field.trim()).map(field => targetDoc[field]?.toString()).join("\\")} diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 78de1fd89..e7a44f113 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -69,7 +69,6 @@ const translateGoogleApi = require("translate-google-api"); export interface FormattedTextBoxProps { makeLink?: () => Opt; // bcz: hack: notifies the text document when the container has made a link. allows the text doc to react and setup a hyeprlink for any selected text - hideOnLeave?: boolean; // used by DocumentView for setting caption's hide on leave (bcz: would prefer to have caption-hideOnLeave field set or something similar) xPadding?: number; // used to override document's settings for xMargin --- see CollectionCarouselView yPadding?: number; noSidebar?: boolean; @@ -1558,7 +1557,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp TraceMobx(); const selected = this.props.isSelected(); const active = this.props.isContentActive(); - const scale = this.props.hideOnLeave ? 1 : (this.props.scaling?.() || 1) * NumCast(this.layoutDoc._viewScale, 1); + const scale = (this.props.scaling?.() || 1) * NumCast(this.layoutDoc._viewScale, 1); const rounded = StrCast(this.layoutDoc.borderRounding) === "100%" ? "-rounded" : ""; const interactive = (CurrentUserUtils.SelectedTool === InkTool.None || SnappingManager.GetIsDragging()) && (this.layoutDoc.z || this.props.layerProvider?.(this.layoutDoc) !== false); if (!selected && FormattedTextBoxComment.textBox === this) setTimeout(FormattedTextBoxComment.Hide); -- cgit v1.2.3-70-g09d2