From cdd96649cb4a32ee9991deb314c4bd14a8352a6f Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 7 Aug 2020 08:23:11 -0400 Subject: added novice mode entries for creator buttons. fixed screentransform for propertiesview preview. fixed other runtime errors. --- src/client/util/CurrentUserUtils.ts | 18 +++++----- .../collectionFreeForm/PropertiesView.tsx | 38 ++++++++++++++-------- 2 files changed, 35 insertions(+), 21 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 37ffcb78e..0ed03cebe 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 + click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, noviceMode?: boolean }[] { if (doc.emptyPresentation === undefined) { doc.emptyPresentation = Docs.Create.PresDocument(new List(), @@ -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(["dropAction"]), dragFactory, + target: noviceMode ? undefined as any : doc, + hidden: noviceMode ? undefined as any : ComputedField.MakeFunction("self.target.noviceMode") })); if (dragCreatorSet === undefined) { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 1a8ee3ea1..bc2c9422c 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 { @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,22 @@ export class PropertiesView extends React.Component { 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); + } + @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
+ return
{ PanelWidth={panelWidth} PanelHeight={panelHeight} focus={returnFalse} - ScreenToLocalTransform={this.props.ScreenToLocalTransform} + ScreenToLocalTransform={this.getTransform} docFilters={returnEmptyFilter} ContainingCollectionDoc={undefined} ContainingCollectionView={undefined} @@ -320,7 +330,7 @@ export class PropertiesView extends React.Component { * @returns the notification icon. On clicking, it should notify someone of a document been shared with them. */ @computed get notifyIcon() { - return
Notify with message
}> + return Notify with message
}>
@@ -331,7 +341,7 @@ export class PropertiesView extends React.Component { * ... next to the owner that opens the main SharingManager interface on click. */ @computed get expansionIcon() { - return
{"Show more permissions"}
}> + return {"Show more permissions"}
}>
{ if (this.selectedDocumentView) { SharingManager.Instance.open(this.selectedDocumentView); @@ -346,7 +356,7 @@ export class PropertiesView extends React.Component { * @returns a row of the permissions panel */ sharingItem(name: string, effectiveAcl: symbol, permission: string) { - return
this.selectedUser = this.selectedUser === name ? "" : name)} > @@ -378,7 +388,9 @@ export class PropertiesView extends React.Component { 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 +496,17 @@ export class PropertiesView extends React.Component { @computed get controlPointsButton() { return
-
{"Edit points"}
}> + {"Edit points"}
}>
FormatShapePane.Instance._controlBtn = !FormatShapePane.Instance._controlBtn)} style={{ backgroundColor: FormatShapePane.Instance._controlBtn ? "black" : "" }}>
-
{FormatShapePane.Instance._lock ? "Unlock ratio" : "Lock ratio"}
}> + {FormatShapePane.Instance._lock ? "Unlock ratio" : "Lock ratio"}
}>
FormatShapePane.Instance._lock = !FormatShapePane.Instance._lock)} >
-
{"Rotate 90˚"}
}> + {"Rotate 90˚"}
}>
this.rotate(Math.PI / 2))}>
@@ -943,12 +955,12 @@ export class PropertiesView extends React.Component { - {this.openLayout ?
{this.layoutPreview}
: null} + {this.openLayout ?
{this.layoutPreview}
: null} ; } if (this.isPres) { - const selectedItem: boolean = PresBox.Instance._selectedArray.length > 0; + const selectedItem: boolean = PresBox.Instance?._selectedArray.length > 0; return
Presentation -- cgit v1.2.3-70-g09d2 From 58f67868c705899562b3a35dd0bf3771d074d6a0 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 7 Aug 2020 08:27:53 -0400 Subject: made propertiesview preview unclickable. --- src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index bc2c9422c..15900aa33 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -257,12 +257,13 @@ export class PropertiesView extends React.Component { 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
+ return
{ renderDepth={this.props.renderDepth + 1} rootSelected={returnFalse} treeViewDoc={undefined} - backgroundColor={() => "lightgrey"} + backgroundColor={this.previewBackground} fitToBox={true} FreezeDimensions={true} NativeWidth={layoutDoc.type === -- cgit v1.2.3-70-g09d2 From b02cfed890d9d95a8f45bbc93d688bd3311dd387 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 7 Aug 2020 08:37:02 -0400 Subject: tweaked noviceMode script to use non-generic variables & added ScriptField cache to avoid multiple scripts. --- src/client/util/CurrentUserUtils.ts | 12 ++++++------ src/fields/ScriptField.ts | 4 ++++ 2 files changed, 10 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 0ed03cebe..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 }), })); @@ -479,8 +479,8 @@ export class CurrentUserUtils { backgroundColor, removeDropProperties: new List(["dropAction"]), dragFactory, - target: noviceMode ? undefined as any : doc, - hidden: noviceMode ? undefined as any : ComputedField.MakeFunction("self.target.noviceMode") + userDoc: noviceMode ? undefined as any : doc, + hidden: noviceMode ? undefined as any : ComputedField.MakeFunction("self.userDoc.noviceMode") })); if (dragCreatorSet === undefined) { @@ -534,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/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 = (script as any).captures; if (captures) { const doc = (await captures.value())!; @@ -85,6 +88,7 @@ export class ScriptField extends ObjectField { public static OpenOnRight: Opt; public static DeiconifyView: Opt; public static ConvertToButtons: Opt; + public static NoviceMode: Opt; constructor(script: CompiledScript, setterscript?: CompiledScript) { super(); -- cgit v1.2.3-70-g09d2