From 3ae79d3742030a255855d0c9c4ba8345f1cc73dd Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 9 Sep 2021 17:10:36 -0400 Subject: fixed infinite loop for context menus when right-clicking on them. --- src/client/util/CurrentUserUtils.ts | 6 +- src/client/views/collections/CollectionMenu.tsx | 10 +- .../collectionLinear/CollectionLinearView.tsx | 101 +++++++++++---------- 3 files changed, 63 insertions(+), 54 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 816503b37..8435825c9 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -1050,7 +1050,7 @@ export class CurrentUserUtils { }, // Only when a document is selected { title: "Header Color", toolTip: "Header Color", btnType: ButtonType.ColorButton, ignoreClick: true, icon: "heading", - script: "setHeaderColor", hidden: 'selectedDocumentType()' + script: "setHeaderColor", hidden: 'selectedDocumentType()', }, // Only when a document is selected { title: "Overlay", toolTip: "Overlay", btnType: ButtonType.ToggleButton, icon: "layer-group", click: 'toggleOverlay()', checkResult: 'toggleOverlay(true)', hidden: 'selectedDocumentType(undefined, "freeform", true)' }, // Only when floating document is selected in freeform // { title: "Alias", btnType: ButtonType.ClickButton, icon: "copy", hidden: 'selectedDocumentType()' }, // Only when a document is selected @@ -1137,9 +1137,9 @@ export class CurrentUserUtils { icon, toolTip, script, - btnType: btnType, + btnType, btnList: new List(list), - ignoreClick: ignoreClick, + ignoreClick, _stayInCollection: true, _hideContextMenu: true, _lockedPosition: true, diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 86bf9ad41..ce5846502 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -2,7 +2,7 @@ import React = require("react"); import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome"; import { Tooltip } from "@material-ui/core"; -import { action, computed, Lambda, observable, reaction, runInAction } from "mobx"; +import { action, computed, Lambda, observable, reaction, runInAction, trace } from "mobx"; import { observer } from "mobx-react"; import { ColorState } from "react-color"; import { Doc, DocListCast, Opt } from "../../../fields/Doc"; @@ -93,7 +93,11 @@ export class CollectionMenu extends AntimodeMenu { return new Transform(-translateX, -translateY, 1 / scale); } + panelWidth100 = () => 100; + panelHeight35 = () => 35; + @computed get contMenuButtons() { + trace(); const selDoc = Doc.UserDoc().contextMenuBtns; return !(selDoc instanceof Doc) ? (null) :
{ pinToPres={emptyFunction} removeDocument={returnFalse} ScreenToLocalTransform={this.buttonBarXf} - PanelWidth={() => 100} - PanelHeight={() => 35} + PanelWidth={this.panelWidth100} + PanelHeight={this.panelHeight35} renderDepth={0} focus={emptyFunction} whenChildContentsActiveChanged={emptyFunction} diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx index e78ca2a32..fae92e076 100644 --- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx +++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx @@ -1,8 +1,8 @@ import { Tooltip } from '@material-ui/core'; -import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; +import { action, IReactionDisposer, observable, reaction, runInAction, trace } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Doc, HeightSym, WidthSym } from '../../../../fields/Doc'; +import { Doc, HeightSym, WidthSym, Opt } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; import { Id } from '../../../../fields/FieldSymbols'; import { makeInterface } from '../../../../fields/Schema'; @@ -74,9 +74,9 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { } dimension = () => NumCast(this.rootDoc._height); // 2 * the padding - getTransform = (ele: React.RefObject) => () => { - if (!ele.current) return Transform.Identity(); - const { scale, translateX, translateY } = Utils.GetScreenTransform(ele.current); + getTransform = (ele: Opt) => { + if (!ele) return Transform.Identity(); + const { scale, translateX, translateY } = Utils.GetScreenTransform(ele); return new Transform(-translateX, -translateY, 1); } @@ -114,6 +114,53 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { e.preventDefault(); } + + getDisplayDoc(doc: Doc) { + const nested = doc._viewType === CollectionViewType.Linear; + const hidden = doc.hidden === true;; + + let dref: Opt; + const docXf = () => this.getTransform(dref); + // const scalable = pair.layout.onClick || pair.layout.onDragStart; + return hidden ? (null) :
dref = r || undefined} + style={{ + pointerEvents: "all", + width: nested ? undefined : NumCast(doc._width), + height: nested ? undefined : NumCast(doc._height), + marginLeft: !nested ? 2.5 : 0, + marginRight: !nested ? 2.5 : 0, + // width: NumCast(pair.layout._width), + // height: NumCast(pair.layout._height), + }} > + +
; + } + render() { const guid = Utils.GenerateGuid(); // Generate a unique ID to use as the label const flexDir: any = StrCast(this.Document.flexDirection); // Specify direction of linear view content @@ -151,49 +198,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { flexDirection: flexDir, gap: flexGap }}> - {this.childLayoutPairs.map((pair, ind) => { - const nested = pair.layout._viewType === CollectionViewType.Linear; - const dref = React.createRef(); - const hidden = pair.layout.hidden === true; - // const scalable = pair.layout.onClick || pair.layout.onDragStart; - return hidden ? (null) :
- -
; - })} + {this.childLayoutPairs.map(pair => this.getDisplayDoc(pair.layout))}
{DocumentLinksButton.StartLink && StrCast(this.layoutDoc.title) === "docked buttons" ?