diff options
| author | Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> | 2021-08-02 12:10:13 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-08-02 12:10:13 -0400 |
| commit | 2176e4e69ce69b949e66a90cc83e49ab96dedb5d (patch) | |
| tree | 69c94a61ba4a123db8ec13f38abc8693bb276135 /src/client/views/InkHandles.tsx | |
| parent | 077723a6863bbb537756180450bdf9addeec021a (diff) | |
| parent | 61d01ac7e7a2ff2df3a083aaa87ca5d8edbf71e8 (diff) | |
Merge pull request #23 from brown-dash/ink-gfx-victor
Ink Format Visual Edits + Snapping Handle Tangency
Diffstat (limited to 'src/client/views/InkHandles.tsx')
| -rw-r--r-- | src/client/views/InkHandles.tsx | 14 |
1 files changed, 8 insertions, 6 deletions
diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx index 28b6dd820..f1eb4b9db 100644 --- a/src/client/views/InkHandles.tsx +++ b/src/client/views/InkHandles.tsx @@ -10,6 +10,7 @@ import { Doc } from "../../fields/Doc"; import { listSpec } from "../../fields/Schema"; import { List } from "../../fields/List"; import { Cast } from "../../fields/Types"; +import { Colors } from "./global/globalEnums"; export interface InkHandlesProps { inkDoc: Doc; @@ -50,6 +51,7 @@ export class InkHandles extends React.Component<InkHandlesProps> { onBreakTangent = (e: KeyboardEvent, controlIndex: number) => { const doc: Doc = this.props.inkDoc; if (["Alt"].includes(e.key)) { + e.stopPropagation(); if (doc) { const brokenIndices = Cast(doc.brokenInkIndices, listSpec("number")) || new List; if (brokenIndices && !brokenIndices.includes(controlIndex)) { @@ -80,7 +82,7 @@ export class InkHandles extends React.Component<InkHandlesProps> { handleLines.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 1].X, Y2: data[i + 1].Y, X3: data[i + 3].X, Y3: data[i + 3].Y, dot1: i + 1, dot2: i + 2 }); } } - const [left, top, scaleX, scaleY, strokeWidth, dotsize] = this.props.format; + const [left, top, scaleX, scaleY, strokeWidth] = this.props.format; return ( <> @@ -91,7 +93,7 @@ export class InkHandles extends React.Component<InkHandlesProps> { cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2} r={strokeWidth / 2} strokeWidth={0} - fill="#1F85DE" + fill={Colors.MEDIUM_BLUE} onPointerDown={(e) => this.onHandleDown(e, pts.I)} pointerEvents="all" cursor="default" @@ -104,16 +106,16 @@ export class InkHandles extends React.Component<InkHandlesProps> { y1={(pts.Y1 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} x2={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y2={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} - stroke="#1F85DE" - strokeWidth={dotsize / 8} + stroke={Colors.MEDIUM_BLUE} + strokeWidth={strokeWidth / 4} display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} /> <line x1={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y1={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} x2={(pts.X3 - left - strokeWidth / 2) * scaleX + strokeWidth / 2} y2={(pts.Y3 - top - strokeWidth / 2) * scaleY + strokeWidth / 2} - stroke="#1F85DE" - strokeWidth={dotsize / 8} + stroke={Colors.MEDIUM_BLUE} + strokeWidth={strokeWidth / 4} display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} /> </svg>)} </> |