diff options
Diffstat (limited to 'src')
4 files changed, 117 insertions, 0 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx new file mode 100644 index 000000000..bb7cb0461 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -0,0 +1,84 @@ +import { IReactionDisposer, computed, observable, reaction } from 'mobx'; +import { observer } from 'mobx-react'; +import { Doc } from '../../../../fields/Doc'; +import { ScriptField } from '../../../../fields/ScriptField'; +import { PresBox } from '../../nodes/trails/PresBox'; +import './CollectionFreeFormView.scss'; +import React = require('react'); +import { CollectionFreeFormView } from './CollectionFreeFormView'; +import { NumCast } from '../../../../fields/Types'; +import { LinkManager } from '../../../util/LinkManager'; +import { InkTool } from '../../../../fields/InkField'; +import { LinkDocPreview } from '../../nodes/LinkDocPreview'; +import { DocumentLinksButton } from '../../nodes/DocumentLinksButton'; + +export interface CollectionFreeFormInfoUIProps { + Document: Doc; + Freeform: CollectionFreeFormView; +} + +@observer +export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeFormInfoUIProps> { + private _disposers: { [name: string]: IReactionDisposer } = {}; + + componentDidMount(): void { + this._disposers.reaction1 = reaction( + () => this.props.Freeform.childDocs.slice(), + docs => { + if (docs.length === 1) { + this.firstDoc = docs[0]; + this.firstDocPos = { x: NumCast(this.firstDoc.x), y: NumCast(this.firstDoc.y) }; + this.message = 'Doc 1'; + } + if (docs.length === 2) { + console.log('hello 1', docs[0]); + console.log('hello 2', docs[1]); + this.message = 'Doc 2'; + } else { + this.message = 'Click anywhere and begin typing to create your first text document!'; + } + }, + { fireImmediately: true } + ); + this._disposers.reaction2 = reaction( + () => ({ x: NumCast(this.firstDoc?.x), y: NumCast(this.firstDoc?.y), links: this.firstDoc && LinkManager.Instance.getAllDirectLinks(this.firstDoc) }), + ({ x, y, links }) => { + if ((x && x != this.firstDocPos.x) || (y && y != this.firstDocPos.y)) { + this.message = 'You moved the doc'; + } + if (links && links.length > 0) { + this.message = 'You made your first link! You can also click the link icon to start and complete the link.'; + } + }, + { fireImmediately: true } + ); + this._disposers.reaction3 = reaction( + () => ({ activeTool: Doc.ActiveTool, linkMenu: DocumentLinksButton.LinkEditorDocView }), + ({ activeTool, linkMenu }) => { + if (activeTool == InkTool.Pen) { + this.message = "You're in pen mode! Click and drag to draw your first masterpiece."; + } + if (linkMenu) { + this.message = 'To edit your links, click this pencil icon.'; + } + }, + { fireImmediately: true } + ); + } + + componentWillUnmount(): void { + Object.values(this._disposers).forEach(disposer => disposer?.()); + } + + // stop that reaction from what it's currently doing + // this._disposers.reaction1(); + + @observable message = 'Click anywhere and begin typing to create your first document!'; + @observable firstDoc: Doc | undefined; + @observable secondDoc: Doc | undefined; + firstDocPos = { x: 0, y: 0 }; + + render() { + return <div className="infoUI">{this.message}</div>; + } +} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 250760bd5..1b596ab65 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -255,3 +255,25 @@ background-color: rgba($color: #000000, $alpha: 0.4); position: absolute; } + +.infoUI { + position: absolute; + display: flex; + top: 0; + // height: 100%; + // width: 100%; + // width:fit-content; + // width:-webkit-fit-content; + // width:-moz-fit-content; + // bottom: 46px; + + overflow: auto; + + color: white; + background-color: #5075ef; + border-radius: 5px; + box-shadow: 2px 2px 5px black; + + margin: 15px; + padding: 10px; +} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index d242b1356..e432c9682 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -51,6 +51,7 @@ import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCurso import './CollectionFreeFormView.scss'; import { MarqueeView } from './MarqueeView'; import React = require('react'); +import { CollectionFreeFormInfoUI } from './CollectionFreeFormInfoUI'; export type collectionFreeformViewProps = { NativeWidth?: () => number; @@ -1428,6 +1429,10 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return anchor; }; + infoUI = () => { + return <CollectionFreeFormInfoUI Document={this.Document} Freeform={this}></CollectionFreeFormInfoUI>; + }; // this.props.PanelWidth(), this.props.PanelHeight() + componentDidMount() { this.props.setContentView?.(this); super.componentDidMount?.(); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index bfbe3389f..40ae1459f 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -136,6 +136,7 @@ export interface DocComponentView { componentUI?: (boundsLeft: number, boundsTop: number) => JSX.Element | null; dragStarting?: (snapToDraggedDoc: boolean, showGroupDragTarget: boolean, visited: Set<Doc>) => void; incrementalRendering?: () => void; + infoUI?: () => JSX.Element; getCenter?: (xf: Transform) => { X: number; Y: number }; screenBounds?: () => Opt<{ left: number; top: number; right: number; bottom: number; center?: { X: number; Y: number } }>; ptToScreen?: (pt: { X: number; Y: number }) => { X: number; Y: number }; @@ -1645,6 +1646,10 @@ export class DocumentView extends React.Component<DocumentViewProps> { ); } + @computed get infoUI() { + return this.ComponentView?.infoUI?.(); + } + render() { TraceMobx(); const xshift = Math.abs(this.Xshift) <= 0.001 ? this.props.PanelWidth() : undefined; @@ -1679,6 +1684,7 @@ export class DocumentView extends React.Component<DocumentViewProps> { ref={action((r: DocumentViewInternal | null) => r && (this.docView = r))} /> {this.htmlOverlay} + {this.infoUI} </div> )} |