changed ink masks to have a blur and to allow masks of different colors by adjusting the color value to have no blackness.

3 files changed, 17 insertions, 9 deletions

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 : (
                     <defs>
+                        {!mask ? null : (
+                            <filter id={`mask${defGuid}`} x="-1" y="-1" width="500%" height="500%">
+                                <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5"></feGaussianBlur>
+                            </filter>
+                        )}
                         {arrowStart !== 'dot' && arrowEnd !== 'dot' ? null : (
                             <marker id={`dot${defGuid}`} orient="auto" markerUnits="userSpaceOnUse" refX={0} refY="0" overflow="visible">
                                 <circle r={strokeWidth * arrowWidthFactor} fill="context-stroke" />
@@ -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<FieldViewProps>() {
         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<FieldViewProps>() {
         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<FieldViewProps>() {
                 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<FieldViewProps>() {
                 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<FieldViewProps>() {
                         cursor: this.props.isSelected() ? 'default' : undefined,
                     }}
                     {...interactions}>
-                    {clickableLine(this.onPointerDown)}
-                    {inkLine}
+                    {clickableLine(this.onPointerDown, undefined, isInkMask)}
+                    {isInkMask ? null : inkLine}
                 </svg>
                 {!closed || (!RTFCast(this.rootDoc.text)?.Text && (!this.props.isSelected() || Doc.UserDoc().activeInkHideTextLabels)) ? null : (
                     <div
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 7a7ae3f40..c6419885b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -33,7 +33,7 @@
 }
 .collectionfreeformview-mask {
     mix-blend-mode: multiply;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.8);
 }
 
 .collectionfreeformview-viewdef {