diff --git a/src/app/components/Octicon.ts b/src/app/components/Octicon.ts index b76d13ba..63965eeb 100644 --- a/src/app/components/Octicon.ts +++ b/src/app/components/Octicon.ts @@ -5,6 +5,7 @@ export const Octicon = { chevron_right: '', clippy: '', code: '', + dash: '', download: '', globe: '', history: '', @@ -16,6 +17,7 @@ export const Octicon = { moon: '', note: '', play: '', + plus: '', plus_circle: '', sun: '', tag: '', diff --git a/src/app/components/panels/PreviewPanel.ts b/src/app/components/panels/PreviewPanel.ts index 3295faac..683c4235 100644 --- a/src/app/components/panels/PreviewPanel.ts +++ b/src/app/components/panels/PreviewPanel.ts @@ -6,11 +6,13 @@ import { View } from '../../views/View'; import { Octicon } from '../Octicon'; export const PreviewPanel = (view: View, model: DataModel) => { - const canvas = view.register(el => { + const panel = view.register(el => { + const canvasEl = el.querySelector('canvas')! + const controlsEl = el.querySelector('.panel-controls')! const redraw = () => { const preview = App.preview.get() if (preview && preview.path && preview.path.withModel(model).get()) { - const ctx = (el as HTMLCanvasElement).getContext('2d')! + const ctx = canvasEl.getContext('2d')! const img = ctx.createImageData(200, 100) const newState = preview.path.withModel(model).get() preview.state = JSON.parse(JSON.stringify(newState)) @@ -50,15 +52,15 @@ export const PreviewPanel = (view: View, model: DataModel) => { ;(el as HTMLCanvasElement).addEventListener('mouseup', evt => { dragStart = undefined }) - }) - return `
-
+ + view.mount(controlsEl, ` + ${App.preview.get()?.menu(view, redraw) ?? ''}
- ${Octicon.x} -
-
- + })}">${Octicon.x}
`, false) + }) + return `
+
+
` } diff --git a/src/app/components/panels/SourcePanel.ts b/src/app/components/panels/SourcePanel.ts index 42e8de12..cc701acf 100644 --- a/src/app/components/panels/SourcePanel.ts +++ b/src/app/components/panels/SourcePanel.ts @@ -1,7 +1,7 @@ import { DataModel, ModelPath, Path } from '@mcschema/core'; import { Tracker } from '../../Tracker'; import { transformOutput } from '../../hooks/transformOutput'; -import { View } from '../../views/View'; +import { toggleMenu, View } from '../../views/View'; import { Octicon } from '../Octicon'; import { App } from '../../App'; @@ -45,12 +45,6 @@ export const SourcePanel = (view: View, model: DataModel) => { el.closest('.panel-controls')?.querySelector('input') Tracker.share() } - const toggleMenu = (el: Element) => { - el.classList.toggle('active') - document.body.addEventListener('click', evt => { - el.classList.remove('active') - }, { capture: true, once: true }) - } return `
diff --git a/src/app/components/panels/TreePanel.ts b/src/app/components/panels/TreePanel.ts index 77d11007..485460f8 100644 --- a/src/app/components/panels/TreePanel.ts +++ b/src/app/components/panels/TreePanel.ts @@ -1,7 +1,7 @@ import { DataModel, ModelPath, Path } from '@mcschema/core'; import { App, checkVersion, Previews } from '../../App'; import { Tracker } from '../../Tracker' -import { View } from '../../views/View'; +import { toggleMenu, View } from '../../views/View'; import { Octicon } from '../Octicon'; import { Mounter } from '../../Mounter'; import { renderHtml } from '../../hooks/renderHtml'; @@ -108,12 +108,6 @@ export const TreePanel = (view: View, model: DataModel) => { mountContent(el) }, 'tree-panel') }) - const toggleMenu = (el: Element) => { - el.classList.toggle('active') - document.body.addEventListener('click', evt => { - el.classList.remove('active') - }, { capture: true, once: true }) - } return `
void) { + return ` +
+ ${Octicon.plus} +
+
+ ${Octicon.dash} +
` + } + draw(model: DataModel, img: ImageData) { this.noise = BiomeNoisePreview.noiseMaps.map((id, i) => { const config = this.state[`${id}_noise`] diff --git a/src/app/preview/Preview.ts b/src/app/preview/Preview.ts index fa7e4b5b..7b2c6c79 100644 --- a/src/app/preview/Preview.ts +++ b/src/app/preview/Preview.ts @@ -1,4 +1,5 @@ import { DataModel, ModelPath } from "@mcschema/core" +import { View } from "../views/View" export abstract class Preview { state: any @@ -8,6 +9,10 @@ export abstract class Preview { return JSON.stringify(this.state) !== JSON.stringify(path.get()) } + menu(view: View, redraw: () => void): string { + return '' + } + abstract getName(): string abstract active(path: ModelPath): boolean abstract draw(model: DataModel, img: ImageData): void diff --git a/src/app/views/View.ts b/src/app/views/View.ts index 1d842fda..b4162350 100644 --- a/src/app/views/View.ts +++ b/src/app/views/View.ts @@ -52,3 +52,10 @@ export class View { this.mounted(el, clear) } } + +export const toggleMenu = (el: Element) => { + el.classList.toggle('active') + document.body.addEventListener('click', evt => { + el.classList.remove('active') + }, { capture: true, once: true }) +} diff --git a/src/styles/global.css b/src/styles/global.css index 5c66b656..b7c536a1 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -298,8 +298,10 @@ nav > .toggle span { align-items: center; border: none; border-radius: 3px; + height: 33px; padding: 7px 11px; cursor: pointer; + user-select: none; outline: none; font-size: 1rem; white-space: nowrap;