From 06fb2bef46222c65d594b600bfeb72fb6a7f8212 Mon Sep 17 00:00:00 2001 From: Fawn Date: Sun, 10 Mar 2019 17:24:11 -0400 Subject: inking ui improvements --- src/client/views/InkingCanvas.scss | 121 +++++++++++++++++++++++++++++++++++-- 1 file changed, 115 insertions(+), 6 deletions(-) (limited to 'src/client/views/InkingCanvas.scss') diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index f654b194b..71c7e9ce0 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -1,3 +1,4 @@ +@import "global_variables"; .inking-canvas { position: fixed; top: -50000px; @@ -13,20 +14,128 @@ .inking-control { position: absolute; - right: 0; - bottom: 75px; - text-align: right; + left: 70px; + bottom: 70px; + margin: 0; + padding: 0; + display: flex; + label, + input, + option { + font-size: 12px; + } + input[type=range] { + -webkit-appearance: none; + background-color: transparent; + vertical-align: middle; + &:focus { + outline: none; + } + &::-webkit-slider-runnable-track { + width: 100%; + height: 3px; + border-radius: 1.5px; + cursor: pointer; + background: $light-color; + } + &::-webkit-slider-thumb { + height: 12px; + width: 12px; + border: 1px solid $intermediate-color; + border-radius: 6px; + background: $light-color; + cursor: pointer; + -webkit-appearance: none; + margin-top: -4px; + } + &::-moz-range-track { + width: 100%; + height: 3px; + border-radius: 1.5px; + cursor: pointer; + background: $light-color; + } + &::-moz-range-thumb { + height: 12px; + width: 12px; + border: 1px solid $intermediate-color; + border-radius: 6px; + background: $light-color; + cursor: pointer; + -webkit-appearance: none; + margin-top: -4px; + } + } + input[type=text] { + border: none; + padding: 0 3px; + } .ink-panel { - margin-top: 12px; + margin: 12px 18px 0 0; + height: 36px; + vertical-align: middle; + line-height: 36px; + padding: 0 10px; + background-color: $dark-color; + color: $light-color; + border-radius: 18px; &:first { margin-top: 0; } } + .ink-tools { + display: flex; + background-color: transparent; + border-radius: 0; + padding: 0; + button { + height: 36px; + border-radius: 18px; + margin-right: 6px; + padding: 0 16px; + font-size: 50%; + &:last-child { + margin-right: 0; + } + } + } .ink-size { display: flex; justify-content: space-between; - input { - width: 85%; + input[type=text] { + width: 42px; + } + >* { + margin-right: 6px; + &:last-child { + margin-right: 0; + } + } + } + .ink-color { + display: flex; + position: relative; + padding-right: 0; + .ink-color-display { + width: 60px; + height: 100%; + border-radius: 0 18px 18px 0; + margin-left: 6px; + cursor: pointer; + text-align: center; + span { + color: $light-color; + font-size: 8px; + user-select: none; + } + } + .ink-color-picker { + background-color: $dark-color; + border-radius: 5px; + padding: 6px; + position: absolute; + bottom: 42px; + left: 0; } } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 99677c577a04aa289543ff5e97bd44e01b8fb4ab Mon Sep 17 00:00:00 2001 From: Jude Date: Mon, 11 Mar 2019 16:21:30 -0400 Subject: inking controls changes --- src/client/views/InkingCanvas.scss | 260 +++++++++++++++++++------------------ src/client/views/InkingControl.tsx | 33 +++-- 2 files changed, 152 insertions(+), 141 deletions(-) (limited to 'src/client/views/InkingCanvas.scss') diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index 71c7e9ce0..d132504fc 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -1,141 +1,147 @@ @import "global_variables"; .inking-canvas { - position: fixed; - top: -50000px; - left: -50000px; // z-index: 99; //overlays ink on top of everything - svg { - width: 100000px; - height: 100000px; - .highlight { - mix-blend-mode: multiply; - } + position: fixed; + top: -50000px; + left: -50000px; // z-index: 99; //overlays ink on top of everything + svg { + width: 100000px; + height: 100000px; + .highlight { + mix-blend-mode: multiply; } + } } .inking-control { - position: absolute; - left: 70px; - bottom: 70px; - margin: 0; - padding: 0; + position: absolute; + left: 70px; + bottom: 70px; + margin: 0; + padding: 0; + display: flex; + label, + input, + option { + font-size: 12px; + } + input[type="range"] { + -webkit-appearance: none; + background-color: transparent; + vertical-align: middle; + margin-top: 8px; + &:focus { + outline: none; + } + &::-webkit-slider-runnable-track { + width: 100%; + height: 3px; + border-radius: 1.5px; + cursor: pointer; + background: $intermediate-color; + } + &::-webkit-slider-thumb { + height: 12px; + width: 12px; + border: 1px solid $intermediate-color; + border-radius: 6px; + background: $light-color; + cursor: pointer; + -webkit-appearance: none; + margin-top: -4px; + } + &::-moz-range-track { + width: 100%; + height: 3px; + border-radius: 1.5px; + cursor: pointer; + background: $light-color; + } + &::-moz-range-thumb { + height: 12px; + width: 12px; + border: 1px solid $intermediate-color; + border-radius: 6px; + background: $light-color; + cursor: pointer; + -webkit-appearance: none; + margin-top: -4px; + } + } + input[type="text"] { + border: none; + padding: 0 3px; + background: transparent; + color: $light-color; + } + .ink-panel { + margin: 6px 12px 6px 0; + height: 30px; + vertical-align: middle; + line-height: 36px; + padding: 0 10px; + color: $intermediate-color; + &:first { + margin-top: 0; + } + } + .ink-tools { display: flex; - label, - input, - option { - font-size: 12px; + background-color: transparent; + border-radius: 0; + padding: 0; + button { + height: 36px; + padding: 0px; + padding-bottom: 3px; + margin-left: 10px; + background-color: transparent; + color: $intermediate-color; } - input[type=range] { - -webkit-appearance: none; - background-color: transparent; - vertical-align: middle; - &:focus { - outline: none; - } - &::-webkit-slider-runnable-track { - width: 100%; - height: 3px; - border-radius: 1.5px; - cursor: pointer; - background: $light-color; - } - &::-webkit-slider-thumb { - height: 12px; - width: 12px; - border: 1px solid $intermediate-color; - border-radius: 6px; - background: $light-color; - cursor: pointer; - -webkit-appearance: none; - margin-top: -4px; - } - &::-moz-range-track { - width: 100%; - height: 3px; - border-radius: 1.5px; - cursor: pointer; - background: $light-color; - } - &::-moz-range-thumb { - height: 12px; - width: 12px; - border: 1px solid $intermediate-color; - border-radius: 6px; - background: $light-color; - cursor: pointer; - -webkit-appearance: none; - margin-top: -4px; - } + button:hover { + transform: scale(1.15); } - input[type=text] { - border: none; - padding: 0 3px; + } + .ink-size { + display: flex; + justify-content: space-between; + input[type="text"] { + width: 42px; } - .ink-panel { - margin: 12px 18px 0 0; - height: 36px; - vertical-align: middle; - line-height: 36px; - padding: 0 10px; - background-color: $dark-color; - color: $light-color; - border-radius: 18px; - &:first { - margin-top: 0; - } + > * { + margin-right: 6px; + &:last-child { + margin-right: 0; + } } - .ink-tools { - display: flex; - background-color: transparent; - border-radius: 0; - padding: 0; - button { - height: 36px; - border-radius: 18px; - margin-right: 6px; - padding: 0 16px; - font-size: 50%; - &:last-child { - margin-right: 0; - } - } + } + .ink-color { + display: flex; + position: relative; + padding-right: 0; + label { + margin-right: 6px; } - .ink-size { - display: flex; - justify-content: space-between; - input[type=text] { - width: 42px; - } - >* { - margin-right: 6px; - &:last-child { - margin-right: 0; - } - } + .ink-color-display { + border-radius: 11px; + width: 22px; + height: 22px; + margin-top: 6px; + cursor: pointer; + text-align: center; + // span { + // color: $light-color; + // font-size: 8px; + // user-select: none; + // } } - .ink-color { - display: flex; - position: relative; - padding-right: 0; - .ink-color-display { - width: 60px; - height: 100%; - border-radius: 0 18px 18px 0; - margin-left: 6px; - cursor: pointer; - text-align: center; - span { - color: $light-color; - font-size: 8px; - user-select: none; - } - } - .ink-color-picker { - background-color: $dark-color; - border-radius: 5px; - padding: 6px; - position: absolute; - bottom: 42px; - left: 0; - } + .ink-color-picker { + background-color: $light-color; + border-radius: 5px; + padding: 12px; + position: absolute; + bottom: 36px; + left: -3px; + box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; } -} \ No newline at end of file + } +} diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index 695b761c9..523971af4 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -4,6 +4,11 @@ import { InkTool } from "../../fields/InkField"; import { observer } from "mobx-react"; import React = require("react"); import "./InkingCanvas.scss" +import { library } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faPen, faHighlighter, faEraser, faBan } from '@fortawesome/free-solid-svg-icons'; + +library.add(faPen, faHighlighter, faEraser, faBan); @observer export class InkingControl extends React.Component { @@ -51,7 +56,7 @@ export class InkingControl extends React.Component { selected = (tool: InkTool) => { if (this._selectedTool === tool) { - return { backgroundColor: "#61aaa3", color: "white" } + return { color: "#61aaa3" } } return {} } @@ -71,29 +76,29 @@ export class InkingControl extends React.Component { ) } -- cgit v1.2.3-70-g09d2 From 3f7ff76768e0ff74e6a5d6e092f82e96661b3a2a Mon Sep 17 00:00:00 2001 From: Hannah Chow Date: Mon, 11 Mar 2019 20:16:18 -0400 Subject: pen tools styling and tooltips --- src/client/views/DocumentDecorations.scss | 1 - src/client/views/InkingCanvas.scss | 265 +++++++++++++++--------------- src/client/views/InkingControl.tsx | 16 +- 3 files changed, 141 insertions(+), 141 deletions(-) (limited to 'src/client/views/InkingCanvas.scss') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index e77e22c5d..11595aa01 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -94,7 +94,6 @@ transition: transform 0.2s; text-align: center; display: flex; - vertical-align: middle; justify-content: center; align-items: center; } diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index d132504fc..d76861be1 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -1,147 +1,148 @@ @import "global_variables"; .inking-canvas { - position: fixed; - top: -50000px; - left: -50000px; // z-index: 99; //overlays ink on top of everything - svg { - width: 100000px; - height: 100000px; - .highlight { - mix-blend-mode: multiply; + position: fixed; + top: -50000px; + left: -50000px; // z-index: 99; //overlays ink on top of everything + svg { + width: 100000px; + height: 100000px; + .highlight { + mix-blend-mode: multiply; + } } - } } .inking-control { - position: absolute; - left: 70px; - bottom: 70px; - margin: 0; - padding: 0; - display: flex; - label, - input, - option { - font-size: 12px; - } - input[type="range"] { - -webkit-appearance: none; - background-color: transparent; - vertical-align: middle; - margin-top: 8px; - &:focus { - outline: none; - } - &::-webkit-slider-runnable-track { - width: 100%; - height: 3px; - border-radius: 1.5px; - cursor: pointer; - background: $intermediate-color; - } - &::-webkit-slider-thumb { - height: 12px; - width: 12px; - border: 1px solid $intermediate-color; - border-radius: 6px; - background: $light-color; - cursor: pointer; - -webkit-appearance: none; - margin-top: -4px; - } - &::-moz-range-track { - width: 100%; - height: 3px; - border-radius: 1.5px; - cursor: pointer; - background: $light-color; - } - &::-moz-range-thumb { - height: 12px; - width: 12px; - border: 1px solid $intermediate-color; - border-radius: 6px; - background: $light-color; - cursor: pointer; - -webkit-appearance: none; - margin-top: -4px; - } - } - input[type="text"] { - border: none; - padding: 0 3px; - background: transparent; - color: $light-color; - } - .ink-panel { - margin: 6px 12px 6px 0; - height: 30px; - vertical-align: middle; - line-height: 36px; - padding: 0 10px; - color: $intermediate-color; - &:first { - margin-top: 0; - } - } - .ink-tools { - display: flex; - background-color: transparent; - border-radius: 0; + position: absolute; + left: 70px; + bottom: 70px; + margin: 0; padding: 0; - button { - height: 36px; - padding: 0px; - padding-bottom: 3px; - margin-left: 10px; - background-color: transparent; - color: $intermediate-color; + display: flex; + label, + input, + option { + font-size: 12px; } - button:hover { - transform: scale(1.15); + input[type="range"] { + -webkit-appearance: none; + background-color: transparent; + vertical-align: middle; + margin-top: 8px; + &:focus { + outline: none; + } + &::-webkit-slider-runnable-track { + width: 100%; + height: 3px; + border-radius: 1.5px; + cursor: pointer; + background: $intermediate-color; + } + &::-webkit-slider-thumb { + height: 12px; + width: 12px; + border: 1px solid $intermediate-color; + border-radius: 6px; + background: $light-color; + cursor: pointer; + -webkit-appearance: none; + margin-top: -4px; + } + &::-moz-range-track { + width: 100%; + height: 3px; + border-radius: 1.5px; + cursor: pointer; + background: $light-color; + } + &::-moz-range-thumb { + height: 12px; + width: 12px; + border: 1px solid $intermediate-color; + border-radius: 6px; + background: $light-color; + cursor: pointer; + -webkit-appearance: none; + margin-top: -4px; + } } - } - .ink-size { - display: flex; - justify-content: space-between; input[type="text"] { - width: 42px; + border: none; + padding: 0 0px; + background: transparent; + color: $dark-color; + font-size: 12px; + margin-top: 4px; } - > * { - margin-right: 6px; - &:last-child { - margin-right: 0; - } + .ink-panel { + margin: 6px 12px 6px 0; + height: 30px; + vertical-align: middle; + line-height: 36px; + padding: 0 10px; + color: $intermediate-color; + &:first { + margin-top: 0; + } } - } - .ink-color { - display: flex; - position: relative; - padding-right: 0; - label { - margin-right: 6px; + .ink-tools { + display: flex; + background-color: transparent; + border-radius: 0; + padding: 0; + button { + height: 36px; + padding: 0px; + padding-bottom: 3px; + margin-left: 10px; + background-color: transparent; + color: $intermediate-color; + } + button:hover { + transform: scale(1.15); + } } - .ink-color-display { - border-radius: 11px; - width: 22px; - height: 22px; - margin-top: 6px; - cursor: pointer; - text-align: center; - // span { - // color: $light-color; - // font-size: 8px; - // user-select: none; - // } + .ink-size { + display: flex; + justify-content: space-between; + input[type="text"] { + width: 42px; + } + >* { + margin-right: 6px; + &:last-child { + margin-right: 0; + } + } } - .ink-color-picker { - background-color: $light-color; - border-radius: 5px; - padding: 12px; - position: absolute; - bottom: 36px; - left: -3px; - box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; + .ink-color { + display: flex; + position: relative; + padding-right: 0; + label { + margin-right: 6px; + } + .ink-color-display { + border-radius: 11px; + width: 22px; + height: 22px; + margin-top: 6px; + cursor: pointer; + text-align: center; // span { + // color: $light-color; + // font-size: 8px; + // user-select: none; + // } + } + .ink-color-picker { + background-color: $light-color; + border-radius: 5px; + padding: 12px; + position: absolute; + bottom: 36px; + left: -3px; + box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; + } } - } -} +} \ No newline at end of file diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index bf633b034..fb75ef2a5 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -78,14 +78,14 @@ export class InkingControl extends React.Component {
  • - - - - + + + +
  • - +
    this.toggleColorPicker()}> {/* {this._colorPickerDisplay ? ▼ : ▲} */} @@ -95,9 +95,9 @@ export class InkingControl extends React.Component {
  • - - {/* ) => this.switchWidth(e.target.value)} /> */} + + ) => this.switchWidth(e.target.value)} /> ) => this.switchWidth(e.target.value)} />
    • -- cgit v1.2.3-70-g09d2 From f089e10dfd42edc395729a6b71e42385745f364e Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 14 Mar 2019 22:21:16 -0400 Subject: marquees can now delete ink or move it to a new collection. --- src/client/documents/Documents.ts | 3 ++ src/client/views/InkingCanvas.scss | 3 +- src/client/views/InkingCanvas.tsx | 22 +++++----- src/client/views/InkingStroke.tsx | 2 - src/client/views/Main.tsx | 2 +- .../views/collections/CollectionFreeFormView.tsx | 4 +- .../views/collections/CollectionVideoView.tsx | 6 +-- src/client/views/collections/MarqueeView.tsx | 47 +++++++++++++++++----- 8 files changed, 63 insertions(+), 26 deletions(-) (limited to 'src/client/views/InkingCanvas.scss') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 4e0eefcc6..8402118b8 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -24,10 +24,12 @@ import { PDFBox } from "../views/nodes/PDFBox"; import { CollectionPDFView } from "../views/collections/CollectionPDFView"; import { RichTextField } from "../../fields/RichTextField"; import { CollectionVideoView } from "../views/collections/CollectionVideoView"; +import { StrokeData, InkField } from "../../fields/InkField"; export interface DocumentOptions { x?: number; y?: number; + ink?: Map; width?: number; height?: number; nativeWidth?: number; @@ -87,6 +89,7 @@ export namespace Documents { if (options.backgroundColor !== undefined) { doc.SetText(KeyStore.BackgroundColor, options.backgroundColor); } if (options.layout !== undefined) { doc.SetText(KeyStore.Layout, options.layout); } if (options.layoutKeys !== undefined) { doc.Set(KeyStore.LayoutKeys, new ListField(options.layoutKeys)); } + if (options.ink !== undefined) { doc.Set(KeyStore.Ink, new InkField(options.ink)); } return doc; } function setupPrototypeOptions(protoId: string, title: string, layout: string, options: DocumentOptions): Document { diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index f654b194b..37fa3143d 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -1,8 +1,9 @@ .inking-canvas { - position: fixed; + position: absolute; top: -50000px; left: -50000px; // z-index: 99; //overlays ink on top of everything svg { + position:absolute; width: 100000px; height: 100000px; .highlight { diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index 064d1cba2..84c47f616 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -1,4 +1,5 @@ import { observer } from "mobx-react"; +import { observable } from "mobx"; import { action, computed } from "mobx"; import { InkingControl } from "./InkingControl"; import React = require("react"); @@ -6,14 +7,10 @@ import { Transform } from "../util/Transform"; import { Document } from "../../fields/Document"; import { KeyStore } from "../../fields/KeyStore"; import { InkField, InkTool, StrokeData, StrokeMap } from "../../fields/InkField"; -import { JsxArgs } from "./nodes/DocumentView"; import { InkingStroke } from "./InkingStroke"; import "./InkingCanvas.scss" -import { CollectionDockingView } from "./collections/CollectionDockingView"; import { Utils } from "../../Utils"; import { FieldWaiting } from "../../fields/Field"; -import { getMapLikeKeys } from "mobx/lib/internal"; - interface InkCanvasProps { getScreenTransform: () => Transform; @@ -22,7 +19,16 @@ interface InkCanvasProps { @observer export class InkingCanvas extends React.Component { - + static InkOffset: number = 50000; + public static IntersectStrokeRect(stroke: StrokeData, selRect: { left: number, top: number, width: number, height: number }): boolean { + let inside = false; + stroke.pathData.map(val => { + if (selRect.left < val.x - InkingCanvas.InkOffset && selRect.left + selRect.width > val.x - InkingCanvas.InkOffset && + selRect.top < val.y - InkingCanvas.InkOffset && selRect.top + selRect.height > val.y - InkingCanvas.InkOffset) + inside = true; + }); + return inside + } private _isDrawing: boolean = false; private _idGenerator: string = ""; @@ -51,7 +57,6 @@ export class InkingCanvas extends React.Component { document.removeEventListener("mouseup", this.handleMouseUp); } - @action handleMouseDown = (e: React.PointerEvent): void => { if (e.button != 0 || @@ -62,7 +67,6 @@ export class InkingCanvas extends React.Component { if (InkingControl.Instance.selectedTool === InkTool.Eraser) { return } - e.stopPropagation() const point = this.relativeCoordinatesForEvent(e); // start the new line, saves a uuid to represent the field of the stroke @@ -110,8 +114,8 @@ export class InkingCanvas extends React.Component { relativeCoordinatesForEvent = (e: React.MouseEvent): { x: number, y: number } => { let [x, y] = this.props.getScreenTransform().transformPoint(e.clientX, e.clientY); - x += 50000 - y += 50000 + x += InkingCanvas.InkOffset; + y += InkingCanvas.InkOffset; return { x, y }; } diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index d724421d3..87b5c43d8 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -21,8 +21,6 @@ export class InkingStroke extends React.Component { @observable private _strokeColor: string = this.props.color; @observable private _strokeWidth: string = this.props.width; - private _canvasColor: string = "#cdcdcd"; - deleteStroke = (e: React.MouseEvent): void => { if (InkingControl.Instance.selectedTool === InkTool.Eraser && e.buttons === 1) { this.props.deleteCallback(this.props.id); diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 8ee028076..d73e9b8fe 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -58,7 +58,7 @@ Documents.initProtos(mainDocId, (res?: Document) => { let videourl = "http://techslides.com/demos/sample-videos/small.mp4"; let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {})) let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" })) - let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, backgroundColor: "Transparent", title: "a freeform collection" })); + let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" })); let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" })); let addVideoNode = action(() => Documents.VideoDocument(videourl, { width: 200, title: "video node" })); let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 200, title: "a schema collection" })); diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 98fb23fa4..c8b745254 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -338,7 +338,9 @@ export class CollectionFreeFormView extends CollectionViewBase { {this.views} - + {this.overlayView} ); diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index 0e2d250aa..b64ef3c07 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -24,14 +24,14 @@ export class CollectionVideoView extends React.Component { private get uIButtons() { let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().transformDirection(1, 1)[0]); return ([ -
    +
    {"" + Math.round(this.ctime)} {" " + Math.round((this.ctime - Math.trunc(this.ctime)) * 100)}
    , -
    +
    {this.playing ? "\"" : ">"}
    , -
    +
    F
    ]); diff --git a/src/client/views/collections/MarqueeView.tsx b/src/client/views/collections/MarqueeView.tsx index d9e4df1e9..67716f99a 100644 --- a/src/client/views/collections/MarqueeView.tsx +++ b/src/client/views/collections/MarqueeView.tsx @@ -3,21 +3,22 @@ import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { FieldWaiting, Opt } from "../../../fields/Field"; import { KeyStore } from "../../../fields/KeyStore"; -import { ListField } from "../../../fields/ListField"; import { Documents } from "../../documents/Documents"; import { SelectionManager } from "../../util/SelectionManager"; import { Transform } from "../../util/Transform"; import { CollectionFreeFormView } from "./CollectionFreeFormView"; import "./MarqueeView.scss"; import React = require("react"); - +import { InkField, StrokeData } from "../../../fields/InkField"; +import { Utils } from "../../../Utils"; +import { InkingCanvas } from "../InkingCanvas"; interface MarqueeViewProps { getMarqueeTransform: () => Transform; getTransform: () => Transform; container: CollectionFreeFormView; addDocument: (doc: Document) => void; - activeDocuemnts: () => Document[]; + activeDocuments: () => Document[]; selectDocuments: (docs: Document[]) => void; removeDocument: (doc: Document) => boolean; } @@ -94,29 +95,57 @@ export class MarqueeView extends React.Component marqueeCommand = (e: KeyboardEvent) => { if (e.key == "Backspace") { this.marqueeSelect().map(d => this.props.removeDocument(d)); + this.props.container.props.Document.SetData(KeyStore.Ink, this.marqueeInkSelect(false), InkField); this.cleanupInteractions(); } if (e.key == "c") { let bounds = this.Bounds; - let selected = this.marqueeSelect().map(m => m); - this.marqueeSelect().map(d => this.props.removeDocument(d)); - //setTimeout(() => { - this.props.addDocument(Documents.FreeformDocument(selected.map(d => { + let selected = this.marqueeSelect().map(d => { + this.props.removeDocument(d); d.SetNumber(KeyStore.X, d.GetNumber(KeyStore.X, 0) - bounds.left - bounds.width / 2); d.SetNumber(KeyStore.Y, d.GetNumber(KeyStore.Y, 0) - bounds.top - bounds.height / 2); d.SetNumber(KeyStore.Page, 0); d.SetText(KeyStore.Title, "" + d.GetNumber(KeyStore.Width, 0) + " " + d.GetNumber(KeyStore.Height, 0)); return d; - }), { x: bounds.left, y: bounds.top, panx: 0, pany: 0, width: bounds.width, height: bounds.height, title: "a nested collection" })); + }); + let liftedInk = this.marqueeInkSelect(true); + this.props.container.props.Document.SetData(KeyStore.Ink, this.marqueeInkSelect(false), InkField); + //setTimeout(() => { + this.props.addDocument(Documents.FreeformDocument(selected, { x: bounds.left, y: bounds.top, panx: 0, pany: 0, width: bounds.width, backgroundColor: "Transparent", height: bounds.height, ink: liftedInk, title: "a nested collection" })); // }, 100); this.cleanupInteractions(); } } + marqueeInkSelect(select: boolean) { + let selRect = this.Bounds; + let centerShiftX = 0 - (selRect.left + selRect.width / 2); // moves each point by the offset that shifts the selection's center to the origin. + let centerShiftY = 0 - (selRect.top + selRect.height / 2); + let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField); + if (ink && ink != FieldWaiting) { + let idata = new Map(); + ink.Data.forEach((value: StrokeData, key: string, map: any) => { + let inside = InkingCanvas.IntersectStrokeRect(value, selRect); + if (inside && select) { + idata.set(key, + { + pathData: value.pathData.map(val => { return { x: val.x + centerShiftX, y: val.y + centerShiftY } }), + color: value.color, + width: value.width, + tool: value.tool, + page: -1 + }); + } else if (!inside && !select) { + idata.set(key, value); + } + }) + return idata; + } + } marqueeSelect() { let selRect = this.Bounds; let selection: Document[] = []; - this.props.activeDocuemnts().map(doc => { + this.props.activeDocuments().map(doc => { var x = doc.GetNumber(KeyStore.X, 0); var y = doc.GetNumber(KeyStore.Y, 0); var w = doc.GetNumber(KeyStore.Width, 0); -- cgit v1.2.3-70-g09d2 From 2ac86b53d28abb8be2f3abd501b801e543973e28 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 31 Mar 2019 22:45:43 -0400 Subject: restructured inkingCanvas and linksViews --- src/client/views/InkingCanvas.scss | 164 +++------------------ src/client/views/InkingCanvas.tsx | 121 +++++++-------- src/client/views/InkingControl.scss | 135 +++++++++++++++++ src/client/views/InkingControl.tsx | 3 +- .../CollectionFreeFormLinksView.scss | 3 + .../CollectionFreeFormLinksView.tsx | 9 +- .../collectionFreeForm/CollectionFreeFormView.scss | 10 -- .../collectionFreeForm/CollectionFreeFormView.tsx | 10 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 6 +- src/client/views/nodes/PDFBox.tsx | 10 +- 10 files changed, 233 insertions(+), 238 deletions(-) create mode 100644 src/client/views/InkingControl.scss (limited to 'src/client/views/InkingCanvas.scss') diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index e79b146b9..6d7821cd2 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -1,149 +1,25 @@ @import "global_variables"; -.inking-canvas { + +.inkingCanvas-paths, .inkingCanvas-paths-none { position: absolute; top: -50000px; - left: -50000px; // z-index: 99; //overlays ink on top of everything - svg { - position:absolute; - width: 100000px; - height: 100000px; - .highlight { - mix-blend-mode: multiply; - } - } + left: -50000px; + width: 100000px; + height: 100000px; + //z-index: 10000; // z-index: 99; //overlays ink on top of everything but that messes up blending and events don't propagate down to nested collections + .highlight { + mix-blend-mode: multiply; + } + .inkingCanvas-children { + transform: translate(50000px, 50000px); + pointer-events: none; + } + cursor:"crosshair"; + pointer-events: auto; + +} +.inkingCanvas-paths-none { + pointer-events: none; + cursor: "arrow"; } -.inking-control { - position: absolute; - left: 70px; - bottom: 70px; - margin: 0; - padding: 0; - display: flex; - label, - input, - option { - font-size: 12px; - } - input[type="range"] { - -webkit-appearance: none; - background-color: transparent; - vertical-align: middle; - margin-top: 8px; - &:focus { - outline: none; - } - &::-webkit-slider-runnable-track { - width: 100%; - height: 3px; - border-radius: 1.5px; - cursor: pointer; - background: $intermediate-color; - } - &::-webkit-slider-thumb { - height: 12px; - width: 12px; - border: 1px solid $intermediate-color; - border-radius: 6px; - background: $light-color; - cursor: pointer; - -webkit-appearance: none; - margin-top: -4px; - } - &::-moz-range-track { - width: 100%; - height: 3px; - border-radius: 1.5px; - cursor: pointer; - background: $light-color; - } - &::-moz-range-thumb { - height: 12px; - width: 12px; - border: 1px solid $intermediate-color; - border-radius: 6px; - background: $light-color; - cursor: pointer; - -webkit-appearance: none; - margin-top: -4px; - } - } - input[type="text"] { - border: none; - padding: 0 0px; - background: transparent; - color: $dark-color; - font-size: 12px; - margin-top: 4px; - } - .ink-panel { - margin: 6px 12px 6px 0; - height: 30px; - vertical-align: middle; - line-height: 36px; - padding: 0 10px; - color: $intermediate-color; - &:first { - margin-top: 0; - } - } - .ink-tools { - display: flex; - background-color: transparent; - border-radius: 0; - padding: 0; - button { - height: 36px; - padding: 0px; - padding-bottom: 3px; - margin-left: 10px; - background-color: transparent; - color: $intermediate-color; - } - button:hover { - transform: scale(1.15); - } - } - .ink-size { - display: flex; - justify-content: space-between; - input[type="text"] { - width: 42px; - } - >* { - margin-right: 6px; - &:last-child { - margin-right: 0; - } - } - } - .ink-color { - display: flex; - position: relative; - padding-right: 0; - label { - margin-right: 6px; - } - .ink-color-display { - border-radius: 11px; - width: 22px; - height: 22px; - margin-top: 6px; - cursor: pointer; - text-align: center; // span { - // color: $light-color; - // font-size: 8px; - // user-select: none; - // } - } - .ink-color-picker { - background-color: $light-color; - border-radius: 5px; - padding: 12px; - position: absolute; - bottom: 36px; - left: -3px; - box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; - } - } -} \ No newline at end of file diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index 8fb74ec48..a971264b9 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -57,51 +57,62 @@ export class InkingCanvas extends React.Component { } @action - handleMouseDown = (e: React.PointerEvent): void => { - if (e.button != 0 || + onPointerDown = (e: React.PointerEvent): void => { + this._isDrawing = false; + if (e.button != 0 || e.altKey || e.ctrlKey || InkingControl.Instance.selectedTool === InkTool.None) { return; } - e.stopPropagation() - if (InkingControl.Instance.selectedTool === InkTool.Eraser) { - return - } - const point = this.relativeCoordinatesForEvent(e); - - // start the new line, saves a uuid to represent the field of the stroke - this._idGenerator = Utils.GenerateGuid(); - this.inkData.set(this._idGenerator, - { - pathData: [point], - color: InkingControl.Instance.selectedColor, - width: InkingControl.Instance.selectedWidth, - tool: InkingControl.Instance.selectedTool, - page: this.props.Document.GetNumber(KeyStore.CurPage, -1) - }); + document.addEventListener("pointermove", this.onPointerMove, true); + document.addEventListener("pointerup", this.onPointerUp, true); + e.stopPropagation(); + this._isDrawing = true; + if (InkingControl.Instance.selectedTool != InkTool.Eraser) { + const point = this.relativeCoordinatesForEvent(e.clientX, e.clientY); + + // start the new line, saves a uuid to represent the field of the stroke + this._idGenerator = Utils.GenerateGuid(); + this.inkData.set(this._idGenerator, + { + pathData: [point], + color: InkingControl.Instance.selectedColor, + width: InkingControl.Instance.selectedWidth, + tool: InkingControl.Instance.selectedTool, + page: this.props.Document.GetNumber(KeyStore.CurPage, -1) + }); + } } - @action - handleMouseMove = (e: React.PointerEvent): void => { - if (!this._isDrawing || - InkingControl.Instance.selectedTool === InkTool.None) { - return; + onPointerUp = (e: PointerEvent): void => { + if (this._isDrawing) { + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + this._isDrawing = false; + e.stopPropagation(); } - e.stopPropagation() - if (InkingControl.Instance.selectedTool === InkTool.Eraser) { - return - } - const point = this.relativeCoordinatesForEvent(e); + } - // add points to new line as it is being drawn - let data = this.inkData; - let strokeData = data.get(this._idGenerator); - if (strokeData) { - strokeData.pathData.push(point); - data.set(this._idGenerator, strokeData); + @action + onPointerMove = (e: PointerEvent): void => { + if (this._isDrawing) { + e.stopPropagation() + e.preventDefault(); + if (InkingControl.Instance.selectedTool === InkTool.Eraser) { + return + } + const point = this.relativeCoordinatesForEvent(e.clientX, e.clientY); + + // add points to new line as it is being drawn + let data = this.inkData; + let strokeData = data.get(this._idGenerator); + if (strokeData) { + strokeData.pathData.push(point); + data.set(this._idGenerator, strokeData); + } + + this.inkData = data; } - - this.inkData = data; } @action @@ -109,8 +120,8 @@ export class InkingCanvas extends React.Component { this._isDrawing = false; } - relativeCoordinatesForEvent = (e: React.MouseEvent): { x: number, y: number } => { - let [x, y] = this.props.getScreenTransform().transformPoint(e.clientX, e.clientY); + relativeCoordinatesForEvent = (ex: number, ey: number): { x: number, y: number } => { + let [x, y] = this.props.getScreenTransform().transformPoint(ex, ey); x += InkingCanvas.InkOffset; y += InkingCanvas.InkOffset; return { x, y }; @@ -124,32 +135,9 @@ export class InkingCanvas extends React.Component { } render() { - // styling for cursor - let canvasStyle = {}; - if (InkingControl.Instance.selectedTool === InkTool.None) { - canvasStyle = { pointerEvents: "none" }; - } else { - canvasStyle = { pointerEvents: "auto", cursor: "crosshair" }; - } - - // get data from server - // let inkField = this.props.Document.GetT(KeyStore.Ink, InkField); - // if (!inkField || inkField == FieldWaiting) { - // return (
    - // - // - //
    ) - // } - - let lines = this.inkData; - // parse data from server - let paths: Array = [] let curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1) - Array.from(lines).map(item => { - let id = item[0]; - let strokeData = item[1]; + let paths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { if (strokeData.page == -1 || strokeData.page == curPage) paths.push( { width={strokeData.width} tool={strokeData.tool} deleteCallback={this.removeLine} />) - }) + return paths; + }, [] as JSX.Element[]); + let svgCanvasStyle = InkingControl.Instance.selectedTool == InkTool.None ? "-none" : ""; return ( -
    - +
    + {paths} + {this.props.children}
    ) } diff --git a/src/client/views/InkingControl.scss b/src/client/views/InkingControl.scss new file mode 100644 index 000000000..0d8fd8784 --- /dev/null +++ b/src/client/views/InkingControl.scss @@ -0,0 +1,135 @@ +@import "global_variables"; +.inking-control { + position: absolute; + left: 70px; + bottom: 70px; + margin: 0; + padding: 0; + display: flex; + label, + input, + option { + font-size: 12px; + } + input[type="range"] { + -webkit-appearance: none; + background-color: transparent; + vertical-align: middle; + margin-top: 8px; + &:focus { + outline: none; + } + &::-webkit-slider-runnable-track { + width: 100%; + height: 3px; + border-radius: 1.5px; + cursor: pointer; + background: $intermediate-color; + } + &::-webkit-slider-thumb { + height: 12px; + width: 12px; + border: 1px solid $intermediate-color; + border-radius: 6px; + background: $light-color; + cursor: pointer; + -webkit-appearance: none; + margin-top: -4px; + } + &::-moz-range-track { + width: 100%; + height: 3px; + border-radius: 1.5px; + cursor: pointer; + background: $light-color; + } + &::-moz-range-thumb { + height: 12px; + width: 12px; + border: 1px solid $intermediate-color; + border-radius: 6px; + background: $light-color; + cursor: pointer; + -webkit-appearance: none; + margin-top: -4px; + } + } + input[type="text"] { + border: none; + padding: 0 0px; + background: transparent; + color: $dark-color; + font-size: 12px; + margin-top: 4px; + } + .ink-panel { + margin: 6px 12px 6px 0; + height: 30px; + vertical-align: middle; + line-height: 36px; + padding: 0 10px; + color: $intermediate-color; + &:first { + margin-top: 0; + } + } + .ink-tools { + display: flex; + background-color: transparent; + border-radius: 0; + padding: 0; + button { + height: 36px; + padding: 0px; + padding-bottom: 3px; + margin-left: 10px; + background-color: transparent; + color: $intermediate-color; + } + button:hover { + transform: scale(1.15); + } + } + .ink-size { + display: flex; + justify-content: space-between; + input[type="text"] { + width: 42px; + } + >* { + margin-right: 6px; + &:last-child { + margin-right: 0; + } + } + } + .ink-color { + display: flex; + position: relative; + padding-right: 0; + label { + margin-right: 6px; + } + .ink-color-display { + border-radius: 11px; + width: 22px; + height: 22px; + margin-top: 6px; + cursor: pointer; + text-align: center; // span { + // color: $light-color; + // font-size: 8px; + // user-select: none; + // } + } + .ink-color-picker { + background-color: $light-color; + border-radius: 5px; + padding: 12px; + position: absolute; + bottom: 36px; + left: -3px; + box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; + } + } +} \ No newline at end of file diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index eb2172d03..c1519dff8 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -2,10 +2,9 @@ import { observable, action, computed } from "mobx"; import { CirclePicker, ColorResult } from 'react-color' import React = require("react"); -import "./InkingCanvas.scss" import { InkTool } from "../../fields/InkField"; import { observer } from "mobx-react"; -import "./InkingCanvas.scss" +import "./InkingControl.scss" import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPen, faHighlighter, faEraser, faBan } from '@fortawesome/free-solid-svg-icons'; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss index 9af0df7f5..4341c82f7 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss @@ -4,4 +4,7 @@ width: 20000px; height: 20000px; pointer-events: none; + } + .collectionfreeformlinksview-container { + pointer-events: none; } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx index ea392eaea..ef60aa672 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx @@ -94,9 +94,12 @@ export class CollectionFreeFormLinksView extends React.Component - {this.uniqueConnections.map(c => )} +
    + + {this.uniqueConnections.map(c => )} + {this.props.children} - ); +
    + ); } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index c979b27a9..81d21d89a 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -7,9 +7,6 @@ width: 100%; height: 100%; transform-origin: left top; - .inking-canvas { - transform-origin: 50000px 50000px; - } } .collectionfreeformview-container { .collectionfreeformview > .jsx-parser { @@ -18,9 +15,6 @@ width: 100%; } - .inking-canvas { - transform-origin: 50000px 50000px; - } //nested freeform views // .collectionfreeformview-container { // background-image: linear-gradient(to right, $light-color-secondary 1px, transparent 1px), @@ -48,10 +42,6 @@ background: $light-color-secondary; } - .inking-canvas { - transform-origin: 50000px 50000px; - } - opacity: 0.99; border: 0px solid transparent; border-radius: $border-radius; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index cdc5bdfb0..ae1c775e6 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -314,16 +314,18 @@ export class CollectionFreeFormView extends CollectionViewBase {
    super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY))} onDrop={this.onDrop.bind(this)} onDragOver={this.onDragOver} onWheel={this.onPointerWheel} - style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} tabIndex={0} ref={this.createDropTarget}> + style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} ref={this.createDropTarget}>
    {this.backgroundView} - - {this.views} - + + + {this.views} + + {super.getCursors().map(entry => { if (entry.Data.length > 0) { let id = entry.Data[0][0]; diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 7f951864e..d52b662bd 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -1,4 +1,4 @@ -import { computed, trace, reaction, runInAction, observable } from "mobx"; +import { computed } from "mobx"; import { observer } from "mobx-react"; import { KeyStore } from "../../../fields/KeyStore"; import { NumberField } from "../../../fields/NumberField"; @@ -6,8 +6,7 @@ import { Transform } from "../../util/Transform"; import { DocumentView, DocumentViewProps } from "./DocumentView"; import "./DocumentView.scss"; import React = require("react"); -import { Document } from "../../../fields/Document"; -import { DocumentManager } from "../../util/DocumentManager"; +import { thisExpression } from "babel-types"; @observer @@ -75,6 +74,7 @@ export class CollectionFreeFormDocumentView extends React.Component { @observable private _interactive: boolean = false; @observable private _loaded: boolean = false; - @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, -1); } + @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, 1); } @computed private get thumbnailPage() { return this.props.doc.GetNumber(KeyStore.ThumbnailPage, -1); } componentDidMount() { @@ -435,8 +435,6 @@ export class PDFBox extends React.Component { @computed get pdfContent() { let page = this.curPage; - if (page == 0) - page = 1; const renderHeight = 2400; let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight; @@ -463,10 +461,8 @@ export class PDFBox extends React.Component { return [ this._pageInfo.area.filter(() => this._pageInfo.area).map((element: any) => element), this._currAnno.map((element: any) => element), -
    - {this.pdfContent} - {proxy} -
    + this.pdfContent, + proxy ]; } -- cgit v1.2.3-70-g09d2 From feef2c656b7f4cee5375d41322be7a65ba098379 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 31 Mar 2019 23:36:12 -0400 Subject: fixed ink to draw over documents --- src/client/views/InkingCanvas.scss | 9 ++++++--- src/client/views/InkingCanvas.tsx | 27 +++++++++++++++++++++------ 2 files changed, 27 insertions(+), 9 deletions(-) (limited to 'src/client/views/InkingCanvas.scss') diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index 6d7821cd2..abe6990b6 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -1,12 +1,11 @@ @import "global_variables"; -.inkingCanvas-paths, .inkingCanvas-paths-none { +.inkingCanvas-paths-ink, .inkingCanvas-paths-markers, .inkingCanvas-paths { position: absolute; top: -50000px; left: -50000px; width: 100000px; height: 100000px; - //z-index: 10000; // z-index: 99; //overlays ink on top of everything but that messes up blending and events don't propagate down to nested collections .highlight { mix-blend-mode: multiply; } @@ -18,8 +17,12 @@ pointer-events: auto; } -.inkingCanvas-paths-none { +.inkingCanvas-paths-ink, .inkingCanvas-paths-markers { pointer-events: none; + z-index: 10000; // overlays ink on top of everything cursor: "arrow"; } +.inkingCanvas-paths-markers { + mix-blend-mode: multiply; +} diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index a971264b9..fd9e6826a 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -137,8 +137,20 @@ export class InkingCanvas extends React.Component { render() { // parse data from server let curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1) - let paths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { - if (strokeData.page == -1 || strokeData.page == curPage) + let markerpaths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { + if ((strokeData.page == -1 || strokeData.page == curPage) && + strokeData.tool == InkTool.Highlighter) + paths.push() + return paths; + }, [] as JSX.Element[]); + let penpaths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { + if ((strokeData.page == -1 || strokeData.page == curPage) && + strokeData.tool == InkTool.Pen) paths.push( { deleteCallback={this.removeLine} />) return paths; }, [] as JSX.Element[]); - let svgCanvasStyle = InkingControl.Instance.selectedTool == InkTool.None ? "-none" : ""; return (
    - - {paths} - + {this.props.children} + + {markerpaths} + + + {penpaths} +
    ) } -- cgit v1.2.3-70-g09d2 From 90ac1190d6e2413d13b1f24d36987f74c3f0ba9e Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 31 Mar 2019 23:42:50 -0400 Subject: the last change seems to cause some major performance problem, so reverting. --- src/client/views/InkingCanvas.scss | 8 ++------ src/client/views/InkingCanvas.tsx | 25 +++++-------------------- 2 files changed, 7 insertions(+), 26 deletions(-) (limited to 'src/client/views/InkingCanvas.scss') diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index abe6990b6..0e2d7f8c1 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -1,6 +1,6 @@ @import "global_variables"; -.inkingCanvas-paths-ink, .inkingCanvas-paths-markers, .inkingCanvas-paths { +.inkingCanvas-paths, .inkingCanvas-paths-none { position: absolute; top: -50000px; left: -50000px; @@ -17,12 +17,8 @@ pointer-events: auto; } -.inkingCanvas-paths-ink, .inkingCanvas-paths-markers { +.inkingCanvas-paths-none { pointer-events: none; - z-index: 10000; // overlays ink on top of everything cursor: "arrow"; } -.inkingCanvas-paths-markers { - mix-blend-mode: multiply; -} diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index fd9e6826a..9ae3ade47 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -137,20 +137,8 @@ export class InkingCanvas extends React.Component { render() { // parse data from server let curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1) - let markerpaths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { - if ((strokeData.page == -1 || strokeData.page == curPage) && - strokeData.tool == InkTool.Highlighter) - paths.push() - return paths; - }, [] as JSX.Element[]); - let penpaths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { - if ((strokeData.page == -1 || strokeData.page == curPage) && - strokeData.tool == InkTool.Pen) + let paths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { + if (strokeData.page == -1 || strokeData.page == curPage) paths.push( { deleteCallback={this.removeLine} />) return paths; }, [] as JSX.Element[]); + let svgCanvasStyle = InkingControl.Instance.selectedTool == InkTool.None ? "-none" : ""; return (
    - {this.props.children} - - {markerpaths} - - - {penpaths} + + {paths}
    ) -- cgit v1.2.3-70-g09d2 From 83ad2ff7b64f8ab67a0652192f1fc72ce8e7c1ad Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 1 Apr 2019 00:49:57 -0400 Subject: since these changes look right, re-committing them and will look at tomorrow. --- src/client/views/InkingCanvas.scss | 11 ++++++----- src/client/views/InkingCanvas.tsx | 28 ++++++++++++++++++++++------ 2 files changed, 28 insertions(+), 11 deletions(-) (limited to 'src/client/views/InkingCanvas.scss') diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index 0e2d7f8c1..fa8b8798a 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -1,14 +1,11 @@ @import "global_variables"; -.inkingCanvas-paths, .inkingCanvas-paths-none { +.inkingCanvas-paths-ink, .inkingCanvas-paths-markers, .inkingCanvas-paths { position: absolute; top: -50000px; left: -50000px; width: 100000px; height: 100000px; - .highlight { - mix-blend-mode: multiply; - } .inkingCanvas-children { transform: translate(50000px, 50000px); pointer-events: none; @@ -17,8 +14,12 @@ pointer-events: auto; } -.inkingCanvas-paths-none { +.inkingCanvas-paths-ink, .inkingCanvas-paths-markers { pointer-events: none; + z-index: 10000; // overlays ink on top of everything cursor: "arrow"; } +.inkingCanvas-paths-markers { + mix-blend-mode: multiply; +} diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index 9ae3ade47..86a7a4456 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -1,4 +1,4 @@ -import { action, computed } from "mobx"; +import { action, computed, trace } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../fields/Document"; import { FieldWaiting } from "../../fields/Field"; @@ -137,8 +137,20 @@ export class InkingCanvas extends React.Component { render() { // parse data from server let curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1) - let paths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { - if (strokeData.page == -1 || strokeData.page == curPage) + let markerpaths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { + if ((strokeData.page == -1 || strokeData.page == curPage) && + strokeData.tool == InkTool.Highlighter) + paths.push() + return paths; + }, [] as JSX.Element[]); + let penpaths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { + if ((strokeData.page == -1 || strokeData.page == curPage) && + strokeData.tool == InkTool.Pen) paths.push( { deleteCallback={this.removeLine} />) return paths; }, [] as JSX.Element[]); - let svgCanvasStyle = InkingControl.Instance.selectedTool == InkTool.None ? "-none" : ""; + trace(); return (
    + {this.props.children} - - {paths} + + {markerpaths} + + + {penpaths}
    ) -- cgit v1.2.3-70-g09d2 From 5b348089bdc33e1e3b8e78ce51925b40793cb2cd Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 1 Apr 2019 09:42:43 -0400 Subject: ink event cleanup --- src/client/views/InkingCanvas.scss | 8 ++- src/client/views/InkingCanvas.tsx | 120 +++++++++++++------------------------ 2 files changed, 48 insertions(+), 80 deletions(-) (limited to 'src/client/views/InkingCanvas.scss') diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index fa8b8798a..214c70280 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -1,6 +1,6 @@ @import "global_variables"; -.inkingCanvas-paths-ink, .inkingCanvas-paths-markers, .inkingCanvas-paths { +.inkingCanvas-paths-ink, .inkingCanvas-paths-markers, .inkingCanvas-noSelect, .inkingCanvas-canSelect { position: absolute; top: -50000px; left: -50000px; @@ -14,7 +14,11 @@ pointer-events: auto; } -.inkingCanvas-paths-ink, .inkingCanvas-paths-markers { +.inkingCanvas-noSelect { + pointer-events: none; + cursor: "arrow"; +} +.inkingCanvas-paths-ink, .inkingCanvas-paths-markers { pointer-events: none; z-index: 10000; // overlays ink on top of everything cursor: "arrow"; diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index 86a7a4456..fc871e108 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -28,8 +28,7 @@ export class InkingCanvas extends React.Component { }); return inside } - private _isDrawing: boolean = false; - private _idGenerator: string = ""; + private _currentStrokeId: string = ""; constructor(props: Readonly) { super(props); @@ -48,78 +47,51 @@ export class InkingCanvas extends React.Component { this.props.Document.SetDataOnPrototype(KeyStore.Ink, value, InkField); } - componentDidMount() { - document.addEventListener("mouseup", this.handleMouseUp); - } - - componentWillUnmount() { - document.removeEventListener("mouseup", this.handleMouseUp); - } - @action onPointerDown = (e: React.PointerEvent): void => { - this._isDrawing = false; - if (e.button != 0 || e.altKey || e.ctrlKey || - InkingControl.Instance.selectedTool === InkTool.None) { + if (e.button != 0 || e.altKey || e.ctrlKey || InkingControl.Instance.selectedTool === InkTool.None) { return; } document.addEventListener("pointermove", this.onPointerMove, true); document.addEventListener("pointerup", this.onPointerUp, true); e.stopPropagation(); + e.preventDefault(); - this._isDrawing = true; if (InkingControl.Instance.selectedTool != InkTool.Eraser) { - const point = this.relativeCoordinatesForEvent(e.clientX, e.clientY); - // start the new line, saves a uuid to represent the field of the stroke - this._idGenerator = Utils.GenerateGuid(); - this.inkData.set(this._idGenerator, - { - pathData: [point], - color: InkingControl.Instance.selectedColor, - width: InkingControl.Instance.selectedWidth, - tool: InkingControl.Instance.selectedTool, - page: this.props.Document.GetNumber(KeyStore.CurPage, -1) - }); + this._currentStrokeId = Utils.GenerateGuid(); + this.inkData.set(this._currentStrokeId, { + pathData: [this.relativeCoordinatesForEvent(e.clientX, e.clientY)], + color: InkingControl.Instance.selectedColor, + width: InkingControl.Instance.selectedWidth, + tool: InkingControl.Instance.selectedTool, + page: this.props.Document.GetNumber(KeyStore.CurPage, -1) + }); } } onPointerUp = (e: PointerEvent): void => { - if (this._isDrawing) { - document.removeEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - this._isDrawing = false; - e.stopPropagation(); - } + document.removeEventListener("pointermove", this.onPointerMove, true); + document.removeEventListener("pointerup", this.onPointerUp, true); + e.stopPropagation(); + e.preventDefault(); } @action onPointerMove = (e: PointerEvent): void => { - if (this._isDrawing) { - e.stopPropagation() - e.preventDefault(); - if (InkingControl.Instance.selectedTool === InkTool.Eraser) { - return - } - const point = this.relativeCoordinatesForEvent(e.clientX, e.clientY); - - // add points to new line as it is being drawn - let data = this.inkData; - let strokeData = data.get(this._idGenerator); + e.stopPropagation() + e.preventDefault(); + if (InkingControl.Instance.selectedTool != InkTool.Eraser) { + let data = this.inkData; // add points to new line as it is being drawn + let strokeData = data.get(this._currentStrokeId); if (strokeData) { - strokeData.pathData.push(point); - data.set(this._idGenerator, strokeData); + strokeData.pathData.push(this.relativeCoordinatesForEvent(e.clientX, e.clientY)); + data.set(this._currentStrokeId, strokeData); } - this.inkData = data; } } - @action - handleMouseUp = (e: MouseEvent): void => { - this._isDrawing = false; - } - relativeCoordinatesForEvent = (ex: number, ey: number): { x: number, y: number } => { let [x, y] = this.props.getScreenTransform().transformPoint(ex, ey); x += InkingCanvas.InkOffset; @@ -134,43 +106,35 @@ export class InkingCanvas extends React.Component { this.inkData = data; } - render() { + @computed + get drawnPaths() { + trace(); // parse data from server let curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1) - let markerpaths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { - if ((strokeData.page == -1 || strokeData.page == curPage) && - strokeData.tool == InkTool.Highlighter) - paths.push() - return paths; - }, [] as JSX.Element[]); - let penpaths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { - if ((strokeData.page == -1 || strokeData.page == curPage) && - strokeData.tool == InkTool.Pen) - paths.push() + let paths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { + if (strokeData.page == -1 || strokeData.page == curPage) + paths.push() return paths; }, [] as JSX.Element[]); + return [ + {paths.filter(path => path.props.tool == InkTool.Highlighter)} + , + + {paths.filter(path => path.props.tool != InkTool.Highlighter)} + ]; + } + + render() { + let svgCanvasStyle = InkingControl.Instance.selectedTool != InkTool.None ? "canSelect" : "noSelect"; trace(); return (
    - + {this.props.children} - - {markerpaths} - - - {penpaths} - + {this.drawnPaths}
    ) } -- cgit v1.2.3-70-g09d2 From 7304217fd9559c35e34c16d5e4e025875adc3252 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 2 Apr 2019 20:59:10 -0400 Subject: put in a patch for inking up to canvas limit of 8192 --- src/client/views/InkingCanvas.scss | 10 +++++----- src/client/views/InkingCanvas.tsx | 2 +- src/client/views/InkingStroke.tsx | 5 +++-- 3 files changed, 9 insertions(+), 8 deletions(-) (limited to 'src/client/views/InkingCanvas.scss') diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index 214c70280..2128401b8 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -2,12 +2,12 @@ .inkingCanvas-paths-ink, .inkingCanvas-paths-markers, .inkingCanvas-noSelect, .inkingCanvas-canSelect { position: absolute; - top: -50000px; - left: -50000px; - width: 100000px; - height: 100000px; + top: -4096px; + left: -4096px; + width: 8192px; + height: 8192px; .inkingCanvas-children { - transform: translate(50000px, 50000px); + transform: translate(4096px, 4096px); pointer-events: none; } cursor:"crosshair"; diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index 123ff679b..fcf6db390 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -18,7 +18,7 @@ interface InkCanvasProps { @observer export class InkingCanvas extends React.Component { - static InkOffset: number = 50000; + static InkOffset: number = 4096; private _currentStrokeId: string = ""; public static IntersectStrokeRect(stroke: StrokeData, selRect: { left: number, top: number, width: number, height: number }): boolean { return stroke.pathData.reduce((inside, val) => inside || diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 52111c711..44048f377 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -48,9 +48,10 @@ export class InkingStroke extends React.Component { let pathStyle = this.createStyle(); let pathData = this.parseData(this.props.line); + let pointerEvents: any = InkingControl.Instance.selectedTool == InkTool.Eraser ? "all" : "none"; return ( - ) } -- cgit v1.2.3-70-g09d2 From c406c8d123ce0aa9d63fb8a4dd90adfe83d2889d Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 2 Apr 2019 23:38:59 -0400 Subject: fixed inking to have a moving 8192 window to maximize drawing area --- src/client/views/InkingCanvas.scss | 13 ++++----- src/client/views/InkingCanvas.tsx | 54 ++++++++++++++++++++++++++------------ src/client/views/InkingStroke.tsx | 8 +++--- 3 files changed, 48 insertions(+), 27 deletions(-) (limited to 'src/client/views/InkingCanvas.scss') diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index 2128401b8..35c8ee942 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -2,18 +2,19 @@ .inkingCanvas-paths-ink, .inkingCanvas-paths-markers, .inkingCanvas-noSelect, .inkingCanvas-canSelect { position: absolute; - top: -4096px; - left: -4096px; width: 8192px; height: 8192px; - .inkingCanvas-children { - transform: translate(4096px, 4096px); - pointer-events: none; - } cursor:"crosshair"; pointer-events: auto; } +.inkingCanvas-canSelect, +.inkingCanvas-noSelect { + top:-50000px; + left:-50000px; + width: 100000px; + height: 100000px; +} .inkingCanvas-noSelect { pointer-events: none; cursor: "arrow"; diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index fcf6db390..cad4b74b1 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -1,4 +1,4 @@ -import { action, computed, trace } from "mobx"; +import { action, computed, trace, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../fields/Document"; import { FieldWaiting } from "../../fields/Field"; @@ -14,26 +14,40 @@ import React = require("react"); interface InkCanvasProps { getScreenTransform: () => Transform; Document: Document; + children: () => JSX.Element[]; } @observer export class InkingCanvas extends React.Component { - static InkOffset: number = 4096; + maxCanvasDim = 8192 / 2; // 1/2 of the maximum canvas dimension for Chrome + @observable inkMidX: number = 0; + @observable inkMidY: number = 0; private _currentStrokeId: string = ""; public static IntersectStrokeRect(stroke: StrokeData, selRect: { left: number, top: number, width: number, height: number }): boolean { - return stroke.pathData.reduce((inside, val) => inside || - (selRect.left < val.x - InkingCanvas.InkOffset && selRect.left + selRect.width > val.x - InkingCanvas.InkOffset && - selRect.top < val.y - InkingCanvas.InkOffset && selRect.top + selRect.height > val.y - InkingCanvas.InkOffset) + return stroke.pathData.reduce((inside: boolean, val) => inside || + (selRect.left < val.x && selRect.left + selRect.width > val.x && + selRect.top < val.y && selRect.top + selRect.height > val.y) , false); } + componentDidMount() { + this.props.Document.GetTAsync(KeyStore.Ink, InkField, ink => runInAction(() => { + if (ink) { + let bounds = Array.from(ink.Data).reduce(([mix, max, miy, may], [id, strokeData]) => + strokeData.pathData.reduce(([mix, max, miy, may], p) => + [Math.min(mix, p.x), Math.max(max, p.x), Math.min(miy, p.y), Math.max(may, p.y)], + [mix, max, miy, may]), + [Number.MAX_VALUE, Number.MIN_VALUE, Number.MAX_VALUE, Number.MIN_VALUE]); + this.inkMidX = (bounds[0] + bounds[1]) / 2; + this.inkMidY = (bounds[2] + bounds[3]) / 2; + } + })); + } + @computed get inkData(): StrokeMap { let map = this.props.Document.GetT(KeyStore.Ink, InkField); - if (!map || map === FieldWaiting) { - return new Map; - } - return new Map(map.Data); + return !map || map === FieldWaiting ? new Map : new Map(map.Data); } set inkData(value: StrokeMap) { @@ -63,9 +77,15 @@ export class InkingCanvas extends React.Component { } } + @action onPointerUp = (e: PointerEvent): void => { document.removeEventListener("pointermove", this.onPointerMove, true); document.removeEventListener("pointerup", this.onPointerUp, true); + let coord = this.relativeCoordinatesForEvent(e.clientX, e.clientY); + if (Math.abs(coord.x - this.inkMidX) > 500 || Math.abs(coord.y - this.inkMidY) > 500) { + this.inkMidX = coord.x; + this.inkMidY = coord.y; + } e.stopPropagation(); e.preventDefault(); } @@ -87,8 +107,6 @@ export class InkingCanvas extends React.Component { relativeCoordinatesForEvent = (ex: number, ey: number): { x: number, y: number } => { let [x, y] = this.props.getScreenTransform().transformPoint(ex, ey); - x += InkingCanvas.InkOffset; - y += InkingCanvas.InkOffset; return { x, y }; } @@ -101,30 +119,32 @@ export class InkingCanvas extends React.Component { @computed get drawnPaths() { - // parse data from server let curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1) let paths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { if (strokeData.page == -1 || strokeData.page == curPage) paths.push() return paths; }, [] as JSX.Element[]); - return [ + return [ {paths.filter(path => path.props.tool == InkTool.Highlighter)} , - + {paths.filter(path => path.props.tool != InkTool.Highlighter)} ]; } render() { let svgCanvasStyle = InkingControl.Instance.selectedTool != InkTool.None ? "canSelect" : "noSelect"; - return (
    - - {(this.props.children as any)() /* bcz: is there a better way to know that children is a function? */} +
    + {this.props.children()} {this.drawnPaths}
    ) diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 44048f377..615f8af7e 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -6,6 +6,8 @@ import React = require("react"); interface StrokeProps { + offsetX: number; + offsetY: number; id: string; line: Array<{ x: number, y: number }>; color: string; @@ -28,7 +30,7 @@ export class InkingStroke extends React.Component { } parseData = (line: Array<{ x: number, y: number }>): string => { - return !line.length ? "" : "M " + line.map(p => p.x + " " + p.y).join(" L "); + return !line.length ? "" : "M " + line.map(p => (p.x + this.props.offsetX) + " " + (p.y + this.props.offsetY)).join(" L "); } createStyle() { @@ -43,15 +45,13 @@ export class InkingStroke extends React.Component { } } - render() { let pathStyle = this.createStyle(); let pathData = this.parseData(this.props.line); let pointerEvents: any = InkingControl.Instance.selectedTool == InkTool.Eraser ? "all" : "none"; return ( - ) } -- cgit v1.2.3-70-g09d2