diff options
| -rw-r--r-- | src/client/util/InteractionUtils.tsx | 22 | ||||
| -rw-r--r-- | src/client/views/InkingStroke.tsx | 6 | ||||
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 5 |
3 files changed, 17 insertions, 16 deletions
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 61872417b..3e051dec8 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -107,25 +107,25 @@ export namespace InteractionUtils { const defGuid = Utils.GenerateGuid(); const Tag = (bezier ? "path" : "polyline") as keyof JSX.IntrinsicElements; - const makerStrokeWidth = strokeWidth / 2; - const arrowWidthFactor = 3 * (markerScale ? markerScale : 0.5);// used to be 1.5 - const arrowLengthFactor = 5 * (markerScale ? markerScale : 0.5); - const arrowNotchFactor = 2 * (markerScale ? markerScale : 0.5); + const markerStrokeWidth = strokeWidth / 2; + const arrowWidthFactor = 3 * (markerScale || 0.5);// used to be 1.5 + const arrowLengthFactor = 5 * (markerScale || 0.5); + const arrowNotchFactor = 2 * (markerScale || 0.5); return (<svg fill={color} onPointerDown={downHdlr}> {/* setting the svg fill sets the arrowStart fill */} {nodefs ? (null) : <defs> {arrowStart !== "dot" && arrowEnd !== "dot" ? (null) : <marker id={`dot${defGuid}`} orient="auto" markerUnits="userSpaceOnUse" refX={0} refY="0" overflow="visible"> - <circle r={strokeWidth * 1.5} fill="context-stroke" /> + <circle r={strokeWidth * arrowWidthFactor} fill="context-stroke" /> </marker>} {arrowStart !== "arrow" ? (null) : - <marker id={`arrowStart${defGuid}`} markerUnits="userSpaceOnUse" orient="auto" overflow="visible" refX={makerStrokeWidth * (arrowLengthFactor - arrowNotchFactor)} refY={0} markerWidth="10" markerHeight="7"> - <polygon style={{ stroke: color }} strokeLinejoin={lineJoin as any} strokeWidth={makerStrokeWidth * 2 / 3} - points={`${arrowLengthFactor * makerStrokeWidth} ${-makerStrokeWidth * arrowWidthFactor}, ${makerStrokeWidth * (arrowLengthFactor - arrowNotchFactor)} 0, ${arrowLengthFactor * makerStrokeWidth} ${makerStrokeWidth * arrowWidthFactor}, 0 0`} /> + <marker id={`arrowStart${defGuid}`} markerUnits="userSpaceOnUse" orient="auto" overflow="visible" refX={markerStrokeWidth * (arrowLengthFactor - arrowNotchFactor)} refY={0} markerWidth="10" markerHeight="7"> + <polygon style={{ stroke: color }} strokeLinejoin={lineJoin as any} strokeWidth={markerStrokeWidth * 2 / 3} + points={`${arrowLengthFactor * markerStrokeWidth} ${-markerStrokeWidth * arrowWidthFactor}, ${markerStrokeWidth * (arrowLengthFactor - arrowNotchFactor)} 0, ${arrowLengthFactor * markerStrokeWidth} ${markerStrokeWidth * arrowWidthFactor}, 0 0`} /> </marker>} {arrowEnd !== "arrow" ? (null) : - <marker id={`arrowEnd${defGuid}`} markerUnits="userSpaceOnUse" orient="auto" overflow="visible" refX={makerStrokeWidth * arrowNotchFactor} refY={0} markerWidth="10" markerHeight="7"> - <polygon style={{ stroke: color }} strokeLinejoin={lineJoin as any} strokeWidth={makerStrokeWidth * 2 / 3} - points={`0 ${-makerStrokeWidth * arrowWidthFactor}, ${makerStrokeWidth * arrowNotchFactor} 0, 0 ${makerStrokeWidth * arrowWidthFactor}, ${arrowLengthFactor * makerStrokeWidth} 0`} /> + <marker id={`arrowEnd${defGuid}`} markerUnits="userSpaceOnUse" orient="auto" overflow="visible" refX={markerStrokeWidth * arrowNotchFactor} refY={0} markerWidth="10" markerHeight="7"> + <polygon style={{ stroke: color }} strokeLinejoin={lineJoin as any} strokeWidth={markerStrokeWidth * 2 / 3} + points={`0 ${-markerStrokeWidth * arrowWidthFactor}, ${markerStrokeWidth * arrowNotchFactor} 0, 0 ${markerStrokeWidth * arrowWidthFactor}, ${arrowLengthFactor * markerStrokeWidth} 0`} /> </marker>} </defs>} diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 5c7fc94bd..9dbd97c16 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -250,8 +250,8 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume */ componentUI = (boundsLeft: number, boundsTop: number) => { const inkDoc = this.props.Document; - const screenSpaceCenterlineStrokeWidth = 3; // the width of the blue line widget that shows the centerline of the ink stroke const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData(); + const screenSpaceCenterlineStrokeWidth = Math.min(3, inkStrokeWidth * this.props.ScreenToLocalTransform().inverse().Scale); // the width of the blue line widget that shows the centerline of the ink stroke const screenInkWidth = this.props.ScreenToLocalTransform().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth); const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().inverse().transformPoint( @@ -261,7 +261,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume const startMarker = StrCast(this.layoutDoc.strokeStartMarker); const endMarker = StrCast(this.layoutDoc.strokeEndMarker); - const markerScale = NumCast(this.layoutDoc.strokeMarkerScale, 1); + const markerScale = NumCast(this.layoutDoc.strokeMarkerScale); return SnappingManager.GetIsDragging() ? (null) : !InkStrokeProperties.Instance._controlButton ? (!this.props.isSelected() || InkingStroke.IsClosed(inkData) ? (null) : @@ -275,7 +275,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume <div className="inkstroke-UI" style={{ clip: `rect(${boundsTop}px, 10000px, 10000px, ${boundsLeft}px)` }}> {InteractionUtils.CreatePolyline(screenPts, 0, 0, Colors.MEDIUM_BLUE, screenInkWidth[0], screenSpaceCenterlineStrokeWidth, StrCast(inkDoc.strokeLineJoin), StrCast(this.layoutDoc.strokeLineCap), StrCast(inkDoc.strokeBezier), - "none", startMarker, endMarker, markerScale, StrCast(inkDoc.strokeDash), 1, 1, "", "none", 1.0, false)} + "none", startMarker, endMarker, markerScale * Math.min(screenSpaceCenterlineStrokeWidth, screenInkWidth[0] / screenSpaceCenterlineStrokeWidth), StrCast(inkDoc.strokeDash), 1, 1, "", "none", 1.0, false)} <InkControlPtHandles inkView={this.props.docViewPath().lastElement()} inkDoc={inkDoc} diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 8e2426006..0f2870480 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1123,14 +1123,15 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { <div className="propertiesView-name"> {this.editableTitle} </div> + + {this.inkSubMenu} + {this.optionsSubMenu} {this.sharingSubMenu} {isNovice ? null : this.filtersSubMenu} - {this.inkSubMenu} - {isNovice ? null : this.fieldsSubMenu} {isNovice ? null : this.contextsSubMenu} |