From 53713fc7ab10257d1117193941cda2f3e0cabcf5 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Sun, 19 Jul 2020 04:44:51 +0900 Subject: added control points --- src/client/util/InteractionUtils.tsx | 9 +++ src/client/views/GestureOverlay.tsx | 17 +++++ src/client/views/InkingStroke.tsx | 82 ++++++++++++++++++++++ .../collectionFreeForm/FormatShapePane.tsx | 59 ++++++++++++++++ 4 files changed, 167 insertions(+) (limited to 'src') diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 07adbb8b1..1d7655748 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -99,6 +99,15 @@ export namespace InteractionUtils { if (shape) { //if any of the shape are true pts = makePolygon(shape, points); } + else if (points.length > 9 && points[3].X === points[4].X && points[7].X === points[8].X) { + for (var i = 0; i < points.length; i += 4) { + const array = [[points[i].X, points[i].Y], [points[i + 1].X, points[i + 1].Y], [points[i + 2].X, points[i + 2].Y], [points[i + 3].X, points[i + 3].Y]]; + for (var t = 0; t < 1; t += 0.01) { + const point = beziercurve(t, array); + pts.push({ X: point[0], Y: point[1] }); + } + } + } 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) const newPoints = points.reduce((p, pts) => { p.push([pts.X, pts.Y]); return p; }, [] as number[][]); diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index a48b7b673..90d8b370e 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -23,6 +23,7 @@ import HorizontalPalette from "./Palette"; import { Touchable } from "./Touchable"; import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu"; import InkOptionsMenu from "./collections/collectionFreeForm/InkOptionsMenu"; +import * as fitCurve from 'fit-curve'; @observer export default class GestureOverlay extends Touchable { @@ -632,6 +633,22 @@ export default class GestureOverlay extends Touchable { // if no gesture (or if the gesture was unsuccessful), "dry" the stroke into an ink document if (!actionPerformed) { + const newPoints = this._points.reduce((p, pts) => { p.push([pts.X, pts.Y]); return p; }, [] as number[][]); + newPoints.pop(); + const controlPoints: { X: number, Y: number }[] = []; + + const bezierCurves = fitCurve(newPoints, 10); + for (const curve of bezierCurves) { + + controlPoints.push({ X: curve[0][0], Y: curve[0][1] }); + controlPoints.push({ X: curve[1][0], Y: curve[1][1] }); + controlPoints.push({ X: curve[2][0], Y: curve[2][1] }); + controlPoints.push({ X: curve[3][0], Y: curve[3][1] }); + + + } + this._points = controlPoints; + this.dispatchGesture(GestureUtils.Gestures.Stroke); } this._points = []; diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index abc698e62..974921be8 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -17,6 +17,7 @@ import { Scripting } from "../util/Scripting"; import { Doc } from "../../fields/Doc"; import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane"; import { action } from "mobx"; +import { setupMoveUpEvents } from "../../Utils"; library.add(faPaintBrush); @@ -45,6 +46,38 @@ export class InkingStroke extends ViewBoxBaseComponent { + setupMoveUpEvents(this, e, this.onControlMove, this.onControlup, (e) => { }); + this._prevX = e.clientX; + this._prevY = e.clientY; + this._controlNum = i; + } + + @action + changeCurrPoint = (i: number) => { + FormatShapePane.Instance._currPoint = i; + } + + @action + onControlMove = (e: PointerEvent, down: number[]): boolean => { + const xDiff = this._prevX - e.clientX; + const yDiff = this._prevY - e.clientY; + FormatShapePane.Instance.control(xDiff, yDiff, this._controlNum); + this._prevX = e.clientX; + this._prevY = e.clientY; + return false; + } + + onControlup = (e: PointerEvent) => { + this._prevX = 0; + this._prevY = 0; + this._controlNum = 0; + } + render() { TraceMobx(); const data: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? []; @@ -69,6 +102,51 @@ export class InkingStroke extends ViewBoxBaseComponent 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15), StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "transparent"), "none", "none", "0", scaleX, scaleY, "", this.props.active() ? "visiblepainted" : "none", false, true); + + const controlPoints: { X: number, Y: number, I: number }[] = []; + const handlePoints: { X: number, Y: number, I: number, dot1: number, dot2: number }[] = []; + const handleLine: { X1: number, Y1: number, X2: number, Y2: number, X3: number, Y3: number, dot1: number, dot2: number }[] = []; + + if (data.length > 5) { + for (var i = 0; i <= data.length - 4; i += 4) { + controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i }); + controlPoints.push({ X: data[i + 3].X, Y: data[i + 3].Y, I: i + 3 }); + handlePoints.push({ X: data[i + 1].X, Y: data[i + 1].Y, I: i + 1, dot1: i, dot2: i === 0 ? i : i - 1 }); + handlePoints.push({ X: data[i + 2].X, Y: data[i + 2].Y, I: i + 2, dot1: i + 3, dot2: i === data.length ? i + 3 : i + 4 }); + } + handleLine.push({ X1: data[0].X, Y1: data[0].Y, X2: data[0].X, Y2: data[0].Y, X3: data[1].X, Y3: data[1].Y, dot1: 0, dot2: 0 }); + for (var i = 2; i < data.length - 2; i += 4) { + handleLine.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 1].X, Y2: data[i + 1].Y, X3: data[i + 3].X, Y3: data[i + 3].Y, dot1: i + 1, dot2: i + 2 }); + } + handleLine.push({ X1: data[data.length - 2].X, Y1: data[data.length - 2].Y, X2: data[data.length - 1].X, Y2: data[data.length - 1].Y, X3: data[data.length - 1].X, Y3: data[data.length - 1].Y, dot1: data.length - 1, dot2: data.length - 1 }); + + + } + const controls = controlPoints.map((pts, i) => + + + { this.changeCurrPoint(pts.I); this.onControlDown(e, pts.I); }} pointerEvents="all" cursor="all-scroll" /> + ); + const handles = handlePoints.map((pts, i) => + + + this.onControlDown(e, pts.I)} pointerEvents="all" cursor="all-scroll" display={(pts.dot1 === FormatShapePane.Instance._currPoint || pts.dot2 === FormatShapePane.Instance._currPoint) ? "inherit" : "none"} /> + ); + const handleLines = handleLine.map((pts, i) => + + + + + + ); + + return ( {hpoints} {points} + {FormatShapePane.Instance._controlBtn && this.props.isSelected() ? controls : ""} + {FormatShapePane.Instance._controlBtn && this.props.isSelected() ? handles : ""} + {FormatShapePane.Instance._controlBtn && this.props.isSelected() ? handleLines : ""} + ); } diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index 9d9ce7f36..a2dc241c0 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -28,6 +28,9 @@ export default class FormatShapePane extends AntimodeMenu { @observable private _lock = false; @observable private _fillBtn = false; @observable private _lineBtn = false; + @observable _controlBtn = false; + @observable private _controlPoints: { X: number, Y: number }[] = []; + @observable _currPoint = -1; getField(key: string) { return this.selectedInk?.reduce((p, i) => @@ -158,6 +161,51 @@ export default class FormatShapePane extends AntimodeMenu { })); } + @undoBatch + @action + control = (xDiff: number, yDiff: number, controlNum: number) => { + this.selectedInk?.forEach(action(inkView => { + if (this.selectedInk?.length === 1) { + const doc = Document(inkView.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { + + const newPoints: { X: number, Y: number }[] = []; + const order = controlNum % 4; + for (var i = 0; i < ink.length; i++) { + if (controlNum === i || + (order === 0 && i === controlNum + 1) || + (order === 0 && controlNum !== 0 && i === controlNum - 2) || + (order === 0 && controlNum !== 0 && i === controlNum - 1) || + (order === 3 && i === controlNum - 1) || + (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 1) || + (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 2)) { + newPoints.push({ X: ink[i].X - (xDiff), Y: ink[i].Y - (yDiff) }); + } + else { + newPoints.push({ X: ink[i].X, Y: ink[i].Y }); + } + } + const oldx = doc.x; + const oldy = doc.y; + 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) * inkView.props.ScreenToLocalTransform().Scale; + doc._width = (right2 - left2) * inkView.props.ScreenToLocalTransform().Scale; + doc.x = oldx; + doc.y = oldy; + } + } + } + })); + } + colorPicker(setter: (color: string) => {}) { return
@@ -193,6 +241,14 @@ export default class FormatShapePane extends AntimodeMenu { ; } + controlPointsButton() { + return <> + +

+ ; + } @computed get fillButton() { return this.colorButton(this.colorFil, () => this._fillBtn = !this._fillBtn); } @computed get lineButton() { return this.colorButton(this.colorStk, () => this._lineBtn = !this._lineBtn); } @@ -206,6 +262,8 @@ export default class FormatShapePane extends AntimodeMenu { @computed get XpsInput() { return this.inputBox("Xps", this.shapeXps, (val: string) => this.shapeXps = val); } @computed get YpsInput() { return this.inputBox("Yps", this.shapeYps, (val: string) => this.shapeYps = val); } + @computed get controlPoints() { return this.controlPointsButton(); } + @computed get propertyGroupItems() { const fillCheck =
this.unFilled = true))} /> @@ -260,6 +318,7 @@ export default class FormatShapePane extends AntimodeMenu {

Rotation {this.rotInput}

+ Edit Points {this.controlPoints}
; const positionCheck =
-- cgit v1.2.3-70-g09d2 From ac413fb11720bb6704a9049e5d21fe02aae197b9 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Mon, 20 Jul 2020 17:17:52 +0900 Subject: fixed control points --- src/client/util/InteractionUtils.tsx | 23 ++++++++++- src/client/views/GestureOverlay.tsx | 77 +++++++++++++++++++++++++++++++++++- src/client/views/InkingStroke.tsx | 20 ++++++---- 3 files changed, 109 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 1d7655748..31b2a56e6 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -99,8 +99,8 @@ export namespace InteractionUtils { if (shape) { //if any of the shape are true pts = makePolygon(shape, points); } - else if (points.length > 9 && points[3].X === points[4].X && points[7].X === points[8].X) { - for (var i = 0; i < points.length; i += 4) { + else if (points.length >= 5 && points[3].X === points[4].X) { + for (var i = 0; i < points.length - 3; i += 4) { const array = [[points[i].X, points[i].Y], [points[i + 1].X, points[i + 1].Y], [points[i + 2].X, points[i + 2].Y], [points[i + 3].X, points[i + 3].Y]]; for (var t = 0; t < 1; t += 0.01) { const point = beziercurve(t, array); @@ -223,10 +223,28 @@ export namespace InteractionUtils { points.push({ X: left, Y: top }); return points; case "triangle": + // points.push({ X: left, Y: bottom }); + // points.push({ X: right, Y: bottom }); + // points.push({ X: (right + left) / 2, Y: top }); + // points.push({ X: left, Y: bottom }); + + points.push({ X: left, Y: bottom }); points.push({ X: left, Y: bottom }); + + points.push({ X: right, Y: bottom }); points.push({ X: right, Y: bottom }); + points.push({ X: right, Y: bottom }); + points.push({ X: right, Y: bottom }); + + points.push({ X: (right + left) / 2, Y: top }); points.push({ X: (right + left) / 2, Y: top }); + points.push({ X: (right + left) / 2, Y: top }); + points.push({ X: (right + left) / 2, Y: top }); + + points.push({ X: left, Y: bottom }); points.push({ X: left, Y: bottom }); + + return points; case "circle": const centerX = (right + left) / 2; @@ -262,6 +280,7 @@ export namespace InteractionUtils { // points.push({ X: x2, Y: y2 }); // return points; case "line": + points.push({ X: left, Y: top }); points.push({ X: right, Y: bottom }); return points; diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 90d8b370e..2eec8ed6a 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -703,18 +703,53 @@ export default class GestureOverlay extends Touchable { //must be (points[0].X,points[0]-1) case "rectangle": this._points.push({ X: left, Y: top }); + this._points.push({ X: left, Y: top }); + + this._points.push({ X: right, Y: top }); this._points.push({ X: right, Y: top }); + this._points.push({ X: right, Y: top }); + this._points.push({ X: right, Y: top }); + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + + this._points.push({ X: left, Y: bottom }); + this._points.push({ X: left, Y: bottom }); this._points.push({ X: left, Y: bottom }); + this._points.push({ X: left, Y: bottom }); + + this._points.push({ X: left, Y: top }); this._points.push({ X: left, Y: top }); - this._points.push({ X: left, Y: top - 1 }); + // this._points.push({ X: left, Y: top }); + // this._points.push({ X: left, Y: top }); + + // this._points.push({ X: left, Y: top - 1 }); break; case "triangle": + // this._points.push({ X: left, Y: bottom }); + // this._points.push({ X: right, Y: bottom }); + // this._points.push({ X: (right + left) / 2, Y: top }); + // this._points.push({ X: left, Y: bottom }); + // this._points.push({ X: left, Y: bottom - 1 }); + this._points.push({ X: left, Y: bottom }); this._points.push({ X: left, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + + this._points.push({ X: (right + left) / 2, Y: top }); + this._points.push({ X: (right + left) / 2, Y: top }); this._points.push({ X: (right + left) / 2, Y: top }); + this._points.push({ X: (right + left) / 2, Y: top }); + + this._points.push({ X: left, Y: bottom }); this._points.push({ X: left, Y: bottom }); - this._points.push({ X: left, Y: bottom - 1 }); + + break; case "circle": const centerX = (right + left) / 2; @@ -731,10 +766,48 @@ export default class GestureOverlay extends Touchable { } this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top }); this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top - 1 }); + // this._points.push({ X: centerX, Y: top }); + // this._points.push({ X: centerX + radius / 2, Y: top }); + + // this._points.push({ X: right, Y: top + radius / 2 }); + // this._points.push({ X: right, Y: top + radius }); + // this._points.push({ X: right, Y: top + radius }); + // this._points.push({ X: right, Y: bottom - radius / 2 }); + + // this._points.push({ X: right - radius / 2, Y: bottom }); + // this._points.push({ X: right - radius, Y: bottom }); + // this._points.push({ X: right - radius, Y: bottom }); + // this._points.push({ X: left + radius / 2, Y: bottom }); + + // this._points.push({ X: left, Y: bottom - radius / 2 }); + // this._points.push({ X: left, Y: bottom - radius }); + // this._points.push({ X: left, Y: bottom - radius }); + // this._points.push({ X: left, Y: top + radius / 2 }); + + // this._points.push({ X: left + radius / 2, Y: top }); + // this._points.push({ X: left + radius, Y: top }); + + + + + + + break; case "line": this._points.push({ X: left, Y: top }); + + this._points.push({ X: left, Y: top }); + + // this._points.push({ X: right, Y: bottom }); + // this._points.push({ X: right, Y: bottom }); + // this._points.push({ X: right, Y: bottom }); + // this._points.push({ X: right, Y: bottom }); + + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + // this._points.push({ X: right, Y: bottom - 1 }); break; case "arrow": diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 974921be8..22c89b6da 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -94,10 +94,12 @@ export class InkingStroke extends ViewBoxBaseComponent 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15), StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "transparent"), @@ -106,42 +108,46 @@ export class InkingStroke extends ViewBoxBaseComponent 5) { + if (data.length >= 4) { for (var i = 0; i <= data.length - 4; i += 4) { controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i }); controlPoints.push({ X: data[i + 3].X, Y: data[i + 3].Y, I: i + 3 }); handlePoints.push({ X: data[i + 1].X, Y: data[i + 1].Y, I: i + 1, dot1: i, dot2: i === 0 ? i : i - 1 }); handlePoints.push({ X: data[i + 2].X, Y: data[i + 2].Y, I: i + 2, dot1: i + 3, dot2: i === data.length ? i + 3 : i + 4 }); } + handleLine.push({ X1: data[0].X, Y1: data[0].Y, X2: data[0].X, Y2: data[0].Y, X3: data[1].X, Y3: data[1].Y, dot1: 0, dot2: 0 }); - for (var i = 2; i < data.length - 2; i += 4) { + for (var i = 2; i < data.length - 4; i += 4) { + handleLine.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 1].X, Y2: data[i + 1].Y, X3: data[i + 3].X, Y3: data[i + 3].Y, dot1: i + 1, dot2: i + 2 }); + } handleLine.push({ X1: data[data.length - 2].X, Y1: data[data.length - 2].Y, X2: data[data.length - 1].X, Y2: data[data.length - 1].Y, X3: data[data.length - 1].X, Y3: data[data.length - 1].Y, dot1: data.length - 1, dot2: data.length - 1 }); } + const dotsize = String(Math.min(width * scaleX, height * scaleY) / 40); + const controls = controlPoints.map((pts, i) => - { this.changeCurrPoint(pts.I); this.onControlDown(e, pts.I); }} pointerEvents="all" cursor="all-scroll" /> ); const handles = handlePoints.map((pts, i) => - this.onControlDown(e, pts.I)} pointerEvents="all" cursor="all-scroll" display={(pts.dot1 === FormatShapePane.Instance._currPoint || pts.dot2 === FormatShapePane.Instance._currPoint) ? "inherit" : "none"} /> ); const handleLines = handleLine.map((pts, i) => ); -- cgit v1.2.3-70-g09d2 From 0fead8a6b66a08d63d57ffc741d1854011070b69 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 26 Jul 2020 09:36:24 -0400 Subject: made linkButtons automatically hide blue link dot, rearraned some context menu items and added an optional divider prop --- src/client/views/ContextMenuItem.tsx | 4 +++- src/client/views/collections/CollectionView.tsx | 12 ++++++++---- .../collectionFreeForm/CollectionFreeFormView.tsx | 4 ++-- src/client/views/nodes/DocumentView.tsx | 19 +++++++++---------- 4 files changed, 22 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx index 86d1f22e1..81432968d 100644 --- a/src/client/views/ContextMenuItem.tsx +++ b/src/client/views/ContextMenuItem.tsx @@ -20,6 +20,7 @@ export interface SubmenuProps { description: string; subitems: ContextMenuProps[]; noexpand?: boolean; + addDivider?: boolean; icon: IconProp; //maybe should be optional (icon?) closeMenu?: () => void; } @@ -103,7 +104,8 @@ export class ContextMenuItem extends React.Component; } return ( -
{this.props.icon ? ( diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index b3590ceee..a82c91383 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -48,6 +48,7 @@ import { CollectionTimeView } from './CollectionTimeView'; import { CollectionTreeView } from "./CollectionTreeView"; import './CollectionView.scss'; import CollectionMenu from './CollectionMenu'; +import { ContextMenuProps } from '../ContextMenuItem'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -269,9 +270,8 @@ export class CollectionView extends Touchable Doc, addExtras: boolean) { - const existingVm = ContextMenu.Instance.findByDescription(category); - const subItems = existingVm && "subitems" in existingVm ? existingVm.subitems : []; + const subItems: ContextMenuProps[] = []; subItems.push({ description: "Freeform", event: () => func(CollectionViewType.Freeform), icon: "signature" }); if (addExtras && CollectionView._safeMode) { ContextMenu.Instance.addItem({ description: "Test Freeform", event: () => func(CollectionViewType.Invalid), icon: "project-diagram" }); @@ -293,13 +293,17 @@ export class CollectionView extends Touchable this._isLightboxOpen = true), icon: "eye" }); - !existingVm && ContextMenu.Instance.addItem({ description: category, noexpand: true, subitems: subItems, icon: "eye" }); + + const existingVm = ContextMenu.Instance.findByDescription(category); + const catItems = existingVm && "subitems" in existingVm ? existingVm.subitems : []; + catItems.push({ description: "Add a Perspective...", addDivider: true, noexpand: true, subitems: subItems, icon: "eye" }); + !existingVm && ContextMenu.Instance.addItem({ description: category, subitems: catItems, icon: "eye" }); } onContextMenu = (e: React.MouseEvent): void => { const cm = ContextMenu.Instance; if (cm && !e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 - this.setupViewTypes("Add a Perspective...", vtype => { + this.setupViewTypes("UI Controls...", vtype => { const newRendition = Doc.MakeAlias(this.props.Document); newRendition._viewType = vtype; this.props.addDocTab(newRendition, "onRight"); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 079add4b0..daa6e7440 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1247,11 +1247,11 @@ export class CollectionFreeFormView extends CollectionSubView Doc.UserDoc().showSnapLines = !Doc.UserDoc().showSnapLines, icon: "compress-arrows-alt" }); viewCtrlItems.push({ description: (this.Document.useClusters ? "Hide" : "Show") + " Clusters", event: () => this.updateClusters(!this.Document.useClusters), icon: "braille" }); - !viewctrls && ContextMenu.Instance.addItem({ description: "View Controls...", subitems: viewCtrlItems, icon: "eye" }); + !viewctrls && ContextMenu.Instance.addItem({ description: "UI Controls...", subitems: viewCtrlItems, icon: "eye" }); const options = ContextMenu.Instance.findByDescription("Options..."); const optionItems = options && "subitems" in options ? options.subitems : []; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index df4576243..b59875a7e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -755,11 +755,11 @@ export class DocumentView extends DocComponent(Docu cm.addItem({ description: item.label, event: () => item.script.script.run({ this: this.layoutDoc, self: this.rootDoc }), icon: "sticky-note" })); const templateDoc = Cast(this.props.Document[StrCast(this.props.Document.layoutKey)], Doc, null); - const appearance = cm.findByDescription("Appearance..."); + const appearance = cm.findByDescription("UI Controls..."); const appearanceItems: ContextMenuProps[] = appearance && "subitems" in appearance ? appearance.subitems : []; templateDoc && appearanceItems.push({ description: "Open Template ", event: () => this.props.addDocTab(templateDoc, "onRight"), icon: "eye" }); - appearanceItems.push({ description: `${this.layoutDoc.hideLinkButton ? "Show" : "Hide"} Link Button`, event: action(() => this.layoutDoc.hideLinkButton = !this.layoutDoc.hideLinkButton), icon: "eye" }); - !appearance && cm.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "compass" }); + //DocListCast(this.Document.links).length && appearanceItems.splice(0, 0, { description: `${this.layoutDoc.hideLinkButton ? "Show" : "Hide"} Link Button`, event: action(() => this.layoutDoc.hideLinkButton = !this.layoutDoc.hideLinkButton), icon: "eye" }); + !appearance && cm.addItem({ description: "UI Controls...", subitems: appearanceItems, icon: "compass" }); const options = cm.findByDescription("Options..."); const optionItems: ContextMenuProps[] = options && "subitems" in options ? options.subitems : []; @@ -776,7 +776,7 @@ export class DocumentView extends DocComponent(Docu onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link on Right", event: this.toggleFollowOnRight, icon: "concierge-bell" }); onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: this.toggleLinkButtonBehavior, icon: "concierge-bell" }); onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" }); - !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, subitems: onClicks, icon: "hand-point-right" }); + !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, addDivider: true, subitems: onClicks, icon: "hand-point-right" }); const funcs: ContextMenuProps[] = []; if (this.layoutDoc.onDragStart) { @@ -817,13 +817,11 @@ export class DocumentView extends DocComponent(Docu const help = cm.findByDescription("Help..."); const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : []; - //!Doc.UserDoc().novice && helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" }); - !Doc.UserDoc().novice && helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" }); + helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" }); + helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" }); + helpItems.push({ description: "Print Document in Console", event: () => console.log(this.props.Document), icon: "hand-point-right" }); cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" }); - // to be removed for baseline - cm.addItem({ description: "Print Document in Console", event: () => console.log(this.props.Document), icon: "hand-point-right" }); - // const existingAcls = cm.findByDescription("Privacy..."); // const aclItems: ContextMenuProps[] = existingAcls && "subitems" in existingAcls ? existingAcls.subitems : []; // aclItems.push({ description: "Make Add Only", event: () => this.setAcl(SharingPermissions.Add), icon: "concierge-bell" }); @@ -1068,7 +1066,8 @@ export class DocumentView extends DocComponent(Docu layoutKey={this.finalLayoutKey} /> {this.layoutDoc.hideAllLinks ? (null) : this.allAnchors} {/* {this.allAnchors} */} - {this.props.forcedBackgroundColor?.(this.Document) === "transparent" || this.layoutDoc.hideLinkButton || this.props.dontRegisterView ? (null) : } + {this.props.forcedBackgroundColor?.(this.Document) === "transparent" || this.layoutDoc.isLinkButton || this.layoutDoc.hideLinkButton || this.props.dontRegisterView ? (null) : + }
); } -- cgit v1.2.3-70-g09d2 From 5fb6e6348b73c81c4f7900f819fc55fcffe2f661 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 26 Jul 2020 10:15:59 -0400 Subject: fixed copyField() to copy non-ObjectFields. fixed docFilters button to work with no filter --- src/client/views/collections/CollectionMenu.tsx | 2 +- src/fields/Doc.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 81c349b26..24be69050 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -111,7 +111,7 @@ export class CollectionViewBaseChrome extends React.Component this.target._docFilters = undefined), - initialize: (button: Doc) => { button['target-docFilters'] = this.target._docFilters instanceof ObjectField && ObjectField.MakeCopy(this.target._docFilters as any as ObjectField); }, + initialize: (button: Doc) => { button['target-docFilters'] = this.target._docFilters instanceof ObjectField ? ObjectField.MakeCopy(this.target._docFilters as any as ObjectField) : ""; }, }; _freeform_commands = [this._viewCommand, this._saveFilterCommand, this._fitContentCommand, this._clusterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 3ea53a9e0..87acb2ea7 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -1235,7 +1235,7 @@ Scripting.addGlobal(function getProto(doc: any) { return Doc.GetProto(doc); }); Scripting.addGlobal(function getDocTemplate(doc?: any) { return Doc.getDocTemplate(doc); }); Scripting.addGlobal(function getAlias(doc: any) { return Doc.MakeAlias(doc); }); Scripting.addGlobal(function getCopy(doc: any, copyProto: any) { return doc.isTemplateDoc ? Doc.ApplyTemplate(doc) : Doc.MakeCopy(doc, copyProto); }); -Scripting.addGlobal(function copyField(field: any) { return ObjectField.MakeCopy(field); }); +Scripting.addGlobal(function copyField(field: any) { return field instanceof ObjectField ? ObjectField.MakeCopy(field) : field; }); Scripting.addGlobal(function aliasDocs(field: any) { return Doc.aliasDocs(field); }); Scripting.addGlobal(function docList(field: any) { return DocListCast(field); }); Scripting.addGlobal(function setInPlace(doc: any, field: any, value: any) { return Doc.SetInPlace(doc, field, value, false); }); -- cgit v1.2.3-70-g09d2 From 72778bb3de8cb53c7303f6575f839314c6c331b3 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 26 Jul 2020 10:55:41 -0400 Subject: fixes for retrievin heiht/width syms when ACLs are private. --- src/fields/Schema.ts | 2 +- src/fields/util.ts | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/fields/Schema.ts b/src/fields/Schema.ts index c6a8d6ae9..23ac50f74 100644 --- a/src/fields/Schema.ts +++ b/src/fields/Schema.ts @@ -52,7 +52,7 @@ export function makeInterface(...schemas: T): InterfaceFu return field; }, set(target: any, prop, value, receiver) { - receiver.doc[prop] = value; + receiver.doc && (receiver.doc[prop] = value); // receiver.doc may be undefined as the result of a change in ACLs return true; } }); diff --git a/src/fields/util.ts b/src/fields/util.ts index 47da7d7bf..a62795e64 100644 --- a/src/fields/util.ts +++ b/src/fields/util.ts @@ -1,5 +1,5 @@ import { UndoManager } from "../client/util/UndoManager"; -import { Doc, FieldResult, UpdatingFromServer, LayoutSym, AclPrivate, AclEdit, AclReadonly, AclAddonly, AclSym, CachedUpdates, DataSym, DocListCast, AclAdmin, FieldsSym } from "./Doc"; +import { Doc, FieldResult, UpdatingFromServer, LayoutSym, AclPrivate, AclEdit, AclReadonly, AclAddonly, AclSym, CachedUpdates, DataSym, DocListCast, AclAdmin, FieldsSym, HeightSym, WidthSym } from "./Doc"; import { SerializationHelper } from "../client/util/SerializationHelper"; import { ProxyField, PrefetchProxy } from "./Proxy"; import { RefField } from "./RefField"; @@ -9,6 +9,7 @@ import { Parent, OnUpdate, Update, Id, SelfProxy, Self, HandleUpdate } from "./F import { DocServer } from "../client/DocServer"; import { ComputedField } from "./ScriptField"; import { ScriptCast, StrCast } from "./Types"; +import { returnZero } from "../Utils"; function _readOnlySetter(): never { @@ -246,7 +247,7 @@ export function getter(target: any, in_prop: string | symbol | number, receiver: if (in_prop === FieldsSym || in_prop === Id || in_prop === HandleUpdate || in_prop === CachedUpdates) return target.__fields[prop] || target[prop]; if (in_prop === AclSym) return _overrideAcl ? undefined : target[AclSym]; - if (GetEffectiveAcl(target) === AclPrivate && !_overrideAcl) return undefined; + if (GetEffectiveAcl(target) === AclPrivate && !_overrideAcl) return prop === HeightSym || prop === WidthSym ? returnZero : undefined; if (prop === LayoutSym) { return target.__LAYOUT__; } -- cgit v1.2.3-70-g09d2 From afdb653478692083bfe4a1318413ae68da7b4ec2 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 26 Jul 2020 17:23:21 -0400 Subject: added UseCors menu option for WebBox. fixed webbox css so that link button is in riht place. --- src/client/views/nodes/WebBox.scss | 219 +++++++++++++++++++------------------ src/client/views/nodes/WebBox.tsx | 106 +++++++++--------- 2 files changed, 166 insertions(+), 159 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index 4623444b9..4b2f3cc1a 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -1,135 +1,140 @@ @import "../globalCssVariables.scss"; -.webBox-container, .webBox-container-dragging { - transform-origin: top left; - width: 100%; - height: 100%; - - .webBox-htmlSpan { - position: absolute; - top: 0; - left: 0; - } - .webBox-cont { - pointer-events: none; - } - .webBox-cont, .webBox-cont-interactive { - padding: 0vw; - position: absolute; - top: 0; - left: 0; +.webBox { + height:100%; + position: relative; + display: flex; + .webBox-container, .webBox-container-dragging { + transform-origin: top left; width: 100%; height: 100%; - transform-origin: top left; - overflow: auto; - .webBox-iframe { + + .webBox-htmlSpan { + position: absolute; + top: 0; + left: 0; + } + .webBox-cont { + pointer-events: none; + } + .webBox-cont, .webBox-cont-interactive { + padding: 0vw; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-origin: top left; + overflow: auto; + .webBox-iframe { + width: 100%; + height: 100%; + position: absolute; + top:0; + } + } + .webBox-cont-interactive { + span { + user-select: text !important; + } + } + .webBox-outerContent { width: 100%; height: 100%; position: absolute; - top:0; + top: 0; + left: 0; + overflow: auto; + .webBox-innerContent { + width:100%; + } } - } - .webBox-cont-interactive { - span { - user-select: text !important; + div.webBox-outerContent::-webkit-scrollbar-thumb { + display:none; } } - .webBox-outerContent { + + + .webBox-overlay { width: 100%; height: 100%; position: absolute; - top: 0; - left: 0; - overflow: auto; - .webBox-innerContent { - width:100%; - } - } - div.webBox-outerContent::-webkit-scrollbar-thumb { - display:none; } -} - - -.webBox-overlay { - width: 100%; - height: 100%; - position: absolute; -} -.webBox-buttons { - margin-left: 44; - background:lightGray; - width: 100%; -} -.webBox-freeze { - display: flex; - align-items: center; - justify-content: center; - margin-right: 5px; - width: 30px; -} - -.webBox-urlEditor { - position: relative; - opacity: 0.9; - z-index: 9001; - transition: top .5s; - - .urlEditor { - display: grid; - grid-template-columns: 1fr auto; - padding-bottom: 10px; - overflow: hidden; - - .editorBase { - display: flex; - - .editor-collapse { - transition: all .5s, opacity 0.3s; - position: absolute; - width: 40px; - transform-origin: top left; - } + .webBox-buttons { + margin-left: 44; + background:lightGray; + width: 100%; + } + .webBox-freeze { + display: flex; + align-items: center; + justify-content: center; + margin-right: 5px; + width: 30px; + } - .switchToText { - color: $main-accent; + .webBox-urlEditor { + position: relative; + opacity: 0.9; + z-index: 9001; + transition: top .5s; + + .urlEditor { + display: grid; + grid-template-columns: 1fr auto; + padding-bottom: 10px; + overflow: hidden; + + .editorBase { + display: flex; + + .editor-collapse { + transition: all .5s, opacity 0.3s; + position: absolute; + width: 40px; + transform-origin: top left; + } + + .switchToText { + color: $main-accent; + } + + .switchToText:hover { + color: $dark-color; + } } - .switchToText:hover { - color: $dark-color; + button:hover { + transform: scale(1); } } + } - button:hover { - transform: scale(1); - } + .webpage-urlInput { + padding: 12px 10px 11px 10px; + border: 0px; + color: grey; + letter-spacing: 2px; + outline-color: black; + background: rgb(238, 238, 238); + width: 100%; + margin-right: 10px; + height: 100%; } -} - -.webpage-urlInput { - padding: 12px 10px 11px 10px; - border: 0px; - color: grey; - letter-spacing: 2px; - outline-color: black; - background: rgb(238, 238, 238); - width: 100%; - margin-right: 10px; - height: 100%; -} - -.touch-iframe-overlay { - width: 100%; - height: 100%; - position: absolute; - - .indicator { + + .touch-iframe-overlay { + width: 100%; + height: 100%; position: absolute; - &.active { - background-color: rgba(0, 0, 0, 0.1); + .indicator { + position: absolute; + + &.active { + background-color: rgba(0, 0, 0, 0.1); + } } } } \ No newline at end of file diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 39bb7c01d..5ae23f982 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -399,7 +399,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { const cm = ContextMenu.Instance; const funcs: ContextMenuProps[] = []; - funcs.push({ description: (!this.layoutDoc._nativeWidth || !this.layoutDoc._nativeHeight ? "Freeze" : "Unfreeze") + " Aspect", event: this.toggleNativeDimensions, icon: "snowflake" }); + funcs.push({ description: (this.layoutDoc.UseCors ? "Don't Use" : "Use") + " Cors", event: () => this.layoutDoc.UseCors = !this.layoutDoc.UseCors, icon: "snowflake" }); cm.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" }); } @@ -446,58 +446,60 @@ export class WebBox extends ViewBoxAnnotatableComponent this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); render() { - return (
- - {this.content} -
e.stopPropagation()} - onScroll={e => { - const iframe = this._iframeRef?.current?.contentDocument; - const outerFrame = this._outerRef.current; - if (iframe && outerFrame) { - if (iframe.children[0].scrollTop !== outerFrame.scrollTop) { - iframe.children[0].scrollTop = outerFrame.scrollTop; + return (
+
+ + {this.content} +
e.stopPropagation()} + onScroll={e => { + const iframe = this._iframeRef?.current?.contentDocument; + const outerFrame = this._outerRef.current; + if (iframe && outerFrame) { + if (iframe.children[0].scrollTop !== outerFrame.scrollTop) { + iframe.children[0].scrollTop = outerFrame.scrollTop; + } + if (iframe.children[0].scrollLeft !== outerFrame.scrollLeft) { + iframe.children[0].scrollLeft = outerFrame.scrollLeft; + } } - if (iframe.children[0].scrollLeft !== outerFrame.scrollLeft) { - iframe.children[0].scrollLeft = outerFrame.scrollLeft; - } - } - //this._outerRef.current!.scrollTop !== this._scrollTop && (this._outerRef.current!.scrollTop = this._scrollTop) - }}> -
- - + //this._outerRef.current!.scrollTop !== this._scrollTop && (this._outerRef.current!.scrollTop = this._scrollTop) + }}> +
+ + +
-
-
); +
+
); } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 139d58d68f022c308664ef9e0ba19df851801afb Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 26 Jul 2020 17:48:36 -0400 Subject: from last --- src/client/views/nodes/WebBox.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 5ae23f982..52e8b92a1 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -446,12 +446,12 @@ export class WebBox extends ViewBoxAnnotatableComponent this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); render() { - return (
+ return (
-- cgit v1.2.3-70-g09d2 From a904a5fd2d33fd4783a45b3411c9309cc25ad0fd Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 26 Jul 2020 18:07:54 -0400 Subject: from last --- src/client/views/nodes/WebBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 52e8b92a1..724044295 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -446,7 +446,7 @@ export class WebBox extends ViewBoxAnnotatableComponent this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); render() { - return (
+ return (
Date: Mon, 27 Jul 2020 00:32:50 -0400 Subject: extended pdfviewer interactions to WebBox's. --- src/client/views/DocComponent.tsx | 2 +- src/client/views/nodes/WebBox.scss | 21 ++- src/client/views/nodes/WebBox.tsx | 262 ++++++++++++++++++++++++++++++++++--- src/client/views/pdf/PDFViewer.tsx | 8 +- 4 files changed, 265 insertions(+), 28 deletions(-) (limited to 'src') diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index cfabae8a1..9fd406407 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -122,7 +122,7 @@ export function ViewBoxAnnotatableComponent

doc.annotationOn = undefined); + docs.map(doc => doc.isPushpin = doc.annotationOn = undefined); const targetDataDoc = this.dataDoc; const value = DocListCast(targetDataDoc[this.annotationKey]); const toRemove = value.filter(v => docs.includes(v)); diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index 4b2f3cc1a..f5c8745e7 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -5,6 +5,24 @@ height:100%; position: relative; display: flex; + + .pdfViewerDash-dragAnnotationBox { + position:absolute; + background-color: transparent; + opacity: 0.1; + } + .webBox-annotationLayer { + position: absolute; + transform-origin: left top; + top: 0; + width: 100%; + pointer-events: none; + mix-blend-mode: multiply; // bcz: makes text fuzzy! + } + .webBox-annotationBox { + position: absolute; + background-color: rgba(245, 230, 95, 0.616); + } .webBox-container, .webBox-container-dragging { transform-origin: top left; width: 100%; @@ -46,9 +64,6 @@ top: 0; left: 0; overflow: auto; - .webBox-innerContent { - width:100%; - } } div.webBox-outerContent::-webkit-scrollbar-thumb { display:none; diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 724044295..bc30b15e6 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -1,46 +1,62 @@ -import { library } from "@fortawesome/fontawesome-svg-core"; -import { faStickyNote, faPen, faMousePointer } from '@fortawesome/free-solid-svg-icons'; -import { action, computed, observable, trace, IReactionDisposer, reaction, runInAction } from "mobx"; +import { faMousePointer, faPen, faStickyNote } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { Doc, FieldResult, DocListCast } from "../../../fields/Doc"; +import { Dictionary } from "typescript-collections"; +import * as WebRequest from 'web-request'; +import { Doc, DocListCast, Opt } from "../../../fields/Doc"; import { documentSchema } from "../../../fields/documentSchemas"; +import { Id } from "../../../fields/FieldSymbols"; import { HtmlField } from "../../../fields/HtmlField"; import { InkTool } from "../../../fields/InkField"; -import { makeInterface, listSpec } from "../../../fields/Schema"; -import { Cast, NumCast, BoolCast, StrCast } from "../../../fields/Types"; +import { List } from "../../../fields/List"; +import { listSpec, makeInterface } from "../../../fields/Schema"; +import { Cast, NumCast, StrCast } from "../../../fields/Types"; import { WebField } from "../../../fields/URLField"; -import { Utils, returnOne, emptyFunction, returnZero } from "../../../Utils"; -import { Docs } from "../../documents/Documents"; +import { TraceMobx } from "../../../fields/util"; +import { addStyleSheet, clearStyleSheetRules, emptyFunction, returnOne, returnZero, Utils } from "../../../Utils"; +import { Docs, DocUtils } from "../../documents/Documents"; import { DragManager } from "../../util/DragManager"; import { ImageUtils } from "../../util/Import & Export/ImageUtils"; +import { undoBatch } from "../../util/UndoManager"; +import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; +import { ContextMenu } from "../ContextMenu"; +import { ContextMenuProps } from "../ContextMenuItem"; import { ViewBoxAnnotatableComponent } from "../DocComponent"; import { DocumentDecorations } from "../DocumentDecorations"; +import Annotation from "../pdf/Annotation"; +import PDFMenu from "../pdf/PDFMenu"; +import { PdfViewerMarquee } from "../pdf/PDFViewer"; import { FieldView, FieldViewProps } from './FieldView'; import "./WebBox.scss"; +import "../pdf/PDFViewer.scss"; import React = require("react"); -import * as WebRequest from 'web-request'; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; -import { ContextMenu } from "../ContextMenu"; -import { ContextMenuProps } from "../ContextMenuItem"; -import { undoBatch } from "../../util/UndoManager"; -import { List } from "../../../fields/List"; const htmlToText = require("html-to-text"); -library.add(faStickyNote); - type WebDocument = makeInterface<[typeof documentSchema]>; const WebDocument = makeInterface(documentSchema); @observer export class WebBox extends ViewBoxAnnotatableComponent(WebDocument) { + private _annotationLayer: React.RefObject = React.createRef(); + static _annotationStyle: any = addStyleSheet(); + private _mainCont: React.RefObject = React.createRef(); + private _startX: number = 0; + private _startY: number = 0; + @observable private _marqueeX: number = 0; + @observable private _marqueeY: number = 0; + @observable private _marqueeWidth: number = 0; + @observable private _marqueeHeight: number = 0; + @observable private _marqueeing: boolean = false; public static LayoutString(fieldKey: string) { return FieldView.LayoutString(WebBox, fieldKey); } get _collapsed() { return StrCast(this.layoutDoc._chromeStatus) !== "enabled"; } set _collapsed(value) { this.layoutDoc._chromeStatus = !value ? "enabled" : "disabled"; } @observable private _url: string = "hello"; @observable private _pressX: number = 0; @observable private _pressY: number = 0; + @observable private _savedAnnotations: Dictionary = new Dictionary(); + private _selectionReactionDisposer?: IReactionDisposer; private _keyInput = React.createRef(); private _longPressSecondsHack?: NodeJS.Timeout; private _outerRef = React.createRef(); @@ -75,6 +91,7 @@ export class WebBox extends ViewBoxAnnotatableComponent void) => this._setPreviewCursor = func; iframedown = (e: PointerEvent) => { this._setPreviewCursor?.(e.screenX, e.screenY, false); @@ -89,6 +106,17 @@ export class WebBox extends ViewBoxAnnotatableComponent this._url = urlField?.url.toString() || ""); + + this._selectionReactionDisposer = reaction(() => this.props.isSelected(), + selected => { + if (!selected) { + this._savedAnnotations.values().forEach(v => v.forEach(a => a.remove())); + this._savedAnnotations.keys().forEach(k => this._savedAnnotations.setValue(k, [])); + PDFMenu.Instance.fadeOut(true); + } + }, + { fireImmediately: true }); + document.addEventListener("pointerup", this.onLongPressUp); document.addEventListener("pointermove", this.onLongPressMove); const field = Cast(this.rootDoc[this.props.fieldKey], WebField); @@ -112,6 +140,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { this._collapsed = !this._collapsed; } + + _ignore = 0; onPreWheel = (e: React.WheelEvent) => { this._ignore = e.timeStamp; @@ -284,6 +316,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { if (this._ignore !== e.timeStamp) { e.stopPropagation(); @@ -430,6 +463,7 @@ export class WebBox extends ViewBoxAnnotatableComponent

{view}
; @@ -444,9 +478,188 @@ export class WebBox extends ViewBoxAnnotatableComponent); } + + + + @computed get allAnnotations() { return DocListCast(this.dataDoc[this.props.fieldKey + "-annotations"]); } + @computed get nonDocAnnotations() { return this.allAnnotations.filter(a => a.annotations); } + + @undoBatch + @action + makeAnnotationDocument = (color: string): Opt => { + if (this._savedAnnotations.size() === 0) return undefined; + const anno = this._savedAnnotations.values()[0][0]; + const annoDoc = Docs.Create.FreeformDocument([], { backgroundColor: color, annotationOn: this.props.Document, title: "Annotation on " + this.Document.title }); + if (anno.style.left) annoDoc.x = parseInt(anno.style.left); + if (anno.style.top) annoDoc.y = NumCast(this.layoutDoc._scrollTop) + parseInt(anno.style.top); + if (anno.style.height) annoDoc._height = parseInt(anno.style.height); + if (anno.style.width) annoDoc._width = parseInt(anno.style.width); + anno.remove(); + this._savedAnnotations.clear(); + return annoDoc; + } + @computed get annotationLayer() { + TraceMobx(); + return
+ {this.nonDocAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map(anno => + ) + } +
; + } + @action + createAnnotation = (div: HTMLDivElement, page: number) => { + if (this._annotationLayer.current) { + if (div.style.top) { + div.style.top = (parseInt(div.style.top)).toString(); + } + this._annotationLayer.current.append(div); + div.style.backgroundColor = "#ACCEF7"; + div.style.opacity = "0.5"; + const savedPage = this._savedAnnotations.getValue(page); + if (savedPage) { + savedPage.push(div); + this._savedAnnotations.setValue(page, savedPage); + } + else { + this._savedAnnotations.setValue(page, [div]); + } + } + } + + @action + highlight = (color: string) => { + // creates annotation documents for current highlights + const annotationDoc = this.makeAnnotationDocument(color); + annotationDoc && Doc.AddDocToList(this.props.Document, this.annotationKey, annotationDoc); + return annotationDoc; + } + /** + * This is temporary for creating annotations from highlights. It will + * start a drag event and create or put the necessary info into the drag event. + */ + @action + startDrag = async (e: PointerEvent, ele: HTMLElement) => { + e.preventDefault(); + e.stopPropagation(); + + const clipDoc = Doc.MakeAlias(this.dataDoc); + clipDoc._fitWidth = true; + clipDoc._width = this.marqueeWidth(); + clipDoc._height = this.marqueeHeight(); + clipDoc._scrollTop = this.marqueeY(); + const targetDoc = Docs.Create.TextDocument("", { _width: 200, _height: 200, title: "Note linked to " + this.props.Document.title }); + Doc.GetProto(targetDoc).data = new List([clipDoc]); + clipDoc.rootDocument = targetDoc; + targetDoc.layoutKey = "layout"; + const annotationDoc = this.highlight("rgba(146, 245, 95, 0.467)"); // yellowish highlight color when dragging out a text selection + if (annotationDoc) { + DragManager.StartPdfAnnoDrag([ele], new DragManager.PdfAnnoDragData(this.props.Document, annotationDoc, targetDoc), e.pageX, e.pageY, { + dragComplete: e => { + if (!e.aborted && e.annoDragData && !e.annoDragData.linkedToDoc) { + DocUtils.MakeLink({ doc: annotationDoc }, { doc: e.annoDragData.dropDocument }, "Annotation"); + annotationDoc.isLinkButton = true; + e.annoDragData.dropDocument.isPushpin = true; + e.annoDragData.dropDocument.isLinkButton = true; + } + } + }); + } + } + @action + onMarqueeDown = (e: React.PointerEvent) => { + this._marqueeing = false; + if (!e.altKey && e.button === 0 && this.active(true)) { + // clear out old marquees and initialize menu for new selection + PDFMenu.Instance.StartDrag = this.startDrag; + PDFMenu.Instance.Highlight = this.highlight; + PDFMenu.Instance.Status = "pdf"; + PDFMenu.Instance.fadeOut(true); + this._savedAnnotations.values().forEach(v => v.forEach(a => a.remove())); + this._savedAnnotations.keys().forEach(k => this._savedAnnotations.setValue(k, [])); + if ((e.target as any)?.parentElement.className === "textLayer") { + // start selecting text if mouse down on textLayer spans + } + else if (this._mainCont.current) { + // set marquee x and y positions to the spatially transformed position + const boundingRect = this._mainCont.current.getBoundingClientRect(); + this._startX = (e.clientX - boundingRect.left) / boundingRect.width * (this.Document._nativeWidth || 1); + this._startY = (e.clientY - boundingRect.top) / boundingRect.height * (this.Document._nativeHeight || 1); + this._marqueeHeight = this._marqueeWidth = 0; + this._marqueeing = true; + } + document.removeEventListener("pointermove", this.onSelectMove); + document.addEventListener("pointermove", this.onSelectMove); + document.removeEventListener("pointerup", this.onSelectEnd); + document.addEventListener("pointerup", this.onSelectEnd); + } + } + @action + onSelectMove = (e: PointerEvent): void => { + if (this._marqueeing && this._mainCont.current) { + // transform positions and find the width and height to set the marquee to + const boundingRect = this._mainCont.current.getBoundingClientRect(); + const curX = (e.clientX - boundingRect.left) / boundingRect.width * (this.Document._nativeWidth || 1); + const curY = (e.clientY - boundingRect.top) / boundingRect.height * (this.Document._nativeHeight || 1); + this._marqueeWidth = curX - this._startX; + this._marqueeHeight = curY - this._startY; + this._marqueeX = Math.min(this._startX, this._startX + this._marqueeWidth); + this._marqueeY = Math.min(this._startY, this._startY + this._marqueeHeight); + this._marqueeWidth = Math.abs(this._marqueeWidth); + this._marqueeHeight = Math.abs(this._marqueeHeight); + e.stopPropagation(); + e.preventDefault(); + } + else if (e.target && (e.target as any).parentElement === this._mainCont.current) { + e.stopPropagation(); + } + } + + @action + onSelectEnd = (e: PointerEvent): void => { + clearStyleSheetRules(WebBox._annotationStyle); + this._savedAnnotations.clear(); + if (this._marqueeWidth > 10 || this._marqueeHeight > 10) { + const marquees = this._mainCont.current!.getElementsByClassName("pdfViewerDash-dragAnnotationBox"); + if (marquees?.length) { // copy the marquee and convert it to a permanent annotation. + const style = (marquees[0] as HTMLDivElement).style; + const copy = document.createElement("div"); + copy.style.left = style.left; + copy.style.top = style.top; + copy.style.width = style.width; + copy.style.height = style.height; + copy.style.border = style.border; + copy.style.opacity = style.opacity; + (copy as any).marqueeing = true; + copy.className = "webBox-annotationBox"; + this.createAnnotation(copy, 0); + } + + if (!e.ctrlKey) { + PDFMenu.Instance.Marquee = { left: this._marqueeX, top: this._marqueeY, width: this._marqueeWidth, height: this._marqueeHeight }; + } + PDFMenu.Instance.jumpTo(e.clientX, e.clientY); + } + //this._marqueeing = false; + + if (PDFMenu.Instance.Highlighting) {// when highlighter has been toggled when menu is pinned, we auto-highlight immediately on mouse up + this.highlight("rgba(245, 230, 95, 0.616)"); // yellowish highlight color for highlighted text (should match PDFMenu's highlight color) + } + else { + PDFMenu.Instance.StartDrag = this.startDrag; + PDFMenu.Instance.Highlight = this.highlight; + } + document.removeEventListener("pointermove", this.onSelectMove); + document.removeEventListener("pointerup", this.onSelectEnd); + } + + marqueeWidth = () => this._marqueeWidth; + marqueeHeight = () => this._marqueeHeight; + marqueeX = () => this._marqueeX; + marqueeY = () => this._marqueeY; + marqueeing = () => this._marqueeing; scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); render() { - return (
+ return (
{this.content}
e.stopPropagation()} + onPointerDown={this.onMarqueeDown} onScroll={e => { const iframe = this._iframeRef?.current?.contentDocument; const outerFrame = this._outerRef.current; @@ -473,7 +690,10 @@ export class WebBox extends ViewBoxAnnotatableComponent -
+
+ {this.annotationLayer} +
); } diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 30c51d9ca..5ed842ab7 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -521,7 +521,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent 10 || this._marqueeHeight > 10) { const marquees = this._mainCont.current!.getElementsByClassName("pdfViewerDash-dragAnnotationBox"); - if (marquees && marquees.length) { // copy the marquee and convert it to a permanent annotation. + if (marquees?.length) { // copy the marquee and convert it to a permanent annotation. const style = (marquees[0] as HTMLDivElement).style; const copy = document.createElement("div"); copy.style.left = style.left; @@ -544,7 +544,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent boolean; width: () => number; height: () => number; @@ -735,7 +735,7 @@ interface PdfViewerMarqueeProps { } @observer -class PdfViewerMarquee extends React.Component { +export class PdfViewerMarquee extends React.Component { render() { return !this.props.isMarqueeing() ? (null) :
Date: Mon, 27 Jul 2020 08:25:39 -0400 Subject: added vertical resie of fixedaspect when _fitWidth is on. fixin webBox css to not clip contents. --- src/client/views/DocumentDecorations.tsx | 7 ++++--- src/client/views/nodes/WebBox.scss | 3 ++- src/client/views/nodes/WebBox.tsx | 10 ++++++---- 3 files changed, 12 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 8d63537e7..9a4df926c 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -374,7 +374,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> move[1] = thisPt.thisY - this._snapY; this._snapX = thisPt.thisX; this._snapY = thisPt.thisY; - + let dragBottom = false; let dX = 0, dY = 0, dW = 0, dH = 0; const unfreeze = () => SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => @@ -412,6 +412,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> case "documentDecorations-bottomResizer": unfreeze(); dH = move[1]; + dragBottom = true; break; case "documentDecorations-leftResizer": unfreeze(); @@ -438,7 +439,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (nwidth / nheight !== width / height) { height = nheight / nwidth * width; } - if (!e.ctrlKey) { + if (!e.ctrlKey && (!dragBottom || !element.layoutDoc._fitWidth)) { // ctrl key enables modification of the nativeWidth or nativeHeight durin the interaction if (Math.abs(dW) > Math.abs(dH)) dH = dW * nheight / nwidth; else dW = dH * nwidth / nheight; } @@ -473,7 +474,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> else if (!fixedAspect || !e.ctrlKey) doc._height = actualdH; } else { - if (!fixedAspect || e.ctrlKey) { + if (!fixedAspect || e.ctrlKey || (dragBottom && element.layoutDoc._fitWidth)) { doc._nativeHeight = actualdH / (doc._height || 1) * (doc._nativeHeight || 0); } doc._height = actualdH; diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index f5c8745e7..62657780d 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -23,10 +23,11 @@ position: absolute; background-color: rgba(245, 230, 95, 0.616); } - .webBox-container, .webBox-container-dragging { + .webBox-container { transform-origin: top left; width: 100%; height: 100%; + overflow-x:hidden; .webBox-htmlSpan { position: absolute; diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index bc30b15e6..fe48dfc6c 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -659,12 +659,14 @@ export class WebBox extends ViewBoxAnnotatableComponent this._marqueeing; scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); render() { + const noScalin = this.props.ContentScaling() < 1; return (
@@ -672,7 +674,7 @@ export class WebBox extends ViewBoxAnnotatableComponent e.stopPropagation()} -- cgit v1.2.3-70-g09d2 From 777c4ff1c11d2532dc1be4243b548debd5d004ea Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 27 Jul 2020 09:00:56 -0400 Subject: fixed drain of webbox to keep annotations sychronized. fixed css for when web box is small. --- src/client/views/nodes/WebBox.scss | 1 - src/client/views/nodes/WebBox.tsx | 46 +++++++++++++++++++++----------------- 2 files changed, 25 insertions(+), 22 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index 62657780d..875142169 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -27,7 +27,6 @@ transform-origin: top left; width: 100%; height: 100%; - overflow-x:hidden; .webBox-htmlSpan { position: absolute; diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index fe48dfc6c..7e3e662a4 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -57,13 +57,14 @@ export class WebBox extends ViewBoxAnnotatableComponent = new Dictionary(); private _selectionReactionDisposer?: IReactionDisposer; + private _scrollReactionDisposer?: IReactionDisposer; + private _moveReactionDisposer?: IReactionDisposer; private _keyInput = React.createRef(); private _longPressSecondsHack?: NodeJS.Timeout; private _outerRef = React.createRef(); private _iframeRef = React.createRef(); private _iframeIndicatorRef = React.createRef(); private _iframeDragRef = React.createRef(); - private _reactionDisposer?: IReactionDisposer; private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean) => void); iframeLoaded = action((e: any) => { @@ -76,22 +77,24 @@ export class WebBox extends ViewBoxAnnotatableComponent ({ y: this.layoutDoc._scrollY, x: this.layoutDoc._scrollX }), - ({ x, y }) => { - if (y !== undefined) { - this._outerRef.current!.scrollTop = y; - this.layoutDoc._scrollY = undefined; - } - if (x !== undefined) { - this._outerRef.current!.scrollLeft = x; - this.layoutDoc.scrollX = undefined; - } - }, + this._scrollReactionDisposer?.(); + this._scrollReactionDisposer = reaction(() => ({ y: this.layoutDoc._scrollY, x: this.layoutDoc._scrollX }), + ({ x, y }) => this.updateScroll(x, y), { fireImmediately: true } ); }); + updateScroll = (x: Opt, y: Opt) => { + if (y !== undefined) { + this._outerRef.current!.scrollTop = y; + this.layoutDoc._scrollY = undefined; + } + if (x !== undefined) { + this._outerRef.current!.scrollLeft = x; + this.layoutDoc.scrollX = undefined; + } + } + setPreviewCursor = (func?: (x: number, y: number, drag: boolean) => void) => this._setPreviewCursor = func; iframedown = (e: PointerEvent) => { this._setPreviewCursor?.(e.screenX, e.screenY, false); @@ -106,6 +109,8 @@ export class WebBox extends ViewBoxAnnotatableComponent this._url = urlField?.url.toString() || ""); + this._moveReactionDisposer = reaction(() => this.layoutDoc.x || this.layoutDoc.y, + () => this.updateScroll(this.layoutDoc._scrollLeft, this.layoutDoc._scrollTop)); this._selectionReactionDisposer = reaction(() => this.props.isSelected(), selected => { @@ -140,8 +145,9 @@ export class WebBox extends ViewBoxAnnotatableComponent this._marqueeWidth; marqueeHeight = () => this._marqueeHeight; marqueeX = () => this._marqueeX; @@ -659,14 +664,13 @@ export class WebBox extends ViewBoxAnnotatableComponent this._marqueeing; scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); render() { - const noScalin = this.props.ContentScaling() < 1; return (
@@ -674,7 +678,7 @@ export class WebBox extends ViewBoxAnnotatableComponent e.stopPropagation()} -- cgit v1.2.3-70-g09d2 From 258ad0d8628737e01613341437eb0421359ad168 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Tue, 28 Jul 2020 00:02:40 +0900 Subject: rotation/resize fix, changed ui, added sketchpicker etc. --- src/client/util/InteractionUtils.tsx | 7 +- src/client/views/DocumentDecorations.tsx | 54 +++- src/client/views/GestureOverlay.tsx | 16 +- src/client/views/InkingStroke.tsx | 15 +- .../collectionFreeForm/FormatShapePane.scss | 4 +- .../collectionFreeForm/FormatShapePane.tsx | 333 ++++++++++++++------- .../collectionFreeForm/InkOptionsMenu.tsx | 128 ++------ src/client/views/nodes/ColorBox.tsx | 45 +-- 8 files changed, 347 insertions(+), 255 deletions(-) (limited to 'src') diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 31b2a56e6..69256ce67 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -123,6 +123,12 @@ export namespace InteractionUtils { } else { pts = points; } + if (isNaN(scalex)) { + scalex = 1; + } + if (isNaN(scaley)) { + scaley = 1; + } const strpts = pts.reduce((acc: string, pt: { X: number, Y: number }) => acc + `${(pt.X - left - width / 2) * scalex + width / 2}, ${(pt.Y - top - width / 2) * scaley + width / 2} `, ""); @@ -141,7 +147,6 @@ export namespace InteractionUtils { } } - private _prevX = 0; private _prevY = 0; private _centerPoints: { X: number, Y: number }[] = []; + private _inkDocs: { x: number, y: number, width: number, height: number }[] = []; @observable private _accumulatedTitle = ""; @observable private _titleControlString: string = "#title"; @@ -309,8 +312,10 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> const right = Math.max(...xs); const bottom = Math.max(...ys); - doc._height = (bottom - top) * element.props.ScreenToLocalTransform().Scale; - doc._width = (right - left) * element.props.ScreenToLocalTransform().Scale; + // doc._height = (bottom - top) * element.props.ScreenToLocalTransform().Scale; + // doc._width = (right - left) * element.props.ScreenToLocalTransform().Scale; + doc._height = (bottom - top); + doc._width = (right - left); } index++; @@ -329,6 +334,16 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> _dragHeights = new Map(); @action onPointerDown = (e: React.PointerEvent): void => { + + this._inkDocs = []; + SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => { + const doc = Document(element.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height) { + this._inkDocs.push({ x: doc.x, y: doc.y, width: doc._width, height: doc._height }); + } + + })); + setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, (e) => { }); if (e.button === 0) { this._resizeHdlId = e.currentTarget.id; @@ -501,6 +516,28 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> (e.button === 0) && this._resizeUndo?.end(); this._resizeUndo = undefined; SnappingManager.clearSnapLines(); + + + //need to change points for resize, or else rotation/control points will fail. + SelectionManager.SelectedDocuments().forEach(action((element: DocumentView, index) => { + const doc = Document(element.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) { + console.log(doc.x, doc.y, doc._height, doc._width); + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var i = 0; i < ink.length; i++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (doc.x - this._inkDocs[index].x) + (ink[i].X * doc._width) / this._inkDocs[index].width; + const newY = (doc.y - this._inkDocs[index].y) + (ink[i].Y * doc._height) / this._inkDocs[index].height; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + + } + + } + })); } @computed @@ -591,6 +628,11 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (bounds.y > bounds.b) { bounds.y = bounds.b - (this._resizeBorderWidth + this._linkBoxHeight + this._titleHeight); } + var offset = 0; + //make offset larger for ink to edit points + if (seldoc.rootDoc.type === DocumentType.INK) { + offset = 20; + } return (
{bounds.r - bounds.x < 15 && bounds.b - bounds.y < 15 ? (null) : <>
{maximizeIcon} {titleArea} diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 2eec8ed6a..9faf5e6a5 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -668,6 +668,10 @@ export default class GestureOverlay extends Touchable { } makePolygon = (shape: string, gesture: boolean) => { + //take off gesture recognition for now + if (gesture) { + return false; + } const xs = this._points.map(p => p.X); const ys = this._points.map(p => p.Y); var right = Math.max(...xs); @@ -796,19 +800,7 @@ export default class GestureOverlay extends Touchable { break; case "line": this._points.push({ X: left, Y: top }); - - this._points.push({ X: left, Y: top }); - - // this._points.push({ X: right, Y: bottom }); - // this._points.push({ X: right, Y: bottom }); - // this._points.push({ X: right, Y: bottom }); - // this._points.push({ X: right, Y: bottom }); - - - this._points.push({ X: right, Y: bottom }); this._points.push({ X: right, Y: bottom }); - - // this._points.push({ X: right, Y: bottom - 1 }); break; case "arrow": const x1 = left; diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 22c89b6da..b03d8e79b 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -105,9 +105,9 @@ export class InkingStroke extends ViewBoxBaseComponent= 4) { for (var i = 0; i <= data.length - 4; i += 4) { controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i }); @@ -125,6 +125,15 @@ export class InkingStroke extends ViewBoxBaseComponent { switch (field) { case "rot": this.rotate((dirs === "up" ? .1 : -.1)); break; + // case "rot": this.selectedInk?.forEach(i => i.rootDoc.rotation = NumCast(i.rootDoc.rotation) + (dirs === "up" ? 0.1 : -0.1)); break; case "Xps": this.selectedInk?.forEach(i => i.rootDoc.x = NumCast(i.rootDoc.x) + (dirs === "up" ? 10 : -10)); break; case "Yps": this.selectedInk?.forEach(i => i.rootDoc.y = NumCast(i.rootDoc.y) + (dirs === "up" ? 10 : -10)); break; case "stk": this.selectedInk?.forEach(i => i.rootDoc.strokeWidth = NumCast(i.rootDoc.strokeWidth) + (dirs === "up" ? .1 : -.1)); break; case "wid": this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { + //redraw points const oldWidth = NumCast(i.rootDoc._width); + const oldHeight = NumCast(i.rootDoc._height); + const oldX = NumCast(i.rootDoc.x); + const oldY = NumCast(i.rootDoc.y); i.rootDoc._width = oldWidth + (dirs === "up" ? 10 : - 10); this._lock && (i.rootDoc._height = (i.rootDoc._width / oldWidth * NumCast(i.rootDoc._height))); + const doc = Document(i.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) { + console.log(doc.x, doc.y, doc._height, doc._width); + const ink = Cast(doc.data, InkField)?.inkData; + console.log(ink); + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var j = 0; j < ink.length; j++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth; + const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + } + } }); break; case "hgt": this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { + const oldWidth = NumCast(i.rootDoc._width); const oldHeight = NumCast(i.rootDoc._height); - i.rootDoc._height = oldHeight + (dirs === "up" ? 10 : - 10); + const oldX = NumCast(i.rootDoc.x); + const oldY = NumCast(i.rootDoc.y); i.rootDoc._height = oldHeight + (dirs === "up" ? 10 : - 10); this._lock && (i.rootDoc._width = (i.rootDoc._height / oldHeight * NumCast(i.rootDoc._width))); + const doc = Document(i.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) { + console.log(doc.x, doc.y, doc._height, doc._width); + const ink = Cast(doc.data, InkField)?.inkData; + console.log(ink); + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var j = 0; j < ink.length; j++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth; + const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + } + } }); break; } @@ -124,12 +164,11 @@ export default class FormatShapePane extends AntimodeMenu { @undoBatch @action - rotate = (degrees: number) => { - this.selectedInk?.forEach(action(inkView => { + rotate = (angle: number) => { + const _centerPoints: { X: number, Y: number }[] = []; + SelectionManager.SelectedDocuments().forEach(action(inkView => { const doc = Document(inkView.rootDoc); if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { - 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); @@ -138,25 +177,37 @@ export default class FormatShapePane extends AntimodeMenu { 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 }); + } + } + })); + + var index = 0; + SelectionManager.SelectedDocuments().forEach(action(inkView => { + const doc = Document(inkView.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { + doc.rotation = Number(doc.rotation) + Number(angle); + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { 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; + const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X; + const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].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) * inkView.props.ScreenToLocalTransform().Scale; - doc._width = (right2 - left2) * inkView.props.ScreenToLocalTransform().Scale; + const xs = newPoints.map(p => p.X); + const ys = newPoints.map(p => p.Y); + const left = Math.min(...xs); + const top = Math.min(...ys); + const right = Math.max(...xs); + const bottom = Math.max(...ys); + + doc._height = (bottom - top); + doc._width = (right - left); } + index++; } })); } @@ -180,8 +231,10 @@ export default class FormatShapePane extends AntimodeMenu { (order === 0 && controlNum !== 0 && i === controlNum - 1) || (order === 3 && i === controlNum - 1) || (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 1) || - (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 2)) { - newPoints.push({ X: ink[i].X - (xDiff), Y: ink[i].Y - (yDiff) }); + (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 2) + || ((ink[0].X === ink[ink.length - 1].X) && (ink[0].Y === ink[ink.length - 1].Y) && (i === 0 || i === ink.length - 1) && (controlNum === 0 || controlNum === ink.length - 1)) + ) { + newPoints.push({ X: ink[i].X - (xDiff * inkView.props.ScreenToLocalTransform().Scale), Y: ink[i].Y - (yDiff * inkView.props.ScreenToLocalTransform().Scale) }); } else { newPoints.push({ X: ink[i].X, Y: ink[i].Y }); @@ -189,6 +242,10 @@ export default class FormatShapePane extends AntimodeMenu { } const oldx = doc.x; const oldy = doc.y; + const xs = newPoints.map(p => p.X); + const ys = newPoints.map(p => p.Y); + const left = Math.min(...xs); + const top = Math.min(...ys); doc.data = new InkField(newPoints); const xs2 = newPoints.map(p => p.X); const ys2 = newPoints.map(p => p.Y); @@ -196,141 +253,202 @@ export default class FormatShapePane extends AntimodeMenu { const top2 = Math.min(...ys2); const right2 = Math.max(...xs2); const bottom2 = Math.max(...ys2); - doc._height = (bottom2 - top2) * inkView.props.ScreenToLocalTransform().Scale; - doc._width = (right2 - left2) * inkView.props.ScreenToLocalTransform().Scale; - doc.x = oldx; - doc.y = oldy; + doc._height = (bottom2 - top2); + doc._width = (right2 - left2); + + doc.x = oldx - (left - left2); + doc.y = oldy - (top - top2); } } } })); } + @undoBatch + @action + switchStk = (color: ColorState) => { + const val = String(color.hex); + this.colorStk = val; + return true; + } - colorPicker(setter: (color: string) => {}) { - return
- {this._palette.map(color => - )} + @undoBatch + @action + switchFil = (color: ColorState) => { + const val = String(color.hex); + this.colorFil = val; + return true; + } + + + colorPicker(setter: (color: string) => {}, type: string) { + return
+
; } inputBox = (key: string, value: any, setter: (val: string) => {}) => { return <> - setter(e.target.value)} + onChange={undoBatch(action((e) => setter(e.target.value)))} autoFocus /> -
- ; } + inputBoxDuo = (key: string, value: any, setter: (val: string) => {}, title1: string, key2: string, value2: any, setter2: (val: string) => {}, title2: string) => { + return <> + {title1} +

{title2}

+ + setter(e.target.value)} + autoFocus /> + + + {title2 === "" ? "" : <> + setter2(e.target.value)} + autoFocus /> + +
+ } + ; + } + + colorButton(value: string, setter: () => {}) { return <> - -

; } controlPointsButton() { return <> - + + +

+ ; + } + + lockRatioButton() { + return <> + +

+ ; + } + + rotate90Button() { + return <> +

; } - @computed get fillButton() { return this.colorButton(this.colorFil, () => this._fillBtn = !this._fillBtn); } - @computed get lineButton() { return this.colorButton(this.colorStk, () => this._lineBtn = !this._lineBtn); } + @computed get fillButton() { return this.colorButton(this.colorFil, () => { this._fillBtn = !this._fillBtn; this._lineBtn = false; return true; }); } + @computed get lineButton() { return this.colorButton(this.colorStk, () => { this._lineBtn = !this._lineBtn; this._fillBtn = false; return true; }); } - @computed get fillPicker() { return this.colorPicker((color: string) => this.colorFil = color); } - @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = color); } + @computed get fillPicker() { return this.colorPicker((color: string) => this.colorFil = color, "fil"); } + @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = color, "stk"); } @computed get stkInput() { return this.inputBox("stk", this.widthStk, (val: string) => this.widthStk = val); } - @computed get hgtInput() { return this.inputBox("hgt", this.shapeHgt, (val: string) => this.shapeHgt = val); } + @computed get dashInput() { return this.inputBox("dsh", this.widthStk, (val: string) => this.widthStk = val); } + + @computed get hgtInput() { return this.inputBoxDuo("hgt", this.shapeHgt, (val: string) => this.shapeHgt = val, "H:", "wid", this.shapeWid, (val: string) => this.shapeWid = val, "W:"); } @computed get widInput() { return this.inputBox("wid", this.shapeWid, (val: string) => this.shapeWid = val); } - @computed get rotInput() { return this.inputBox("rot", this.shapeRot, (val: string) => this.shapeRot = val); } - @computed get XpsInput() { return this.inputBox("Xps", this.shapeXps, (val: string) => this.shapeXps = val); } + @computed get rotInput() { return this.inputBoxDuo("rot", this.shapeRot, (val: string) => { this.rotate(Number(val) - Number(this.shapeRot)); this.shapeRot = val; return true; }, "∠:", "rot", this.shapeRot, (val: string) => this.shapeRot = val, ""); } + + @computed get XpsInput() { return this.inputBoxDuo("Xps", this.shapeXps, (val: string) => this.shapeXps = val, "X:", "Yps", this.shapeYps, (val: string) => this.shapeYps = val, "Y:"); } @computed get YpsInput() { return this.inputBox("Yps", this.shapeYps, (val: string) => this.shapeYps = val); } @computed get controlPoints() { return this.controlPointsButton(); } + @computed get lockRatio() { return this.lockRatioButton(); } + @computed get rotate90() { return this.rotate90Button(); } - @computed get propertyGroupItems() { - const fillCheck =
- this.unFilled = true))} /> - No Fill -
- this.solidFil = true))} /> - Solid Fill -

