diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 26 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 41 | ||||
| -rw-r--r-- | src/fields/ScriptField.ts | 4 |
3 files changed, 45 insertions, 26 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 37ffcb78e..c205acb99 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -248,8 +248,8 @@ export class CurrentUserUtils { if (doc["template-buttons"] === undefined) { doc["template-buttons"] = new PrefetchProxy(Docs.Create.MasonryDocument(requiredTypes, { title: "Advanced Item Prototypes", _xMargin: 0, _showTitle: "title", - hidden: ComputedField.MakeFunction("self.target.noviceMode") as any, - target: doc, + hidden: ComputedField.MakeFunction("self.userDoc.noviceMode") as any, + userDoc: doc, _autoHeight: true, _width: 500, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), })); @@ -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 + click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, noviceMode?: boolean }[] { if (doc.emptyPresentation === undefined) { doc.emptyPresentation = Docs.Create.PresDocument(new List<Doc>(), @@ -427,16 +427,16 @@ 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 }, - { 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 }, + { 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 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 }, + { 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 }, { toolTip: "Drag a screengrabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc }, // { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' }, - { 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 }, - { toolTip: "Drag a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc }, + { 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 }, + { 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 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 })' }, @@ -465,7 +465,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 }) => Docs.Create.FontIconDocument({ + const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory, noviceMode }) => Docs.Create.FontIconDocument({ _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, icon, title, @@ -479,6 +479,8 @@ export class CurrentUserUtils { backgroundColor, removeDropProperties: new List<string>(["dropAction"]), dragFactory, + userDoc: noviceMode ? undefined as any : doc, + hidden: noviceMode ? undefined as any : ComputedField.MakeFunction("self.userDoc.noviceMode") })); if (dragCreatorSet === undefined) { @@ -532,8 +534,8 @@ export class CurrentUserUtils { onClick: ScriptField.MakeScript(click, { scriptContext: "any" }), })); const userDoc = menuBtns[menuBtns.length - 1]; - userDoc.target = doc; - userDoc.hidden = ComputedField.MakeFunction("self.target.noviceMode"); + userDoc.userDoc = doc; + userDoc.hidden = ComputedField.MakeFunction("self.userDoc.noviceMode"); doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument(menuBtns, { title: "menuItemPanel", diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 516160acc..9d4c07881 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -22,13 +22,13 @@ import { InkField } from "../../../../fields/InkField"; import { undoBatch, UndoManager } from "../../../util/UndoManager"; import { ColorState, SketchPicker } from "react-color"; import "./FormatShapePane.scss"; -import { discovery_v1 } from "googleapis"; import { PresBox } from "../../nodes/PresBox"; import { DocumentManager } from "../../../util/DocumentManager"; import FormatShapePane from "./FormatShapePane"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; +const _global = (window /* browser */ || global /* node */) as any; // import * as fa from '@fortawesome/free-solid-svg-icons'; // import { library } from "@fortawesome/fontawesome-svg-core"; @@ -52,7 +52,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { @computed get selectedDocumentView() { if (SelectionManager.SelectedDocuments().length) { return SelectionManager.SelectedDocuments()[0]; - } else if (PresBox.Instance._selectedArray.length) { + } else if (PresBox.Instance?._selectedArray.length) { return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); } else { return undefined; } } @@ -247,12 +247,23 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { return false; } + @observable transform: Transform = Transform.Identity(); + getTransform = () => { return this.transform; } + propertiesDocViewRef = (ref: HTMLDivElement) => { + const observer = new _global.ResizeObserver(action((entries: any) => { + const cliRect = ref.getBoundingClientRect(); + this.transform = new Transform(-cliRect.x, -cliRect.y, 1); + })); + ref && observer.observe(ref); + } + + previewBackground = () => "lightgrey"; @computed get layoutPreview() { if (this.selectedDoc) { const layoutDoc = Doc.Layout(this.selectedDoc); const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docHeight; const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth; - return <div style={{ display: "inline-block", height: panelHeight() }} key={this.selectedDoc[Id]}> + return <div ref={this.propertiesDocViewRef} style={{ pointerEvents: "none", display: "inline-block", height: panelHeight() }} key={this.selectedDoc[Id]}> <ContentFittingDocumentView Document={layoutDoc} DataDoc={this.dataDoc} @@ -260,7 +271,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { renderDepth={this.props.renderDepth + 1} rootSelected={returnFalse} treeViewDoc={undefined} - backgroundColor={() => "lightgrey"} + backgroundColor={this.previewBackground} fitToBox={true} FreezeDimensions={true} NativeWidth={layoutDoc.type === @@ -270,7 +281,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { PanelWidth={panelWidth} PanelHeight={panelHeight} focus={returnFalse} - ScreenToLocalTransform={this.props.ScreenToLocalTransform} + ScreenToLocalTransform={this.getTransform} docFilters={returnEmptyFilter} ContainingCollectionDoc={undefined} ContainingCollectionView={undefined} @@ -320,7 +331,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { * @returns the notification icon. On clicking, it should notify someone of a document been shared with them. */ @computed get notifyIcon() { - return <Tooltip title={<><div className="dash-tooltip">Notify with message</div></>}> + return <Tooltip title={<div className="dash-tooltip">Notify with message</div>}> <div className="notify-button"> <FontAwesomeIcon className="notify-button-icon" icon="bell" color="white" size="sm" /> </div> @@ -331,7 +342,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { * ... next to the owner that opens the main SharingManager interface on click. */ @computed get expansionIcon() { - return <Tooltip title={<><div className="dash-tooltip">{"Show more permissions"}</div></>}> + return <Tooltip title={<div className="dash-tooltip">{"Show more permissions"}</div>}> <div className="expansion-button" onPointerDown={() => { if (this.selectedDocumentView) { SharingManager.Instance.open(this.selectedDocumentView); @@ -346,7 +357,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { * @returns a row of the permissions panel */ sharingItem(name: string, effectiveAcl: symbol, permission: string) { - return <div className="propertiesView-sharingTable-item" + return <div className="propertiesView-sharingTable-item" key={name + permission} // style={{ backgroundColor: this.selectedUser === name ? "#bcecfc" : "" }} // onPointerDown={action(() => this.selectedUser = this.selectedUser === name ? "" : name)} > @@ -378,7 +389,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { if (this.selectedDoc![AclSym]) { for (const [key, value] of Object.entries(this.selectedDoc![AclSym])) { const name = key.substring(4).replace("_", "."); - if (name !== Doc.CurrentUserEmail && name !== this.selectedDoc!.author/* && sidebarUsersDisplayed![name] !== false*/) tableEntries.push(this.sharingItem(name, effectiveAcl, AclMap.get(value)!)); + if (name !== Doc.CurrentUserEmail && name !== this.selectedDoc!.author/* && sidebarUsersDisplayed![name] !== false*/) { + tableEntries.push(this.sharingItem(name, effectiveAcl, AclMap.get(value)!)); + } } } @@ -484,17 +497,17 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { @computed get controlPointsButton() { return <div className="inking-button"> - <Tooltip title={<><div className="dash-tooltip">{"Edit points"}</div></>}> + <Tooltip title={<div className="dash-tooltip">{"Edit points"}</div>}> <div className="inking-button-points" onPointerDown={action(() => FormatShapePane.Instance._controlBtn = !FormatShapePane.Instance._controlBtn)} style={{ backgroundColor: FormatShapePane.Instance._controlBtn ? "black" : "" }}> <FontAwesomeIcon icon="bezier-curve" color="white" size="lg" /> </div> </Tooltip> - <Tooltip title={<><div className="dash-tooltip">{FormatShapePane.Instance._lock ? "Unlock ratio" : "Lock ratio"}</div></>}> + <Tooltip title={<div className="dash-tooltip">{FormatShapePane.Instance._lock ? "Unlock ratio" : "Lock ratio"}</div>}> <div className="inking-button-lock" onPointerDown={action(() => FormatShapePane.Instance._lock = !FormatShapePane.Instance._lock)} > <FontAwesomeIcon icon={FormatShapePane.Instance._lock ? "lock" : "unlock"} color="white" size="lg" /> </div> </Tooltip> - <Tooltip title={<><div className="dash-tooltip">{"Rotate 90˚"}</div></>}> + <Tooltip title={<div className="dash-tooltip">{"Rotate 90˚"}</div>}> <div className="inking-button-rotate" onPointerDown={action(() => this.rotate(Math.PI / 2))}> <FontAwesomeIcon icon="undo" color="white" size="lg" /> </div> @@ -943,12 +956,12 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { <FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="white" /> </div> </div> - {this.openLayout ? <div className="propertiesView-layout-content">{this.layoutPreview}</div> : null} + {this.openLayout ? <div className="propertiesView-layout-content" >{this.layoutPreview}</div> : null} </div> </div>; } if (this.isPres) { - const selectedItem: boolean = PresBox.Instance._selectedArray.length > 0; + const selectedItem: boolean = PresBox.Instance?._selectedArray.length > 0; return <div className="propertiesView" style={{ width: this.props.width }} > <div className="propertiesView-title" style={{ width: this.props.width }}> Presentation diff --git a/src/fields/ScriptField.ts b/src/fields/ScriptField.ts index f55483a5b..4cc3a7cc7 100644 --- a/src/fields/ScriptField.ts +++ b/src/fields/ScriptField.ts @@ -53,6 +53,9 @@ async function deserializeScript(script: ScriptField) { if (script.script.originalScript === 'convertToButtons(dragData)') { return (script as any).script = (ScriptField.ConvertToButtons ?? (ScriptField.ConvertToButtons = ComputedField.MakeFunction('convertToButtons(dragData)', { dragData: "DocumentDragData" })))?.script; } + if (script.script.originalScript === 'self.userDoc.noviceMode') { + return (script as any).script = (ScriptField.NoviceMode ?? (ScriptField.NoviceMode = ComputedField.MakeFunction('self.userDoc.noviceMode')))?.script; + } const captures: ProxyField<Doc> = (script as any).captures; if (captures) { const doc = (await captures.value())!; @@ -85,6 +88,7 @@ export class ScriptField extends ObjectField { public static OpenOnRight: Opt<ScriptField>; public static DeiconifyView: Opt<ScriptField>; public static ConvertToButtons: Opt<ScriptField>; + public static NoviceMode: Opt<ScriptField>; constructor(script: CompiledScript, setterscript?: CompiledScript) { super(); |