Add ability to export json

src/renderer/appbar/appbar.tsx

@@ -25,6 +25,7 @@ const useStyles = createUseStyles({
 
 interface AppBarProps {
 	onItemClick: (key: string) => void
+	onItemRightClick: (key: string) => void
 }
 export function AppBar(props: AppBarProps) {
 	const classes = useStyles()
@@ -36,6 +37,7 @@ export function AppBar(props: AppBarProps) {
 			itemKey={entry.key}
 			icon={entry.icon}
 			onClick={() => {props.onItemClick(entry.key)}}
+			onRightClick={() => {props.onItemRightClick(entry.key)}}
 		/>
 	}
 

src/renderer/appbar/button.tsx

@@ -32,12 +32,13 @@ interface AppBarButtonProps {
 	itemKey: string
 	icon: React.ReactNode
 	onClick?: () => void
+	onRightClick?: () => void
 }
 export function AppBarButton(props: AppBarButtonProps) {
 	const classes = useStyles()
 	const LNG = useI18n()
 
-	return <button onClick={props.onClick} type='button' className={classes.item}>
+	return <button onClick={props.onClick} onContextMenu={props.onRightClick} type='button' className={classes.item}>
 		<div className={classes.iconContainer}>
 			{props.icon}
 		</div>

src/renderer/dialog/hint/entries.tsx

@@ -35,6 +35,14 @@ const entries: HintEntries = [
 		confirm: true,
 		focusButton: true
 	},
+	{
+		key: 'jsonUsage',
+		lines: 2,
+		prefKey: 'hintJsonUsage',
+		dismiss: false,
+		confirm: true,
+		focusButton: true
+	},
 	{
 		key: 'printEssence',
 		lines: 3,

src/renderer/i18n/lang/zh_cn.ts

@@ -40,9 +40,11 @@ export default flattenI18nData({
 	"toast": {
 		"open_fail": "无法打开文件 ${0}",
 		"save_fail": "无法保存至 ${0}",
-		"export_fail": "无法导出到 ${0}",
 		"save_before_export": "不能导出未保存过的文件。",
-		"exported": "已将预览导出到 ${0}",
+		"preview_exported": "已将预览导出到 ${0}",
+		"preview_export_fail": "无法导出到 ${0}",
+		"json_exported": "已将数据导出到 ${0}",
+		"json_export_fail": "无法导出到 ${0}",
 		"print_fail": "准备打印环境失败",
 		"print_launch_fail": "无法启动浏览器，请检查设置中的浏览器路径是否正确。",
 		"new_version": "新版本 ${0} 现已可用，可前往官网下载。",
@@ -78,6 +80,14 @@ export default flattenI18nData({
 			},
 			"confirm": "导出"
 		},
+		"jsonUsage": {
+			"title": "JSON 用途提示",
+			"line": {
+				"1": `导出的 JSON 文件包含解析后的乐谱数据。这些数据可供第三方软件使用，可以用来渲染乐谱，也可以用来生成一些音乐相关的内容，例如 MIDI 文件。`,
+				"2": `JSON 文件是一种目标格式，并不直接包含源代码。`,
+			},
+			"confirm": "导出"
+		},
 		"printEssence": {
 			"title": "如何打印",
 			"line": {
@@ -258,6 +268,10 @@ export default flattenI18nData({
 				"title": "HTML 用途提示",
 				"desc": "触发：导出 HTML 文件前。"
 			},
+			"hintJsonUsage": {
+				"title": "JSON 用途提示",
+				"desc": "触发：导出 JSON 文件前。JSON 文件导出可通过右键点击“导出”按钮触发。"
+			},
 			"hintExportEssence": {
 				"title": "关于 PNG/PDF 导出的本质",
 				"desc": "触发：导出 PNG/PDF 前。"

src/renderer/index.tsx

@@ -204,9 +204,9 @@ function AppIn() {
 		const exportContent = editorApi.exportHtml(exportTemplate, localFontLocation)
 		const basename = window.Path.basename(path)
 		if(await window.FileSystem.saveText(path, exportContent)) {
-			showToast(LNG('toast.exported', basename))
+			showToast(LNG('toast.preview_exported', basename))
 		} else {
-			showToast(LNG('toast.export_fail', basename))
+			showToast(LNG('toast.preview_export_fail', basename))
 		}
 	}
 	function exportHtml() {
@@ -229,6 +229,32 @@ function AppIn() {
 			})
 		})
 	}
+	function exportJson() {
+		if(!checkExportCooldown()) {
+			return
+		}
+		callRef(editorApiRef, api => {
+			callRef(hintApiRef, async hint => {
+				const filename = api.getFilename()
+				if(filename === undefined) {
+					showToast(LNG('toast.save_before_export'))
+					return
+				}
+				if(!await hint.invoke('jsonUsage')) {
+					return
+				}
+				const parsedFn = window.Path.parse(filename)
+				const exportPath = window.Path.join(parsedFn.dir, parsedFn.name + '.json')
+				const exportContent = api.exportJson()
+				const basename = window.Path.basename(exportPath)
+				if(await window.FileSystem.saveText(exportPath, exportContent)) {
+					showToast(LNG('toast.json_exported', basename))
+				} else {
+					showToast(LNG('toast.json_export_fail', basename))
+				}
+			})
+		})
+	}
 	function printHtml() {
 		if(!checkExportCooldown()) {
 			return
@@ -292,6 +318,11 @@ function AppIn() {
 			printHtml()
 		}
 	}
+	async function handleAppBarRightItem(key: string) {
+		if(key == 'export') {
+			exportJson()
+		}
+	}
 	async function openDocumentPath(path: string) {
 		callRef(editorApiRef, async api => {
 			const data = await window.FileSystem.openText(path)
@@ -422,7 +453,7 @@ function AppIn() {
 				}
 			`}</style>
 			<div className={classes.appbar}>
-				<AppBar onItemClick={handleAppBarItem} />
+				<AppBar onItemClick={handleAppBarItem} onItemRightClick={handleAppBarRightItem} />
 			s</div>
 			<div className={classes.content}>
 				<IntegratedEditor

src/renderer/nmn/integrated-editor/IntegratedEditor.tsx

@@ -335,14 +335,15 @@ export const __IntegratedEditor = React.forwardRef<IntegratedEditorApi, __Props>
 	})
 	const updateResult = useMethod((valueOverride?: string) => {
 		if(undefined === valueOverride && !isPreviewDirty) {
-			return
+			return parseResult.result
 		}
 		const parsed = parseNMN(valueOverride ?? value)
 		setParseResult({
 			result: parsed.result,
 			timing: parsed.time
 		})
 		setIsPreviewDirty(false)
+		return parsed.result
 	})
 
 	function handleChange(newValue: string) {
@@ -586,11 +587,12 @@ export const __IntegratedEditor = React.forwardRef<IntegratedEditorApi, __Props>
 		resetSession()
 	})
 	const handleExport = useMethod((template: string, localFontLocation: string) => {
+		let result = parseResult.result
 		if(isPreviewDirty) {
-			updateResult()
+			result = updateResult()
 		}
-		const fields = SparksNMN.render(parseResult.result.result, languageArray)
-		const pagedFields = SparksNMN.paginize(parseResult.result.result, fields, languageArray).result
+		const fields = SparksNMN.render(result.result, languageArray)
+		const pagedFields = SparksNMN.paginize(result.result, fields, languageArray).result
 		let title = NMNI18n.editorText(language, 'preview.new_title')
 		if(filename !== undefined) {
 			title = basenameName(filename)
@@ -606,6 +608,14 @@ export const __IntegratedEditor = React.forwardRef<IntegratedEditorApi, __Props>
 			))
 		return htmlData
 	})
+	const handleExportJson = useMethod(() => {
+		let result = parseResult.result
+		if(isPreviewDirty) {
+			result = updateResult()
+		}
+		const jsonResult = JSON.stringify(result)
+		return jsonResult
+	})
 	useImperativeHandle(ref, () => ({
 		getValue: () => {
 			return getValue()
@@ -630,6 +640,9 @@ export const __IntegratedEditor = React.forwardRef<IntegratedEditorApi, __Props>
 		},
 		exportHtml: (template: string, localFontLocation: string) => {
 			return handleExport(template, localFontLocation)
+		},
+		exportJson: () => {
+			return handleExportJson()
 		}
 	}))
 
@@ -645,4 +658,5 @@ export interface IntegratedEditorApi {
 	triggerNew: () => void
 	triggerOpen: (data: {path: string, content: string}) => void
 	exportHtml: (template: string, localFontLocation: string) => string
+	exportJson: () => string
 }

src/util/prefs/entries.ts

@@ -21,7 +21,7 @@ const entries: PrefRendererInfo = [
 		entries: [
 			{
 				key: 'fontFamily',
-				defaultValue: ['string', "'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'Microsoft YaHei UI'"],
+				defaultValue: ['string', "'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', system-ui"],
 				type: 'string'
 			},
 			{
@@ -133,6 +133,11 @@ const entries: PrefRendererInfo = [
 				defaultValue: ['boolean', true],
 				type: 'boolean'
 			},
+			{
+				key: 'hintJsonUsage',
+				defaultValue: ['boolean', true],
+				type: 'boolean'
+			},
 			// {
 			// 	key: 'hintExportEssence',
 			// 	defaultValue: ['boolean', true],

version-number.json

@@ -1,4 +1,4 @@
 {
-	"app": "1.14.16",
-	"core": "1.14.16"
+	"app": "1.14.17",
+	"core": "1.14.17"
 }