aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/InkingCanvas.scss10
-rw-r--r--src/client/views/InkingCanvas.tsx46
-rw-r--r--src/client/views/InkingControl.tsx36
-rw-r--r--src/client/views/InkingStroke.tsx6
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx4
-rw-r--r--src/fields/InkField.ts6
6 files changed, 54 insertions, 54 deletions
diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss
index 6168697aa..f654b194b 100644
--- a/src/client/views/InkingCanvas.scss
+++ b/src/client/views/InkingCanvas.scss
@@ -1,10 +1,10 @@
.inking-canvas {
- position: absolute;
- top: 0px;
- left: 0px; // z-index: 99; //overlays ink on top of everything
+ position: fixed;
+ top: -50000px;
+ left: -50000px; // z-index: 99; //overlays ink on top of everything
svg {
- width: 10000px;
- height: 10000px;
+ width: 100000px;
+ height: 100000px;
.highlight {
mix-blend-mode: multiply;
}
diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx
index fb1387b68..baf1567b7 100644
--- a/src/client/views/InkingCanvas.tsx
+++ b/src/client/views/InkingCanvas.tsx
@@ -10,6 +10,7 @@ import { JsxArgs } from "./nodes/DocumentView";
import { InkingStroke } from "./InkingStroke";
import "./InkingCanvas.scss"
import { CollectionDockingView } from "./collections/CollectionDockingView";
+import { Utils } from "../../Utils";
interface InkCanvasProps {
@@ -21,16 +22,10 @@ interface InkCanvasProps {
export class InkingCanvas extends React.Component<InkCanvasProps> {
private _isDrawing: boolean = false;
- private _idGenerator: number = -1;
+ private _idGenerator: string = "";
constructor(props: Readonly<InkCanvasProps>) {
super(props);
-
- this.handleMouseDown = this.handleMouseDown.bind(this);
- this.handleMouseMove = this.handleMouseMove.bind(this);
- this.handleMouseUp = this.handleMouseUp.bind(this);
- this.relativeCoordinatesForEvent = this.relativeCoordinatesForEvent.bind(this);
-
}
get inkData(): StrokeMap {
@@ -51,35 +46,42 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
@action
- handleMouseDown = (e: React.MouseEvent): void => {
+ handleMouseDown = (e: React.PointerEvent): void => {
if (e.button != 0 ||
- InkingControl.getInstance().selectedTool === InkTool.None ||
- InkingControl.getInstance().selectedTool === InkTool.Eraser) {
+ InkingControl.Instance.selectedTool === InkTool.None) {
return;
}
+ e.stopPropagation()
+ if (InkingControl.Instance.selectedTool === InkTool.Eraser) {
+ return
+ }
+ e.stopPropagation()
const point = this.relativeCoordinatesForEvent(e);
- // start the new line
- this._idGenerator = Date.now();
+ // start the new line, saves a uuid to represent the field of the stroke
+ this._idGenerator = Utils.GenerateGuid();
let data = this.inkData;
data.set(this._idGenerator,
{
pathData: [point],
- color: InkingControl.getInstance().selectedColor,
- width: InkingControl.getInstance().selectedWidth,
- tool: InkingControl.getInstance().selectedTool
+ color: InkingControl.Instance.selectedColor,
+ width: InkingControl.Instance.selectedWidth,
+ tool: InkingControl.Instance.selectedTool
});
this.inkData = data;
this._isDrawing = true;
}
@action
- handleMouseMove = (e: React.MouseEvent): void => {
+ handleMouseMove = (e: React.PointerEvent): void => {
if (!this._isDrawing ||
- InkingControl.getInstance().selectedTool === InkTool.None ||
- InkingControl.getInstance().selectedTool === InkTool.Eraser) {
+ InkingControl.Instance.selectedTool === InkTool.None) {
return;
}
+ e.stopPropagation()
+ if (InkingControl.Instance.selectedTool === InkTool.Eraser) {
+ return
+ }
const point = this.relativeCoordinatesForEvent(e);
// add points to new line as it is being drawn
@@ -100,11 +102,13 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
relativeCoordinatesForEvent = (e: React.MouseEvent): { x: number, y: number } => {
let [x, y] = this.props.getScreenTransform().transformPoint(e.clientX, e.clientY);
+ x += 50000
+ y += 50000
return { x, y };
}
@action
- removeLine = (id: number): void => {
+ removeLine = (id: string): void => {
let data = this.inkData;
data.delete(id);
this.inkData = data;
@@ -113,7 +117,7 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
render() {
// styling for cursor
let canvasStyle = {};
- if (InkingControl.getInstance().selectedTool === InkTool.None) {
+ if (InkingControl.Instance.selectedTool === InkTool.None) {
canvasStyle = { pointerEvents: "none" };
} else {
canvasStyle = { pointerEvents: "auto", cursor: "crosshair" };
@@ -147,7 +151,7 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
return (
<div className="inking-canvas" style={canvasStyle}
- onMouseDown={this.handleMouseDown} onMouseMove={this.handleMouseMove} >
+ onPointerDown={this.handleMouseDown} onPointerMove={this.handleMouseMove} >
<svg>
{paths}
</svg>
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index 9162eeb09..929fb42a1 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -3,24 +3,18 @@ import { CirclePicker, ColorResult } from 'react-color'
import React = require("react");
import "./InkingCanvas.scss"
import { InkTool } from "../../fields/InkField";
+import { observer } from "mobx-react";
-
+@observer
export class InkingControl extends React.Component {
- private static Instance: InkingControl;
-
+ static Instance: InkingControl = new InkingControl({});
@observable private _selectedTool: InkTool = InkTool.None;
@observable private _selectedColor: string = "#f44336";
@observable private _selectedWidth: string = "25";
- private constructor(props: Readonly<{}>) {
+ constructor(props: Readonly<{}>) {
super(props);
- }
-
- static getInstance = (): InkingControl => {
- if (!InkingControl.Instance) {
- InkingControl.Instance = new InkingControl({});
- }
- return InkingControl.Instance;
+ InkingControl.Instance = this
}
@action
@@ -53,23 +47,29 @@ export class InkingControl extends React.Component {
return this._selectedWidth;
}
+ selected = (tool: InkTool) => {
+ if (this._selectedTool === tool) {
+ return { backgroundColor: "black", color: "white" }
+ }
+ return {}
+ }
+
render() {
- console.log(this._selectedTool);
return (
<div className="inking-control">
<div className="ink-tools ink-panel">
- <button onClick={() => InkingControl.getInstance().switchTool(InkTool.Pen)}>Pen</button>
- <button onClick={() => InkingControl.getInstance().switchTool(InkTool.Highlighter)}>Highlighter</button>
- <button onClick={() => InkingControl.getInstance().switchTool(InkTool.Eraser)}>Eraser</button>
- <button onClick={() => InkingControl.getInstance().switchTool(InkTool.None)}> None</button>
+ <button onClick={() => this.switchTool(InkTool.Pen)} style={this.selected(InkTool.Pen)}>Pen</button>
+ <button onClick={() => this.switchTool(InkTool.Highlighter)} style={this.selected(InkTool.Highlighter)}>Highlighter</button>
+ <button onClick={() => this.switchTool(InkTool.Eraser)} style={this.selected(InkTool.Eraser)}>Eraser</button>
+ <button onClick={() => this.switchTool(InkTool.None)} style={this.selected(InkTool.None)}> None</button>
</div>
<div className="ink-size ink-panel">
<label htmlFor="stroke-width">Size</label>
<input type="range" min="1" max="100" defaultValue="25" name="stroke-width"
- onChange={(e: React.ChangeEvent<HTMLInputElement>) => InkingControl.getInstance().switchWidth(e.target.value)} />
+ onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.switchWidth(e.target.value)} />
</div>
<div className="ink-color ink-panel">
- <CirclePicker onChange={InkingControl.getInstance().switchColor} />
+ <CirclePicker onChange={this.switchColor} />
</div>
</div>
)
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index bab9f3a60..d724421d3 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -6,12 +6,12 @@ import React = require("react");
interface StrokeProps {
- id: number;
+ id: string;
line: Array<{ x: number, y: number }>;
color: string;
width: string;
tool: InkTool;
- deleteCallback: (index: number) => void;
+ deleteCallback: (index: string) => void;
}
@observer
@@ -24,7 +24,7 @@ export class InkingStroke extends React.Component<StrokeProps> {
private _canvasColor: string = "#cdcdcd";
deleteStroke = (e: React.MouseEvent): void => {
- if (InkingControl.getInstance().selectedTool === InkTool.Eraser && e.buttons === 1) {
+ if (InkingControl.Instance.selectedTool === InkTool.Eraser && e.buttons === 1) {
this.props.deleteCallback(this.props.id);
}
}
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index dfc9d41e6..aac0153dd 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -69,10 +69,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
@action
onPointerDown = (e: React.PointerEvent): void => {
- // if ink is selected, don't pan
- let isInking = !(InkingControl.getInstance().selectedTool === InkTool.None);
- if (isInking) return;
-
if ((e.button === 2 && this.props.active()) ||
!e.defaultPrevented) {
document.removeEventListener("pointermove", this.onPointerMove);
diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts
index 0af72a8ea..a475e2aae 100644
--- a/src/fields/InkField.ts
+++ b/src/fields/InkField.ts
@@ -14,7 +14,7 @@ export interface StrokeData {
width: string;
tool: InkTool;
}
-export type StrokeMap = Map<number, StrokeData>;
+export type StrokeMap = Map<string, StrokeData>;
export class InkField extends BasicField<StrokeMap> {
constructor(data: StrokeMap = new Map, id?: FieldId, save: boolean = true) {
@@ -38,9 +38,9 @@ export class InkField extends BasicField<StrokeMap> {
}
static FromJson(id: string, data: any): InkField {
- let map = new Map<number, StrokeData>();
+ let map = new Map<string, StrokeData>();
Object.keys(data).forEach(key => {
- map.set(parseInt(key), data[key]);
+ map.set(key, data[key]);
});
return new InkField(map, id, false);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 02:59:15 +0000