diff options
| author | vellichora <fangrui_tong@brown.edu> | 2020-02-01 14:56:19 -0500 |
|---|---|---|
| committer | vellichora <fangrui_tong@brown.edu> | 2020-02-01 14:56:19 -0500 |
| commit | ecf0f5b8f426db9e66c05e759f61294811b15fca (patch) | |
| tree | cd2fb9470dd608a8546af868e913d6e1d6964cc3 /src/client/views/InkingStroke.tsx | |
| parent | d2530f906d68e47cc25359cd8d85684a0e29637a (diff) | |
mobile ink overlay is draggable from desktop
Diffstat (limited to 'src/client/views/InkingStroke.tsx')
| -rw-r--r-- | src/client/views/InkingStroke.tsx | 17 |
1 files changed, 2 insertions, 15 deletions
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 8b346d5d9..aca507147 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -10,24 +10,11 @@ import "./InkingStroke.scss"; import { FieldView, FieldViewProps } from "./nodes/FieldView"; import React = require("react"); import { TraceMobx } from "../../new_fields/util"; +import { InteractionUtils } from "../util/InteractionUtils"; type InkDocument = makeInterface<[typeof documentSchema]>; const InkDocument = makeInterface(documentSchema); -export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color?: string, width?: number) { - const pts = points.reduce((acc: string, pt: { X: number, Y: number }) => acc + `${pt.X - left},${pt.Y - top} `, ""); - return ( - <polyline - points={pts} - style={{ - fill: "none", - stroke: color ?? InkingControl.Instance.selectedColor, - strokeWidth: width ?? InkingControl.Instance.selectedWidth - }} - /> - ); -} - @observer export class InkingStroke extends DocExtendableComponent<FieldViewProps, InkDocument>(InkDocument) { public static LayoutString(fieldStr: string) { return FieldView.LayoutString(InkingStroke, fieldStr); } @@ -44,7 +31,7 @@ export class InkingStroke extends DocExtendableComponent<FieldViewProps, InkDocu const top = Math.min(...ys); const right = Math.max(...xs); const bottom = Math.max(...ys); - const points = CreatePolyline(data, left, top, this.Document.color, this.Document.strokeWidth); + const points = InteractionUtils.CreatePolyline(data, left, top, this.Document.color ?? InkingControl.Instance.selectedColor, this.Document.strokeWidth ?? parseInt(InkingControl.Instance.selectedWidth)); const width = right - left; const height = bottom - top; const scaleX = this.PanelWidth / width; |
