dist/js/chunk-117382e0.d47336d3.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-117382e0"],{"1e1a":function(e,t,a){"use strict";a("6b05")},"326e":function(e,t,a){var i=a("24fb");t=i(!1),t.push([e.i,".flex-engraver{width:100%;height:100vh}.flex-engraver header{position:absolute;width:100%;height:200px;background:#fafafa;display:flex;flex-direction:row;align-items:center;font-size:36px;overflow:hidden}.flex-engraver header>*{display:inline-block;font-size:inherit;margin:0 .5em}.flex-engraver header .source-list{min-width:8em}.flex-engraver header .gauge-view{height:100%}.flex-engraver header .dirty{font-weight:700;color:orange;cursor:pointer}.flex-engraver main{padding-top:200px;height:100%;background:#eee;white-space:nowrap}.flex-engraver main em{font-weight:700}.flex-engraver main .source-editor{height:calc(100% - 200px);vertical-align:top}.flex-engraver main .viewer{display:inline-block;position:relative;font-size:36px}.flex-engraver main .viewer .sheet-container{display:inline-block;resize:both;margin:2em;outline:1px solid #ccc;overflow:scroll;background:#fff}.flex-engraver main .viewer .sheet-container .sheet .page{margin:0}.flex-engraver main .viewer .sheet-container .loading-dots{background-color:transparent}.flex-engraver main .viewer .sheet-container .loading-dots .ellipsis{zoom:200%}.flex-engraver main .viewer .sheet-container .loading-dots .ellipsis>div{background-color:#4682b4}.flex-engraver main .viewer .container-size{display:inline-block;position:absolute;bottom:0;right:2em}.flex-engraver main .viewer .staff-size{display:inline-block;position:absolute;bottom:0;left:2em}.flex-engraver main .viewer .staff-size input{font-size:inherit}.flex-engraver main .viewer .staff-size .fit-staff-size{border:0}.flex-engraver main .viewer .staff-size .adjuster{display:inline-block;position:relative;margin:0 .6em;zoom:1.5}.flex-engraver main .viewer .staff-size .adjuster .slider{width:200px}.flex-engraver main .viewer .staff-size .adjuster .max,.flex-engraver main .viewer .staff-size .adjuster .min{display:inline-block;position:absolute;font-size:16px;top:3em;text-align:center}.flex-engraver main .viewer .staff-size .adjuster .max input,.flex-engraver main .viewer .staff-size .adjuster .min input{width:2em}.flex-engraver main .viewer .staff-size .adjuster .max .sheet,.flex-engraver main .viewer .staff-size .adjuster .min .sheet{position:absolute;top:120%;left:50%;transform:translate(-50%)}.flex-engraver main .viewer .staff-size .adjuster .min{left:0}.flex-engraver main .viewer .staff-size .adjuster .max{right:-2em}.flex-engraver main .staff-size-viewer{position:absolute;right:0;bottom:0}.flex-engraver main .staff-size-viewer input{width:4em}.flex-engraver.drag-hover header{background-color:#cfc;outline:4px dashed #4f4}",""]),e.exports=t},"6b05":function(e,t,a){var i=a("326e");i.__esModule&&(i=i.default),"string"===typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);var n=a("499e").default;n("44bd81af",i,!0,{sourceMap:!1,shadowMode:!1})},e168:function(e,t,a){"use strict";a.r(t);var i=function(){var e=this,t=e._self._c;return t("div",{staticClass:"flex-engraver",class:{"drag-hover":e.dragHover},on:{dragover:function(t){t.preventDefault(),e.dragHover=!0},dragleave:function(t){e.dragHover=!1},drop:function(t){return t.preventDefault(),e.onDropFile.apply(null,arguments)}}},[t("header",[t("StoreInput",{directives:[{name:"show",rawName:"v-show",value:!1,expression:"false"}],attrs:{localKey:"lotus-flexEngraverContainerWidth"},model:{value:e.containerSize.offsetWidth,callback:function(t){e.$set(e.containerSize,"offsetWidth",t)},expression:"containerSize.offsetWidth"}}),t("StoreInput",{directives:[{name:"show",rawName:"v-show",value:!1,expression:"false"}],attrs:{localKey:"lotus-flexEngraverContainerHeight"},model:{value:e.containerSize.offsetHeight,callback:function(t){e.$set(e.containerSize,"offsetHeight",t)},expression:"containerSize.offsetHeight"}}),t("StoreInput",{directives:[{name:"show",rawName:"v-show",value:!1,expression:"false"}],attrs:{localKey:"lotus-flexEngraverChosenSourceIndex"},model:{value:e.chosenSourceIndex,callback:function(t){e.chosenSourceIndex=t},expression:"chosenSourceIndex"}}),t("StoreInput",{directives:[{name:"show",rawName:"v-show",value:!1,expression:"false"}],attrs:{localKey:"lotus-flexEngraverStaffSizeRangeMin"},model:{value:e.staffSizeRange.min,callback:function(t){e.$set(e.staffSizeRange,"min",t)},expression:"staffSizeRange.min"}}),t("StoreInput",{directives:[{name:"show",rawName:"v-show",value:!1,expression:"false"}],attrs:{localKey:"lotus-flexEngraverStaffSizeRangeMaX"},model:{value:e.staffSizeRange.max,callback:function(t){e.$set(e.staffSizeRange,"max",t)},expression:"staffSizeRange.max"}}),t("StoreInput",{directives:[{name:"show",rawName:"v-show",value:!1,expression:"false"}],attrs:{localKey:"lotus-flexEngraverFitStaffSize"},model:{value:e.fitStaffSize,callback:function(t){e.fitStaffSize=t},expression:"fitStaffSize"}}),t("BoolStoreInput",{directives:[{name:"show",rawName:"v-show",value:!1,expression:"false"}],attrs:{localKey:"lotus-flexEngraverFixStaffSize"},model:{value:e.fixStaffSize,callback:function(t){e.fixStaffSize=t},expression:"fixStaffSize"}}),t("select",{directives:[{name:"model",rawName:"v-model",value:e.chosenSourceIndex,expression:"chosenSourceIndex"}],staticClass:"source-list",on:{change:function(t){var a=Array.prototype.filter.call(t.target.options,(function(e){return e.selected})).map((function(e){var t="_value"in e?e._value:e.value;return t}));e.chosenSourceIndex=t.target.multiple?a:a[0]}}},e._l(e.sourceList,(function(a,i){return t("option",{key:i,domProps:{value:i}},[e._v(e._s(a.name))])})),0),t("span",{staticClass:"dirty",on:{click:e.saveSource}},[e._v(e._s(e.sourceDirty?"*":" "))]),t("button",{on:{click:e.removeCurrentSource}},[e._v("🗑")]),t("button",{on:{click:e.gauge}},[e._v("📏")]),t("button",{on:{click:e.renderSheet}},[e._v("🎼")]),t("button",{attrs:{title:"copy lilypond source"},on:{click:e.copySource}},[e._v("⎘")]),t("button",{attrs:{title:"export scores json"},on:{click:e.exportSourceList}},[e._v("⤓")]),e.gaugeSvgDoc?t("div",{staticClass:"gauge-view"},[e.gaugeSvgDoc?t("SheetSimple",{attrs:{documents:[e.gaugeSvgDoc]}}):e._e()],1):e._e()],1),t("main",[e.currentSource?t("SourceEditor",{attrs:{source:e.currentSource.content},on:{"update:source":function(t){return e.$set(e.currentSource,"content",t)}}}):e._e(),t("div",{staticClass:"viewer"},[t("div",{ref:"sheetContainer",staticClass:"sheet-container",style:{width:e.containerSize.offsetWidth+"px",height:e.containerSize.offsetHeight+"px"},on:{mousemove:e.updateContainerSize}},[e.containerSvgs?t("SheetSimple",{attrs:{documents:e.containerSvgs}}):e._e(),t("Loading",{directives:[{name:"show",rawName:"v-show",value:e.containerEngraving,expression:"containerEngraving"}]})],1),t("div",{staticClass:"container-size"},[t("span",[e._v(e._s(e.containerSize.width))]),e._v(" × "),t("span",[e._v(e._s(e.containerSize.height))])]),e.fitStaffSize?t("div",{staticClass:"staff-size"},[t("em",[e._v(e._s(e.fitStaffSize.toFixed(2)))]),e._v(" pt "),t("span",{staticClass:"adjuster"},[t("input",{directives:[{name:"model",rawName:"v-model",value:e.fixStaffSize,expression:"fixStaffSize"}],attrs:{type:"checkbox",title:"fix staff size"},domProps:{checked:Array.isArray(e.fixStaffSize)?e._i(e.fixStaffSize,null)>-1:e.fixStaffSize},on:{change:function(t){var a=e.fixStaffSize,i=t.target,n=!!i.checked;if(Array.isArray(a)){var r=null,s=e._i(a,r);i.checked?s<0&&(e.fixStaffSize=a.concat([r])):s>-1&&(e.fixStaffSize=a.slice(0,s).concat(a.slice(s+1)))}else e.fixStaffSize=n}}}),t("input",{directives:[{name:"model",rawName:"v-model.number",value:e.fitStaffSize,expression:"fitStaffSize",modifiers:{number:!0}}],staticClass:"slider",attrs:{type:"range",disabled:!e.fixStaffSize,min:e.staffSizeRange.min,max:e.staffSizeRange.max,step:"any"},domProps:{value:e.fitStaffSize},on:{change:e.delayRenderSheet,__r:function(t){e.fitStaffSize=e._n(t.target.value)},blur:function(t){return e.$forceUpdate()}}}),t("span",{staticClass:"min"},[t("input",{directives:[{name:"model",rawName:"v-model",value:e.staffSizeRange.min,expression:"staffSizeRange.min"}],attrs:{type:"number"},domProps:{value:e.staffSizeRange.min},on:{change:e.updateStaffSampleMin,input:function(t){t.target.composing||e.$set(e.staffSizeRange,"min",t.target.value)}}}),e.staffSampleSvgMin?t("SheetSimple",{attrs:{documents:[e.staffSampleSvgMin]}}):e._e()],1),t("span",{staticClass:"max"},[t("input",{directives:[{name:"model",rawName:"v-model",value:e.staffSizeRange.max,expression:"staffSizeRange.max"}],attrs:{type:"number"},domProps:{value:e.staffSizeRange.max},on:{change:e.updateStaffSampleMax,input:function(t){t.target.composing||e.$set(e.staffSizeRange,"max",t.target.value)}}}),e.staffSampleSvgMax?t("SheetSimple",{attrs:{documents:[e.staffSampleSvgMax]}}):e._e()],1)])]):e._e()])],1)])},n=[],r=a("8701"),s=a("5027"),o=a("010e"),c=a("bc9f"),l=a("f634"),f=a("32c1"),u=a("1f25"),h=a("3122"),g=a("cdaf"),S=a("4e72"),d=a("94c1"),v=a("488d");const m=e=>`\n\t\t#(set-global-staff-size ${e})\n\t\t\\paper {\n\t\t\tpaper-width = ${.16*e}\\cm\n\t\t\tpaper-height = ${.08*e}\\cm\n\t\t\ttop-margin = 0\n\t\t\tbottom-margin = 0\n\t\t\tleft-margin = 0.2\\cm\n\t\t\tright-margin = 0\n\t\t}\n\t\t\\layout\n\t\t{\n\t\t\tindent = 0\n\t\t}\n\t\t{c'1}\n\t`,p=e=>e.replace(/(?:>)[^<>]+lilypond.org(?=<)/g,"");var x={name:"flex-engraver",components:{SourceEditor:h["a"],StoreInput:g["a"],BoolStoreInput:S["a"],SheetSimple:d["a"],Loading:v["a"]},data(){return{containerSize:{width:100,height:100,offsetWidth:1215,offsetHeight:495},dragHover:!1,sourceList:[],chosenSourceIndex:0,sourceDirty:!1,gaugeSvgDoc:null,staffSizeRange:{min:10,max:40},containerSvgs:null,containerEngraving:!1,staffSampleSvgMin:null,staffSampleSvgMax:null,fitStaffSize:24,fixStaffSize:!1}},computed:{currentSource(){return this.sourceList[this.chosenSourceIndex]},currentSourceContent(){return this.currentSource&&this.currentSource.content},containerSizeHash(){return`${this.containerSize.width},${this.containerSize.height}`}},async created(){window.$main=this,this.loadSource(),this.lilyParser=await Object(o["a"])(a.e("chunk-2d0db258").then(a.t.bind(null,"6f2d",7))),console.log("Lilypond parser loaded."),this.updateStaffSamples()},async mounted(){await this.$nextTick(),this.updateContainerSize()},beforeDestroy(){this.checkAndSaveSource()},methods:{updateContainerSize({widthOffset:e=!0}={}){this.containerSize.width=this.$refs.sheetContainer.clientWidth,this.containerSize.height=this.$refs.sheetContainer.clientHeight,e&&(this.containerSize.offsetWidth=this.$refs.sheetContainer.offsetWidth,this.containerSize.offsetHeight=this.$refs.sheetContainer.offsetHeight)},async onDropFile(e){this.dragHover=!1;const t=e.dataTransfer.files[0];if(t)switch(t.type){case"text/x-lilypond":case"text/lilypond-source":const e=await t.readAs("Text"),a=t.name.replace(/\.ly$/,"");this.sourceList.push({name:a,content:e}),this.sourceDirty=!0;break}},removeCurrentSource(){this.sourceList.splice(this.chosenSourceIndex,1),this.chosenSourceIndex=Math.min(this.chosenSourceIndex,this.sourceList.length-1)},loadSource(){localStorage.lotusFlexEngraverSources&&(this.sourceList=JSON.parse(localStorage.lotusFlexEngraverSources),console.log("Source list loaded.")),this.sourceDirty=!1},saveSource(){localStorage.lotusFlexEngraverSources=JSON.stringify(this.sourceList),console.log("Source list saved."),this.sourceDirty=!1},checkAndSaveSource(){this.sourceDirty&&this.saveSource()},async gauge(){const e=20,t=1e4,a=2,i=new c["a"](await this.lilyParser.parse(this.currentSourceContent)),n=i.globalAttributes();n.staffSize.value=e,n.paperWidth.value.number=t,n.paperHeight.value.number=1e3,n.raggedLast.value=!0,n.topMargin.value=0,n.leftMargin.value=0;const r=i.toString();try{const s=await this.engrave(r,{tokenize:!0});this.gaugeSvgDoc=s.svgs[0],console.assert(1===s.svgs.length,"invalid page count:",s);const o=Object(l["b"])(s.doc,{StaffToken:f["StaffToken"],SheetDocument:f["SheetDocument"]}),u=o.pages[0].systems[0],h=t/o.pages[0].viewBox.width/e,g=u.width*h,S=(u.bottom-u.top)*h;n.paperWidth.value.number=a;const d=await this.engrave(i.toString(),{tokenize:!0});console.assert(1===d.svgs.length,"invalid page count:",d);const v=Object(l["b"])(d.doc,{StaffToken:f["StaffToken"],SheetDocument:f["SheetDocument"]}),m=v.pages[0].systems,p=Array(m.length-1).fill(null).map((e,t)=>m[t+1].y-m[t].y),x=Math.max(u.bottom-u.top,...p)*h-S,w=new c["a"](await this.lilyParser.parse(this.currentSourceContent));w.root.appendAssignment("naturalWidth",g),w.root.appendAssignment("naturalHeight",S),w.root.appendAssignment("systemSpacing",x),this.currentSource.content=w.toString(),this.checkAndSaveSource()}catch(s){console.warn("Engraving failed:",s)}},async engrave(e,{tokenize:t}={}){const a=new FormData;a.append("source",e),t&&a.append("tokenize",t);const i=await fetch("/engrave",{method:"POST",body:a});if(!i.ok)throw new Error(await i.text());return i.json()},async fitContainer(){if(!this.lilyParser||!this.currentSourceContent)return null;const e=new c["a"](await this.lilyParser.parse(this.currentSourceContent)),t=e.root.getField("naturalWidth"),a=e.root.getField("naturalHeight"),i=e.root.getField("systemSpacing");if(!t||!a||!i)return console.log("natural size is not set.",t,a),null;const n=t.value,r=a.value,s=i.value+.04,o=e.globalAttributes(),l=this.containerSize.width/u["a"],f=(this.containerSize.height-9)/u["a"],h=e=>o[e].value?o[e].value.number:null,g=h("leftMargin")||u["d"],S=h("rightMargin")||u["d"],d=h("topMargin")||u["f"],v=h("bottomMargin")||u["c"],m=f-d-v,p=l-g-S;let x=1,w=null;if(this.fixStaffSize){w=this.fitStaffSize;const e=(n-u["g"])*w/(p-u["g"]*w);x=Math.ceil(e-.2)}else{for(;x<1e3;++x){const e=m/(r*x+s*(x-1));if(e<this.staffSizeRange.min){Number.isFinite(w)||(w=e),--x,console.log("too samll vertical prefered staff size:",e,x);break}w=Math.min(e,this.staffSizeRange.max);const t=(n-u["g"])*w/(p-u["g"]*w);if(t<0)return void console.warn("Horizontal space too little:",t,p-u["g"]*w);if(t<x+.2){x=Math.max(Math.round(t),1),console.log("proper xsc:",t,x);break}}if(console.log("systemCount:",x,w),w<=this.staffSizeRange.min)return void console.warn("Vertical space too little:",w)}const z=(n-u["g"])*w/(p-u["g"]*w);console.log("horizontalNaturalCount:",z,x);const b=w*(r*x+s*(x-1)),y=Math.max(.9*(f-b)/2,0);if(o.topMargin.value={proto:"NumberUnit",number:y,unit:"\\cm"},1===x){const e=w*n,t=.9*(l-e)/2;t>1&&(o.leftMargin.value={proto:"NumberUnit",number:t,unit:"\\cm"},o.rightMargin.value={proto:"NumberUnit",number:t,unit:"\\cm"})}return o.staffSize.value=w,o.paperWidth.value={proto:"NumberUnit",number:l,unit:"\\cm"},o.paperHeight.value={proto:"NumberUnit",number:f,unit:"\\cm"},o.raggedLast.value=x<=1&&z<.8,this.fixStaffSize||(this.fitStaffSize=w),e.toString()},async renderSheet(){const e=await this.fitContainer();if(!e)return;this.containerEngraving=!0;const t=await this.engrave(e,{tokenize:!1});this.containerSvgs=t.svgs,this.containerSvgs=this.containerSvgs.map(p),this.containerEngraving=!1},async exportScore(){const e=await this.fitContainer();if(!e)return void console.warn("no source.");const t=await this.engrave(e,{tokenize:!0}),a={doc:Object(l["b"])(t.doc,{StaffToken:f["StaffToken"],SheetDocument:f["SheetDocument"]}),midi:t.midi,hashTable:t.hashTable},i=new Blob([JSON.stringify(a)]);Object(r["a"])(URL.createObjectURL(i),"score.json")},async copySource(){const e=await this.fitContainer();navigator.clipboard.writeText(e),console.log("Source copyed.")},async exportSourceList(){const e=JSON.stringify(this.sourceList),t=new Blob([e],{type:"text/plain"});Object(r["a"])(URL.createObjectURL(t),"FlexEngraverSources.json")},async delayRenderSheet(){await Object(s["b"])("renderSheet",500)&&this.renderSheet()},async engraveSample(e){const t=m(e),a=await this.engrave(t);return a.svgs[0]},async updateStaffSampleMin(){this.staffSampleSvgMin=p(await this.engraveSample(this.staffSizeRange.min))},async updateStaffSampleMax(){this.staffSampleSvgMax=p(await this.engraveSample(this.staffSizeRange.max))},updateStaffSamples(){this.updateStaffSampleMin(),this.updateStaffSampleMax()}},watch:{currentSourceContent(e,t){e&&void 0!==t&&(this.sourceDirty=!0)},async chosenSourceIndex(){this.gaugeSvgDoc=null,this.checkAndSaveSource(),await this.$nextTick(),this.sourceDirty=!1,this.renderSheet()},containerSizeHash:"delayRenderSheet",fixStaffSize(e){e||this.delayRenderSheet()}}},w=x,z=(a("1e1a"),a("2877")),b=Object(z["a"])(w,i,n,!1,null,null,null);t["default"]=b.exports}}]);
//# sourceMappingURL=chunk-117382e0.d47336d3.js.map