From ed064aa7e98868809a0be711b070cef7adef186e Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Fri, 7 Aug 2020 17:54:51 +0530 Subject: minor changes + attempt to move around the notifs button --- src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 1a8ee3ea1..516160acc 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -959,9 +959,9 @@ export class PropertiesView extends React.Component {
{this.editableTitle}
- {PresBox.Instance?._selectedArray.length} selected + {PresBox.Instance._selectedArray.length} selected
- {PresBox.Instance?.listOfSelected} + {PresBox.Instance.listOfSelected}
-- cgit v1.2.3-70-g09d2 From 9a2221a65c56841a9d9cba57a1b260999a5f9f4d Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sat, 8 Aug 2020 00:15:35 -0500 Subject: fixing multiple undo bugs --- src/client/util/CurrentUserUtils.ts | 2 +- src/client/util/SettingsManager.tsx | 2 +- .../collectionFreeForm/MarqueeOptionsMenu.tsx | 62 ++++++++++++---------- .../collections/collectionFreeForm/MarqueeView.tsx | 3 +- 4 files changed, 38 insertions(+), 31 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index c205acb99..45d8da911 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -436,7 +436,7 @@ export class CurrentUserUtils { { toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc, noviceMode: true }, { toolTip: "Drag a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc, noviceMode: true }, - { toolTip: "Drag a presentation view", title: "Prezi", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc, noviceMode: true }, + { toolTip: "Drag a presentation view", title: "Present", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc, noviceMode: true }, { toolTip: "Drag a search box", title: "Query", icon: "search", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptySearch as Doc }, { toolTip: "Drag a scripting box", title: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc }, // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' }, diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 1a419b7c6..61112c694 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -138,7 +138,7 @@ export default class SettingsManager extends React.Component<{}> { Doc.UserDoc().fontSize = e.currentTarget.value; } - @action @undoBatch + @undoBatch @action switchColor = (color: ColorState) => { const val = String(color.hex); Doc.UserDoc().defaultColor = val; diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx index db4b674b5..d27ca7c3a 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx @@ -3,6 +3,8 @@ import AntimodeMenu from "../../AntimodeMenu"; import { observer } from "mobx-react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { unimplementedFunction } from "../../../../Utils"; +import { undoBatch } from "../../../util/UndoManager"; +import { Tooltip } from "@material-ui/core"; @observer export default class MarqueeOptionsMenu extends AntimodeMenu { @@ -23,34 +25,38 @@ export default class MarqueeOptionsMenu extends AntimodeMenu { render() { const buttons = [ - , - , - , - , +
Create a Collection
} placement="bottom"> + + , +
Summarize Documents
} placement="bottom"> + + , +
Delete Documents
} placement="bottom"> + + , +
Change to Text
} placement="bottom"> + + , ]; return this.getElement(buttons); } diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 88fe03efd..55614a8c2 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -390,8 +390,9 @@ export class MarqueeView extends React.Component { + console.log("CREATE"); const bounds = this.Bounds; const selected = this.marqueeSelect(false); if (e instanceof KeyboardEvent ? e.key === "c" : true) { -- cgit v1.2.3-70-g09d2 From fa01f623ef7db8e22f7fd055d4e339feba6c34df Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sat, 8 Aug 2020 00:44:46 -0500 Subject: more undos --- src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 55614a8c2..7ca06f0f9 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -392,7 +392,6 @@ export class MarqueeView extends React.Component { - console.log("CREATE"); const bounds = this.Bounds; const selected = this.marqueeSelect(false); if (e instanceof KeyboardEvent ? e.key === "c" : true) { @@ -416,7 +415,7 @@ export class MarqueeView extends React.Component { const selected = this.marqueeSelect(false); if (e instanceof KeyboardEvent ? e.key === "i" : true) { @@ -492,7 +491,7 @@ export class MarqueeView extends React.Component { const bounds = this.Bounds; const selected = this.marqueeSelect(false); -- cgit v1.2.3-70-g09d2 From 778c189edc73cdc6f672eff5166c23fd932740e3 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 9 Aug 2020 19:23:28 -0500 Subject: minor changes --- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/linking/LinkEditor.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index ef4b7b9d2..2b8e949b1 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1257,7 +1257,7 @@ export class CollectionFreeFormView extends CollectionSubView this.showTimeline = !this.showTimeline), icon: faEye }); this.props.ContainingCollectionView && - optionItems.push({ description: "Promote Collection", event: this.promoteCollection, icon: "table" }); + optionItems.push({ description: "Undo Collection", event: this.promoteCollection, icon: "table" }); optionItems.push({ description: this.layoutDoc._lockedTransform ? "Unlock Transform" : "Lock Transform", event: this.toggleLockTransform, icon: this.layoutDoc._lockedTransform ? "unlock" : "lock" }); optionItems.push({ description: "Use Background Color as Default", event: () => Cast(Doc.UserDoc().emptyCollection, Doc, null)._backgroundColor = StrCast(this.layoutDoc._backgroundColor), icon: "palette" }); if (!Doc.UserDoc().noviceMode) { diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 5832a2181..0470cf08b 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -382,7 +382,7 @@ export class LinkEditor extends React.Component {
this.changeFollowBehavior("onRight")}> - Always open in right tab + Always open in new pane on right
this.changeFollowBehavior("inTab")}> -- cgit v1.2.3-70-g09d2 From d4ca38801b19e38b49b087be3e510cc0fca33eb8 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Mon, 10 Aug 2020 22:20:15 +0900 Subject: fixed line, able to add/delete control points --- src/client/util/InteractionUtils.tsx | 60 ++++++++++++++++- src/client/views/GestureOverlay.tsx | 30 ++++----- src/client/views/InkingStroke.tsx | 30 ++++++++- .../collectionFreeForm/FormatShapePane.tsx | 76 ++++++++++++++++++++++ 4 files changed, 176 insertions(+), 20 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 04a750f93..ae3b3e064 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -91,15 +91,61 @@ export namespace InteractionUtils { return myTouches; } - export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, + export function CreatePoints(points: { X: number, Y: number }[], left: number, top: number, color: string, width: number, strokeWidth: number, bezier: string, fill: string, arrowStart: string, arrowEnd: string, dash: string, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean, nodefs: boolean) { + let pts: { X: number; Y: number; }[] = []; + if (shape) { //if any of the shape are true + pts = makePolygon(shape, points); + } + else if ((points.length >= 5 && points[3].X === points[4].X) || (points.length === 4)) { + 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); + 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[][]); + newPoints.pop(); + const bezierCurves = fitCurve(newPoints, parseInt(bezier)); + for (const curve of bezierCurves) { + for (var t = 0; t < 1; t += 0.01) { + const point = beziercurve(t, curve); + pts.push({ X: point[0], Y: point[1] }); + } + } + } else { + pts = points.slice(); + // bcz: Ugh... this is ugly, but shapes apprently have an extra point added that is = (p[0].x,p[0].y+1) as some sort of flag. need to remove it here. + if (pts.length > 2 && pts[pts.length - 2].X === pts[0].X && pts[pts.length - 2].Y === pts[0].Y) { + pts.pop(); + } + } + if (isNaN(scalex)) { + scalex = 1; + } + if (isNaN(scaley)) { + scaley = 1; + } + console.log(pts.length); + return pts; + } + + + + export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, + color: string, width: number, strokeWidth: number, bezier: string, fill: string, arrowStart: string, arrowEnd: string, + dash: string, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean, nodefs: boolean) { let pts: { X: number; Y: number; }[] = []; if (shape) { //if any of the shape are true pts = makePolygon(shape, points); } - else if (points.length >= 5 && points[3].X === points[4].X) { + else if ((points.length >= 5 && points[3].X === points[4].X) || (points.length === 4)) { 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) { @@ -139,6 +185,15 @@ export namespace InteractionUtils { const dashArray = String(Number(width) * Number(dash)); const defGuid = Utils.GenerateGuid(); const arrowDim = Math.max(0.5, 8 / Math.log(Math.max(2, strokeWidth))); + + const addables = pts.map((pts, i) => + + { console.log(i); }} pointerEvents="all" cursor="all-scroll" + /> + ); + + return ( {/* setting the svg fill sets the arrowStart fill */} {nodefs ? (null) : {arrowStart !== "dot" && arrowEnd !== "dot" ? (null) : @@ -167,6 +222,7 @@ export namespace InteractionUtils { markerStart={`url(#${arrowStart + "Start" + defGuid})`} markerEnd={`url(#${arrowEnd + "End" + defGuid})`} /> + {/* {addables} */} ); } diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 30df7cf9a..a9fc20174 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -817,21 +817,21 @@ export default class GestureOverlay extends Touchable { // const b = firsty - m * firstx; this._points.push({ X: firstx, Y: firsty }); this._points.push({ X: firstx, Y: firsty }); - - this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); - this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); - this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); - this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); - - this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); - this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); - this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); - this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); - - this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); - this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); - this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); - this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); + //removed points + // this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); + // this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); + // this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); + // this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); + + // this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); + // this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); + // this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); + // this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); + + // this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); + // this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); + // this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); + // this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); this._points.push({ X: firstx + 4 * fourth, Y: m * (firstx + 4 * fourth) + b }); this._points.push({ X: firstx + 4 * fourth, Y: m * (firstx + 4 * fourth) + b }); diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index fe5bf1eb2..0afc71e9b 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -52,8 +52,8 @@ export class InkingStroke extends ViewBoxBaseComponent { @@ -67,6 +67,7 @@ export class InkingStroke extends ViewBoxBaseComponent { FormatShapePane.Instance._currPoint = i; + document.addEventListener("keydown", this.delPts, true); } @action @@ -86,6 +87,13 @@ export class InkingStroke extends ViewBoxBaseComponent { + if (e instanceof KeyboardEvent ? e.key === "-" : true) { + FormatShapePane.Instance.deletePoints(); + } + } + public static MaskDim = 50000; render() { @@ -115,6 +123,12 @@ export class InkingStroke extends ViewBoxBaseComponent + + + { FormatShapePane.Instance.addPoints(pts.X, pts.Y, apoints, i, controlPoints); }} pointerEvents="all" cursor="all-scroll" + /> + ); + const controls = controlPoints.map((pts, i) => { this.changeCurrPoint(pts.I); this.onControlDown(e, pts.I); }} pointerEvents="all" cursor="all-scroll" /> + onPointerDown={(e) => { this.changeCurrPoint(pts.I); this.onControlDown(e, pts.I); }} pointerEvents="all" cursor="all-scroll" + /> ); const handles = handlePoints.map((pts, i) => @@ -193,6 +216,7 @@ export class InkingStroke extends ViewBoxBaseComponent {hpoints} {points} + {FormatShapePane.Instance._controlBtn && this.props.isSelected() ? addpoints : ""} {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 d526033a0..e805f9282 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -161,6 +161,82 @@ export default class FormatShapePane extends AntimodeMenu { } } + @undoBatch + @action + addPoints = (x: number, y: number, pts: { X: number, Y: number }[], index: number, control: { X: number, Y: number }[]) => { + this.selectedInk?.forEach(action(inkView => { + if (this.selectedInk?.length === 1) { + const doc = Document(inkView.rootDoc); + if (doc.type === DocumentType.INK) { + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + var counter = 0; + for (var k = 0; k < index; k++) { + for (var l = 0; l < control.length; l++) { + if (pts[k].X === control[l].X && pts[k].Y === control[l].Y) { + counter++; + } + } + } + //decide where to put the new coordinate + const spNum = Math.floor(counter / 2) * 4 + 2; + + for (var i = 0; i < spNum; i++) { + newPoints.push({ X: ink[i].X, Y: ink[i].Y }); + } + for (var j = 0; j < 4; j++) { + newPoints.push({ X: x, Y: y }); + + } + for (var i = spNum; i < ink.length; i++) { + newPoints.push({ X: ink[i].X, Y: ink[i].Y }); + } + this._currPoint = -1; + doc.data = new InkField(newPoints); + } + } + } + })); + } + + @undoBatch + @action + deletePoints = () => { + this.selectedInk?.forEach(action(inkView => { + if (this.selectedInk?.length === 1 && this._currPoint !== -1) { + const doc = Document(inkView.rootDoc); + if (doc.type === DocumentType.INK) { + const ink = Cast(doc.data, InkField)?.inkData; + if (ink && ink.length > 4) { + const newPoints: { X: number, Y: number }[] = []; + + console.log(ink.length, this._currPoint, Math.floor((this._currPoint + 2) / 4)); + + const toRemove = Math.floor(((this._currPoint + 2) / 4)); + for (var i = 0; i < ink.length; i++) { + if (Math.floor((i + 2) / 4) !== toRemove) { + console.log(i, toRemove); + newPoints.push({ X: ink[i].X, Y: ink[i].Y }); + } + } + this._currPoint = -1; + doc.data = new InkField(newPoints); + if (newPoints.length === 4) { + const newerPoints: { X: number, Y: number }[] = []; + newerPoints.push({ X: newPoints[0].X, Y: newPoints[0].Y }); + newerPoints.push({ X: newPoints[0].X, Y: newPoints[0].Y }); + newerPoints.push({ X: newPoints[3].X, Y: newPoints[3].Y }); + newerPoints.push({ X: newPoints[3].X, Y: newPoints[3].Y }); + doc.data = new InkField(newerPoints); + + } + } + } + } + })); + } + @undoBatch @action rotate = (angle: number) => { -- cgit v1.2.3-70-g09d2 From 03ae3477dac354eff9178dac701ee40e394434c9 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 10 Aug 2020 10:37:07 -0400 Subject: fixed issues with presentationBox grabbing all keyboard events and preventing title edits among others. fixed runtime errors. fixed groupManager to open again. --- src/client/util/SettingsManager.tsx | 2 +- src/client/views/GlobalKeyHandler.ts | 4 +++- .../views/collections/CollectionDockingView.tsx | 12 +++++++---- .../collectionFreeForm/MarqueeOptionsMenu.tsx | 12 ++++------- src/client/views/nodes/PresBox.tsx | 24 ++++++++++++++++++---- 5 files changed, 36 insertions(+), 18 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 513cece40..e3b91925a 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -146,7 +146,7 @@ export default class SettingsManager extends React.Component<{}> { @computed get accountsContent() { return
- +
; } diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 0ea02e3cb..182f6397c 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -108,7 +108,9 @@ export default class KeyManager { GoogleAuthenticationManager.Instance.cancel(); SharingManager.Instance.close(); GroupManager.Instance.close(); - CollectionFreeFormViewChrome.Instance.clearKeep(); + CollectionFreeFormViewChrome.Instance?.clearKeep(); + window.getSelection()?.empty(); + document.body.focus(); break; case "delete": case "backspace": diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 7e096fa37..0c93b4e63 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -513,7 +513,11 @@ export class CollectionDockingView extends React.Component tab.titleElement[0].focus(); + tab.titleElement[0].onclick = (e: any) => { + if (Date.now() - tab.titleElement[0].lastClick < 1000) tab.titleElement[0].select(); + tab.titleElement[0].lastClick = Date.now(); + tab.titleElement[0].focus(); + } tab.titleElement[0].onchange = (e: any) => { tab.titleElement[0].size = e.currentTarget.value.length + 1; Doc.GetProto(doc).title = e.currentTarget.value, true; @@ -691,8 +695,8 @@ export class DockedFrameRenderer extends React.Component { return (this.props as any).glContainer.parent.parent; } get _tab(): any { - const tab = (this.props as any).glContainer.tab.element[0] as HTMLElement; - return tab.getElementsByClassName("lm_title")?.[0]; + const tab = (this.props as any).glContainer.tab?.element[0] as HTMLElement; + return tab?.getElementsByClassName("lm_title")?.[0]; } constructor(props: any) { super(props); @@ -757,7 +761,7 @@ export class DockedFrameRenderer extends React.Component { this._tabReaction = reaction(() => ({ views: SelectionManager.SelectedDocuments(), color: StrCast(this._document?._backgroundColor, "white") }), (data) => { const selected = data.views.some(v => Doc.AreProtosEqual(v.props.Document, this._document)); - this._tab.style.backgroundColor = selected ? data.color : ""; + this._tab && (this._tab.style.backgroundColor = selected ? data.color : ""); } ); } diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx index d27ca7c3a..f1df7998b 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx @@ -25,34 +25,30 @@ export default class MarqueeOptionsMenu extends AntimodeMenu { render() { const buttons = [ -
Create a Collection
} placement="bottom"> +
Create a Collection
} placement="bottom"> , -
Summarize Documents
} placement="bottom"> +
Summarize Documents
} placement="bottom"> , -
Delete Documents
} placement="bottom"> +
Delete Documents
} placement="bottom"> , -
Change to Text
} placement="bottom"> +
Change to Text
} placement="bottom"> diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index b7af4683e..849fc4076 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -83,6 +83,7 @@ export class PresBox extends ViewBoxBaseComponent } @computed get isPres(): boolean { if (this.selectedDoc?.type === DocumentType.PRES) { + document.removeEventListener("keydown", this.keyEvents, true); document.addEventListener("keydown", this.keyEvents, true); return true; } else { @@ -91,6 +92,9 @@ export class PresBox extends ViewBoxBaseComponent } } @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } + componentWillUnmount() { + document.removeEventListener("keydown", this.keyEvents, true); + } componentDidMount() { this.rootDoc.presBox = this.rootDoc; @@ -517,29 +521,41 @@ export class PresBox extends ViewBoxBaseComponent // Key for when the presentaiton is active (according to Selection Manager) @action keyEvents = (e: KeyboardEvent) => { - e.stopPropagation(); - e.preventDefault(); - + let handled = false; + const anchorNode = document.activeElement as HTMLDivElement; + if (anchorNode && anchorNode.className?.includes("lm_title")) return; if (e.keyCode === 27) { // Escape key if (this.layoutDoc.presStatus === "edit") this._selectedArray = []; else this.layoutDoc.presStatus = "edit"; + handled = true; } if ((e.metaKey || e.altKey) && e.keyCode === 65) { // Ctrl-A to select all - if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs; + if (this.layoutDoc.presStatus === "edit") { + this._selectedArray = this.childDocs; + handled = true; + } } if (e.keyCode === 37 || e.keyCode === 38) { // left(37) / a(65) / up(38) to go back this.back(); + handled = true; } if (e.keyCode === 39 || e.keyCode === 40) { // right (39) / d(68) / down(40) to go to next this.next(); + handled = true; } if (e.keyCode === 32) { // spacebar to 'present' or autoplay if (this.layoutDoc.presStatus !== "edit") this.startAutoPres(0); else this.layoutDoc.presStatus = "manual"; + handled = true; } if (e.keyCode === 8) { // delete selected items if (this.layoutDoc.presStatus === "edit") { this._selectedArray.forEach((doc, i) => { this.removeDocument(doc); }); + handled = true; } } + if (handled) { + e.stopPropagation(); + e.preventDefault(); + } } /** -- cgit v1.2.3-70-g09d2 From 9351115c7ed7426f6e796a8d9310789c19ed86ef Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 10 Aug 2020 10:45:50 -0400 Subject: fixed warnings --- src/client/views/GestureOverlay.tsx | 59 ---------------------- .../collectionFreeForm/FormatShapePane.tsx | 6 +-- src/client/views/linking/LinkEditor.tsx | 2 +- 3 files changed, 2 insertions(+), 65 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index a9fc20174..81bb542dd 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -733,19 +733,8 @@ export default class GestureOverlay extends Touchable { this._points.push({ X: left, Y: top }); this._points.push({ X: left, Y: top }); - // this._points.push({ X: left, Y: top }); - - // 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 }); @@ -779,59 +768,11 @@ 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": - // const firstx = this._points[0].X; - // const firsty = this._points[0].Y; - // const lastx = this._points[this._points.length - 1].X; - // const lasty = this._points[this._points.length - 1].Y; - // const fourth = (lastx - firstx) / 4; - // const m = (lasty - firsty) / (lastx - firstx); - // const b = firsty - m * firstx; this._points.push({ X: firstx, Y: firsty }); this._points.push({ X: firstx, Y: firsty }); - //removed points - // this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); - // this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); - // this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); - // this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); - - // this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); - // this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); - // this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); - // this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); - - // this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); - // this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); - // this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); - // this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); this._points.push({ X: firstx + 4 * fourth, Y: m * (firstx + 4 * fourth) + b }); this._points.push({ X: firstx + 4 * fourth, Y: m * (firstx + 4 * fourth) + b }); diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index c53e4de0f..1ffa2fbed 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -173,11 +173,7 @@ export default class FormatShapePane extends AntimodeMenu { const newPoints: { X: number, Y: number }[] = []; var counter = 0; for (var k = 0; k < index; k++) { - for (var l = 0; l < control.length; l++) { - if (pts[k].X === control[l].X && pts[k].Y === control[l].Y) { - counter++; - } - } + control.forEach(pt => (pts[k].X === pt.X && pts[k].Y === pt.Y) && counter++); } //decide where to put the new coordinate const spNum = Math.floor(counter / 2) * 4 + 2; diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 1d71fff04..c9e39cf7b 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -359,7 +359,7 @@ export class LinkEditor extends React.Component { changeFollowBehavior = action((follow: string) => { this.openDropdown = false; Doc.GetProto(this.props.linkDoc).followLinkLocation = follow; - }) + }); @computed get followingDropdown() { -- cgit v1.2.3-70-g09d2 From 201dc881e15292ee4a013c72b9e473779cf14e18 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 11 Aug 2020 10:22:54 -0400 Subject: updated how background colors work --- src/client/documents/Documents.ts | 1 + src/client/util/CurrentUserUtils.ts | 13 ++++-- src/client/util/SettingsManager.tsx | 2 +- src/client/views/MainView.tsx | 6 +-- .../views/collections/CollectionCarouselView.tsx | 2 +- .../views/collections/CollectionDockingView.tsx | 4 +- .../views/collections/CollectionTreeView.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- .../collections/collectionFreeForm/MarqueeView.tsx | 46 ++++++++++------------ .../views/nodes/CollectionFreeFormDocumentView.tsx | 4 +- src/client/views/nodes/DocHolderBox.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 4 +- src/client/views/nodes/FieldView.tsx | 2 +- src/client/views/nodes/FontIconBox.tsx | 2 +- src/client/views/nodes/LinkBox.tsx | 2 +- src/client/views/nodes/MenuIconBox.tsx | 6 +-- 16 files changed, 51 insertions(+), 49 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 070fdf407..956a5645c 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -174,6 +174,7 @@ export interface DocumentOptions { onPointerUp?: ScriptField; dropConverter?: ScriptField; // script to run when documents are dropped on this Document. dragFactory?: Doc; // document to create when dragging with a suitable onDragStart script + clickFactory?: Doc; // document to create when clicking on a button with a suitable onClick script onDragStart?: ScriptField; //script to execute at start of drag operation -- e.g., when a "creator" button is dragged this script generates a different document to drop clipboard?: Doc; UseCors?: boolean; diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index e8c4da425..10fdbf534 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -387,7 +387,7 @@ export class CurrentUserUtils { static creatorBtnDescriptors(doc: Doc): { title: string, toolTip: string, icon: string, drag?: string, ignoreClick?: boolean, - click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, noviceMode?: boolean + click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, noviceMode?: boolean, clickFactory?: Doc }[] { if (doc.emptyPresentation === undefined) { doc.emptyPresentation = Docs.Create.PresDocument(new List(), @@ -397,6 +397,9 @@ export class CurrentUserUtils { doc.emptyCollection = Docs.Create.FreeformDocument([], { _nativeWidth: undefined, _nativeHeight: undefined, _width: 150, _height: 100, title: "freeform", system: true }); } + if (doc.emptyPane === undefined) { + doc.emptyPane = Docs.Create.FreeformDocument([], { _nativeWidth: undefined, _nativeHeight: undefined, title: "Untitled Collection", system: true }); + } if (doc.emptyComparison === undefined) { doc.emptyComparison = Docs.Create.ComparisonDocument({ title: "compare", _width: 300, _height: 300, system: true }); } @@ -427,7 +430,7 @@ export class CurrentUserUtils { this.setupActiveMobileMenu(doc); } return [ - { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc, noviceMode: true }, + { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.clickFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc, noviceMode: true, clickFactory: doc.emptyPane as Doc, }, { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc, noviceMode: true }, { toolTip: "Drag a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc }, { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc, noviceMode: true }, @@ -466,7 +469,7 @@ export class CurrentUserUtils { } } const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title)); - const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory, noviceMode }) => Docs.Create.FontIconDocument({ + const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory, noviceMode, clickFactory }) => Docs.Create.FontIconDocument({ _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, icon, title, @@ -480,6 +483,7 @@ export class CurrentUserUtils { backgroundColor, removeDropProperties: new List(["dropAction"]), dragFactory, + clickFactory, userDoc: noviceMode ? undefined as any : doc, hidden: noviceMode ? undefined as any : ComputedField.MakeFunction("self.userDoc.noviceMode"), system: true })); @@ -908,7 +912,8 @@ export class CurrentUserUtils { doc.fontFamily = StrCast(doc.fontFamily, "Arial"); doc.fontColor = StrCast(doc.fontColor, "black"); doc.fontHighlight = StrCast(doc.fontHighlight, ""); - doc.defaultColor = StrCast(doc.defaultColor, "white"); + doc["default-collection-background"] = StrCast(doc["default-collection-background"], "white"); + doc["default-collection-nested-background"] = Cast(doc["default-collection-nested-background"], "string", null); doc.noviceMode = BoolCast(doc.noviceMode, true); doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); // diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index e3b91925a..737682cf7 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -56,7 +56,7 @@ export default class SettingsManager extends React.Component<{}> { @undoBatch selectUserMode = action((e: React.ChangeEvent) => Doc.UserDoc().noviceMode = (e.currentTarget as any)?.value === "Novice"); @undoBatch changeFontFamily = action((e: React.ChangeEvent) => Doc.UserDoc().fontFamily = (e.currentTarget as any).value); @undoBatch changeFontSize = action((e: React.ChangeEvent) => Doc.UserDoc().fontSize = (e.currentTarget as any).value); - @undoBatch switchColor = action((color: ColorState) => Doc.UserDoc().defaultColor = String(color.hex)); + @undoBatch switchColor = action((color: ColorState) => Doc.UserDoc()["default-collection-background"] = String(color.hex)); @undoBatch playgroundModeToggle = action(() => { this.playgroundMode = !this.playgroundMode; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 4d5dfc99e..3cbc00c92 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -258,7 +258,7 @@ export class MainView extends React.Component { y: 400, _width: this._panelWidth * .7 - this.propertiesWidth() * 0.7, _height: this._panelHeight, - title: "Collection " + workspaceCount, + title: "Untitled Collection", }; const freeformDoc = CurrentUserUtils.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions); const workspaceDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600, path: [Doc.UserDoc().myCatalog as Doc] }], { title: `Workspace ${workspaceCount}` }, id, "row"); @@ -332,7 +332,7 @@ export class MainView extends React.Component { getPHeight = () => this._panelHeight; getContentsHeight = () => this._panelHeight - this._buttonBarHeight; - defaultBackgroundColors = (doc: Opt) => { + defaultBackgroundColors = (doc: Opt, renderDepth: number) => { if (this.panelContent === doc?.title) return "lightgrey"; if (doc?.type === DocumentType.COL) { @@ -342,7 +342,7 @@ export class MainView extends React.Component { || doc.title === "Advanced Item Prototypes" || doc.title === "all Creators") { return "lightgrey"; } - return StrCast(Doc.UserDoc().defaultColor); + return renderDepth > 0 ? StrCast(Doc.UserDoc()["default-collection-nested-background"]) : StrCast(Doc.UserDoc()["default-collection-background"]); } if (this.darkScheme) { switch (doc?.type) { diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 27aea4b99..8a27f8102 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -64,7 +64,7 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument)
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 3691e844f..7db846f72 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -758,7 +758,7 @@ export class DockedFrameRenderer extends React.Component { this.props.glContainer.layoutManager.on("activeContentItemChanged", this.onActiveContentItemChanged); this.props.glContainer.on("tab", this.onActiveContentItemChanged); this.onActiveContentItemChanged(); - this._tabReaction = reaction(() => ({ views: SelectionManager.SelectedDocuments(), color: StrCast(this._document?._backgroundColor, "white") }), + this._tabReaction = reaction(() => ({ views: SelectionManager.SelectedDocuments(), color: StrCast(this._document?._backgroundColor, this._document && CollectionDockingView.Instance.props.backgroundColor?.(this._document, 0) || "white") }), (data) => { const selected = data.views.some(v => Doc.AreProtosEqual(v.props.Document, this._document)); this._tab && (this._tab.style.backgroundColor = selected ? data.color : ""); @@ -896,7 +896,7 @@ export class DockedFrameRenderer extends React.Component { renderMiniMap() { return
{ - let clusterColor = this.props.backgroundColor?.(doc); + let clusterColor = this.props.backgroundColor?.(doc, this.props.renderDepth + 1); const cluster = NumCast(doc.cluster); if (this.Document.useClusters) { if (this._clusterSets.length <= cluster) { diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 1a708d67d..68b8ed041 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -21,6 +21,7 @@ import { CollectionView } from "../CollectionView"; import MarqueeOptionsMenu from "./MarqueeOptionsMenu"; import "./MarqueeView.scss"; import React = require("react"); +import { ContextMenuItem } from "../../ContextMenuItem"; interface MarqueeViewProps { getContainerTransform: () => Transform; @@ -70,23 +71,19 @@ export class MarqueeView extends React.Component { //make textbox and add it to this collection // tslint:disable-next-line:prefer-const - let [x, y] = this.props.getTransform().transformPoint(this._downX, this._downY); + const cm = ContextMenu.Instance; + const [x, y] = this.props.getTransform().transformPoint(this._downX, this._downY); if (e.key === "?") { - ContextMenu.Instance.setDefaultItem("?", (str: string) => { - const textDoc = Docs.Create.WebDocument(`https://bing.com/search?q=${str}`, { - _width: 200, x, y, _nativeHeight: 962, _nativeWidth: 850, isAnnotating: false, - title: "bing", UseCors: true - }); - this.props.addDocTab(textDoc, "onRight"); - }); + cm.setDefaultItem("?", (str: string) => this.props.addDocTab( + Docs.Create.WebDocument(`https://bing.com/search?q=${str}`, { _width: 200, x, y, _nativeHeight: 962, _nativeWidth: 850, isAnnotating: false, title: "bing", UseCors: true }), "onRight")); - ContextMenu.Instance.displayMenu(this._downX, this._downY); + cm.displayMenu(this._downX, this._downY); e.stopPropagation(); } else if (e.key === ":") { DocUtils.addDocumentCreatorMenuItems(this.props.addLiveTextDocument, this.props.addDocument, x, y); - ContextMenu.Instance.displayMenu(this._downX, this._downY); + cm.displayMenu(this._downX, this._downY); e.stopPropagation(); } else if (e.key === "a" && (e.ctrlKey || e.metaKey)) { e.preventDefault(); @@ -359,24 +356,23 @@ export class MarqueeView extends React.Component, options: DocumentOptions, id?: string) => Doc>, isBackground?: boolean) => { - const bounds = this.Bounds; - // const inkData = this.ink ? this.ink.inkData : undefined; - const newCollection = (creator || Docs.Create.FreeformDocument)(selected, { - x: bounds.left, - y: bounds.top, - _panX: 0, - _panY: 0, - isBackground, - backgroundColor: this.props.isAnnotationOverlay ? "#00000015" : isBackground ? "cyan" : undefined, - _width: bounds.width, - _height: bounds.height, - title: "a nested collection", - }); + getCollection = action((selected: Doc[], creator: Opt<(documents: Array, options: DocumentOptions, id?: string) => Doc>, isBackground?: boolean) => { + const newCollection = creator ? creator(selected, { title: "nested stack", }) : ((doc: Doc) => { + Doc.GetProto(doc).data = new List(selected); + Doc.GetProto(doc).title = "nested freeform"; + doc._panX = doc._panY = 0; + return doc; + })(Doc.MakeCopy(Doc.UserDoc().emptyCollection as Doc, true)); + newCollection.isBackground = isBackground; + newCollection.backgroundColor = this.props.isAnnotationOverlay ? "#00000015" : isBackground ? "cyan" : undefined; + newCollection._width = this.Bounds.width; + newCollection._height = this.Bounds.height; + newCollection.x = this.Bounds.left; + newCollection.y = this.Bounds.top; selected.forEach(d => d.context = newCollection); this.hideMarquee(); return newCollection; - } + }); @action pileup = (e: KeyboardEvent | React.PointerEvent | undefined) => { diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 42a42ddf1..63869bd50 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -267,13 +267,13 @@ export class CollectionFreeFormDocumentView extends DocComponent this.nativeHeight; render() { TraceMobx(); - const backgroundColor = StrCast(this.layoutDoc._backgroundColor) || StrCast(this.layoutDoc.backgroundColor) || StrCast(this.Document.backgroundColor) || this.props.backgroundColor?.(this.Document); + const backgroundColor = StrCast(this.layoutDoc._backgroundColor) || StrCast(this.layoutDoc.backgroundColor) || StrCast(this.Document.backgroundColor) || this.props.backgroundColor?.(this.Document, this.props.renderDepth); return
boolean; pinToPres: (document: Doc) => void; backgroundHalo?: () => boolean; - backgroundColor?: (doc: Doc) => string | undefined; + backgroundColor?: (doc: Doc, renderDepth: number) => string | undefined; forcedBackgroundColor?: (doc: Doc) => string | undefined; opacity?: () => number | undefined; ChromeHeight?: () => number; @@ -1004,7 +1004,7 @@ export class DocumentView extends DocComponent(Docu if (!(this.props.Document instanceof Doc)) return (null); if (GetEffectiveAcl(this.props.Document) === AclPrivate) return (null); if (this.props.Document.hidden) return (null); - const backgroundColor = Doc.UserDoc().renderStyle === "comic" ? undefined : this.props.forcedBackgroundColor?.(this.Document) || StrCast(this.layoutDoc._backgroundColor) || StrCast(this.layoutDoc.backgroundColor) || StrCast(this.Document.backgroundColor) || this.props.backgroundColor?.(this.Document); + const backgroundColor = Doc.UserDoc().renderStyle === "comic" ? undefined : this.props.forcedBackgroundColor?.(this.Document) || StrCast(this.layoutDoc._backgroundColor) || StrCast(this.layoutDoc.backgroundColor) || StrCast(this.Document.backgroundColor) || this.props.backgroundColor?.(this.Document, this.props.renderDepth); const opacity = Cast(this.layoutDoc._opacity, "number", Cast(this.layoutDoc.opacity, "number", Cast(this.Document.opacity, "number", null))); const finalOpacity = this.props.opacity ? this.props.opacity() : opacity; const finalColor = this.layoutDoc.type === DocumentType.FONTICON || this.layoutDoc._viewType === CollectionViewType.Linear ? undefined : backgroundColor; diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index e631ad5fe..fe0ea80d5 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -38,7 +38,7 @@ export interface FieldViewProps { pinToPres: (document: Doc) => void; removeDocument?: (document: Doc | Doc[]) => boolean; moveDocument?: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; - backgroundColor?: (document: Doc) => string | undefined; + backgroundColor?: (document: Doc, renderDepth: number) => string | undefined; ScreenToLocalTransform: () => Transform; bringToFront: (doc: Doc, sendToBack?: boolean) => void; active: (outsideReaction?: boolean) => boolean; diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx index a6b1678b5..144defbb0 100644 --- a/src/client/views/nodes/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox.tsx @@ -61,7 +61,7 @@ export class FontIconBox extends DocComponent( render() { const label = StrCast(this.rootDoc.label, StrCast(this.rootDoc.title)); const color = StrCast(this.layoutDoc.color, this._foregroundColor); - const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc))); + const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc, this.props.renderDepth))); const shape = StrCast(this.layoutDoc.iconShape, "round"); const button =