@@ -176,7 +182,9 @@ export default class InkOptionsMenu extends AntimodeMenu {
title="colorChanger"
onPointerDown={action(e => this._colorBtn = !this._colorBtn)}
style={{ backgroundColor: this._colorBtn ? "121212" : "" }}>
-
@@ -187,7 +195,8 @@ export default class InkOptionsMenu extends AntimodeMenu {
key={color}
onPointerDown={action(() => { this.changeColor(color, "color"); this._colorBtn = false; this.editProperties(color, "color"); })}
style={{ backgroundColor: this._colorBtn ? "121212" : "" }}>
-
+ {/*
*/}
+
;
})}
;
@@ -202,7 +211,8 @@ export default class InkOptionsMenu extends AntimodeMenu {
title="fillChanger"
onPointerDown={action(e => this._fillBtn = !this._fillBtn)}
style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
-
@@ -213,7 +223,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
key={color}
onPointerDown={action(() => { this.changeColor(color, "fill"); this._fillBtn = false; this.editProperties(color, "fill"); })}
style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
-
+
;
})}
@@ -240,7 +250,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
@computed get shapePicker() {
var currIcon;
if (GestureOverlay.Instance.InkShape === "") {
- currIcon = "S";
+ currIcon =
;
} else {
for (var i = 0; i < this._icons.length; i++) {
if (GestureOverlay.Instance.InkShape === this._buttons[i]) {
@@ -252,7 +262,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
className="antimodeMenu-button"
key="shape"
onPointerDown={action(e => this._shapeBtn = !this._shapeBtn)}
- style={{ backgroundColor: this._widthBtn ? "121212" : "" }}>
+ style={{ backgroundColor: this._shapeBtn ? "121212" : "" }}>
{currIcon}
;
if (this._shapeBtn) {
@@ -280,7 +290,8 @@ export default class InkOptionsMenu extends AntimodeMenu {
key="bezier"
onPointerDown={e => this.changeBezier(e)}
style={{ backgroundColor: ActiveInkBezierApprox() ? "121212" : "" }}>
- B
+
+
;
}
@@ -291,13 +302,16 @@ export default class InkOptionsMenu extends AntimodeMenu {
key="dash"
onPointerDown={e => this.changeDash(e)}
style={{ backgroundColor: ActiveDash() !== "0" ? "121212" : "" }}>
- ...
+
+
;
}
render() {
const buttons = [
-
,
+
,
this.shapePicker,
// this.shapeButtons,
this.bezierButton,
--
cgit v1.2.3-70-g09d2
From 73299e354af3df1a5df712e24b32e14b5b0ec994 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
Date: Fri, 19 Jun 2020 18:17:59 -0400
Subject: a bunch of ink fixes
---
src/client/util/InteractionUtils.tsx | 31 +++++++++++-----------
src/client/views/GestureOverlay.tsx | 19 +++++++++----
src/client/views/InkingStroke.tsx | 5 ++--
.../collectionFreeForm/InkOptionsMenu.tsx | 6 ++---
4 files changed, 35 insertions(+), 26 deletions(-)
(limited to 'src')
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index 9a9bb3d42..64facaca4 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -3,6 +3,7 @@ import * as beziercurve from 'bezier-curve';
import * as fitCurve from 'fit-curve';
import InkOptionsMenu from "../views/collections/collectionFreeForm/InkOptionsMenu";
import "./InteractionUtils.scss";
+import { Utils } from "../../Utils";
export namespace InteractionUtils {
export const MOUSETYPE = "mouse";
@@ -93,15 +94,15 @@ export namespace InteractionUtils {
export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number,
color: string, width: number, strokeWidth: number, bezier: string, fill: string, arrowStart: string, arrowEnd: string,
- dash: string, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean) {
+ dash: string, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean, nodefs: boolean) {
let pts: { X: number; Y: number; }[] = [];
if (shape) { //if any of the shape are true
pts = makePolygon(shape, points);
}
else if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y === points[0].Y) {
//pointer is up (first and last points are the same)
- points.pop();
const newPoints = points.reduce((p, pts) => { p.push([pts.X, pts.Y]); return p; }, [] as number[][]);
+ newPoints.pop();
const bezierCurves = fitCurve(newPoints, parseInt(bezier));
for (const curve of bezierCurves) {
@@ -117,28 +118,26 @@ export namespace InteractionUtils {
`${(pt.X - left - width / 2) * scalex + width / 2},
${(pt.Y - top - width / 2) * scaley + width / 2} `, "");
const dashArray = String(Number(width) * Number(dash));
-
- return ();
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 95dc2c7d4..43aa63eb1 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -24,6 +24,7 @@ import { RadialMenu } from "./nodes/RadialMenu";
import HorizontalPalette from "./Palette";
import { Touchable } from "./Touchable";
import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu";
+import HeightLabel from "./collections/collectionMulticolumn/MultirowHeightLabel";
@observer
export default class GestureOverlay extends Touchable {
@@ -812,20 +813,28 @@ export default class GestureOverlay extends Touchable {
}
@computed get elements() {
-
- const B = this.svgBounds;
const width = Number(ActiveInkWidth());
+ const B = this.svgBounds;
+ B.left = B.left - width / 2;
+ B.right = B.right + width / 2;
+ B.top = B.top - width / 2;
+ B.bottom = B.bottom + width / 2;
+ B.width += width;
+ B.height += width;
return [
this.props.children,
this._palette,
[this._strokes.map((l, i) => {
const b = this.getBounds(l);
return
- {InteractionUtils.CreatePolyline(l, b.left, b.top, ActiveInkColor(), width, width, ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), 1, 1, this.InkShape, "none", false)}
+ {InteractionUtils.CreatePolyline(l, b.left, b.top, ActiveInkColor(), width, width,
+ ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(),
+ ActiveDash(), 1, 1, this.InkShape, "none", false, false)}
;
}),
- this._points.length <= 1 ? (null) :
- {InteractionUtils.CreatePolyline(this._points, B.left, B.top, ActiveInkColor(), width, width, ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), 1, 1, this.InkShape, "none", false)}
+ this._points.length <= 1 ? (null) :
+ {InteractionUtils.CreatePolyline(this._points, B.left, B.top, ActiveInkColor(), width, width, ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), 1, 1, this.InkShape, "none", false, false)}
]
];
}
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index dc5d387d0..627760c38 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -15,6 +15,7 @@ import { FieldView, FieldViewProps } from "./nodes/FieldView";
import React = require("react");
import { Scripting } from "../util/Scripting";
import { Doc } from "../../fields/Doc";
+import { NodeFlags } from "typescript";
library.add(faPaintBrush);
@@ -56,11 +57,11 @@ export class InkingStroke extends ViewBoxBaseComponent 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15),
StrCast(this.layoutDoc.strokeBezier, ActiveInkBezierApprox()), StrCast(this.layoutDoc.fillColor, ActiveFillColor()),
- "none", "none", "0", scaleX, scaleY, "", this.props.active() ? "visiblestroke" : "none", false);
+ "none", "none", "0", scaleX, scaleY, "", this.props.active() ? "visiblestroke" : "none", false, true);
return (
Date: Wed, 24 Jun 2020 00:39:56 +0900
Subject: fixed inkmenu
---
src/client/views/GestureOverlay.tsx | 4 +++-
.../collectionFreeForm/InkOptionsMenu.tsx | 23 +++++++++++++++-------
2 files changed, 19 insertions(+), 8 deletions(-)
(limited to 'src')
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 43aa63eb1..85695bbac 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -632,7 +632,9 @@ export default class GestureOverlay extends Touchable {
this.makePolygon(this.InkShape, false);
this.dispatchGesture(GestureUtils.Gestures.Stroke);
this._points = [];
- this.InkShape = "";
+ if (this.InkShape !== "noRec") {
+ this.InkShape = "";
+ }
}
// if we're not drawing in a toolglass try to recognize as gesture
else {
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index fb2640249..e43e6bbdd 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -16,7 +16,7 @@ import { Document } from "../../../../fields/documentSchemas";
import { DocumentType } from "../../../documents/DocumentTypes";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
-import { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faSleigh, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve } from "@fortawesome/free-solid-svg-icons";
+import { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faSleigh, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve, } from "@fortawesome/free-solid-svg-icons";
library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve);
@@ -28,12 +28,12 @@ export default class InkOptionsMenu extends AntimodeMenu {
private _width = ["1", "5", "10", "100"];
// private _buttons = ["circle", "triangle", "rectangle", "arrow", "line"];
// private _icons = ["O", "∆", "ロ", "➜", "-"];
- private _buttons = ["circle", "triangle", "rectangle", "line", "", "noRec"];
- private _icons = ["O", "∆", "ロ", "––", " ", "✖︎"];
+ private _buttons = ["circle", "triangle", "rectangle", "line", "noRec", "",];
+ private _icons = ["O", "∆", "ロ", "⎯", "✖︎", " "];
//arrowStart and arrowEnd must match and defs must exist in Inking Stroke
private _arrowStart = ["arrowHead", "arrowHead", "dot", "dot", "none"];
private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"];
- private _arrowIcons = ["→", "↔︎", "・", "・・", " "];
+ private _arrowIcons = ["→", "↔︎", "•", "••", " "];
@observable _colorBtn = false;
@observable _widthBtn = false;
@@ -121,7 +121,9 @@ export default class InkOptionsMenu extends AntimodeMenu {
for (var i = 0; i < this._arrowStart.length; i++) {
if (this._arrowStart[i] === ActiveArrowStart() && this._arrowEnd[i] === ActiveArrowEnd()) {
currIcon = this._arrowIcons[i];
-
+ if (this._arrowIcons[i] === " ") {
+ currIcon = "➤";
+ }
}
}
var arrowPicker =