From 3d8bd17fa4f031f2223840b336c313a18e7e87aa Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 14 Nov 2022 14:29:48 -0500 Subject: fixed following link 'inPlace' from within lightbox to do same thing as if out of lightbox. fixed contentActive behavior for multicolumn view. removed progressivize from presbox. --- .../collectionFreeForm/CollectionFreeFormView.scss | 50 ---------------------- 1 file changed, 50 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index d80fcdfc3..7a7ae3f40 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -96,37 +96,6 @@ border-color: #69a5db; } -.progressivizeButton { - position: absolute; - display: grid; - grid-template-columns: auto 20px auto; - transform: translate(-105%, 0); - align-items: center; - border: black solid 1px; - border-radius: 3px; - justify-content: center; - width: 40; - z-index: 30000; - height: 20; - overflow: hidden; - background-color: #d5dce2; - transition: all 1s; - - .progressivizeButton-prev:hover { - color: #5a9edd; - } - - .progressivizeButton-frame { - justify-self: center; - text-align: center; - width: 15px; - } - - .progressivizeButton-next:hover { - color: #5a9edd; - } -} - .resizable { background: rgba(0, 0, 0, 0.2); width: 100px; @@ -178,25 +147,6 @@ } } -.progressivizeMove-frame { - width: 20px; - border-radius: 2px; - z-index: 100000; - color: white; - text-align: center; - background-color: #5a9edd; - transform: translate(-110%, 110%); -} - -.progressivizeButton:hover { - box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5); - - .progressivizeButton-frame { - background-color: #5a9edd; - color: white; - } -} - .collectionFreeform-customText { position: absolute; text-align: center; -- cgit v1.2.3-70-g09d2 From 5aff8956fb5a48bd2188ffca9b650b378669b921 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 10 Feb 2023 14:59:27 -0500 Subject: changed ink masks to have a blur and to allow masks of different colors by adjusting the color value to have no blackness. --- src/client/util/InteractionUtils.tsx | 9 ++++++++- src/client/views/InkingStroke.tsx | 15 ++++++++------- .../collectionFreeForm/CollectionFreeFormView.scss | 2 +- 3 files changed, 17 insertions(+), 9 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss') diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 3cdf4dbd2..9591dbed3 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -107,7 +107,8 @@ export namespace InteractionUtils { pevents: string, opacity: number, nodefs: boolean, - downHdlr?: (e: React.PointerEvent) => void + downHdlr?: (e: React.PointerEvent) => void, + mask?: boolean ) { const pts = shape ? makePolygon(shape, points) : points; @@ -133,6 +134,11 @@ export namespace InteractionUtils { {/* setting the svg fill sets the arrowStart fill */} {nodefs ? null : ( + {!mask ? null : ( + + + + )} {arrowStart !== 'dot' && arrowEnd !== 'dot' ? null : ( @@ -168,6 +174,7 @@ export namespace InteractionUtils { style={{ // filter: drawHalo ? "url(#inkSelectionHalo)" : undefined, fill: fill && fill !== 'transparent' ? fill : 'none', + filter: mask ? `url(#mask${defGuid})` : undefined, 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 d7e8b1c05..8291ff3f1 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -27,7 +27,7 @@ import { Doc, HeightSym, WidthSym } from '../../fields/Doc'; import { InkData, InkField } from '../../fields/InkField'; import { BoolCast, Cast, NumCast, RTFCast, StrCast } from '../../fields/Types'; import { TraceMobx } from '../../fields/util'; -import { OmitKeys, returnFalse, setupMoveUpEvents } from '../../Utils'; +import { DashColor, OmitKeys, returnFalse, setupMoveUpEvents } from '../../Utils'; import { CognitiveServices } from '../cognitive_services/CognitiveServices'; import { InteractionUtils } from '../util/InteractionUtils'; import { SnappingManager } from '../util/SnappingManager'; @@ -355,7 +355,7 @@ export class InkingStroke extends ViewBoxBaseComponent() { const markerScale = NumCast(this.layoutDoc.strokeMarkerScale, 1); const closed = InkingStroke.IsClosed(inkData); const isInkMask = BoolCast(this.layoutDoc.isInkMask); - const fillColor = isInkMask ? Colors.WHITE : StrCast(this.layoutDoc.fillColor, 'transparent'); + const fillColor = isInkMask ? DashColor(StrCast(this.layoutDoc.fillColor, 'transparent')).blacken(0).rgb().toString() : StrCast(this.layoutDoc.fillColor, 'transparent'); const strokeColor = !closed && fillColor && fillColor !== 'transparent' ? fillColor : this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color) ?? StrCast(this.layoutDoc.color); // bcz: Hack!! Not really sure why, but having fractional values for width/height of mask ink strokes causes the dragging clone (see DragManager) to be offset from where it should be. @@ -393,7 +393,7 @@ export class InkingStroke extends ViewBoxBaseComponent() { const highlightIndex = highlight?.highlightIndex; const highlightColor = highlight?.highlightIndex ? highlight?.highlightColor : StrCast(this.layoutDoc.strokeOutlineColor, !closed && fillColor && fillColor !== 'transparent' ? StrCast(this.layoutDoc.color, 'transparent') : 'transparent'); // Invisible polygonal line that enables the ink to be selected by the user. - const clickableLine = (downHdlr?: (e: React.PointerEvent) => void, suppressFill: boolean = false) => + const clickableLine = (downHdlr?: (e: React.PointerEvent) => void, suppressFill: boolean = false, mask: boolean = false) => InteractionUtils.CreatePolyline( inkData, inkLeft, @@ -404,7 +404,7 @@ export class InkingStroke extends ViewBoxBaseComponent() { StrCast(this.layoutDoc.strokeLineJoin), StrCast(this.layoutDoc.strokeLineCap), StrCast(this.layoutDoc.strokeBezier), - !closed ? 'none' : fillColor === 'transparent' || suppressFill ? 'none' : fillColor, + !closed ? 'none' : !isInkMask && (fillColor === 'transparent' || suppressFill) ? 'none' : fillColor, '', '', markerScale, @@ -415,7 +415,8 @@ export class InkingStroke extends ViewBoxBaseComponent() { this.props.pointerEvents?.() ?? (this.rootDoc._lockedPosition ? 'none' : 'visiblepainted'), 0.0, false, - downHdlr + downHdlr, + mask ); const fsize = +StrCast(this.props.Document.fontSize, '12px').replace('px', ''); // bootsrap 3 style sheet sets line height to be 20px for default 14 point font size. @@ -443,8 +444,8 @@ export class InkingStroke extends ViewBoxBaseComponent() { cursor: this.props.isSelected() ? 'default' : undefined, }} {...interactions}> - {clickableLine(this.onPointerDown)} - {inkLine} + {clickableLine(this.onPointerDown, undefined, isInkMask)} + {isInkMask ? null : inkLine} {!closed || (!RTFCast(this.rootDoc.text)?.Text && (!this.props.isSelected() || Doc.UserDoc().activeInkHideTextLabels)) ? null : (