aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/TemplateMenu.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/TemplateMenu.tsx')
-rw-r--r--src/client/views/TemplateMenu.tsx189
1 files changed, 98 insertions, 91 deletions
diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx
index 689ee4fc1..156513f47 100644
--- a/src/client/views/TemplateMenu.tsx
+++ b/src/client/views/TemplateMenu.tsx
@@ -1,43 +1,42 @@
-import { action, computed, observable, ObservableSet, runInAction } from "mobx";
-import { observer } from "mobx-react";
-import { Doc, DocListCast } from "../../fields/Doc";
-import { List } from "../../fields/List";
-import { ScriptField } from "../../fields/ScriptField";
-import { Cast, StrCast } from "../../fields/Types";
-import { TraceMobx } from "../../fields/util";
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from "../../Utils";
-import { Docs, DocUtils } from "../documents/Documents";
-import { ScriptingGlobals } from "../util/ScriptingGlobals";
-import { Transform } from "../util/Transform";
-import { undoBatch } from "../util/UndoManager";
-import { CollectionTreeView } from "./collections/CollectionTreeView";
-import { DocumentView } from "./nodes/DocumentView";
-import { DefaultStyleProvider } from "./StyleProvider";
+import { action, computed, observable, ObservableSet, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import { Doc, DocListCast } from '../../fields/Doc';
+import { List } from '../../fields/List';
+import { ScriptField } from '../../fields/ScriptField';
+import { Cast, StrCast } from '../../fields/Types';
+import { TraceMobx } from '../../fields/util';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../Utils';
+import { Docs, DocUtils } from '../documents/Documents';
+import { ScriptingGlobals } from '../util/ScriptingGlobals';
+import { Transform } from '../util/Transform';
+import { undoBatch } from '../util/UndoManager';
+import { CollectionTreeView } from './collections/CollectionTreeView';
+import { DocumentView } from './nodes/DocumentView';
+import { DefaultStyleProvider } from './StyleProvider';
import './TemplateMenu.scss';
-import React = require("react");
-import { CurrentUserUtils } from "../util/CurrentUserUtils";
+import React = require('react');
@observer
-class TemplateToggle extends React.Component<{ template: string, checked: boolean, toggle: (event: React.ChangeEvent<HTMLInputElement>, template: string) => void }> {
+class TemplateToggle extends React.Component<{ template: string; checked: boolean; toggle: (event: React.ChangeEvent<HTMLInputElement>, template: string) => void }> {
render() {
if (this.props.template) {
return (
<li className="templateToggle">
- <input type="checkbox" checked={this.props.checked} onChange={(event) => this.props.toggle(event, this.props.template)} />
+ <input type="checkbox" checked={this.props.checked} onChange={event => this.props.toggle(event, this.props.template)} />
{this.props.template}
</li>
);
} else {
- return (null);
+ return null;
}
}
}
@observer
-class OtherToggle extends React.Component<{ checked: boolean, name: string, toggle: (event: React.ChangeEvent<HTMLInputElement>) => void }> {
+class OtherToggle extends React.Component<{ checked: boolean; name: string; toggle: (event: React.ChangeEvent<HTMLInputElement>) => void }> {
render() {
return (
<li className="chromeToggle">
- <input type="checkbox" checked={this.props.checked} onChange={(event) => this.props.toggle(event)} />
+ <input type="checkbox" checked={this.props.checked} onChange={event => this.props.toggle(event)} />
{this.props.name}
</li>
);
@@ -49,7 +48,6 @@ export interface TemplateMenuProps {
templates?: Map<string, boolean>;
}
-
@observer
export class TemplateMenu extends React.Component<TemplateMenuProps> {
_addedKeys = new ObservableSet();
@@ -58,109 +56,118 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
toggleLayout = (e: React.ChangeEvent<HTMLInputElement>, layout: string): void => {
this.props.docViews.map(dv => dv.switchViews(e.target.checked, layout));
- }
+ };
toggleDefault = (e: React.ChangeEvent<HTMLInputElement>): void => {
- this.props.docViews.map(dv => dv.switchViews(false, "layout"));
- }
+ this.props.docViews.map(dv => dv.switchViews(false, 'layout'));
+ };
toggleAudio = (e: React.ChangeEvent<HTMLInputElement>): void => {
- this.props.docViews.map(dv => dv.props.Document._showAudio = e.target.checked);
- }
+ this.props.docViews.map(dv => (dv.props.Document._showAudio = e.target.checked));
+ };
@undoBatch
@action
toggleTemplate = (event: React.ChangeEvent<HTMLInputElement>, template: string): void => {
- this.props.docViews.forEach(d => Doc.Layout(d.layoutDoc)["_show" + template] = event.target.checked ? template.toLowerCase() : "");
- }
+ this.props.docViews.forEach(d => (Doc.Layout(d.layoutDoc)['_show' + template] = event.target.checked ? template.toLowerCase() : ''));
+ };
@action
toggleTemplateActivity = (): void => {
this._hidden = !this._hidden;
- }
+ };
@undoBatch
@action
toggleChrome = (): void => {
- this.props.docViews.map(dv => Doc.Layout(dv.layoutDoc)).forEach(layout => layout._chromeHidden = !layout._chromeHidden);
- }
+ this.props.docViews.map(dv => Doc.Layout(dv.layoutDoc)).forEach(layout => (layout._chromeHidden = !layout._chromeHidden));
+ };
// todo: add brushes to brushMap to save with a style name
onCustomKeypress = (e: React.KeyboardEvent) => {
- if (e.key === "Enter") {
+ if (e.key === 'Enter') {
runInAction(() => this._addedKeys.add(this._customRef.current!.value));
}
- }
+ };
componentDidMount() {
!this._addedKeys && (this._addedKeys = new ObservableSet());
- Array.from(Object.keys(Doc.GetProto(this.props.docViews[0].props.Document))).
- filter(key => key.startsWith("layout_")).
- map(key => runInAction(() => this._addedKeys.add(key.replace("layout_", ""))));
+ Array.from(Object.keys(Doc.GetProto(this.props.docViews[0].props.Document)))
+ .filter(key => key.startsWith('layout_'))
+ .map(key => runInAction(() => this._addedKeys.add(key.replace('layout_', ''))));
}
return100 = () => 100;
@computed get scriptField() {
- const script = ScriptField.MakeScript("docs.map(d => switchView(d, this))", { this: Doc.name, heading: "string", checked: "string", containingTreeView: Doc.name, firstDoc: Doc.name },
- { docs: new List<Doc>(this.props.docViews.map(dv => dv.props.Document)) });
+ const script = ScriptField.MakeScript(
+ 'docs.map(d => switchView(d, this))',
+ { this: Doc.name, heading: 'string', checked: 'string', containingTreeView: Doc.name, firstDoc: Doc.name },
+ { docs: new List<Doc>(this.props.docViews.map(dv => dv.props.Document)) }
+ );
return script ? () => script : undefined;
}
templateIsUsed = (selDoc: Doc, templateDoc: Doc) => {
const template = StrCast(templateDoc.dragFactory ? Cast(templateDoc.dragFactory, Doc, null)?.title : templateDoc.title);
- return StrCast(selDoc.layoutKey) === "layout_" + template ? 'check' : 'unchecked';
- }
+ return StrCast(selDoc.layoutKey) === 'layout_' + template ? 'check' : 'unchecked';
+ };
render() {
TraceMobx();
const firstDoc = this.props.docViews[0].props.Document;
- const templateName = StrCast(firstDoc.layoutKey, "layout").replace("layout_", "");
- const noteTypes = DocListCast(Cast(Doc.UserDoc()["template-notes"], Doc, null)?.data);
- const addedTypes = Doc.noviceMode ? [] : DocListCast(Cast(Doc.UserDoc()["template-buttons"], Doc, null)?.data);
+ const templateName = StrCast(firstDoc.layoutKey, 'layout').replace('layout_', '');
+ const noteTypes = DocListCast(Cast(Doc.UserDoc()['template-notes'], Doc, null)?.data);
+ const addedTypes = Doc.noviceMode ? [] : DocListCast(Cast(Doc.UserDoc()['template-buttons'], Doc, null)?.data);
const layout = Doc.Layout(firstDoc);
const templateMenu: Array<JSX.Element> = [];
- this.props.templates?.forEach((checked, template) =>
- templateMenu.push(<TemplateToggle key={template} template={template} checked={checked} toggle={this.toggleTemplate} />));
- templateMenu.push(<OtherToggle key={"audio"} name={"Audio"} checked={firstDoc._showAudio ? true : false} toggle={this.toggleAudio} />);
- templateMenu.push(<OtherToggle key={"default"} name={"Default"} checked={templateName === "layout"} toggle={this.toggleDefault} />);
- !Doc.noviceMode && templateMenu.push(<OtherToggle key={"chrome"} name={"Chrome"} checked={!layout._chromeHidden} toggle={this.toggleChrome} />);
- addedTypes.concat(noteTypes).map(template => template.treeViewChecked = this.templateIsUsed(firstDoc, template));
- this._addedKeys && Array.from(this._addedKeys).filter(key => !noteTypes.some(nt => nt.title === key)).forEach(template => templateMenu.push(
- <OtherToggle key={template} name={template} checked={templateName === template} toggle={e => this.toggleLayout(e, template)} />));
- return <ul className="template-list" style={{ display: "block" }}>
- {Doc.noviceMode ? (null) : <input placeholder="+ layout" ref={this._customRef} onKeyPress={this.onCustomKeypress} />}
- {templateMenu}
- {Doc.noviceMode ? (null) : <CollectionTreeView
- Document={CurrentUserUtils.MyTemplates}
- CollectionView={undefined}
- ContainingCollectionDoc={undefined}
- ContainingCollectionView={undefined}
- styleProvider={DefaultStyleProvider}
- setHeight={returnFalse}
- docViewPath={returnEmptyDoclist}
- docFilters={returnEmptyFilter}
- docRangeFilters={returnEmptyFilter}
- searchFilterDocs={returnEmptyDoclist}
- rootSelected={returnFalse}
- onCheckedClick={this.scriptField}
- onChildClick={this.scriptField}
- dropAction={undefined}
- isAnyChildContentActive={returnFalse}
- isContentActive={returnTrue}
- bringToFront={emptyFunction}
- focus={emptyFunction}
- whenChildContentsActiveChanged={emptyFunction}
- ScreenToLocalTransform={Transform.Identity}
- isSelected={returnFalse}
- pinToPres={emptyFunction}
- select={emptyFunction}
- renderDepth={1}
- addDocTab={returnFalse}
- PanelWidth={this.return100}
- PanelHeight={this.return100}
- treeViewHideHeaderFields={true}
- dontRegisterView={true}
- fieldKey={"data"}
- moveDocument={returnFalse}
- removeDocument={returnFalse}
- addDocument={returnFalse} />}
- </ul>;
+ this.props.templates?.forEach((checked, template) => templateMenu.push(<TemplateToggle key={template} template={template} checked={checked} toggle={this.toggleTemplate} />));
+ templateMenu.push(<OtherToggle key={'audio'} name={'Audio'} checked={firstDoc._showAudio ? true : false} toggle={this.toggleAudio} />);
+ templateMenu.push(<OtherToggle key={'default'} name={'Default'} checked={templateName === 'layout'} toggle={this.toggleDefault} />);
+ !Doc.noviceMode && templateMenu.push(<OtherToggle key={'chrome'} name={'Chrome'} checked={!layout._chromeHidden} toggle={this.toggleChrome} />);
+ addedTypes.concat(noteTypes).map(template => (template.treeViewChecked = this.templateIsUsed(firstDoc, template)));
+ this._addedKeys &&
+ Array.from(this._addedKeys)
+ .filter(key => !noteTypes.some(nt => nt.title === key))
+ .forEach(template => templateMenu.push(<OtherToggle key={template} name={template} checked={templateName === template} toggle={e => this.toggleLayout(e, template)} />));
+ return (
+ <ul className="template-list" style={{ display: 'block' }}>
+ {Doc.noviceMode ? null : <input placeholder="+ layout" ref={this._customRef} onKeyPress={this.onCustomKeypress} />}
+ {templateMenu}
+ {Doc.noviceMode ? null : (
+ <CollectionTreeView
+ Document={Doc.MyTemplates}
+ CollectionView={undefined}
+ ContainingCollectionDoc={undefined}
+ ContainingCollectionView={undefined}
+ styleProvider={DefaultStyleProvider}
+ setHeight={returnFalse}
+ docViewPath={returnEmptyDoclist}
+ docFilters={returnEmptyFilter}
+ docRangeFilters={returnEmptyFilter}
+ searchFilterDocs={returnEmptyDoclist}
+ rootSelected={returnFalse}
+ onCheckedClick={this.scriptField}
+ onChildClick={this.scriptField}
+ dropAction={undefined}
+ isAnyChildContentActive={returnFalse}
+ isContentActive={returnTrue}
+ bringToFront={emptyFunction}
+ focus={emptyFunction}
+ whenChildContentsActiveChanged={emptyFunction}
+ ScreenToLocalTransform={Transform.Identity}
+ isSelected={returnFalse}
+ pinToPres={emptyFunction}
+ select={emptyFunction}
+ renderDepth={1}
+ addDocTab={returnFalse}
+ PanelWidth={this.return100}
+ PanelHeight={this.return100}
+ treeViewHideHeaderFields={true}
+ dontRegisterView={true}
+ fieldKey={'data'}
+ moveDocument={returnFalse}
+ removeDocument={returnFalse}
+ addDocument={returnFalse}
+ />
+ )}
+ </ul>
+ );
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-15 03:23:24 +0000