{"remainingRequest":"/home/camus/work/lotus/node_modules/vue-loader/lib/index.js??vue-loader-options!/home/camus/work/lotus/app/components/sheet-live.vue?vue&type=style&index=2&id=49be23a7&lang=scss","dependencies":[{"path":"/home/camus/work/lotus/app/components/sheet-live.vue","mtime":1732184473651},{"path":"/home/camus/work/lotus/node_modules/css-loader/dist/cjs.js","mtime":1719800839423},{"path":"/home/camus/work/lotus/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1719800840033},{"path":"/home/camus/work/lotus/node_modules/postcss-loader/src/index.js","mtime":1719800839995},{"path":"/home/camus/work/lotus/node_modules/sass-loader/dist/cjs.js","mtime":1719800856708},{"path":"/home/camus/work/lotus/node_modules/cache-loader/dist/cjs.js","mtime":1719800821084},{"path":"/home/camus/work/lotus/node_modules/vue-loader/lib/index.js","mtime":1719800840033}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CkBpbXBvcnQgIi4uL3N0eWxlcy9zaGVldENvbnN0YW50cy5jc3MiOwoKCi5zaGVldAp7CgkuYmFrZQoJewoJCS50b2tlbgoJCXsKCQkJdGV4dAoJCQl7CgkJCQlmaWxsOiB2YXIoLS1sb3R1cy10b2tlbi1kZWZhdWx0LWNvbG9yKTsKCgkJCQkmLm9uCgkJCQl7CgkJCQkJZmlsbDogdmFyKC0tbG90dXMtdG9rZW4tb24tY29sb3IpOwoJCQkJCXN0cm9rZS13aWR0aDogMC4xOwoJCQkJCXN0cm9rZTogdmFyKC0tbG90dXMtdG9rZW4tb24tY29sb3IpOwoJCQkJfQoJCQl9CgkJfQoJfQp9Cg=="},{"version":3,"sources":["sheet-live.vue"],"names":[],"mappings":";AA0vBA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"sheet-live.vue","sourceRoot":"app/components","sourcesContent":["<template>\n\t<div class=\"sheet live\">\n\t\t<svg v-for=\"(page, i) of shownPages\" :key=\"i\" ref=\"pages\"\n\t\t\tclass=\"page\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t:width=\"page.width\"\n\t\t\t:height=\"page.height\"\n\t\t\t:viewBox=\"`${page.viewBox.x} ${page.viewBox.y} ${page.viewBox.width} ${page.viewBox.height}`\"\n\t\t\t:style=\"{['background-image']: backgroundImages && backgroundImages[i] && `url(${backgroundImages[i]})`}\"\n\t\t\t@DOMNodeInserted=\"onPageChanged\"\n\t\t>\n\t\t\t<g v-if=\"!partialVisible || !page.hidden\">\n\t\t\t\t<g v-if=\"showMark\" class=\"mark\">\n\t\t\t\t\t<g class=\"system\" v-for=\"(system, ii) of page.systems\" :key=\"ii\"\n\t\t\t\t\t\t:transform=\"`translate(${system.x}, ${system.y})`\"\n\t\t\t\t\t\t@mousemove=\"enablePointer && onMousemovePad(system, $event)\"\n\t\t\t\t\t\t@mouseleave=\"enablePointer && onMouseleavePad(system, $event)\"\n\t\t\t\t\t\t@click=\"onClickPad(system, $event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<rect :x=\"0\" :y=\"system.top\" :width=\"system.width\" :height=\"system.bottom - system.top\" />\n\t\t\t\t\t\t<slot name=\"system\" :system=\"system\" :page=\"page\"></slot>\n\t\t\t\t\t</g>\n\t\t\t\t\t<slot name=\"page\" :page=\"page\"></slot>\n\t\t\t\t</g>\n\t\t\t\t<g v-if=\"!bakingMode\">\n\t\t\t\t\t<g v-if=\"watermark\" class=\"wm\">\n\t\t\t\t\t\t<image :href=\"watermark\"\n\t\t\t\t\t\t\t:x=\"(doc.pageSize.width - watermarkSize.width) / 2 / svgScale\"\n\t\t\t\t\t\t\t:y=\"(doc.pageSize.height - watermarkSize.height) / 2 / svgScale\"\n\t\t\t\t\t\t\t:width=\"watermarkSize.width / 2 / svgScale\"\n\t\t\t\t\t\t\t:height=\"watermarkSize.height / 2 / svgScale\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</g>\n\t\t\t\t\t<g class=\"page-tokens\">\n\t\t\t\t\t\t<SheetToken v-for=\"(token, ii) of page.tokens\" :key=\"ii\" :token=\"token\" />\n\t\t\t\t\t</g>\n\t\t\t\t\t<g class=\"system\" v-for=\"(system, ii) of page.systems\" :key=\"ii\"\n\t\t\t\t\t\t:transform=\"`translate(${system.x}, ${system.y})`\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<rect class=\"cursor\" v-if=\"showCursor && cursorPosition && cursorPosition.system === system.index\"\n\t\t\t\t\t\t\t:x=\"cursorPosition.x\" :y=\"system.top - 0.5\" width=\"1\" :height=\"system.bottom - system.top + 1\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<g>\n\t\t\t\t\t\t\t<SheetToken v-for=\"(token, i5) of system.tokens\" :key=\"i5\" :token=\"token\" />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t\t<g class=\"staff\" v-for=\"(staff, iii) of system.staves\" :key=\"iii\"\n\t\t\t\t\t\t\t:transform=\"`translate(${staff.x}, ${staff.y})`\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<g>\n\t\t\t\t\t\t\t\t<SheetToken v-for=\"(token, i5) of staff.tokens\" :key=\"i5\" :token=\"token\" />\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t<g class=\"measure\" v-for=\"(measure, i4) of staff.measures\" :key=\"i4\">\n\t\t\t\t\t\t\t\t<SheetToken v-for=\"(token, i5) of measure.tokens\" :key=\"i5\"\n\t\t\t\t\t\t\t\t\t:token=\"token\"\n\t\t\t\t\t\t\t\t\t:classes=\"{\n\t\t\t\t\t\t\t\t\t\tmatched: statusMap.has(token.href),\n\t\t\t\t\t\t\t\t\t\tmismatched: token.is('NOTEHEAD') && !statusMap.has(token.href),\n\t\t\t\t\t\t\t\t\t\ttied: token.tied,\n\t\t\t\t\t\t\t\t\t\tattached: Number.isFinite(token.stemX),\n\t\t\t\t\t\t\t\t\t\thighlight: highlightSymbol && token.is(highlightSymbol),\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t:showTitle=\"showMark\"\n\t\t\t\t\t\t\t\t\t:scale=\"enabledFont ? token.scale2 : null\"\n\t\t\t\t\t\t\t\t\t@click=\"$emit('click-token', token, $event)\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t<g v-if=\"showMark\" class=\"mark\">\n\t\t\t\t\t\t\t\t<slot name=\"staff\" :staff=\"staff\" :system=\"system\" :page=\"page\"></slot>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t<g class=\"markings\">\n\t\t\t\t\t\t\t\t<g v-for=\"marking of staff.markings\" :key=\"marking.index\"\n\t\t\t\t\t\t\t\t\t:transform=\"`translate(${marking.x}, ${marking.y + staff.yRoundOffset})`\"\n\t\t\t\t\t\t\t\t\t:class=\"marking.cls\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<text>{{marking.text}}</text>\n\t\t\t\t\t\t\t\t\t<text class=\"alter\" v-if=\"marking.alterText\" x=\"-0.2\" y=\"0\">{{marking.alterText}}</text>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t</g>\n\t\t\t\t<g v-if=\"bakingMode\" class=\"bake\">\n\t\t\t\t\t<g class=\"system\" v-for=\"(system, ii) of page.systems\" :key=\"ii\"\n\t\t\t\t\t\t:transform=\"`translate(${system.x}, ${system.y})`\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<rect class=\"cursor\" v-if=\"showCursor && cursorPosition && cursorPosition.system === system.index\"\n\t\t\t\t\t\t\t:x=\"cursorPosition.x\" :y=\"system.top - 0.5\" width=\"1\" :height=\"system.bottom - system.top + 1\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<g class=\"staff\" v-for=\"(staff, iii) of system.staves\" :key=\"iii\"\n\t\t\t\t\t\t\t:transform=\"`translate(${staff.x}, ${staff.y})`\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<g class=\"measure\" v-for=\"(measure, i4) of staff.measures\" :key=\"i4\">\n\t\t\t\t\t\t\t\t<g v-for=\"(token, i5) of measure.matchedTokens\" :key=\"i5\"\n\t\t\t\t\t\t\t\t\t:transform=\"`translate(${token.x}, ${token.y})` + (token.scale && token.scale !== 1 ? ` scale(${token.scale})` : '')\"\n\t\t\t\t\t\t\t\t\tclass=\"token matched\"\n\t\t\t\t\t\t\t\t\t:class=\"{tied: token.tied}\"\n\t\t\t\t\t\t\t\t\t:data-track=\"token.track\"\n\t\t\t\t\t\t\t\t\t:data-index=\"token.index\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<text :data-href=\"token.href\">{{token.fontUnicode}}</text>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t<g class=\"markings\">\n\t\t\t\t\t\t\t\t<g v-for=\"marking of staff.markings\" :key=\"marking.index\"\n\t\t\t\t\t\t\t\t\t:transform=\"`translate(${marking.x}, ${marking.y + staff.yRoundOffset})`\"\n\t\t\t\t\t\t\t\t\t:class=\"marking.cls\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<text>{{marking.text}}</text>\n\t\t\t\t\t\t\t\t\t<text class=\"alter\" v-if=\"marking.alterText\" x=\"-0.2\" y=\"0\">{{marking.alterText}}</text>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t</g>\n\t\t\t</g>\n\t\t</svg>\n\t</div>\n</template>\n\n<script>\n\timport Vue from \"vue\";\n\timport {MidiPlayer} from \"@k-l-lambda/music-widgets\";\n\n\timport SheetScheduler from \"../../inc/lilyNotation/scheduler.ts\";\n\timport {animationDelay} from \"../delay.js\";\n\timport {SingleLock} from \"../../inc/mutex.ts\";\n\timport SchedulePool from \"../../inc/schedulePool.ts\";\n\n\timport SheetToken from \"./sheet-token.vue\";\n\n\n\n\tclass PlaceholderTokenList {\n\t\tadd () {}\n\t\tremove () {}\n\t};\n\n\n\tclass MultiClassList {\n\t\tconstructor (elems) {\n\t\t\tthis.elems = elems;\n\t\t}\n\n\t\t/*has (name) {\n\t\t\treturn this.elems[0].has(name);\n\t\t}*/\n\n\t\tadd (name) {\n\t\t\tthis.elems.forEach(elem => elem.classList.add(name));\n\t\t}\n\n\t\tremove (name) {\n\t\t\tthis.elems.forEach(elem => elem.classList.remove(name));\n\t\t}\n\n\t\tget value () {\n\t\t\treturn this.elems[0] && this.elems[0].value;\n\t\t}\n\n\t\tset value (value) {\n\t\t\tthis.elems.forEach(elem => elem.value = value);\n\t\t}\n\t};\n\n\n\tconst elemClassById = (id, parent = document) => {\n\t\tconst elems = parent.querySelectorAll(`.token *[data-href='${id}']`);\n\t\tif (elems.length === 0)\n\t\t\treturn new PlaceholderTokenList();\n\n\t\tif (elems.length === 1)\n\t\t\treturn elems[0].classList;\n\n\t\treturn new MultiClassList(elems);\n\t};\n\n\n\tconst DEFAULT_WATERMARK = process.env.VUE_APP_DEFAULT_WATERMARK;\n\n\n\n\texport default {\n\t\tname: \"sheet-live\",\n\n\n\t\tcomponents: {\n\t\t\tSheetToken,\n\t\t},\n\n\n\t\tprops: {\n\t\t\tdoc: Object,\n\t\t\tmidiNotation: Object,\n\t\t\tpitchContextGroup: Array,\n\t\t\tshowMark: Boolean,\n\t\t\tshowCursor: {\n\t\t\t\ttype: Boolean,\n\t\t\t\tdefault: true,\n\t\t\t},\n\t\t\tnoteHighlight: {\n\t\t\t\ttype: Boolean,\n\t\t\t\tdefault: true,\n\t\t\t},\n\t\t\tbakingMode: {\n\t\t\t\ttype: Boolean,\n\t\t\t\tdefault: false,\n\t\t\t},\n\t\t\tbackgroundImages: Array,\n\t\t\tenablePointer: {\n\t\t\t\ttype: Boolean,\n\t\t\t\tdefault: false,\n\t\t\t},\n\t\t\tshowPagesProgressively: {\n\t\t\t\ttype: Boolean,\n\t\t\t\tdefault: false,\n\t\t\t},\n\t\t\tpartialVisible: {\n\t\t\t\ttype: Boolean,\n\t\t\t\tdefault: true,\n\t\t\t},\n\t\t\tscheduler: Object,\n\t\t\twatermark: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: DEFAULT_WATERMARK,\n\t\t\t},\n\t\t\tenabledFont: Boolean,\n\t\t\thighlightSymbol: String,\n\t\t},\n\n\n\t\tdata () {\n\t\t\treturn {\n\t\t\t\tmidiPlayer: null,\n\t\t\t\t//scheduler: null,\n\t\t\t\tstatusMap: new Map(),\n\t\t\t\tshownPages: [],\n\t\t\t\twatermarkSize: {\n\t\t\t\t\twidth: 256,\n\t\t\t\t\theight: 256,\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\n\n\t\tcomputed: {\n\t\t\tprogressTicks () {\n\t\t\t\treturn this.midiPlayer && this.midiPlayer.progressTicks;\n\t\t\t},\n\n\n\t\t\tcursorPosition () {\n\t\t\t\tif (!this.midiPlayer || !this.scheduler)\n\t\t\t\t\treturn null;\n\n\t\t\t\treturn this.scheduler.lookupPosition(this.progressTicks);\n\t\t\t},\n\n\n\t\t\tcursorPageIndex () {\n\t\t\t\tif (!this.cursorPosition || !this.doc)\n\t\t\t\t\treturn null;\n\n\t\t\t\tconst system = this.doc.systems[this.cursorPosition.system];\n\t\t\t\tconsole.assert(system, \"invalid cursor system index:\", this.cursorPosition);\n\n\t\t\t\tif (!system)\n\t\t\t\t\treturn null;\n\n\t\t\t\treturn system.pageIndex;\n\t\t\t},\n\n\n\t\t\tcursorSystemIndex () {\n\t\t\t\tif (!this.cursorPosition || !this.doc)\n\t\t\t\t\treturn null;\n\n\t\t\t\treturn this.cursorPosition.system;\n\t\t\t},\n\n\n\t\t\t// DEPRECATED\n\t\t\tcursorRowIndex () {\n\t\t\t\treturn this.cursorSystemIndex;\n\t\t\t},\n\n\n\t\t\tsvgScale () {\n\t\t\t\tconst page = this.doc && this.doc.pages[0];\n\t\t\t\tif (page)\n\t\t\t\t\treturn this.doc.pageSize.width / page.viewBox.width;\n\n\t\t\t\treturn 1;\n\t\t\t},\n\n\n\t\t\tisPlaying () {\n\t\t\t\treturn this.midiPlayer && this.midiPlayer.isPlaying;\n\t\t\t},\n\t\t},\n\n\n\t\tcreated () {\n\t\t\tthis.pageLoadingLock = new SingleLock();\n\t\t\tthis.schedulePool = new SchedulePool(performance);\n\n\t\t\tthis.preparePlayer();\n\n\t\t\tthis.showPages();\n\n\t\t\tif (this.watermark) {\n\t\t\t\tconst img = new Image();\n\t\t\t\timg.src = this.watermark;\n\t\t\t\timg.onload = () => {\n\t\t\t\t\tthis.watermarkSize.width = img.naturalWidth;\n\t\t\t\t\tthis.watermarkSize.height = img.naturalHeight;\n\t\t\t\t};\n\t\t\t}\n\t\t},\n\n\n\t\tmethods: {\n\t\t\tonPlayerMidi (data, timestamp) {\n\t\t\t\tthis.$emit(\"midi\", data, timestamp);\n\n\t\t\t\tif (this.noteHighlight) {\n\t\t\t\t\tif (data.ids) {\n\t\t\t\t\t\tlet task = null;\n\t\t\t\t\t\tconst ids = data.ids;\n\n\t\t\t\t\t\tswitch (data.subtype) {\n\t\t\t\t\t\tcase \"noteOn\":\n\t\t\t\t\t\t\ttask = () => ids.forEach(id => {\n\t\t\t\t\t\t\t\tconst status = this.statusMap.get(id);\n\t\t\t\t\t\t\t\tstatus && status.add(\"on\");\n\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase \"noteOff\":\n\t\t\t\t\t\t\ttask = () => ids.forEach(id => {\n\t\t\t\t\t\t\t\tconst status = this.statusMap.get(id);\n\t\t\t\t\t\t\t\tstatus && status.remove(\"on\");\n\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (task)\n\t\t\t\t\t\t\tthis.schedulePool.appendTask(timestamp, task);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\n\t\t\tsetNoteStatus (noteIndex, className, on) {\n\t\t\t\tif (this.midiNotation) {\n\t\t\t\t\tconst note = this.midiNotation.notes[noteIndex];\n\t\t\t\t\tif (note) {\n\t\t\t\t\t\tif (note.ids) {\n\t\t\t\t\t\t\tnote.ids.forEach(id => {\n\t\t\t\t\t\t\t\tconst list = this.statusMap.get(id);\n\t\t\t\t\t\t\t\tif (list) {\n\t\t\t\t\t\t\t\t\tif (on)\n\t\t\t\t\t\t\t\t\t\tlist.add(className);\n\t\t\t\t\t\t\t\t\telse\n\t\t\t\t\t\t\t\t\t\tlist.remove(className);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\telse\n\t\t\t\t\t\tconsole.warn(\"invalid note index:\", noteIndex, this.midiNotation.notes.length);\n\t\t\t\t}\n\t\t\t},\n\n\n\t\t\tclearNoteStatus () {\n\t\t\t\tfor (const status of this.statusMap.values())\n\t\t\t\t\tstatus.value = \"\";\n\t\t\t},\n\n\n\t\t\tupdateTokenStatus () {\n\t\t\t\tif (this.midiNotation && this.noteHighlight) {\n\t\t\t\t\tfor (const note of this.midiNotation.notes) {\n\t\t\t\t\t\tconst on = this.midiPlayer.isPlaying && this.midiPlayer.progressTime >= note.start && this.midiPlayer.progressTime < note.start + note.duration;\n\t\t\t\t\t\tif (note.ids) {\n\t\t\t\t\t\t\tnote.ids.forEach(id => {\n\t\t\t\t\t\t\t\tconst status = this.statusMap.get(id);\n\t\t\t\t\t\t\t\tif (status) {\n\t\t\t\t\t\t\t\t\tif (on)\n\t\t\t\t\t\t\t\t\t\tstatus.add(\"on\");\n\t\t\t\t\t\t\t\t\telse\n\t\t\t\t\t\t\t\t\t\tstatus.remove(\"on\");\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\n\t\t\tasync preparePlayer () {\n\t\t\t\t//console.log(\"t1:\", performance.now());\n\t\t\t\t//this.scheduler = null;\n\t\t\t\tthis.statusMap.clear();\n\n\t\t\t\tif (this.midiPlayer) {\n\t\t\t\t\tthis.midiPlayer.dispose();\n\t\t\t\t\tthis.midiPlayer = null;\n\t\t\t\t}\n\n\t\t\t\tif (this.midiNotation) {\n\t\t\t\t\tthis.updateMidiPlayer();\n\n\t\t\t\t\t// wait DOM update\n\t\t\t\t\tawait this.$nextTick();\n\t\t\t\t\tawait this.pageLoadingLock.wait();\n\n\t\t\t\t\tthis.updateStatusMap();\n\n\t\t\t\t\tif (!this.scheduler) {\n\t\t\t\t\t\tconst tokenMap = this.doc && this.doc.getTokenMap();\n\t\t\t\t\t\tif (tokenMap) {\n\t\t\t\t\t\t\tfor (const token of tokenMap.values())\n\t\t\t\t\t\t\t\tVue.set(token, \"on\", token.on || false);\n\n\t\t\t\t\t\t\tconst scheduler = SheetScheduler.createFromNotation(this.midiNotation, tokenMap);\n\t\t\t\t\t\t\tthis.$emit(\"update:scheduler\", scheduler);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\n\t\t\tupdateMidiPlayer () {\n\t\t\t\tif (this.midiPlayer)\n\t\t\t\t\tthis.midiPlayer.dispose();\n\n\t\t\t\tthis.midiPlayer = new MidiPlayer(this.midiNotation, {\n\t\t\t\t\tcacheSpan: 400,\n\t\t\t\t\tonMidi: (data, timestamp) => this.onPlayerMidi(data, timestamp),\n\t\t\t\t\tonTurnCursor: () => this.updateTokenStatus(),\n\t\t\t\t});\n\t\t\t},\n\n\n\t\t\tupdateStatusMap () {\n\t\t\t\tif (this.midiNotation) {\n\t\t\t\t\tthis.midiNotation.notes.forEach(note => note.ids && note.ids.forEach(id => {\n\t\t\t\t\t\tif (!this.statusMap.get(id))\n\t\t\t\t\t\t\tthis.statusMap.set(id, elemClassById(id, this.$el));\n\t\t\t\t\t}));\n\t\t\t\t}\n\t\t\t},\n\n\n\t\t\tupdateStatusMapInPage (page) {\n\t\t\t\tconst tokens = page.querySelectorAll(\".token *[data-href]\");\n\t\t\t\ttokens.forEach(token => {\n\t\t\t\t\tconst id = token.dataset.href;\n\t\t\t\t\t//this.statusMap.set(id, token.classList);\n\t\t\t\t\tthis.statusMap.set(id, elemClassById(id, page));\n\t\t\t\t});\n\t\t\t},\n\n\n\t\t\taddMarkingByTick (tick, pitch, staffIndex, {id, cls, text = \"\\ue0a9\", xoffset = 0} = {}) {\n\t\t\t\tif (!this.pitchContextGroup) {\n\t\t\t\t\tconsole.warn(\"[addMarkingByTick]\tpitchContextGroup is required.\");\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst contextTable = this.pitchContextGroup[staffIndex];\n\t\t\t\tif (!contextTable) {\n\t\t\t\t\tconsole.warn(\"[addMarkingByTick]\tinvalid staffIndex:\", staffIndex, this.pitchContextGroup.length);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst position = this.scheduler.lookupPosition(tick);\n\t\t\t\tif (!position) {\n\t\t\t\t\tconsole.warn(\"[addMarkingByTick]\tinvalid tick:\", tick);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst context = contextTable.lookup(tick);\n\t\t\t\tif (!context) {\n\t\t\t\t\tconsole.warn(\"no context at tick:\", tick, contextTable);\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\tconst {y, alter} = context.pitchToY(pitch);\n\n\t\t\t\treturn this.doc.addMarking(position.system, staffIndex, {x: position.x + xoffset, y, text, alter, id, cls});\n\t\t\t},\n\n\n\t\t\taddMarkingByNote (noteIndex, pitch, {id = null, cls, text = \"\\ue0a9\"} = {}) {\n\t\t\t\tconsole.assert(this.midiNotation, \"[addMarkingByNote]\tmidiNotation is null.\");\n\n\t\t\t\tconst note = this.midiNotation.notes[noteIndex];\n\t\t\t\tif (!note) {\n\t\t\t\t\tconsole.warn(\"[addMarkingByNote]\tinvalid noteIndex:\", noteIndex, this.midiNotation.notes.length);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif (!id) {\n\t\t\t\t\tif (!note.ids)\n\t\t\t\t\t\treturn null;\n\n\t\t\t\t\tid = note.ids[0];\n\t\t\t\t}\n\n\t\t\t\treturn this.addMarkingByTick(note.startTick, pitch, note.staffTrack, {id, cls, text, xoffset: 1.2});\n\t\t\t},\n\n\n\t\t\tremoveMarking (id) {\n\t\t\t\tthis.doc.removeMarking(id);\n\t\t\t},\n\n\n\t\t\tclearMarkings () {\n\t\t\t\tthis.doc.clearMarkings();\n\t\t\t},\n\n\n\t\t\tasync showPages () {\n\t\t\t\tthis.shownPages = [];\n\n\t\t\t\tif (!this.doc)\n\t\t\t\t\treturn;\n\n\t\t\t\tif (this.showPagesProgressively) {\n\t\t\t\t\tawait this.pageLoadingLock.wait();\n\t\t\t\t\tthis.pageLoadingLock.lock();\n\n\t\t\t\t\tfor (let i = 0; i < this.doc.pages.length; ++i) {\n\t\t\t\t\t\tthis.shownPages.push(this.doc.pages[i]);\n\n\t\t\t\t\t\tawait this.$nextTick();\n\t\t\t\t\t\tawait animationDelay();\n\t\t\t\t\t}\n\n\t\t\t\t\tthis.pageLoadingLock.release();\n\t\t\t\t}\n\t\t\t\telse\n\t\t\t\t\tthis.shownPages = this.doc.pages;\n\t\t\t},\n\n\n\t\t\tonDocChanged () {\n\t\t\t\tthis.clearNoteStatus();\n\t\t\t\tthis.clearMarkings();\n\n\t\t\t\tthis.showPages();\n\t\t\t},\n\n\n\t\t\teventToSystemPosition (system, event) {\n\t\t\t\treturn {\n\t\t\t\t\tx: event.offsetX / this.svgScale - system.x,\n\t\t\t\t\ty: event.offsetY / this.svgScale - system.y,\n\t\t\t\t};\n\t\t\t},\n\n\n\t\t\teventToPointer (system, event) {\n\t\t\t\tconst pos = this.eventToSystemPosition(system, event);\n\t\t\t\tconst systemIndex = system.index;\n\t\t\t\tconst measureIndex = this.doc.lookupMeasureIndex(systemIndex, pos.x);\n\t\t\t\tconst tick = this.scheduler && this.scheduler.lookupTick({system: systemIndex, x: pos.x});\n\n\t\t\t\treturn {\n\t\t\t\t\tsystemIndex, measureIndex, tick, ...pos,\n\t\t\t\t};\n\t\t\t},\n\n\n\t\t\tonMousemovePad (system, event) {\n\t\t\t\tthis.$emit(\"pointerUpdate\", this.eventToPointer(system, event));\n\t\t\t},\n\n\n\t\t\tonMouseleavePad () {\n\t\t\t\tthis.$emit(\"pointerUpdate\", null);\n\t\t\t},\n\n\n\t\t\tonClickPad (system, event) {\n\t\t\t\tthis.$emit(\"pointerClick\", this.eventToPointer(system, event), event);\n\t\t\t},\n\n\n\t\t\tupdatePageVisibility () {\n\t\t\t\t//console.log(\"pages:\", this.$refs.pages);\n\t\t\t\t//const dirtyPages = [];\n\t\t\t\tif (!this.$refs.pages) {\n\t\t\t\t\tconsole.log(\"[updatePageVisibility] $refs.pages is null:\", this.$refs.pages);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tthis.$refs.pages.forEach((pageElem, i) => {\n\t\t\t\t\tconst rect = pageElem.getBoundingClientRect();\n\n\t\t\t\t\tconst page = this.shownPages[i];\n\t\t\t\t\tconst hidden = rect.top > window.innerHeight || rect.bottom < 0 || rect.left > window.innerWidth || rect.right < 0;\n\t\t\t\t\tif (!!page.hidden !== hidden)\n\t\t\t\t\t\tVue.set(page, \"hidden\", hidden);\n\t\t\t\t\t\t//if (!hidden)\n\t\t\t\t\t\t//\tdirtyPages.push(pageElem);\n\t\t\t\t\t\n\t\t\t\t\t//console.log(\"page:\", i, rect, window.innerWidth, window.innerHeight, page.hidden);\n\t\t\t\t});\n\n\t\t\t\t//this.$nextTick(() => dirtyPages.forEach(page => this.updateStatusMapInPage(page)));\n\t\t\t},\n\n\n\t\t\tonPageChanged (event) {\n\t\t\t\t//console.log(\"onPageChanged:\", event);\n\t\t\t\tif (event.target && event.target.nodeName === \"g\")\n\t\t\t\t\tthis.updateStatusMapInPage(event.target);\n\t\t\t},\n\t\t},\n\n\n\t\twatch: {\n\t\t\tmidiNotation: \"preparePlayer\",\n\n\n\t\t\tmidiPlayer (value) {\n\t\t\t\tthis.$emit(\"update:midiPlayer\", value);\n\t\t\t},\n\n\n\t\t\tasync bakingMode () {\n\t\t\t\tawait this.$nextTick();\n\t\t\t\tawait this.pageLoadingLock.wait();\n\n\t\t\t\tthis.updateStatusMap();\n\t\t\t\tthis.updateTokenStatus();\n\t\t\t},\n\n\n\t\t\tdoc: \"onDocChanged\",\n\n\n\t\t\tcursorPageIndex (value) {\n\t\t\t\tthis.$emit(\"cursorPageShift\", value);\n\t\t\t},\n\n\n\t\t\tcursorSystemIndex (value) {\n\t\t\t\tthis.$emit(\"cursorSystemShift\", value);\n\t\t\t},\n\n\n\t\t\tisPlaying (value) {\n\t\t\t\tif (!value)\n\t\t\t\t\tthis.schedulePool.clear();\n\t\t\t},\n\t\t},\n\t};\n</script>\n\n<style lang=\"scss\" scoped>\n\t@import \"../styles/sheetConstants.css\";\n\n\n\t.sheet\n\t{\n\t\t.mark\n\t\t{\n\t\t\t//visibility: hidden;\n\t\t\topacity: 0;\n\n\t\t\t.locator\n\t\t\t{\n\t\t\t\ttext\n\t\t\t\t{\n\t\t\t\t\tfont-size: 2px;\n\t\t\t\t\ttext-anchor: start;\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\trect\n\t\t\t{\n\t\t\t\tfill: transparent;\n\t\t\t}\n\t\t}\n\n\t\t.wm\n\t\t{\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t.cursor\n\t\t{\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t.bake\n\t\t{\n\t\t\tfont-family: var(--music-font-family);\n\n\t\t\t.token\n\t\t\t{\n\t\t\t\ttext\n\t\t\t\t{\n\t\t\t\t\tuser-select: none;\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\tfont-size: var(--music-font-size);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.markings\n\t\t{\n\t\t\ttext\n\t\t\t{\n\t\t\t\tfont-family: var(--music-font-family);\n\t\t\t\tuser-select: none;\n\t\t\t\tfont-size: var(--music-font-size);\n\t\t\t}\n\n\t\t\t.alter\n\t\t\t{\n\t\t\t\ttext-anchor: end;\n\t\t\t}\n\t\t}\n\t}\n</style>\n\n<style>\n\t@import \"../styles/music-font.css\";\n</style>\n<style lang=\"scss\">\n\t@import \"../styles/sheetConstants.css\";\n\n\n\t.sheet\n\t{\n\t\t.bake\n\t\t{\n\t\t\t.token\n\t\t\t{\n\t\t\t\ttext\n\t\t\t\t{\n\t\t\t\t\tfill: var(--lotus-token-default-color);\n\n\t\t\t\t\t&.on\n\t\t\t\t\t{\n\t\t\t\t\t\tfill: var(--lotus-token-on-color);\n\t\t\t\t\t\tstroke-width: 0.1;\n\t\t\t\t\t\tstroke: var(--lotus-token-on-color);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n</style>\n"]}]}