1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
import { IReactionDisposer, makeObservable, observable, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../../../fields/Doc';
import { LinkManager } from '../../../util/LinkManager';
import { ObservableReactComponent } from '../../ObservableReactComponent';
import { DocButtonState } from '../../nodes/DocumentLinksButton';
import { CollectionFreeFormInfoState, InfoState, StateEntryFunc, infoState } from './CollectionFreeFormInfoState';
import { CollectionFreeFormView } from './CollectionFreeFormView';
import './CollectionFreeFormView.scss';
export interface CollectionFreeFormInfoUIProps {
Document: Doc;
Freeform: CollectionFreeFormView;
}
@observer
export class CollectionFreeFormInfoUI extends ObservableReactComponent<CollectionFreeFormInfoUIProps> {
private _disposers: { [name: string]: IReactionDisposer } = {};
constructor(props: any) {
super(props);
makeObservable(this);
this.currState = this.setupStates();
}
@observable _currState: infoState | undefined = undefined;
get currState() { return this._currState!; } // prettier-ignore
set currState(val) { runInAction(() => (this._currState = val)); } // prettier-ignore
setCurrState = (state: infoState) => {
if (state) {
this.currState = state;
this.currState[StateEntryFunc]?.();
}
};
setupStates = () => {
// state entry functions
const setBackground = (col: string) => () => (this._props.Freeform.layoutDoc.backgroundColor = col);
// arc transition trigger conditions
const firstDoc = () => this._props.Freeform.childDocs.lastElement();
const numDocs = () => this._props.Freeform.childDocs.length;
const numDocLinks = () => LinkManager.Instance.getAllDirectLinks(firstDoc())?.length;
const linkMenuOpen = () => DocButtonState.Instance.LinkEditorDocView;
// set of states.
const start = InfoState('Click to create Object', {
docCreated: [() => numDocs(), () => oneDoc],
}, setBackground("blue")); // prettier-ignore
const oneDoc = InfoState('Create a second doc', {
docCreated: [() => numDocs() > 1, () => multipleDocs],
docDeleted: [() => numDocs() < 1, () => start],
}, setBackground("green")); // prettier-ignore
const multipleDocs = InfoState('Create a link', {
linkCreated: [() => numDocLinks(), () => madeLink],
docsRemoved: [() => numDocs() < 2, () => oneDoc],
}, setBackground("orange")); // prettier-ignore
const madeLink = InfoState('View links', {
linkCreated: [() => !numDocLinks(), () => multipleDocs],
linksViewed: [() => linkMenuOpen(), (res) => { alert("Yay"+ res); return completed;}],
}, setBackground("yellow")); // prettier-ignore
const completed = InfoState('You did it!', {
linkDeleted: [() => !numDocLinks(), () => multipleDocs],
docsRemoved: [() => numDocs() < 2, () => oneDoc],
}, setBackground("white")); // prettier-ignore
return start;
};
/*
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 = 'Hello world! You can drag and drop to move your document around.';
} else if (docs.length === 2) {
this.message = 'Great job. To create a new link between them, click the link icon on both documents.';
} 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 = 'Great moves. Try creating a second document.';
}
if (links && links.length > 0) {
this.message = 'You made your first link! You can view your links by selecting the blue dot.';
}
},
{ fireImmediately: true }
);
this._disposers.reaction3 = reaction(
() => ({ activeTool: Doc.ActiveTool, viewingLinks: DocumentLinksButton.LinkEditorDocView }),
({ activeTool, viewingLinks }) => {
if (activeTool == InkTool.Pen) {
this.message = "You're in pen mode! Click and drag to draw your first masterpiece.";
}
if (viewingLinks) {
this.message = 'To edit your links, click the pencil icon.';
}
if (Doc.ActiveTool === InkTool.Pen) {
this.message = 'Editing links';
}
},
{ fireImmediately: true }
);
this._disposers.reaction4 = reaction(
() => ({ startLink: DocumentLinksButton.StartLink, endLink: Doc.UserDoc().links }),
({ startLink, endLink }) => {
if (startLink) {
this.message = "You've started a link.";
} else if (endLink) {
this.message = "You've completed a link.";
}
}
);
this._disposers.reaction5 = reaction(
() => ({ pin: Doc.ActivePresentation?.data, trails: DocumentManager.Instance.DocumentViews.find(view => view.Document === Doc.MyTrails) }),
({ pin, trails }) => {
// if (pin) {
// this.message = 'You pinned your doc to a trail.';
// }
if (trails) {
this.message = 'This is your trails tab.';
}
}
);
this._disposers.reaction6 = reaction(
() => ({ presentationMode: Doc.ActivePresentation?.presentation_status }),
({ presentationMode }) => {
if (presentationMode === 'edit') {
this.message = 'You are editing your presentation.';
} else if (presentationMode === 'manual') {
this.message = 'Manual presentation mode';
} else if (presentationMode === 'auto') {
this.message = 'Auto presentation mode';
}
}
);
}
componentWillUnmount(): void {
Object.values(this._disposers).forEach(disposer => disposer?.());
}
// stop 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 = undefined;
@observable secondDoc: Doc | undefined = undefined;
*/
firstDocPos = { x: 0, y: 0 };
render() {
return <CollectionFreeFormInfoState next={this.setCurrState} infoState={this.currState} />;
}
}
|
