diff options
Diffstat (limited to 'src/client/views/nodes')
| -rw-r--r-- | src/client/views/nodes/AudioBox.scss | 4 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentBox.tsx | 8 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentContentsView.tsx | 14 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.scss | 4 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 40 | ||||
| -rw-r--r-- | src/client/views/nodes/FormattedTextBox.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/nodes/LabelBox.scss (renamed from src/client/views/nodes/ButtonBox.scss) | 10 | ||||
| -rw-r--r-- | src/client/views/nodes/LabelBox.tsx (renamed from src/client/views/nodes/ButtonBox.tsx) | 22 | ||||
| -rw-r--r-- | src/client/views/nodes/LinkAnchorBox.scss (renamed from src/client/views/nodes/DocuLinkBox.scss) | 6 | ||||
| -rw-r--r-- | src/client/views/nodes/LinkAnchorBox.tsx (renamed from src/client/views/nodes/DocuLinkBox.tsx) | 20 | ||||
| -rw-r--r-- | src/client/views/nodes/PDFBox.tsx | 3 | ||||
| -rw-r--r-- | src/client/views/nodes/PresBox.tsx | 10 | ||||
| -rw-r--r-- | src/client/views/nodes/ScriptingBox.scss | 0 | ||||
| -rw-r--r-- | src/client/views/nodes/ScriptingBox.tsx | 71 | ||||
| -rw-r--r-- | src/client/views/nodes/VideoBox.tsx | 2 |
15 files changed, 144 insertions, 74 deletions
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index fb16b8365..53b54d7e4 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -88,7 +88,7 @@ opacity:0.9; background-color: transparent; box-shadow: black 2px 2px 1px; - .docuLinkBox-cont { + .linkAnchorBox-cont { position: relative !important; height: 100% !important; width: 100% !important; @@ -103,7 +103,7 @@ box-shadow: black 1px 1px 1px; margin-left: -1; margin-top: -2; - .docuLinkBox-cont { + .linkAnchorBox-cont { position: relative !important; height: 100% !important; width: 100% !important; diff --git a/src/client/views/nodes/DocumentBox.tsx b/src/client/views/nodes/DocumentBox.tsx index 0e2685d41..4f2b3b656 100644 --- a/src/client/views/nodes/DocumentBox.tsx +++ b/src/client/views/nodes/DocumentBox.tsx @@ -18,12 +18,12 @@ import { TraceMobx } from "../../../new_fields/util"; import { DocumentView } from "./DocumentView"; import { Docs } from "../../documents/Documents"; -type DocBoxSchema = makeInterface<[typeof documentSchema]>; -const DocBoxDocument = makeInterface(documentSchema); +type DocHolderBoxSchema = makeInterface<[typeof documentSchema]>; +const DocHolderBoxDocument = makeInterface(documentSchema); @observer -export class DocumentBox extends DocAnnotatableComponent<FieldViewProps, DocBoxSchema>(DocBoxDocument) { - public static LayoutString(fieldKey: string) { return FieldView.LayoutString(DocumentBox, fieldKey); } +export class DocHolderBox extends DocAnnotatableComponent<FieldViewProps, DocHolderBoxSchema>(DocHolderBoxDocument) { + public static LayoutString(fieldKey: string) { return FieldView.LayoutString(DocHolderBox, fieldKey); } _prevSelectionDisposer: IReactionDisposer | undefined; _selections: Doc[] = []; _curSelection = -1; diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index dc71ba280..7522af3a3 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -3,7 +3,6 @@ import { observer } from "mobx-react"; import { Doc, Opt } from "../../../new_fields/Doc"; import { Cast, StrCast } from "../../../new_fields/Types"; import { OmitKeys, Without } from "../../../Utils"; -import { HistogramBox } from "../../northstar/dash-nodes/HistogramBox"; import DirectoryImportBox from "../../util/Import & Export/DirectoryImportBox"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; @@ -11,10 +10,11 @@ import { CollectionSchemaView } from "../collections/CollectionSchemaView"; import { CollectionView } from "../collections/CollectionView"; import { YoutubeBox } from "./../../apis/youtube/YoutubeBox"; import { AudioBox } from "./AudioBox"; -import { ButtonBox } from "./ButtonBox"; +import { LabelBox } from "./LabelBox"; import { SliderBox } from "./SliderBox"; import { LinkBox } from "./LinkBox"; -import { DocumentBox } from "./DocumentBox"; +import { ScriptingBox } from "./ScriptingBox"; +import { DocHolderBox } from "./DocumentBox"; import { DocumentViewProps } from "./DocumentView"; import "./DocumentView.scss"; import { FontIconBox } from "./FontIconBox"; @@ -27,7 +27,7 @@ import { PresBox } from "./PresBox"; import { QueryBox } from "./QueryBox"; import { ColorBox } from "./ColorBox"; import { DashWebRTCVideo } from "../webcam/DashWebRTCVideo"; -import { DocuLinkBox } from "./DocuLinkBox"; +import { LinkAnchorBox } from "./LinkAnchorBox"; import { PresElementBox } from "../presentationview/PresElementBox"; import { ScreenshotBox } from "./ScreenshotBox"; import { VideoBox } from "./VideoBox"; @@ -109,10 +109,10 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & { <ObserverJsxParser blacklistedAttrs={[]} components={{ - FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, ButtonBox, SliderBox, FieldView, + FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, SliderBox, FieldView, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox, - PDFBox, VideoBox, AudioBox, HistogramBox, PresBox, YoutubeBox, PresElementBox, QueryBox, - ColorBox, DashWebRTCVideo, DocuLinkBox, InkingStroke, DocumentBox, LinkBox, + PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, QueryBox, + ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, DocHolderBox, LinkBox, ScriptingBox, RecommendationsBox, ScreenshotBox }} bindings={this.CreateBindings()} diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index ce7bcd206..fc9ee1201 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -34,11 +34,11 @@ overflow-y: scroll; height: calc(100% - 20px); } - .documentView-docuLinkAnchor { + .documentView-linkAnchorBoxAnchor { display:flex; overflow: hidden; } - .documentView-docuLinkWrapper { + .documentView-linkAnchorBoxWrapper { pointer-events: none; position: absolute; transform-origin: top left; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 2df5c9bbd..8ba61fb7e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -296,13 +296,13 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu this: this.props.Document, self: Cast(this.props.Document.rootDocument, Doc, null) || this.props.Document, thisContainer: this.props.ContainingCollectionDoc, shiftKey: e.shiftKey - }, console.log);// && !this.props.Document.isButton && this.select(false); + }, console.log); if (this.props.Document !== Doc.UserDoc().undoBtn && this.props.Document !== Doc.UserDoc().redoBtn) { UndoManager.RunInBatch(func, "on click"); } else func(); - } else if (this.Document.type === DocumentType.BUTTON) { - UndoManager.RunInBatch(() => ScriptBox.EditButtonScript("On Button Clicked ...", this.props.Document, "onClick", e.clientX, e.clientY), "on button click"); - } else if (this.Document.isButton) { + } else if (this.Document.editScriptOnClick) { + UndoManager.RunInBatch(() => ScriptBox.EditButtonScript("On Button Clicked ...", this.props.Document, StrCast(this.Document.editScriptOnClick), e.clientX, e.clientY), "on button click"); + } else if (this.Document.isLinkButton) { DocListCast(this.props.Document.links).length && this.followLinkClick(e.altKey, e.ctrlKey, e.shiftKey); } else { if (this.props.Document.isTemplateForField && !(e.ctrlKey || e.button > 0)) { @@ -327,7 +327,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu const targetFocusAfterDocFocus = () => { const where = StrCast(this.Document.followLinkLocation) || followLoc; const hackToCallFinishAfterFocus = () => { - setTimeout(() => finished?.(), 0); // finished() needs to be called right after hackToCallFinishAfterFocus(), but there's no callback for that so we use the hacky timeout. + finished && setTimeout(finished, 0); // finished() needs to be called right after hackToCallFinishAfterFocus(), but there's no callback for that so we use the hacky timeout. return false; // we must return false here so that the zoom to the document is not reversed. If it weren't for needing to call finished(), we wouldn't need this function at all since not having it is equivalent to returning false }; this.props.addDocTab(doc, where) && this.props.focus(doc, true, undefined, hackToCallFinishAfterFocus); // add the target and focus on it. @@ -577,23 +577,23 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu } @undoBatch - toggleButtonBehavior = (): void => { - if (this.Document.isButton || this.Document.onClick || this.Document.ignoreClick) { - this.Document.isButton = false; + toggleLinkButtonBehavior = (): void => { + if (this.Document.isLinkButton || this.Document.onClick || this.Document.ignoreClick) { + this.Document.isLinkButton = false; this.Document.ignoreClick = false; this.Document.onClick = undefined; } else { - this.Document.isButton = true; + this.Document.isLinkButton = true; this.Document.followLinkLocation = undefined; } } @undoBatch toggleFollowInPlace = (): void => { - if (this.Document.isButton) { - this.Document.isButton = false; + if (this.Document.isLinkButton) { + this.Document.isLinkButton = false; } else { - this.Document.isButton = true; + this.Document.isLinkButton = true; this.Document.followLinkLocation = "inPlace"; } } @@ -642,7 +642,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu const portal = Docs.Create.FreeformDocument([], { _width: (this.layoutDoc._width || 0) + 10, _height: this.layoutDoc._height || 0, title: StrCast(this.props.Document.title) + ".portal" }); DocUtils.MakeLink({ doc: this.props.Document }, { doc: portal }, "portal to"); } - this.Document.isButton = true; + this.Document.isLinkButton = true; } @undoBatch @@ -727,8 +727,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" }); onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(this, "${this.props.Document.layoutKey}")`), icon: "window-restore" }); onClicks.push({ description: this.Document.ignoreClick ? "Select" : "Do Nothing", event: () => this.Document.ignoreClick = !this.Document.ignoreClick, icon: this.Document.ignoreClick ? "unlock" : "lock" }); - onClicks.push({ description: this.Document.isButton ? "Remove Follow Behavior" : "Follow Link in Place", event: this.toggleFollowInPlace, icon: "concierge-bell" }); - onClicks.push({ description: this.Document.isButton || this.Document.onClick ? "Remove Click Behavior" : "Follow Link", event: this.toggleButtonBehavior, icon: "concierge-bell" }); + onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: this.toggleFollowInPlace, icon: "concierge-bell" }); + onClicks.push({ description: this.Document.isLinkButton || this.Document.onClick ? "Remove Click Behavior" : "Follow Link", event: this.toggleLinkButtonBehavior, icon: "concierge-bell" }); onClicks.push({ description: "Edit onClick Script", icon: "edit", event: (obj: any) => ScriptBox.EditButtonScript("On Button Clicked ...", this.props.Document, "onClick", obj.x, obj.y) }); !existingOnClick && cm.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" }); @@ -861,7 +861,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu await Promise.all(allDocs.map((doc: Doc) => { let isMainDoc: boolean = false; const dataDoc = Doc.GetProto(doc); - if (doc.type === DocumentType.TEXT) { + if (doc.type === DocumentType.RTF) { if (dataDoc === Doc.GetProto(this.props.Document)) { isMainDoc = true; } @@ -964,7 +964,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu const fallback = Cast(this.props.Document.layoutKey, "string"); return typeof fallback === "string" ? fallback : "layout"; } - rootSelected = (outsideReaction: boolean) => { + rootSelected = (outsideReaction?: boolean) => { return this.isSelected(outsideReaction) || (this.props.Document.forceActive && this.props.rootSelected?.(outsideReaction) ? true : false); } childScaling = () => (this.layoutDoc._fitWidth ? this.props.PanelWidth() / this.nativeWidth : this.props.ContentScaling()); @@ -1026,10 +1026,10 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu @computed get anchors() { TraceMobx(); return DocListCast(this.Document.links).filter(d => !d.hidden && this.isNonTemporalLink).map((d, i) => - <div className="documentView-docuLinkWrapper" key={d[Id]}> + <div className="documentView-linkAnchorBoxWrapper" key={d[Id]}> <DocumentView {...this.props} Document={d} - ContainingCollectionDoc={this.props.Document} // bcz: hack this.props.Document is not a collection Need a better prop for passing the containing document to the DocuLinkBox + ContainingCollectionDoc={this.props.Document} // bcz: hack this.props.Document is not a collection Need a better prop for passing the containing document to the LinkAnchorBox PanelWidth={this.anchorPanelWidth} PanelHeight={this.anchorPanelHeight} layoutKey={this.linkEndpoint(d)} @@ -1041,7 +1041,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu @computed get innards() { TraceMobx(); if (!this.props.PanelWidth()) { // this happens when the document is a tree view label - return <div className="documentView-docuLinkAnchor" > + return <div className="documentView-linkAnchorBoxAnchor" > {StrCast(this.props.Document.title)} {this.anchors} </div>; diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 37770a2e1..836d95830 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -262,7 +262,7 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps & if (de.complete.docDragData) { const draggedDoc = de.complete.docDragData.draggedDocuments.length && de.complete.docDragData.draggedDocuments[0]; // replace text contents whend dragging with Alt - if (draggedDoc && draggedDoc.type === DocumentType.TEXT && !Doc.AreProtosEqual(draggedDoc, this.props.Document) && de.altKey) { + if (draggedDoc && draggedDoc.type === DocumentType.RTF && !Doc.AreProtosEqual(draggedDoc, this.props.Document) && de.altKey) { if (draggedDoc.data instanceof RichTextField) { Doc.GetProto(this.dataDoc)[this.props.fieldKey] = new RichTextField(draggedDoc.data.Data, draggedDoc.data.Text); e.stopPropagation(); @@ -1206,7 +1206,7 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps & <div className={`formattedTextBox-inner${rounded}`} ref={this.createDropTarget} style={{ padding: `${NumCast(this.Document._xMargin, 0)}px ${NumCast(this.Document._yMargin, 0)}px`, - pointerEvents: ((this.Document.isButton || this.props.onClick) && !this.props.isSelected()) ? "none" : undefined + pointerEvents: ((this.Document.isLinkButton || this.props.onClick) && !this.props.isSelected()) ? "none" : undefined }} /> </div> {!this.props.Document._showSidebar ? (null) : this.sidebarWidthPercent === "0%" ? diff --git a/src/client/views/nodes/ButtonBox.scss b/src/client/views/nodes/LabelBox.scss index 293af289d..ab5b2c6b3 100644 --- a/src/client/views/nodes/ButtonBox.scss +++ b/src/client/views/nodes/LabelBox.scss @@ -1,4 +1,4 @@ -.buttonBox-outerDiv { +.labelBox-outerDiv { width: 100%; height: 100%; pointer-events: all; @@ -7,7 +7,7 @@ flex-direction: column; } -.buttonBox-mainButton { +.labelBox-mainButton { width: 100%; height: 100%; border-radius: inherit; @@ -17,7 +17,7 @@ display:flex; } -.buttonBox-mainButtonCenter { +.labelBox-mainButtonCenter { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -26,12 +26,12 @@ margin: auto; } -.buttonBox-params { +.labelBox-params { display: flex; flex-direction: row; } -.buttonBox-missingParam { +.labelBox-missingParam { width: 100%; background: lightgray; border: dimGray solid 1px; diff --git a/src/client/views/nodes/ButtonBox.tsx b/src/client/views/nodes/LabelBox.tsx index 1b70ff824..0ec6af93a 100644 --- a/src/client/views/nodes/ButtonBox.tsx +++ b/src/client/views/nodes/LabelBox.tsx @@ -11,7 +11,7 @@ import { BoolCast, StrCast, Cast, FieldValue } from '../../../new_fields/Types'; import { DragManager } from '../../util/DragManager'; import { undoBatch } from '../../util/UndoManager'; import { DocComponent } from '../DocComponent'; -import './ButtonBox.scss'; +import './LabelBox.scss'; import { FieldView, FieldViewProps } from './FieldView'; import { ContextMenuProps } from '../ContextMenuItem'; import { ContextMenu } from '../ContextMenu'; @@ -20,18 +20,18 @@ import { documentSchema } from '../../../new_fields/documentSchemas'; library.add(faEdit as any); -const ButtonSchema = createSchema({ +const LabelSchema = createSchema({ onClick: ScriptField, buttonParams: listSpec("string"), text: "string" }); -type ButtonDocument = makeInterface<[typeof ButtonSchema, typeof documentSchema]>; -const ButtonDocument = makeInterface(ButtonSchema, documentSchema); +type LabelDocument = makeInterface<[typeof LabelSchema, typeof documentSchema]>; +const LabelDocument = makeInterface(LabelSchema, documentSchema); @observer -export class ButtonBox extends DocComponent<FieldViewProps, ButtonDocument>(ButtonDocument) { - public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ButtonBox, fieldKey); } +export class LabelBox extends DocComponent<FieldViewProps, LabelDocument>(LabelDocument) { + public static LayoutString(fieldKey: string) { return FieldView.LayoutString(LabelBox, fieldKey); } private dropDisposer?: DragManager.DragDropDisposer; @computed get dataDoc() { @@ -78,18 +78,18 @@ export class ButtonBox extends DocComponent<FieldViewProps, ButtonDocument>(Butt const missingParams = params?.filter(p => this.props.Document[p] === undefined); params?.map(p => DocListCast(this.props.Document[p])); // bcz: really hacky form of prefetching ... return ( - <div className="buttonBox-outerDiv" ref={this.createDropTarget} onContextMenu={this.specificContextMenu} + <div className="labelBox-outerDiv" ref={this.createDropTarget} onContextMenu={this.specificContextMenu} style={{ boxShadow: this.Document.opacity === 0 ? undefined : StrCast(this.Document.boxShadow, "") }}> - <div className="buttonBox-mainButton" style={{ + <div className="labelBox-mainButton" style={{ background: this.Document.backgroundColor, color: this.Document.color || "inherit", fontSize: this.Document.fontSize, letterSpacing: this.Document.letterSpacing || "", textTransform: (this.Document.textTransform as any) || "" }} > - <div className="buttonBox-mainButtonCenter"> + <div className="labelBox-mainButtonCenter"> {(this.Document.text || this.Document.title)} </div> </div> - <div className="buttonBox-params" > - {!missingParams || !missingParams.length ? (null) : missingParams.map(m => <div key={m} className="buttonBox-missingParam">{m}</div>)} + <div className="labelBox-params" > + {!missingParams || !missingParams.length ? (null) : missingParams.map(m => <div key={m} className="labelBox-missingParam">{m}</div>)} </div> </div> ); diff --git a/src/client/views/nodes/DocuLinkBox.scss b/src/client/views/nodes/LinkAnchorBox.scss index f2c203548..7b6093ebd 100644 --- a/src/client/views/nodes/DocuLinkBox.scss +++ b/src/client/views/nodes/LinkAnchorBox.scss @@ -1,4 +1,4 @@ -.docuLinkBox-cont, .docuLinkBox-cont-small { +.linkAnchorBox-cont, .linkAnchorBox-cont-small { cursor: default; position: absolute; width: 15; @@ -7,7 +7,7 @@ pointer-events: all; user-select: none; - .docuLinkBox-linkCloser { + .linkAnchorBox-linkCloser { position: absolute; width: 18; height: 18; @@ -23,7 +23,7 @@ } } -.docuLinkBox-cont-small { +.linkAnchorBox-cont-small { width:5px; height:5px; }
\ No newline at end of file diff --git a/src/client/views/nodes/DocuLinkBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx index 31ce58079..770a3d0d1 100644 --- a/src/client/views/nodes/DocuLinkBox.tsx +++ b/src/client/views/nodes/LinkAnchorBox.tsx @@ -8,7 +8,7 @@ import { Utils, setupMoveUpEvents } from '../../../Utils'; import { DocumentManager } from "../../util/DocumentManager"; import { DragManager } from "../../util/DragManager"; import { DocComponent } from "../DocComponent"; -import "./DocuLinkBox.scss"; +import "./LinkAnchorBox.scss"; import { FieldView, FieldViewProps } from "./FieldView"; import React = require("react"); import { ContextMenuProps } from "../ContextMenuItem"; @@ -21,12 +21,12 @@ const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; -type DocLinkSchema = makeInterface<[typeof documentSchema]>; -const DocLinkDocument = makeInterface(documentSchema); +type LinkAnchorSchema = makeInterface<[typeof documentSchema]>; +const LinkAnchorDocument = makeInterface(documentSchema); @observer -export class DocuLinkBox extends DocComponent<FieldViewProps, DocLinkSchema>(DocLinkDocument) { - public static LayoutString(fieldKey: string) { return FieldView.LayoutString(DocuLinkBox, fieldKey); } +export class LinkAnchorBox extends DocComponent<FieldViewProps, LinkAnchorSchema>(LinkAnchorDocument) { + public static LayoutString(fieldKey: string) { return FieldView.LayoutString(LinkAnchorBox, fieldKey); } _doubleTap = false; _lastTap: number = 0; _ref = React.createRef<HTMLDivElement>(); @@ -65,7 +65,7 @@ export class DocuLinkBox extends DocComponent<FieldViewProps, DocLinkSchema>(Doc onClick = (e: PointerEvent) => { this._doubleTap = (Date.now() - this._lastTap < 300 && e.button === 0); this._lastTap = Date.now(); - if ((e.button === 2 || e.ctrlKey || !this.props.Document.isButton)) { + if ((e.button === 2 || e.ctrlKey || !this.props.Document.isLinkButton)) { this.props.select(false); } if (!this._doubleTap) { @@ -89,7 +89,7 @@ export class DocuLinkBox extends DocComponent<FieldViewProps, DocLinkSchema>(Doc } openLinkTargetOnRight = (e: React.MouseEvent) => { const alias = Doc.MakeAlias(Cast(this.props.Document[this.props.fieldKey], Doc, null)); - alias.isButton = undefined; + alias.isLinkButton = undefined; alias.isBackground = undefined; alias.layoutKey = "layout"; this.props.addDocTab(alias, "onRight"); @@ -120,15 +120,15 @@ export class DocuLinkBox extends DocComponent<FieldViewProps, DocLinkSchema>(Doc const timecode = this.props.Document[anchor + "Timecode"]; const targetTitle = StrCast((this.props.Document[anchor]! as Doc).title) + (timecode !== undefined ? ":" + timecode : ""); const flyout = ( - <div className="docuLinkBox-flyout" title=" " onPointerOver={() => Doc.UnBrushDoc(this.props.Document)}> + <div className="linkAnchorBoxBox-flyout" title=" " onPointerOver={() => Doc.UnBrushDoc(this.props.Document)}> <LinkEditor sourceDoc={Cast(this.props.Document[this.props.fieldKey], Doc, null)} hideback={true} linkDoc={this.props.Document} showLinks={action(() => { })} /> - {!this._forceOpen ? (null) : <div className="docuLinkBox-linkCloser" onPointerDown={action(() => this._isOpen = this._editing = this._forceOpen = false)}> + {!this._forceOpen ? (null) : <div className="linkAnchorBox-linkCloser" onPointerDown={action(() => this._isOpen = this._editing = this._forceOpen = false)}> <FontAwesomeIcon color="dimGray" icon={"times"} size={"sm"} /> </div>} </div> ); const small = this.props.PanelWidth() <= 1; - return <div className={`docuLinkBox-cont${small ? "-small" : ""}`} onPointerDown={this.onPointerDown} title={targetTitle} onContextMenu={this.specificContextMenu} + return <div className={`linkAnchorBox-cont${small ? "-small" : ""}`} onPointerDown={this.onPointerDown} title={targetTitle} onContextMenu={this.specificContextMenu} ref={this._ref} style={{ background: c, left: !small ? `calc(${x}% - 7.5px)` : undefined, diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index f8c008a2d..53ad547b6 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -9,7 +9,6 @@ import { ScriptField } from '../../../new_fields/ScriptField'; import { Cast, NumCast, StrCast } from "../../../new_fields/Types"; import { PdfField, URLField } from "../../../new_fields/URLField"; import { Utils } from '../../../Utils'; -import { KeyCodes } from '../../northstar/utils/KeyCodes'; import { undoBatch } from '../../util/UndoManager'; import { panZoomSchema } from '../collections/collectionFreeForm/CollectionFreeFormView'; import { ContextMenu } from '../ContextMenu'; @@ -18,10 +17,10 @@ import { DocAnnotatableComponent } from "../DocComponent"; import { PDFViewer } from "../pdf/PDFViewer"; import { FieldView, FieldViewProps } from './FieldView'; import { pageSchema } from "./ImageBox"; +import { KeyCodes } from '../../util/KeyCodes'; import "./PDFBox.scss"; import React = require("react"); import { documentSchema } from '../../../new_fields/documentSchemas'; -import { url } from 'inspector'; type PdfDocument = makeInterface<[typeof documentSchema, typeof panZoomSchema, typeof pageSchema]>; const PdfDocument = makeInterface(documentSchema, panZoomSchema, pageSchema); diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 73d09b4e1..e7434feaa 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -6,7 +6,7 @@ import { action, computed, IReactionDisposer, observable, reaction, runInAction import { observer } from "mobx-react"; import { Doc, DocListCast } from "../../../new_fields/Doc"; import { InkTool } from "../../../new_fields/InkField"; -import { BoolCast, Cast, FieldValue, NumCast } from "../../../new_fields/Types"; +import { BoolCast, Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types"; import { returnFalse } from "../../../Utils"; import { DocumentManager } from "../../util/DocumentManager"; import { undoBatch } from "../../util/UndoManager"; @@ -246,7 +246,7 @@ export class PresBox extends React.Component<FieldViewProps> { }); } - updateMinimize = undoBatch(action((e: React.ChangeEvent, mode: number) => { + updateMinimize = undoBatch(action((e: React.ChangeEvent, mode: CollectionViewType) => { if (BoolCast(this.props.Document.inOverlay) !== (mode === CollectionViewType.Invalid)) { if (this.props.Document.inOverlay) { Doc.RemoveDocFromList((Doc.UserDoc().overlays as Doc), undefined, this.props.Document); @@ -261,7 +261,7 @@ export class PresBox extends React.Component<FieldViewProps> { } })); - initializeViewAliases = (docList: Doc[], viewtype: number) => { + initializeViewAliases = (docList: Doc[], viewtype: CollectionViewType) => { const hgt = (viewtype === CollectionViewType.Tree) ? 50 : 46; docList.forEach(doc => { doc.presBox = this.props.Document; // give contained documents a reference to the presentation @@ -283,14 +283,14 @@ export class PresBox extends React.Component<FieldViewProps> { @undoBatch viewChanged = action((e: React.ChangeEvent) => { //@ts-ignore - this.props.Document._viewType = Number(e.target.selectedOptions[0].value); + this.props.Document._viewType = e.target.selectedOptions[0].value; this.props.Document._viewType === CollectionViewType.Stacking && (this.props.Document._pivotField = undefined); // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here this.updateMinimize(e, Number(this.props.Document._viewType)); }); childLayoutTemplate = () => this.props.Document._viewType === CollectionViewType.Stacking ? Cast(Doc.UserDoc().presentationTemplate, Doc, null) : undefined; render() { - const mode = NumCast(this.props.Document._viewType, CollectionViewType.Invalid); + const mode = StrCast(this.props.Document._viewType) as CollectionViewType; this.initializeViewAliases(this.childDocs, mode); return <div className="presBox-cont" style={{ minWidth: this.props.Document.inOverlay ? 240 : undefined, pointerEvents: this.active() || this.props.Document.inOverlay ? "all" : "none" }} > <div className="presBox-buttons" style={{ display: this.props.Document._chromeStatus === "disabled" ? "none" : undefined }}> diff --git a/src/client/views/nodes/ScriptingBox.scss b/src/client/views/nodes/ScriptingBox.scss new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/src/client/views/nodes/ScriptingBox.scss diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx new file mode 100644 index 000000000..a2dd134ed --- /dev/null +++ b/src/client/views/nodes/ScriptingBox.tsx @@ -0,0 +1,71 @@ +import { library } from '@fortawesome/fontawesome-svg-core'; +import { faEdit } from '@fortawesome/free-regular-svg-icons'; +import { computed } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { Doc } from '../../../new_fields/Doc'; +import { documentSchema } from '../../../new_fields/documentSchemas'; +import { CompileScript } from "../../util/Scripting"; +import { ScriptBox } from '../ScriptBox'; +import { createSchema, listSpec, makeInterface } from '../../../new_fields/Schema'; +import { ScriptField } from '../../../new_fields/ScriptField'; +import { BoolCast, ScriptCast } from '../../../new_fields/Types'; +import { DocComponent } from '../DocComponent'; +import { FieldView, FieldViewProps } from './FieldView'; +import './ScriptingBox.scss'; +import { DocumentIconContainer } from './DocumentIcon'; + + +library.add(faEdit as any); + +const ScriptingSchema = createSchema({ + onClick: ScriptField, + buttonParams: listSpec("string"), + text: "string" +}); + +type ScriptingDocument = makeInterface<[typeof ScriptingSchema, typeof documentSchema]>; +const ScriptingDocument = makeInterface(ScriptingSchema, documentSchema); + +@observer +export class ScriptingBox extends DocComponent<FieldViewProps, ScriptingDocument>(ScriptingDocument) { + public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ScriptingBox, fieldKey); } + + @computed get dataDoc() { + return this.props.DataDoc && + (this.Document.isTemplateForField || BoolCast(this.props.DataDoc.isTemplateForField) || + this.props.DataDoc.layout === this.props.Document) ? this.props.DataDoc : Doc.GetProto(this.props.Document); + } + + specificContextMenu = (e: React.MouseEvent): void => { } + + render() { + const script = ScriptCast(this.props.Document[this.props.fieldKey]); + let originalText: string | undefined = undefined; + if (script) { + originalText = script.script.originalScript; + } + return !(this.props.Document instanceof Doc) ? (null) : + <ScriptBox initialText={originalText} + setParams={() => { }} + onCancel={() => { }} + onSave={(text, onError) => { + if (!text) { + this.dataDoc[this.props.fieldKey] = undefined; + } else { + const script = CompileScript(text, { + params: { this: Doc.name }, + typecheck: false, + editable: true, + transformer: DocumentIconContainer.getTransformer() + }); + if (!script.compiled) { + onError(script.errors.map(error => error.messageText).join("\n")); + } + else { + this.dataDoc[this.props.fieldKey] = new ScriptField(script); + } + } + }} showDocumentIcons />; + } +}
\ No newline at end of file diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index d384ad12f..a4a330fe6 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -132,7 +132,7 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum x: (this.Document.x || 0) + width, y: (this.Document.y || 0), _width: 150, _height: height / width * 150, title: "--snapshot" + (this.Document.currentTimecode || 0) + " image-" }); - imageSummary.isButton = true; + imageSummary.isLinkButton = true; this.props.addDocument && this.props.addDocument(imageSummary); DocUtils.MakeLink({ doc: imageSummary }, { doc: this.props.Document }, "video snapshot"); } |
