aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx16
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx41
-rw-r--r--src/client/views/collections/collectionFreeForm/assets/dash-pin-with-view.gifbin0 -> 695946 bytes
-rw-r--r--src/client/views/collections/collectionFreeForm/assets/link.pngbin0 -> 8908 bytes
-rw-r--r--src/client/views/collections/collectionFreeForm/declaration.d.ts3
5 files changed, 37 insertions, 23 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 66aa29de0..deab92258 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -3,6 +3,7 @@ import { observer } from 'mobx-react';
import * as React from 'react';
import { ObservableReactComponent } from '../../ObservableReactComponent';
import './CollectionFreeFormView.scss';
+import assets from './assets/link.png';
/**
* An Fsa Arc. The first array element is a test condition function that will be observed.
@@ -13,11 +14,13 @@ export type infoArc = [() => any, (res?: any) => infoState];
export const StateMessage = Symbol('StateMessage');
export const StateEntryFunc = Symbol('StateEntryFunc');
+export const StateMessageGIF = Symbol('StateMessageGIF');
export class infoState {
[StateMessage]: string = '';
[StateEntryFunc]?: () => any;
+ [StateMessageGIF]?: string = '';
[key: string]: infoArc;
- constructor(message: string, arcs: { [key: string]: infoArc }, entryFunc?: () => any) {
+ constructor(message: string, arcs: { [key: string]: infoArc }, entryFunc?: () => any, messageGif?: string) {
this[StateMessage] = message;
Object.assign(this, arcs);
this[StateEntryFunc] = entryFunc;
@@ -36,9 +39,10 @@ export class infoState {
export function InfoState(
msg: string, //
arcs: { [key: string]: infoArc },
- entryFunc?: () => any
+ entryFunc?: () => any,
+ gif?: string,
) {
- return new infoState(msg, arcs, entryFunc);
+ return new infoState(msg, arcs, entryFunc, gif);
}
export interface CollectionFreeFormInfoStateProps {
@@ -90,6 +94,10 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
this.clearState();
}
render() {
- return <div className="infoUI">{this.State?.[StateMessage]}</div>;
+ return <div className="infoUI">
+ {/* <img src={this.State?.[StateMessageGIF]} alt='state message gif'></img> */}
+ <img src="./assets/link.png"></img>
+ {this.State?.[StateMessage]}
+ </div>;
}
}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index ff0968ef8..dc0930a23 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -73,7 +73,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
docY = firstDoc()?.y;
return oneDoc;
}],
- }, setBackground("blue")); // prettier-ignore
+ }, setBackground("blue"), "/assets/dash-pin-with-view.gif"); // prettier-ignore
const oneDoc = InfoState('Hello world! You can drag and drop to move your document around.', {
// docCreated: [() => numDocs() > 1, () => multipleDocs],
@@ -136,22 +136,25 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
const viewedLink = InfoState('Great work. You are now ready to create your own hypermedia world.', {
linkDeleted: [() => !numDocLinks(), () => multipleDocs],
docRemoved: [() => numDocs() < 2, () => oneDoc],
- docCreated: [() => numDocs() == 3, () => demos],
- // docPinned: [() => pin(), () => pinnedDoc],
+ docCreated: [() => numDocs() == 3, () => {
+ trail = pin().length;
+ return presentDocs;
+ }],
+ activePen: [() => activeTool() === InkTool.Pen, () => penMode],
}, setBackground("black")); // prettier-ignore
- const demos = InfoState('', {
- // activePen: [() => activeTool() === InkTool.Pen, () => penMode],
- docPinned: [() => pin().length, () => {
+ const presentDocs = InfoState('Another document! You could make a presentation. Click the pin icon on the top left corner.', {
+ docPinned: [() => pin().length > trail, () => {
trail = pin().length;
return pinnedDoc1;
}],
- });
+ docRemoved: [() => numDocs() < 3, () => viewedLink],
+ }, setBackground("pink"), "assets/dash-pin-with-view.gif");
- // const penMode = InfoState('You\'re in pen mode. Click and drag to draw your first masterpiece.', {
- // // activePen: [() => activeTool() === InkTool.Eraser, () => eraserMode],
- // docRemoved: [() => numDocs() < 3, () => demos],
- // }); // prettier-ignore
+ const penMode = InfoState('You\'re in pen mode. Click and drag to draw your first masterpiece.', {
+ // activePen: [() => activeTool() === InkTool.Eraser, () => eraserMode],
+ activePen: [() => activeTool() !== InkTool.Pen, () => viewedLink],
+ }); // prettier-ignore
// const eraserMode = InfoState('You\'re in eraser mode. Say goodbye to your first masterpiece.', {
// docsRemoved: [() => numDocs() == 3, () => demos],
@@ -165,10 +168,10 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
// editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
// manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
- docRemoved: [() => numDocs() < 3, () => demos],
+ docRemoved: [() => numDocs() < 3, () => viewedLink],
});
- const pinnedDoc2 = InfoState('You pinned another doc.', {
+ const pinnedDoc2 = InfoState(`You pinned ${pin().length} docs.`, {
docPinned: [() => pin().length > trail, () => {
trail = pin().length;
return pinnedDoc3;
@@ -176,10 +179,10 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
// editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
// manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
- docRemoved: [() => numDocs() < 3, () => demos],
+ docRemoved: [() => numDocs() < 3, () => viewedLink],
});
- const pinnedDoc3 = InfoState('You pinned yet another doc.', {
+ const pinnedDoc3 = InfoState(`You pinned ${pin().length} docs.`, {
docPinned: [() => pin().length > trail, () => {
trail = pin().length;
return pinnedDoc2;
@@ -187,7 +190,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
// editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
// manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
- docRemoved: [() => numDocs() < 3, () => demos],
+ docRemoved: [() => numDocs() < 3, () => viewedLink],
});
// const openedTrail = InfoState('This is your trails tab.', {
@@ -204,18 +207,18 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
const manualPresentationMode = InfoState('You\'re in manual presentation mode.', {
// editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
- docRemoved: [() => numDocs() < 3, () => demos],
+ docRemoved: [() => numDocs() < 3, () => viewedLink],
docCreated: [() => numDocs() == 4, () => completed],
});
const autoPresentationMode = InfoState('You\'re in auto presentation mode.', {
// editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
- docRemoved: [() => numDocs() < 3, () => demos],
+ docRemoved: [() => numDocs() < 3, () => viewedLink],
docCreated: [() => numDocs() == 4, () => completed],
});
- const completed = InfoState('Eager to learn more? Click the ? icon to read our full documentation.', {
+ const completed = InfoState('Eager to learn more? Click the ? icon on the top right corner to read our full documentation.', {
docRemoved: [() => numDocs() == 1, () => oneDoc],
}, setBackground("white")); // prettier-ignore
diff --git a/src/client/views/collections/collectionFreeForm/assets/dash-pin-with-view.gif b/src/client/views/collections/collectionFreeForm/assets/dash-pin-with-view.gif
new file mode 100644
index 000000000..b0896d5c7
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/assets/dash-pin-with-view.gif
Binary files differ
diff --git a/src/client/views/collections/collectionFreeForm/assets/link.png b/src/client/views/collections/collectionFreeForm/assets/link.png
new file mode 100644
index 000000000..1e10fc658
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/assets/link.png
Binary files differ
diff --git a/src/client/views/collections/collectionFreeForm/declaration.d.ts b/src/client/views/collections/collectionFreeForm/declaration.d.ts
new file mode 100644
index 000000000..e56a93143
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/declaration.d.ts
@@ -0,0 +1,3 @@
+declare module '*.jpg';
+declare module '*.png';
+declare module '*.gif'; \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 06:32:26 +0000