- {this.solidFil ? "Color" : ""} - {this.solidFil ? this.fillButton : ""} - {this._fillBtn && this.solidFil ? this.fillPicker : ""} -
; - const markers = <> - this.markHead = this.markHead ? "" : "arrow"))} /> - Arrow Head -
- this.markTail = this.markTail ? "" : "arrow"))} /> - Arrow End -
- ; + @computed get propertyGroupItems() { + const fillCheck =
= 1) ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}> + Fill: + {this.fillButton} +
+ Stroke: + {this.lineButton} +
- const lineCheck =
- this.unStrokd = true))} /> - No Line -
- this.solidStk = true))} /> - Solid Line -
- this.dashdStk = "2"))} /> - Dash Line -
-
- {(this.solidStk || this.dashdStk) ? "Color" : ""} - {(this.solidStk || this.dashdStk) ? this.lineButton : ""} - {(this.solidStk || this.dashdStk) && this._lineBtn ? this.linePicker : ""} -
+ {this._fillBtn ? this.fillPicker : ""} + {this._lineBtn ? this.linePicker : ""} + {this._fillBtn || this._lineBtn ? "" :
} {(this.solidStk || this.dashdStk) ? "Width" : ""} {(this.solidStk || this.dashdStk) ? this.stkInput : ""} - {(this.solidStk || this.dashdStk) ? this.widthStk = e.target.value} /> : (null)} -

