@@ -597,7 +598,10 @@ export class MainView extends React.Component {
+
+
{this.mainContent}
@@ -608,6 +612,7 @@ export class MainView extends React.Component {
linkDoc={LinkDocPreview.LinkInfo.linkDoc} linkSrc={LinkDocPreview.LinkInfo.linkSrc} href={LinkDocPreview.LinkInfo.href}
addDocTab={LinkDocPreview.LinkInfo.addDocTab} /> : (null)}
+
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss
new file mode 100644
index 000000000..5789c6c75
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss
@@ -0,0 +1,53 @@
+.antimodeMenu-button {
+ width: 200px;
+
+ .color-previewI {
+ width: 100%;
+ height: 40%;
+ }
+
+ .color-previewII {
+ width: 100%;
+ height: 100%;
+ }
+
+
+}
+
+.sketch-picker {
+ background: #323232;
+
+ .flexbox-fit {
+ background: #323232;
+ }
+}
+
+.btn-group {
+ display: grid;
+ grid-template-columns: auto auto auto auto;
+ /* Make the buttons appear below each other */
+}
+
+.btn-group-palette {
+ display: block;
+ /* Make the buttons appear below each other */
+}
+
+.btn-draw {
+ display: inline;
+ /* Make the buttons appear below each other */
+}
+
+.btn2-group {
+ display: block;
+ background: #323232;
+ grid-template-columns: auto;
+
+ /* Make the buttons appear below each other */
+ .antimodeMenu-button {
+ background: #323232;
+ display: block;
+
+
+ }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
new file mode 100644
index 000000000..7b47b7ca4
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
@@ -0,0 +1,996 @@
+import React = require("react");
+import AntimodeMenu from "../../AntimodeMenu";
+import { observer } from "mobx-react";
+import { observable, action, computed } from "mobx";
+import "./FormatShapePane.scss";
+import { ActiveInkColor, ActiveInkBezierApprox, ActiveFillColor, ActiveArrowStart, ActiveArrowEnd, SetActiveInkWidth, SetActiveInkColor, SetActiveBezierApprox, SetActiveFillColor, SetActiveArrowStart, SetActiveArrowEnd, ActiveDash, SetActiveDash } from "../../InkingStroke";
+import { Scripting } from "../../../util/Scripting";
+import { InkTool, InkField } from "../../../../fields/InkField";
+import { ColorState } from "react-color";
+import { Utils } from "../../../../Utils";
+import GestureOverlay from "../../GestureOverlay";
+import { Doc } from "../../../../fields/Doc";
+import { SelectionManager } from "../../../util/SelectionManager";
+import { DocumentView } from "../../../views/nodes/DocumentView";
+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 { faRulerCombined, faFillDrip, faPenNib } from "@fortawesome/free-solid-svg-icons";
+import { Cast, StrCast, BoolCast, NumCast } from "../../../../fields/Types";
+import e = require("express");
+import { ChangeEvent } from "mongodb";
+import { black } from "colors";
+
+
+library.add(faRulerCombined, faFillDrip, faPenNib);
+
+@observer
+export default class FormatShapePane extends AntimodeMenu {
+ static Instance: FormatShapePane;
+
+ private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"];
+ private _width = ["1", "5", "10", "100"];
+ private _mode = ["fill-drip", "ruler-combined"];
+ private _subMenu = ["fill", "line", "size", "position"];
+ private _headIcon = ["⎯", "←"];
+ private _endIcon = ["⎯", "→"];
+ private _head = ["none", "arrowHead"];
+ private _end = ["none", "arrowEnd"];
+
+ @observable private _subOpen = [false, false, false, false];
+
+ @observable private collapsed: boolean = false;
+ @observable private currMode: string = "fill-drip";
+ @observable _fillBtn = false;
+ @observable _lineBtn = false;
+
+ @observable _selectDoc: DocumentView[] = [];
+
+ @observable _noFill = false;
+ @observable _solidFill = false;
+ @observable _noLine = false;
+ @observable _solidLine = false;
+ @observable _dashLine = false;
+ @observable _lock = false;
+
+ @observable _multiple = false;
+
+ @observable _widthBtn = false;
+
+ @observable _currWidth = "10";
+
+ @observable _single = false;
+ @observable _currFill = "#D0021B";
+ @observable _currColor = "#D0021B";
+
+ @observable _arrowHead = false;
+ @observable _arrowEnd = false;
+
+
+ @observable _currSizeHeight = "10";
+ @observable _currSizeWidth = "10";
+ @observable _currRotation = "10";
+
+ @observable _currPositionHorizontal = "10";
+ @observable _currPositionVertical = "10";
+
+
+ constructor(props: Readonly<{}>) {
+ super(props);
+ FormatShapePane.Instance = this;
+ this._canFade = false; // don't let the inking menu fade away
+ this.Pinned = BoolCast(Doc.UserDoc()["formatShapePane-pinned"]);
+
+ }
+
+ @action
+ toggleMenuPin = (e: React.MouseEvent) => {
+ Doc.UserDoc()["formatShapePane-pinned"] = this.Pinned = !this.Pinned;
+ if (!this.Pinned) {
+ // this.fadeOut(true);
+ }
+ }
+
+ @action
+ protected toggleCollapse = (e: React.MouseEvent) => {
+ this.collapsed = !this.collapsed;
+ setTimeout(() => {
+ const x = Math.min(this._left, window.innerWidth - FormatShapePane.Instance.width);
+ FormatShapePane.Instance.jumpTo(x, this._top, true);
+ }, 0);
+ }
+
+ @action
+ closePane = () => {
+ this.jumpTo(-300, -300);
+ this.Pinned = false;
+
+ }
+
+ @action
+ checkSame = () => {
+ const docs = SelectionManager.SelectedDocuments();
+ const inks: DocumentView[] = [];
+ for (var i = 0; i < docs.length; i++) {
+ if (Document(docs[i].rootDoc).type === DocumentType.INK) {
+ inks.push(docs[i]);
+ }
+ }
+ const firstWidth = Document(inks[0].rootDoc).strokeWidth;
+ const firstColor = Document(inks[0].rootDoc).color;
+ const firstFill = Document(inks[0].rootDoc).fillColor;
+ // const firstBezier
+ const firstRotation = Document(inks[0].rootDoc).rotation;
+ const firstArrowStart = Document(inks[0].rootDoc).arrowStart;
+ const firstArrowEnd = Document(inks[0].rootDoc).arrowEnd;
+ const firstDash = Document(inks[0].rootDoc).dash;
+ const firstWidthSize = Document(inks[0].rootDoc)._width;
+ const firstHeightSize = Document(inks[0].rootDoc)._height;
+ const firstHorizontal = Document(inks[0].rootDoc).x;
+ const firstVertical = Document(inks[0].rootDoc).y;
+ this._noFill = Document(inks[0].rootDoc).fillColor === "none" ? true : false;
+ this._solidFill = Document(inks[0].rootDoc).fillColor === "none" ? false : true;
+ this._noLine = Document(inks[0].rootDoc).color === "none" ? true : false;
+ if (Document(inks[0].rootDoc).color !== "none") {
+ this._solidLine = true;
+ this._dashLine = true;
+ if (Document(inks[0].rootDoc).dash === "0") {
+ this._dashLine = false;
+ } else {
+ this._solidLine = false;
+
+ }
+ }
+ // this._solidLine = (Document(inks[0].rootDoc).color === "none") ? false : Document(inks[0].rootDoc).dash === 0 ? true : false;
+ // this._dashLine = (Document(inks[0].rootDoc).color === "none") ? false : Document(inks[0].rootDoc).dash !== 0 ? true : false;
+ // // this._widthBtn = false;
+ this._currWidth = String(Document(inks[0].rootDoc).strokeWidth);
+ // this._single = false;
+ this._currFill = String(Document(inks[0].rootDoc).fillColor);
+ this._currColor = String(Document(inks[0].rootDoc).color);
+ this._arrowHead = Document(inks[0].rootDoc).arrowStart === "none" ? false : true;
+ this._arrowEnd = Document(inks[0].rootDoc).arrowEnd === "none" ? false : true;
+ this._currSizeHeight = String(Document(inks[0].rootDoc)._height);
+ this._currSizeWidth = String(Document(inks[0].rootDoc)._width);
+ this._currRotation = String(Document(inks[0].rootDoc).rotation);
+ this._currPositionHorizontal = String(Document(inks[0].rootDoc).x);
+ this._currPositionVertical = String(Document(inks[0].rootDoc).y);
+ for (var i = 0; i < inks.length; i++) {
+ if (Document(inks[i].rootDoc).strokeWidth !== firstWidth) {
+ this._currWidth = "";
+ }
+ if (Document(inks[i].rootDoc).color !== firstColor) {
+ this._noLine = false;
+ this._solidLine = false;
+ this._dashLine = false;
+ }
+ if (Document(inks[i].rootDoc).fillColor !== firstFill) {
+ this._solidFill = false;
+ this._noFill = false;
+ }
+ if (Document(inks[i].rootDoc).arrowStart !== firstArrowStart) {
+ this._arrowHead = false;
+ }
+ if (Document(inks[i].rootDoc).arrowEnd !== firstArrowEnd) {
+ this._arrowEnd = false;
+ }
+ if (Document(inks[i].rootDoc).x !== firstHorizontal) {
+ this._currPositionHorizontal = "";
+ }
+ if (Document(inks[i].rootDoc).y !== firstVertical) {
+ this._currPositionVertical = "";
+ }
+ if (Document(inks[i].rootDoc)._width !== firstWidthSize) {
+ this._currSizeWidth = "";
+ }
+ if (Document(inks[i].rootDoc)._height !== firstHeightSize) {
+ this._currSizeHeight = "";
+ }
+ if (Document(inks[i].rootDoc).rotation !== firstRotation) {
+ this._currRotation = "";
+ }
+ }
+
+
+
+ }
+
+ @action
+ upDownButtons = (dirs: string, field: string) => {
+ SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
+ const doc = Document(element.rootDoc);
+ if (doc.type === DocumentType.INK) {
+ switch (field) {
+ case "width":
+ if (doc.strokeWidth) {
+ doc.strokeWidth = dirs === "up" ? doc.strokeWidth + 1 : doc.strokeWidth - 1;
+ SetActiveInkWidth(String(doc.strokeWidth));
+
+ }
+ break;
+ case "sizeWidth":
+ if (doc._width && doc._height) {
+ const oldWidth = doc._width;
+ const oldHeight = doc._height;
+
+ doc._width = dirs === "up" ? doc._width + 10 : doc._width - 10;
+ if (this._lock) {
+ doc._height = (doc._width * oldHeight) / oldWidth;
+ }
+ }
+ break;
+ case "sizeHeight":
+ if (doc._width && doc._height) {
+ const oldWidth = doc._width;
+ const oldHeight = doc._height;
+ doc._height = dirs === "up" ? doc._height + 10 : doc._height - 10;
+ if (this._lock) {
+ doc._width = (doc._height * oldWidth) / oldHeight;
+ }
+ }
+ break;
+ case "horizontal":
+ if (doc.x) {
+ doc.x = dirs === "up" ? doc.x + 10 : doc.x - 10;
+ }
+ break;
+ case "vertical":
+ if (doc.y) {
+ doc.y = dirs === "up" ? doc.y + 10 : doc.y - 10;
+ }
+ case "rotation":
+
+ this.rotate(dirs === "up" ? Number(doc.rotation) + Number(0.1) : Number(doc.rotation) - Number(0.1));
+
+ break;
+ default:
+ break;
+ }
+ this.selected();
+
+ }
+ }));
+ }
+
+ @action
+ editProperties = (value: any, field: string) => {
+ SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
+ const doc = Document(element.rootDoc);
+ if (doc.type === DocumentType.INK) {
+ switch (field) {
+ case "width":
+ SetActiveInkWidth(value);
+ doc.strokeWidth = Number(value);
+ break;
+ case "color":
+ doc.color = String(value);
+ break;
+ case "fill":
+ doc.fillColor = String(value);
+ break;
+ case "bezier":
+ // doc.strokeBezier === 300 ? doc.strokeBezier = 0 : doc.strokeBezier = 300;
+ break;
+ case "arrowStart":
+ doc.arrowStart = String(value);
+ break;
+ case "arrowEnd":
+ doc.arrowEnd = String(value);
+ break;
+ case "dash":
+ doc.dash = String(value);
+ break;
+ case "widthSize":
+ if (doc._width && doc._height) {
+ const oldWidth = doc._width;
+ const oldHeight = doc._height;
+
+ doc._width = Number(value);
+ if (this._lock) {
+ doc._height = (doc._width * oldHeight) / oldWidth;
+ }
+ }
+ break;
+ case "heightSize":
+ if (doc._width && doc._height) {
+ const oldWidth = doc._width;
+ const oldHeight = doc._height;
+
+ doc._height = Number(value);
+ if (this._lock) {
+ doc._width = (doc._height * oldWidth) / oldHeight;
+ }
+ }
+ break;
+ case "horizontal":
+ doc.x = Number(value);
+ break;
+ case "vertical":
+ doc.y = Number(value);
+
+ break;
+ default:
+ break;
+ }
+ }
+ this.selected();
+ }));
+ this.checkSame();
+
+ }
+
+ @computed get close() {
+ const close = ;
+ return close;
+ }
+
+ @computed get modes() {
+ const modes =
+ {this._mode.map(mode => {
+ return ;
+ })
+ }
;
+ return modes;
+ }
+
+ @action
+ selected = () => {
+ this._selectDoc = SelectionManager.SelectedDocuments();
+ if (this._selectDoc.length === 1 && Document(this._selectDoc[0].rootDoc).type === DocumentType.INK) {
+ this._single = true;
+ const doc = Document(this._selectDoc[0].rootDoc);
+ if (doc.type === DocumentType.INK) {
+ console.log(doc.fillColor);
+ if (doc.fillColor === "none") {
+ this._noFill = true;
+ this._solidFill = false;
+ } else {
+ this._solidFill = true;
+ this._noFill = false;
+ this._currFill = String(doc.fillColor);
+ }
+ if (doc.color === "none") {
+ this._noLine = true;
+ this._solidLine = false;
+ this._dashLine = false;
+ } else {
+ console.log(doc.strokeWidth);
+ this._currWidth = String(doc.strokeWidth);
+ this._currColor = String(doc.color);
+ if (doc.dash === "0") {
+ this._solidLine = true;
+ this._noLine = false;
+ this._dashLine = false;
+ } else {
+ this._dashLine = true;
+ this._noLine = false;
+ this._solidLine = false;
+ }
+
+ this._arrowHead = doc.arrowStart === "none" ? false : true;
+ this._arrowEnd = doc.arrowEnd === "none" ? false : true;
+
+
+ this._currPositionHorizontal = String(doc.x);
+ this._currPositionVertical = String(doc.y);
+ console.log(doc.rotation);
+ this._currRotation = String(doc.rotation);
+ this._currSizeHeight = String(doc._height);
+ this._currSizeWidth = String(doc._width);
+ }
+
+ }
+ } else {
+ this._noFill = false;
+ this._solidFill = false;
+ this._single = false;
+ this._currFill = "#D0021B";
+ this._noLine = false;
+ this._solidLine = false;
+ this._dashLine = false;
+ this._currColor = "#D0021B";
+ this._arrowHead = false;
+ this._arrowEnd = false;
+ this._currPositionHorizontal = "";
+ this._currPositionVertical = "";
+ this._currRotation = "";
+ this._currSizeHeight = "";
+ this._currSizeWidth = "";
+ }
+ this.checkSame();
+ }
+
+ @action
+ rotate = (degrees: number) => {
+ SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
+ const doc = Document(element.rootDoc);
+ if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) {
+ // doc.rotation = (Number(doc.rotation) + (Number(angle) * 180 / Math.PI));
+ // console.log(doc.rotation);
+ const angle = Number(degrees) - Number(doc.rotation);
+ doc.rotation = Number(degrees);
+ const ink = Cast(doc.data, InkField)?.inkData;
+ if (ink) {
+ const xs = ink.map(p => p.X);
+ const ys = ink.map(p => p.Y);
+ const left = Math.min(...xs);
+ const top = Math.min(...ys);
+ const right = Math.max(...xs);
+ const bottom = Math.max(...ys);
+ const _centerPoints: { X: number, Y: number }[] = [];
+ _centerPoints.push({ X: left, Y: top });
+
+ const newPoints: { X: number, Y: number }[] = [];
+ for (var i = 0; i < ink.length; i++) {
+ const newX = Math.cos(angle) * (ink[i].X - _centerPoints[0].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[0].Y) + _centerPoints[0].X;
+ const newY = Math.sin(angle) * (ink[i].X - _centerPoints[0].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[0].Y) + _centerPoints[0].Y;
+ newPoints.push({ X: newX, Y: newY });
+ }
+ doc.data = new InkField(newPoints);
+ const xs2 = newPoints.map(p => p.X);
+ const ys2 = newPoints.map(p => p.Y);
+ const left2 = Math.min(...xs2);
+ const top2 = Math.min(...ys2);
+ const right2 = Math.max(...xs2);
+ const bottom2 = Math.max(...ys2);
+
+ doc._height = (bottom2 - top2) * element.props.ScreenToLocalTransform().Scale;
+ doc._width = (right2 - left2) * element.props.ScreenToLocalTransform().Scale;
+
+ }
+ }
+ }));
+ }
+
+ @action
+ toggle = (check: string) => {
+ switch (check) {
+ case "noFill":
+ if (!this._noFill) {
+ this._noFill = true;
+ this._solidFill = false;
+ }
+ break;
+ case "solidFill":
+ if (!this._solidFill) {
+ this._solidFill = true;
+ this._noFill = false;
+ if (this._currFill === "none") {
+ this._currFill = "#D0021B";
+ }
+ }
+ break;
+ case "noLine":
+ if (!this._noLine) {
+ this._noLine = true;
+ this._solidLine = false;
+ this._dashLine = false;
+ }
+ break;
+ case "solidLine":
+ if (!this._solidLine) {
+ this._solidLine = true;
+ this._noLine = false;
+ this._dashLine = false;
+ if (this._currColor === "none") {
+ this._currColor = "#D0021B";
+ }
+ }
+ break;
+ case "dashLine":
+ if (!this._dashLine) {
+ this._dashLine = true;
+ this._solidLine = false;
+ this._noLine = false;
+ if (this._currColor === "none") {
+ this._currColor = "#D0021B";
+ }
+ }
+ break;
+ case "lock":
+ if (this._lock) {
+ this._lock = false;
+ } else {
+ this._lock = true;
+ }
+ break;
+ case "arrowHead":
+ this._arrowHead = this._arrowHead ? false : true;
+ break;
+ case "arrowEnd":
+ this._arrowEnd = this._arrowEnd ? false : true;
+ break;
+ default:
+ break;
+ }
+ }
+
+ @computed get subMenu() {
+ const fillCheck =
+ { this.toggle("noFill"); this.editProperties("none", "fill"); })} />
+ No Fill
+
+ { this.toggle("solidFill"); this.editProperties(this._currFill, "fill"); })} />
+ Solid Fill
+
+
+ {this._solidFill ? "Color" : ""}
+ {this._solidFill ? this.fillButton : ""}
+ {this._fillBtn && this._solidFill ? this.fillPicker : ""}
+
+
;
+ const arrows = <> { this.toggle("arrowHead"); this.editProperties(this._arrowHead ? "arrowHead" : "none", "arrowStart"); })} />
+ Arrow Head
+
+
+ { this.toggle("arrowEnd"); this.editProperties(this._arrowEnd ? "arrowEnd" : "none", "arrowEnd"); })} />
+ Arrow End
+
;
+ const lineCheck =
+ { this.toggle("noLine"); this.editProperties("none", "color"); })} />
+ No Line
+
+ { this.toggle("solidLine"); this.editProperties(this._currColor, "color"); this.editProperties("0", "dash"); })} />
+ Solid Line
+
+ { this.toggle("dashLine"); this.editProperties(this._currColor, "color"); this.editProperties("2", "dash"); })} />
+ Dash Line
+
+
+ {(this._solidLine || this._dashLine) ? "Color" : ""}
+ {(this._solidLine || this._dashLine) ? this.lineButton : ""}
+ {this._lineBtn && (this._solidLine || this._dashLine) ? this.linePicker : ""}
+
+ {(this._solidLine || this._dashLine) ? "Width" : ""}
+ {(this._solidLine || this._dashLine) ? this.widthInput : ""}
+
+
+ {(this._solidLine || this._dashLine) ? arrows : ""}
+
+
;
+
+ const sizeCheck =
+ Height {this.sizeHeightInput}
+
+
+
+
+ Width {this.sizeWidthInput}
+
+
+
+ { this.toggle("lock"); })} />
+ Lock Ratio
+
+
+
+
+ Rotation {this.rotationInput}
+
+
+
+
+
;
+ const positionCheck =
+ Horizontal {this.positionHorizontalInput}
+
+
+
+ Vertical {this.positionVerticalInput}
+
+
+
+
+
;
+
+ const subMenu =
+ {this._subMenu.map((subMenu, i) => {
+ if (subMenu === "fill" || subMenu === "line") {
+ return
+ {this.currMode === "fill-drip" && subMenu === "fill" && this._subOpen[0] ? fillCheck : ""}
+ {this.currMode === "fill-drip" && subMenu === "line" && this._subOpen[1] ? lineCheck : ""}
+
+
;
+ }
+ else if (subMenu === "size" || subMenu === "position") {
+ return
+ {this.currMode === "ruler-combined" && subMenu === "size" && this._subOpen[2] ? sizeCheck : ""}
+ {this.currMode === "ruler-combined" && subMenu === "position" && this._subOpen[3] ? positionCheck : ""}
+
+
+ ;
+
+ }
+ })
+ }
+
;
+ return fillButton;
+ }
+ @computed get fillPicker() {
+ const fillPicker =
+ {this._palette.map(color => {
+ return
;
+ })}
+
+
+
;
+ return lineButton;
+ }
+ @computed get linePicker() {
+ const linePicker =
+ {this._palette.map(color => {
+ return
;
+ })}
+
+
+ ;
+ return widthInput;
+ }
+ @computed get sizeHeightInput() {
+ const sizeHeightInput = <>
+ this.onChange(e.target.value, "sizeHeight")}
+ autoFocus>
+
+
+
+ ;
+ return sizeHeightInput;
+ }
+
+ @computed get sizeWidthInput() {
+ const sizeWidthInput = <>
+ this.onChange(e.target.value, "sizeWidth")}
+ autoFocus>
+
+
+ ;
+ return sizeWidthInput;
+ }
+
+ @computed get rotationInput() {
+ const rotationInput =
+ <>
+ this.onChange(e.target.value, "rotation")}
+ autoFocus>
+
+
+ ;
+ return rotationInput;
+ }
+
+ @computed get positionHorizontalInput() {
+ const positionHorizontalInput =
+ <> this.onChange(e.target.value, "positionHorizontal")}
+ autoFocus>
+
+
+ ;
+ return positionHorizontalInput;
+ }
+
+ @computed get positionVerticalInput() {
+ const positionVerticalInput =
+ <> this.onChange(e.target.value, "positionVertical")}
+ autoFocus>
+
+
+ ;
+ return positionVerticalInput;
+ }
+
+
+ @action
+ onChange = (val: string, property: string): void => {
+ if (!Number.isNaN(Number(val)) && Number(val) !== null && val !== " ") {
+
+ // if (val === "") {
+ // val = "0";
+ // }
+ switch (property) {
+ case "width":
+ this._currWidth = val;
+ if (val !== "") {
+ this.editProperties(this._currWidth, "width");
+ }
+ break;
+ case "sizeHeight":
+ this._currSizeHeight = val;
+ if (val !== "") {
+ this.editProperties(this._currSizeHeight, "heightSize");
+ }
+ break;
+ case "sizeWidth":
+ this._currSizeWidth = val;
+ if (val !== "") {
+
+ this.editProperties(this._currSizeWidth, "widthSize");
+ }
+ break;
+ case "rotation":
+
+ this._currRotation = val;
+ if (val !== "") {
+
+ this.rotate(Number(val));
+ }
+ break;
+ case "positionHorizontal":
+ this._currPositionHorizontal = val; if (val !== "") {
+
+ this.editProperties(this._currPositionHorizontal, "horizontal");
+ }
+
+ break;
+ case "positionVertical":
+ this._currPositionVertical = val;
+ if (val !== "") {
+
+ this.editProperties(this._currPositionVertical, "vertical");
+ }
+
+ break;
+ default:
+ break;
+ }
+ }
+ }
+
+
+
+
+ // @action
+ // changeWidth = (event: React.ChangeEvent) => {
+ // console.log(event.target.value);
+ // this._currWidth = NumCast(event.target.value);
+
+ // }
+
+ @computed get upDown() {
+ const upDown =
+
+
+
+
;
+ return upDown;
+ }
+
+
+ @computed get widthPicker() {
+ var widthPicker = ;
+ if (this._widthBtn) {
+ widthPicker =
+ {widthPicker}
+ {this._width.map(wid => {
+ return ;
+ })}
+
;
+ }
+ return widthPicker;
+ }
+
+
+
+ render() {
+ const buttons = [
+
+ this.close,
+ this.modes,
+ this.subMenu
+
+ ];
+
+ return this.getElementVert(buttons);
+ }
+}
+Scripting.addGlobal(function activatePen2(penBtn: any) {
+ if (penBtn) {
+ //no longer changes to inkmode
+ // Doc.SetSelectedTool(InkTool.Pen);
+ FormatShapePane.Instance.jumpTo(300, 300);
+ FormatShapePane.Instance.Pinned = true;
+
+ } else {
+ // Doc.SetSelectedTool(InkTool.None);
+ FormatShapePane.Instance.Pinned = false;
+ FormatShapePane.Instance.fadeOut(true);
+
+ }
+});
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
index 7329f4fc1..f739fcc8c 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
@@ -32,7 +32,7 @@
}
.btn2-group {
- display: block;
+ display: grid;
background: #323232;
grid-template-columns: auto;
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index 7de70b8cd..e4f3248d0 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -36,14 +36,15 @@ export default class InkOptionsMenu extends AntimodeMenu {
// private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"];
// private _arrowIcons = ["→", "↔︎", "•", "••", " "];
private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"];
- private _head = ["none", "arrowHead", "arrowHead", "none", "arrowHead", "arrowHead", "none", "none", "none"];
- private _end = ["none", "none", "arrowEnd", "none", "none", "arrowEnd", "none", "none", "none"];
+ private _head = ["none", "none", "arrowHead", "none", "none", "arrowHead", "none", "none", "none"];
+ private _end = ["none", "arrowEnd", "arrowEnd", "none", "arrowEnd", "arrowEnd", "none", "none", "none"];
private _shape = ["", "", "", "", "", "", "rectangle", "circle", "triangle"];
@observable _shapesNum = this._shape.length;
@observable _selected = this._shapesNum;
@observable private collapsed: boolean = false;
+ @observable _double = "";
@observable _colorBtn = false;
@observable _widthBtn = false;
@@ -155,7 +156,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
className="antimodeMenu-button"
key={icon}
onPointerDown={action(() => {
- console.log(this._selected);
+ this._double = "";
if (this._selected !== i) {
this._selected = i;
@@ -177,6 +178,31 @@ export default class InkOptionsMenu extends AntimodeMenu {
}
console.log(this._selected);
+ })}
+ onDoubleClick={action(() => {
+ console.log("double");
+ this._double = this._draw[i];
+ if (this._selected !== i) {
+ this._selected = i;
+ Doc.SetSelectedTool(InkTool.Pen);
+ SetActiveArrowStart(this._head[i]);
+ SetActiveArrowEnd(this._end[i]);
+ SetActiveBezierApprox("300");
+
+ // this.editProperties(this._head[i], "arrowStart"), this.editProperties(this._end[i], "arrowEnd");
+ GestureOverlay.Instance.InkShape = this._shape[i];
+ } else {
+ this._selected = this._shapesNum;
+ Doc.SetSelectedTool(InkTool.None);
+ SetActiveArrowStart("none");
+ SetActiveArrowEnd("none");
+ GestureOverlay.Instance.InkShape = "";
+ SetActiveBezierApprox("0");
+
+ }
+
+
+
})}
style={{ backgroundColor: i === this._selected ? "121212" : "", fontSize: "20" }}>
{this._draw[i]}
@@ -235,7 +261,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
className="antimodeMenu-button"
key={wid}
onPointerDown={action(() => { SetActiveInkWidth(wid); this._widthBtn = false; this.editProperties(wid, "width"); })}
- style={{ backgroundColor: this._widthBtn ? "121212" : "" }}>
+ style={{ backgroundColor: this._widthBtn ? "121212" : "", zIndex: 1001 }}>
{wid}
;
})}
@@ -265,7 +291,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
className="antimodeMenu-button"
key={color}
onPointerDown={action(() => { this.changeColor(color, "color"); this._colorBtn = false; this.editProperties(color, "color"); })}
- style={{ backgroundColor: this._colorBtn ? "121212" : "" }}>
+ style={{ backgroundColor: this._colorBtn ? "121212" : "", zIndex: 1001 }}>
{/* */}
;
@@ -286,14 +312,14 @@ export default class InkOptionsMenu extends AntimodeMenu {
;
if (this._fillBtn) {
- fillPicker =
+ fillPicker =
{fillPicker}
{this._palette.map(color => {
return
;
})}
--
cgit v1.2.3-70-g09d2
From 6b5c11a26e114f26f3907342f9afbd47b27cecf4 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
Date: Sat, 11 Jul 2020 17:54:20 -0400
Subject: restructured ink to make more react-friendly
---
src/client/util/CurrentUserUtils.ts | 6 +-
src/client/util/InteractionUtils.tsx | 21 +-
src/client/util/SelectionManager.ts | 3 -
src/client/views/AntimodeMenu.tsx | 1 -
src/client/views/DocumentDecorations.tsx | 5 +-
src/client/views/InkingStroke.tsx | 18 +-
.../collectionFreeForm/FormatShapePane.tsx | 801 +++++++--------------
.../collectionFreeForm/InkOptionsMenu.tsx | 24 +-
src/client/views/nodes/ColorBox.tsx | 1 -
9 files changed, 299 insertions(+), 581 deletions(-)
(limited to 'src/client/views/AntimodeMenu.tsx')
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index d0ca0e57e..0b644fa79 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -760,9 +760,9 @@ export class CurrentUserUtils {
doc.activeInkColor = StrCast(doc.activeInkColor, "rgb(0, 0, 0)");
doc.activeInkWidth = StrCast(doc.activeInkWidth, "1");
doc.activeInkBezier = StrCast(doc.activeInkBezier, "0");
- doc.activeFillColor = StrCast(doc.activeFillColor, "none");
- doc.activeArrowStart = StrCast(doc.activeArrowStart, "none");
- doc.activeArrowEnd = StrCast(doc.activeArrowEnd, "none");
+ doc.activeFillColor = StrCast(doc.activeFillColor, "");
+ doc.activeArrowStart = StrCast(doc.activeArrowStart, "");
+ doc.activeArrowEnd = StrCast(doc.activeArrowEnd, "");
doc.activeDash = StrCast(doc.activeDash, "0");
doc.fontSize = NumCast(doc.fontSize, 12);
doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index 2883e2056..6ab7bcc87 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -3,7 +3,6 @@ import * as beziercurve from 'bezier-curve';
import * as fitCurve from 'fit-curve';
import "./InteractionUtils.scss";
import { Utils } from "../../Utils";
-import InkOptionsMenu from "../views/collections/collectionFreeForm/InkOptionsMenu";
export namespace InteractionUtils {
export const MOUSETYPE = "mouse";
@@ -96,12 +95,6 @@ export namespace InteractionUtils {
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, nodefs: boolean) {
- // if (InkOptionsMenu.Instance.Pinned) {
- // for (var i = 0; i < points.length; i++) {
- // points[i].Y -= 35;
- // }
- // }
-
let pts: { X: number; Y: number; }[] = [];
if (shape) { //if any of the shape are true
pts = makePolygon(shape, points);
@@ -127,15 +120,15 @@ export namespace InteractionUtils {
const dashArray = String(Number(width) * Number(dash));
const defGuid = Utils.GenerateGuid();
const arrowDim = Math.max(0.5, 8 / Math.log(Math.max(2, strokeWidth)));
- return (