diff options
Diffstat (limited to 'src/client/util/InteractionUtils.tsx')
-rw-r--r-- | src/client/util/InteractionUtils.tsx | 30 |
1 files changed, 29 insertions, 1 deletions
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 7194feb2e..2eec02a42 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -1,3 +1,5 @@ +import React = require("react"); + export namespace InteractionUtils { export const MOUSETYPE = "mouse"; export const TOUCHTYPE = "touch"; @@ -37,7 +39,7 @@ export namespace InteractionUtils { export function MakeMultiTouchTarget( element: HTMLElement, - startFunc: (e: Event, me: MultiTouchEvent<React.TouchEvent>) => void, + startFunc: (e: Event, me: MultiTouchEvent<React.TouchEvent>) => void ): MultiTouchEventDisposer { const onMultiTouchStartHandler = (e: Event) => startFunc(e, (e as CustomEvent<MultiTouchEvent<React.TouchEvent>>).detail); // const onMultiTouchMoveHandler = moveFunc ? (e: Event) => moveFunc(e, (e as CustomEvent<MultiTouchEvent<TouchEvent>>).detail) : undefined; @@ -60,6 +62,17 @@ export namespace InteractionUtils { }; } + export function MakeHoldTouchTarget( + element: HTMLElement, + func: (e: Event, me: MultiTouchEvent<React.TouchEvent>) => void + ): MultiTouchEventDisposer { + const handler = (e: Event) => func(e, (e as CustomEvent<MultiTouchEvent<React.TouchEvent>>).detail); + element.addEventListener("dashOnTouchHoldStart", handler); + return () => { + element.removeEventListener("dashOnTouchHoldStart", handler); + }; + } + export function GetMyTargetTouches(mte: InteractionUtils.MultiTouchEvent<React.TouchEvent | TouchEvent>, prevPoints: Map<number, React.Touch>, ignorePen: boolean): React.Touch[] { const myTouches = new Array<React.Touch>(); for (const pt of mte.touches) { @@ -79,6 +92,21 @@ export namespace InteractionUtils { return myTouches; } + // TODO: find a way to reference this function from InkingStroke instead of copy pastign here. copied bc of weird error when on mobile view + 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, + strokeWidth: width + }} + /> + ); + } + export function IsType(e: PointerEvent | React.PointerEvent, type: string): boolean { switch (type) { // pen and eraser are both pointer type 'pen', but pen is button 0 and eraser is button 5. -syip2 |