- {(this.solidStk || this.dashdStk) ? markers : ""} -
; - const sizeCheck =
- Height {this.hgtInput} -

- Width {this.widInput} -

- this._lock = !this._lock))} /> - Lock Ratio -

- Rotation {this.rotInput} -

- Edit Points {this.controlPoints} -
; - const positionCheck =
- Horizontal {this.XpsInput} -

- Vertical {this.YpsInput} -

+ {(this.solidStk || this.dashdStk) ? this.widthStk = e.target.value))} /> : (null)} +
+ {(this.solidStk || this.dashdStk) ? <> +

Arrow Head

+ this.markHead = this.markHead ? "" : "arrow"))} style={{ position: "absolute", right: 110, width: 20 }} /> +

Arrow End

+ this.markTail = this.markTail ? "" : "arrow"))} style={{ position: "absolute", right: 0, width: 20 }} /> +
+ : ""} + Dash: this.dashdStk = this.dashdStk === "2" ? "0" : "2"))} style={{ position: "absolute", right: 110, width: 20 }} /> + + +
; - const subMenus = this._currMode === "fill-drip" ? [`fill`, `line`] : [`size`, `position`]; - const menuItems = this._currMode === "fill-drip" ? [fillCheck, lineCheck] : [sizeCheck, positionCheck]; - const indexOffset = this._currMode === "fill-drip" ? 0 : 2; + + + const sizeCheck = + +
= 1) ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}> + {this.controlPoints} + {this.hgtInput} + {this.XpsInput} + {this.rotInput} + +
; + + + const subMenus = this._currMode === "fill-drip" ? [`Appearance`, 'Transform'] : []; + const menuItems = this._currMode === "fill-drip" ? [fillCheck, sizeCheck] : []; + const indexOffset = 0; + return
{subMenus.map((subMenu, i) =>
@@ -361,6 +479,7 @@ export default class FormatShapePane extends AntimodeMenu { } render() { - return this.getElementVert([this.closeBtn, this.propertyGroupBtn, this.propertyGroupItems]); + return this.getElementVert([this.closeBtn, + this.propertyGroupItems]); } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index 15707ad9e..80d1264ce 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -16,11 +16,11 @@ 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, faArrowRight, faArrowsAltH, faMinus, faCircle, faExclamationTriangle, faSquare, faLongArrowAltRight, faPenFancy, faCaretSquareRight, faAngleDoubleRight, } from "@fortawesome/free-solid-svg-icons"; import { Cast, StrCast, BoolCast } from "../../../../fields/Types"; import FormatShapePane from "./FormatShapePane"; -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); +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, faLongArrowAltRight, faArrowsAltH, faMinus, faCircle, faSquare, faSquare, faPenFancy, faAngleDoubleRight,); @@ -30,18 +30,13 @@ export default class InkOptionsMenu extends AntimodeMenu { private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", ""]; 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", "∆", "ロ", "⎯⎯⎯", "✖︎", " "]; - //arrowStart and arrowEnd must match and defs must exist in Inking Stroke - // private _arrowStart = ["arrowStart", "arrowStart", "dot", "dot", "none"]; - // private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"]; - // private _arrowIcons = ["→", "↔︎", "•", "••", " "]; - private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"]; - private _head = ["", "", "arrow", "", "", "arrow", "", "", ""]; - private _end = ["", "arrow", "arrow", "", "arrow", "arrow", "", "", ""]; - private _shape = ["line", "line", "line", "", "", "", "rectangle", "circle", "triangle"]; + private _dotsize = [10, 20, 30, 40]; + private _draw = ["∿", "⎯", "→", "↔︎", "ロ", "O"]; + private _head = ["", "", "", "arrow", "", ""]; + private _end = ["", "", "arrow", "arrow", "", ""]; + private _shape = ["", "line", "line", "line", "rectangle", "circle"]; + private _title = ["pen", "line", "line with arrow", "line with double arrows", "square", "circle",]; + private _faName = ["pen-fancy", "minus", "long-arrow-alt-right", "arrows-alt-h", "square", "circle"]; @observable _shapesNum = this._shape.length; @observable _selected = this._shapesNum; @@ -154,6 +149,7 @@ export default class InkOptionsMenu extends AntimodeMenu { return ; })}
; return drawButtons; } - // @computed get arrowPicker() { - // var currIcon; - // 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 = ; - // if (this._arrowBtn) { - // arrowPicker =
- // {arrowPicker} - // {this._arrowStart.map((arrowStart, i) => { - // return ; - // })} - //
; - // } - // return arrowPicker; - // } @computed get widthPicker() { var widthPicker = ; })}
; @@ -273,7 +238,7 @@ export default class InkOptionsMenu extends AntimodeMenu { var colorPicker = ; } @@ -310,7 +275,7 @@ export default class InkOptionsMenu extends AntimodeMenu { var fillPicker = ; - // if (this._shapeBtn) { - // shapePicker =
- // {shapePicker} - // {this._buttons.map((btn, i) => { - // var ttl = btn; - // if (btn === "") { - // ttl = "no shape"; - // } - // if (btn === "noRec") { - // ttl = "disable shape recognition"; - // } - // return ; - // })} - //
; - // } - // return shapePicker; - // } @computed get bezierButton() { return , - // this.shapePicker, - // this.bezierButton, + + this.drawButtons, this.widthPicker, this.colorPicker, this.fillPicker, - this.drawButtons, + + this.formatPane, - // this.arrowPicker, - // this.dashButton, + diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index 57028b0ca..b186d9ffc 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -54,27 +54,30 @@ export class ColorBox extends ViewBoxBaseComponent e.button === 0 && !e.ctrlKey && e.stopPropagation()} - style={{ transform: `scale(${this.props.ContentScaling()})`, width: `${100 / this.props.ContentScaling()}%`, height: `${100 / this.props.ContentScaling()}%` }} > + // return
e.button === 0 && !e.ctrlKey && e.stopPropagation()} + // style={{ transform: `scale(${this.props.ContentScaling()})`, width: `${100 / this.props.ContentScaling()}%`, height: `${100 / this.props.ContentScaling()}%` }} > - -
-
{ActiveInkWidth() ?? 2}
- ) => { - SetActiveInkWidth(e.target.value); - SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeWidth = Number(e.target.value)); - }} /> -
{ActiveInkBezierApprox() ?? 2}
- ) => { - SetActiveBezierApprox(e.target.value); - SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeBezier = e.target.value); - }} /> -
-
-
-
; + // + + //
+ //
{ActiveInkWidth() ?? 2}
+ // ) => { + // SetActiveInkWidth(e.target.value); + // SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeWidth = Number(e.target.value)); + // }} /> + //
{ActiveInkBezierApprox() ?? 2}
+ // ) => { + // SetActiveBezierApprox(e.target.value); + // SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeBezier = e.target.value); + // }} /> + //
+ //
+ //
+ //
+ // ; + return <>; } } -- cgit v1.2.3-70-g09d2 From 65d3c9672fc3cf0dc981588f220dad269beb4aeb Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Tue, 28 Jul 2020 00:10:22 +0900 Subject: fixed control points from moving --- .../views/collections/collectionFreeForm/FormatShapePane.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index a47430453..adb71c6aa 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -242,8 +242,8 @@ export default class FormatShapePane extends AntimodeMenu { } const oldx = doc.x; const oldy = doc.y; - const xs = newPoints.map(p => p.X); - const ys = newPoints.map(p => p.Y); + const xs = ink.map(p => p.X); + const ys = ink.map(p => p.Y); const left = Math.min(...xs); const top = Math.min(...ys); doc.data = new InkField(newPoints); @@ -255,9 +255,11 @@ export default class FormatShapePane extends AntimodeMenu { const bottom2 = Math.max(...ys2); doc._height = (bottom2 - top2); doc._width = (right2 - left2); - + //if points move out of bounds + console.log(doc.x); doc.x = oldx - (left - left2); doc.y = oldy - (top - top2); + console.log(doc.x); } } } -- cgit v1.2.3-70-g09d2 From f869c7a75eb6a2f6e6301aa76c57e383b41d3fea Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 27 Jul 2020 11:52:37 -0400 Subject: added hypothesis icon to toolbar. fixed toolbar to update to any document selection with specific items for each type. --- package-lock.json | 15 ++ package.json | 1 + src/client/views/MainView.tsx | 5 +- src/client/views/collections/CollectionMenu.tsx | 221 ++++++++++++--------- src/client/views/collections/CollectionSubView.tsx | 4 +- src/client/views/collections/CollectionView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 1 + 7 files changed, 149 insertions(+), 100 deletions(-) (limited to 'src') diff --git a/package-lock.json b/package-lock.json index 698bd60cc..51105842a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -301,6 +301,21 @@ "@fortawesome/fontawesome-common-types": "^0.2.29" } }, + "@fortawesome/free-brands-svg-icons": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.14.0.tgz", + "integrity": "sha512-WsqPFTvJFI7MYkcy0jeFE2zY+blC4OrnB9MJOcn1NxRXT/sSfEEhrI7CwzIkiYajLiVDBKWeErYOvpsMeodmCQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.30" + }, + "dependencies": { + "@fortawesome/fontawesome-common-types": { + "version": "0.2.30", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.30.tgz", + "integrity": "sha512-TsRwpTuKwFNiPhk1UfKgw7zNPeV5RhNp2Uw3pws+9gDAkPGKrtjR1y2lI3SYn7+YzyfuNknflpBA1LRKjt7hMg==" + } + } + }, "@fortawesome/free-regular-svg-icons": { "version": "5.13.1", "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.13.1.tgz", diff --git a/package.json b/package.json index 6c466825e..3b7b5f391 100644 --- a/package.json +++ b/package.json @@ -117,6 +117,7 @@ }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.29", + "@fortawesome/free-brands-svg-icons": "^5.14.0", "@fortawesome/free-regular-svg-icons": "^5.13.1", "@fortawesome/free-solid-svg-icons": "^5.13.1", "@fortawesome/react-fontawesome": "^0.1.11", diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index ae3f05fb7..9fad612ee 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -1,5 +1,8 @@ import { library } from '@fortawesome/fontawesome-svg-core'; +import { + faHireAHelper +} from '@fortawesome/free-brands-svg-icons'; import { faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, @@ -150,7 +153,7 @@ export class MainView extends React.Component { faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell, faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, - faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faMap, faUser); + faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faMap, faUser, faHireAHelper); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 24be69050..0b30b5a5f 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -30,16 +30,28 @@ import { ObjectField } from "../../../fields/ObjectField"; export default class CollectionMenu extends AntimodeMenu { static Instance: CollectionMenu; - @observable SelectedCollection: CollectionView | undefined; + @observable SelectedCollection: DocumentView | undefined; + @observable FieldKey: string; constructor(props: Readonly<{}>) { super(props); + this.FieldKey = ""; CollectionMenu.Instance = this; this._canFade = false; // don't let the inking menu fade away this.Pinned = Cast(Doc.UserDoc()["menuCollections-pinned"], "boolean", true); this.jumpTo(300, 300); } + componentDidMount() { + reaction(() => SelectionManager.SelectedDocuments().length && SelectionManager.SelectedDocuments()[0], + (doc) => doc && this.SetSelection(doc)) + } + + @action + SetSelection(view: DocumentView) { + this.SelectedCollection = view; + } + @action toggleMenuPin = (e: React.MouseEvent) => { Doc.UserDoc()["menuCollections-pinned"] = this.Pinned = !this.Pinned; @@ -54,14 +66,18 @@ export default class CollectionMenu extends AntimodeMenu { ; return this.getElement(!this.SelectedCollection ? [button] : - [, + [, button]); } } interface CollectionMenuProps { - CollectionView: CollectionView; type: CollectionViewType; + fieldKey: string; + docView: DocumentView; } const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation(); @@ -70,7 +86,8 @@ const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation(); export class CollectionViewBaseChrome extends React.Component { //(!)?\(\(\(doc.(\w+) && \(doc.\w+ as \w+\).includes\(\"(\w+)\"\) - get target() { return this.props.CollectionView.props.Document; } + get document() { return this.props.docView?.props.Document; } + get target() { return this.document; } _templateCommand = { params: ["target", "source"], title: "item view", script: "self.target.childLayoutTemplate = getDocTemplate(self.source?.[0])", @@ -121,16 +138,16 @@ export class CollectionViewBaseChrome extends React.Component(); @@ -165,21 +182,16 @@ export class CollectionViewBaseChrome extends React.Component); - case CollectionViewType.Stacking: return (); - case CollectionViewType.Schema: return (); - case CollectionViewType.Tree: return (); - case CollectionViewType.Masonry: return (); - case CollectionViewType.Carousel3D: return (); - case CollectionViewType.Grid: return (); - default: return null; + default: + case CollectionViewType.Freeform: return (); + case CollectionViewType.Stacking: return (); + case CollectionViewType.Schema: return (); + case CollectionViewType.Tree: return (); + case CollectionViewType.Masonry: return (); + case CollectionViewType.Carousel3D: return (); + case CollectionViewType.Grid: return (); } } - - private get document() { - return this.props.CollectionView.props.Document; - } - private dropDisposer?: DragManager.DragDropDisposer; protected createDropTarget = (ele: HTMLDivElement) => { this.dropDisposer?.(); @@ -201,15 +213,15 @@ export class CollectionViewBaseChrome extends React.Component { setupMoveUpEvents(this, e, (e, down, delta) => { - const vtype = this.props.CollectionView.collectionViewType; + const vtype = this.props.type; const c = { params: ["target"], title: vtype, - script: `this.target._viewType = '${StrCast(this.props.CollectionView.props.Document._viewType)}'`, - immediate: (source: Doc[]) => this.props.CollectionView.props.Document._viewType = Doc.getDocTemplate(source?.[0]), + script: `this.target._viewType = '${StrCast(this.props.type)}'`, + immediate: (source: Doc[]) => this.document._viewType = Doc.getDocTemplate(source?.[0]), initialize: emptyFunction, }; DragManager.StartButtonDrag([this._viewRef.current!], c.script, StrCast(c.title), - { target: this.props.CollectionView.props.Document }, c.params, c.initialize, e.clientX, e.clientY); + { target: this.document }, c.params, c.initialize, e.clientX, e.clientY); return true; }, emptyFunction, emptyFunction); } @@ -217,7 +229,7 @@ export class CollectionViewBaseChrome extends React.Component { this._buttonizableCommands.filter(c => c.title === this._currentKey).map(c => DragManager.StartButtonDrag([this._commandRef.current!], c.script, c.title, - { target: this.props.CollectionView.props.Document }, c.params, c.initialize, e.clientX, e.clientY)); + { target: this.document }, c.params, c.initialize, e.clientX, e.clientY)); return true; }, emptyFunction, () => { this._buttonizableCommands.filter(c => c.title === this._currentKey).map(c => c.immediate([])); @@ -251,7 +263,7 @@ export class CollectionViewBaseChrome extends React.Component + value={StrCast(this.props.type)}> {Object.values(CollectionViewType).map(type => [CollectionViewType.Invalid, CollectionViewType.Docking].includes(type) ? (null) : (