From 7c93a65535a278dd1381b27fbd4c3869eed19527 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Fri, 3 Jul 2020 20:22:52 +0900 Subject: pin and icon --- src/client/views/MainView.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 8f5a31b6c..afdff4ed8 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -453,10 +453,12 @@ export class MainView extends React.Component { @computed get mainContent() { const sidebar = this.userDoc?.["tabs-panelContainer"]; + console.log(InkOptionsMenu.Instance?.Pinned); return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
@@ -593,7 +595,10 @@ export class MainView extends React.Component { - + + + + {this.mainContent} @@ -606,7 +611,7 @@ export class MainView extends React.Component { - + {this.snapLines} -- cgit v1.2.3-70-g09d2 From 065a29e87c771b5cd9301b0468fb036e070cad17 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Fri, 10 Jul 2020 05:08:53 +0900 Subject: added format shape --- src/client/documents/Documents.ts | 3 +- src/client/util/InteractionUtils.tsx | 8 + src/client/util/SelectionManager.ts | 5 + src/client/views/AntimodeMenu.tsx | 18 + src/client/views/ContextMenu.tsx | 1 + src/client/views/DocumentDecorations.tsx | 2 + src/client/views/GestureOverlay.tsx | 17 +- src/client/views/InkingStroke.tsx | 15 +- src/client/views/MainView.tsx | 13 +- .../collectionFreeForm/FormatShapePane.scss | 53 ++ .../collectionFreeForm/FormatShapePane.tsx | 996 +++++++++++++++++++++ .../collectionFreeForm/InkOptionsMenu.scss | 2 +- .../collectionFreeForm/InkOptionsMenu.tsx | 40 +- 13 files changed, 1152 insertions(+), 21 deletions(-) create mode 100644 src/client/views/collections/collectionFreeForm/FormatShapePane.scss create mode 100644 src/client/views/collections/collectionFreeForm/FormatShapePane.tsx (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index b70971c2d..eb8e04317 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -653,7 +653,7 @@ export namespace Docs { I.type = DocumentType.INK; I.layout = InkingStroke.LayoutString("data"); I.color = color; - I.strokeWidth = strokeWidth; + I.strokeWidth = Number(strokeWidth); I.strokeBezier = strokeBezier; I.fillColor = fillColor; I.arrowStart = arrowStart; @@ -667,6 +667,7 @@ export namespace Docs { I._width = options._width; I._height = options._height; I.author = Doc.CurrentUserEmail; + I.rotation = 0; I.data = new InkField(points); return I; // return I; diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index edeb461e0..2883e2056 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 "./InteractionUtils.scss"; import { Utils } from "../../Utils"; +import InkOptionsMenu from "../views/collections/collectionFreeForm/InkOptionsMenu"; export namespace InteractionUtils { export const MOUSETYPE = "mouse"; @@ -94,6 +95,13 @@ 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, 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); diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 024532f90..aea2c542b 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -5,6 +5,7 @@ import { computedFn } from "mobx-utils"; import { List } from "../../fields/List"; import { Scripting } from "./Scripting"; import { DocumentManager } from "./DocumentManager"; +import FormatShapePane from "../views/collections/collectionFreeForm/FormatShapePane"; export namespace SelectionManager { @@ -14,6 +15,8 @@ export namespace SelectionManager { SelectedDocuments: ObservableMap = new ObservableMap(); @action SelectDoc(docView: DocumentView, ctrlPressed: boolean): void { + console.log("select" + ); // if doc is not in SelectedDocuments, add it if (!manager.SelectedDocuments.get(docView)) { if (!ctrlPressed) { @@ -29,6 +32,8 @@ export namespace SelectionManager { manager.SelectedDocuments.set(docView, true); } Doc.UserDoc().activeSelection = new List(SelectionManager.SelectedDocuments().map(dv => dv.props.Document)); + FormatShapePane.Instance.selected(); + } @action DeselectDoc(docView: DocumentView): void { diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx index d83ac434c..cb6de1785 100644 --- a/src/client/views/AntimodeMenu.tsx +++ b/src/client/views/AntimodeMenu.tsx @@ -1,6 +1,7 @@ import React = require("react"); import { observable, action } from "mobx"; import "./AntimodeMenu.scss"; +import { inherits } from "util"; /** * This is an abstract class that serves as the base for a PDF-style or Marquee-style @@ -147,6 +148,23 @@ export default abstract class AntimodeMenu extends React.Component { ); } + protected getElementVert(buttons: JSX.Element[]) { + return ( +
+ {buttons} +
+ ); + } + protected getElementWithRows(rows: JSX.Element[], numRows: number, hasDragger: boolean = true) { diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index 941d7b44a..1a6b7ab90 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -224,6 +224,7 @@ export class ContextMenu extends React.Component { } render() { + console.log("context"); if (!this._display) { return null; } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 4fda10926..8edd4c4a9 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -293,6 +293,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> 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); + console.log(doc.rotation); const ink = Cast(doc.data, InkField)?.inkData; if (ink) { diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index bfd659207..26a06090b 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -633,7 +633,8 @@ export default class GestureOverlay extends Touchable { this.makePolygon(this.InkShape, false); this.dispatchGesture(GestureUtils.Gestures.Stroke); this._points = []; - if (this.InkShape !== "noRec") { + if (InkOptionsMenu.Instance._double === "") { + this.InkShape = ""; } } @@ -687,12 +688,14 @@ export default class GestureOverlay extends Touchable { } //get out of ink mode after each stroke= console.log("now"); - Doc.SetSelectedTool(InkTool.None); - InkOptionsMenu.Instance._selected = InkOptionsMenu.Instance._shapesNum; - SetActiveArrowStart("none"); - GestureOverlay.Instance.SavedArrowStart = ActiveArrowStart(); - SetActiveArrowEnd("none"); - GestureOverlay.Instance.SavedArrowEnd = ActiveArrowEnd(); + if (InkOptionsMenu.Instance._double === "") { + Doc.SetSelectedTool(InkTool.None); + InkOptionsMenu.Instance._selected = InkOptionsMenu.Instance._shapesNum; + SetActiveArrowStart("none"); + GestureOverlay.Instance.SavedArrowStart = ActiveArrowStart(); + SetActiveArrowEnd("none"); + GestureOverlay.Instance.SavedArrowEnd = ActiveArrowEnd(); + } document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index c32e76cec..4a7ec40be 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -15,6 +15,8 @@ import { FieldView, FieldViewProps } from "./nodes/FieldView"; import React = require("react"); import { Scripting } from "../util/Scripting"; import { Doc } from "../../fields/Doc"; +import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane"; +import { action } from "mobx"; library.add(faPaintBrush); @@ -38,10 +40,19 @@ export class InkingStroke extends ViewBoxBaseComponent { + console.log("Clicked"); + FormatShapePane.Instance.Pinned = true; + FormatShapePane.Instance.selected(); + + } + render() { TraceMobx(); const data: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? []; - const strokeWidth = Number(StrCast(this.layoutDoc.strokeWidth, ActiveInkWidth())); + // const strokeWidth = Number(StrCast(this.layoutDoc.strokeWidth, ActiveInkWidth())); + const strokeWidth = Number(this.layoutDoc.strokeWidth); const xs = data.map(p => p.X); const ys = data.map(p => p.Y); const left = Math.min(...xs) - strokeWidth / 2; @@ -74,6 +85,8 @@ export class InkingStroke extends ViewBoxBaseComponent { ContextMenu.Instance.addItem({ description: "Analyze Stroke", event: this.analyzeStrokes, icon: "paint-brush" }); ContextMenu.Instance.addItem({ description: "Make Mask", event: this.makeMask, icon: "paint-brush" }); + ContextMenu.Instance.addItem({ description: "Format Shape", event: this.formatShape, icon: "paint-brush" }); + }} > diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index afdff4ed8..3eed44654 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -58,7 +58,7 @@ import { DocumentManager } from '../util/DocumentManager'; import { DocumentLinksButton } from './nodes/DocumentLinksButton'; import { LinkMenu } from './linking/LinkMenu'; import { LinkDocPreview } from './nodes/LinkDocPreview'; - +import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane"; @observer export class MainView extends React.Component { public static Instance: MainView; @@ -453,12 +453,13 @@ export class MainView extends React.Component { @computed get mainContent() { const sidebar = this.userDoc?.["tabs-panelContainer"]; - console.log(InkOptionsMenu.Instance?.Pinned); + console.log('${ ANTIMODEMENU_HEIGHT }'); return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
@@ -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 subMenu; + } + + @computed get fillButton() { + const fillButton = <> +

+

; + return fillButton; + } + @computed get fillPicker() { + const fillPicker =
+ {this._palette.map(color => { + return ; + })} + +
; + return fillPicker; + } + + @computed get lineButton() { + const lineButton = <> +

+

; + return lineButton; + } + @computed get linePicker() { + const linePicker =
+ {this._palette.map(color => { + return ; + })} + +
; + return linePicker; + } + @computed get widthInput() { + const widthInput = <> + this.onChange(e.target.value, "width")} + autoFocus> +
+ ; + 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 39836c84bb518b8497925434190309a1e9eafe55 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Fri, 10 Jul 2020 05:25:46 +0900 Subject: added format shape --- src/client/views/ContextMenu.tsx | 1 - src/client/views/InkingStroke.tsx | 1 - src/client/views/MainView.tsx | 1 - src/client/views/collections/collectionFreeForm/FormatShapePane.tsx | 1 - 4 files changed, 4 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index 1a6b7ab90..941d7b44a 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -224,7 +224,6 @@ export class ContextMenu extends React.Component { } render() { - console.log("context"); if (!this._display) { return null; } diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 4a7ec40be..7d9a3c8b3 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -42,7 +42,6 @@ export class InkingStroke extends ViewBoxBaseComponent { - console.log("Clicked"); FormatShapePane.Instance.Pinned = true; FormatShapePane.Instance.selected(); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 3eed44654..30ad621fd 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -453,7 +453,6 @@ export class MainView extends React.Component { @computed get mainContent() { const sidebar = this.userDoc?.["tabs-panelContainer"]; - console.log('${ ANTIMODEMENU_HEIGHT }'); return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (