UNPKG

vue-piano-roll

Version:

A DAW-like Piano Roll Vue Component.

github.com/howardah/vue-piano-roll

howardah/vue-piano-roll

2 lines (1 loc) • 17.2 kB
1
2
(function(w,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(w=typeof globalThis<"u"?globalThis:w||self,e(w["vue-piano-roll"]={},w.Vue))})(this,function(w,e){"use strict";const R=["C","C#","Db","D","D#","Eb","E","F","F#","Gb","G","G#","Ab","A","A#","Bb","B"],z=["C-1","C#-1","Db-1","D-1","D#-1","Eb-1","E-1","F-1","F#-1","Gb-1","G-1","G#-1","Ab-1","A-1","A#-1","Bb-1","B-1","C0","C#0","Db0","D0","D#0","Eb0","E0","F0","F#0","Gb0","G0","G#0","Ab0","A0","A#0","Bb0","B0","C1","C#1","Db1","D1","D#1","Eb1","E1","F1","F#1","Gb1","G1","G#1","Ab1","A1","A#1","Bb1","B1","C2","C#2","Db2","D2","D#2","Eb2","E2","F2","F#2","Gb2","G2","G#2","Ab2","A2","A#2","Bb2","B2","C3","C#3","Db3","D3","D#3","Eb3","E3","F3","F#3","Gb3","G3","G#3","Ab3","A3","A#3","Bb3","B3","C4","C#4","Db4","D4","D#4","Eb4","E4","F4","F#4","Gb4","G4","G#4","Ab4","A4","A#4","Bb4","B4","C5","C#5","Db5","D5","D#5","Eb5","E5","F5","F#5","Gb5","G5","G#5","Ab5","A5","A#5","Bb5","B5","C6","C#6","Db6","D6","D#6","Eb6","E6","F6","F#6","Gb6","G6","G#6","Ab6","A6","A#6","Bb6","B6","C7","C#7","Db7","D7","D#7","Eb7","E7","F7","F#7","Gb7","G7","G#7","Ab7","A7","A#7","Bb7","B7","C8","C#8","Db8","D8","D#8","Eb8","E8","F8","F#8","Gb8","G8","G#8","Ab8","A8","A#8","Bb8","B8","C9","C#9","Db9","D9","D#9","Eb9","E9","F9","F#9","Gb9","G9"],O=r=>{const l=z.includes(r)?r.replace(/-?\d/,""):r,i=r.replace(l,"");if(r.includes("b")){const p=R.indexOf(l);return R[p-1]+i}return l+i};function B(r,l,i){return Math.min(Math.max(r,i),l)}class K extends Error{constructor(l){super(`Failed to parse color: "${l}"`)}}var E=K;function L(r){if(typeof r!="string")throw new E(r);if(r.trim().toLowerCase()==="transparent")return[0,0,0,0];let l=r.trim();l=oe.test(r)?J(r):r;const i=Q.exec(l);if(i){const d=Array.from(i).slice(1);return[...d.slice(0,3).map(f=>parseInt(M(f,2),16)),parseInt(M(d[3]||"f",2),16)/255]}const p=ee.exec(l);if(p){const d=Array.from(p).slice(1);return[...d.slice(0,3).map(f=>parseInt(f,16)),parseInt(d[3]||"ff",16)/255]}const c=te.exec(l);if(c){const d=Array.from(c).slice(1);return[...d.slice(0,3).map(f=>parseInt(f,10)),parseFloat(d[3]||"1")]}const s=ne.exec(l);if(s){const[d,f,_,b]=Array.from(s).slice(1).map(parseFloat);if(B(0,100,f)!==f)throw new E(r);if(B(0,100,_)!==_)throw new E(r);return[...re(d,f,_),Number.isNaN(b)?1:b]}throw new E(r)}function U(r){let l=5381,i=r.length;for(;i;)l=l*33^r.charCodeAt(--i);return(l>>>0)%2341}const q=r=>parseInt(r.replace(/_/g,""),36),Z="1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm".split(" ").reduce((r,l)=>{const i=q(l.substring(0,3)),p=q(l.substring(3)).toString(16);let c="";for(let s=0;s<6-p.length;s++)c+="0";return r[i]=`${c}${p}`,r},{});function J(r){const l=r.toLowerCase().trim(),i=Z[U(l)];if(!i)throw new E(r);return`#${i}`}const M=(r,l)=>Array.from(Array(l)).map(()=>r).join(""),Q=new RegExp(`^#${M("([a-f0-9])",3)}([a-f0-9])?$`,"i"),ee=new RegExp(`^#${M("([a-f0-9]{2})",3)}([a-f0-9]{2})?$`,"i"),te=new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${M(",\\s*(\\d+)\\s*",2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,"i"),ne=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,oe=/^[a-z]+$/i,I=r=>Math.round(r*255),re=(r,l,i)=>{let p=i/100;if(l===0)return[p,p,p].map(I);const c=(r%360+360)%360/60,s=(1-Math.abs(2*p-1))*(l/100),d=s*(1-Math.abs(c%2-1));let f=0,_=0,b=0;c>=0&&c<1?(f=s,_=d):c>=1&&c<2?(f=d,_=s):c>=2&&c<3?(_=s,b=d):c>=3&&c<4?(_=d,b=s):c>=4&&c<5?(f=d,b=s):c>=5&&c<6&&(f=s,b=d);const a=p-s/2,g=f+a,$=_+a,j=b+a;return[g,$,j].map(I)};function le(r){const[l,i,p,c]=L(r).map((g,$)=>$===3?g:g/255),s=Math.max(l,i,p),d=Math.min(l,i,p),f=(s+d)/2;if(s===d)return[0,0,f,c];const _=s-d,b=f>.5?_/(2-s-d):_/(s+d);return[60*(l===s?(i-p)/_+(i<p?6:0):i===s?(p-l)/_+2:(l-i)/_+4),b,f,c]}function ae(r,l,i,p){return`hsla(${(r%360).toFixed()}, ${B(0,100,l*100).toFixed()}%, ${B(0,100,i*100).toFixed()}%, ${parseFloat(B(0,1,p).toFixed(3))})`}function V(r,l){const[i,p,c,s]=le(r);return ae(i,p,c-l,s)}function se(r){if(r==="transparent")return 0;function l(s){const d=s/255;return d<=.04045?d/12.92:Math.pow((d+.055)/1.055,2.4)}const[i,p,c]=L(r);return .2126*l(i)+.7152*l(p)+.0722*l(c)}function D(r,l){return V(r,-l)}const ce={key:0,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},ie={key:1,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},de=e.defineComponent({__name:"FullScreen",props:{open:{type:Boolean},color:{}},setup(r){e.useCssVars(c=>({"8862eefa":p.value}));const l=r,i=e.computed(()=>`pr-fullscreen-icon ${l.open?"pr-open":""}`),p=e.computed(()=>l.color||"#fff");return(c,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(i.value)},[c.open?(e.openBlock(),e.createElementBlock("svg",ce,[...s[0]||(s[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",ie,[...s[1]||(s[1]=[e.createElementVNode("path",{fill:"currentColor",d:"M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z"},null,-1)])]))],2))}}),lt="",P=(r,l)=>{const i=r.__vccOpts||r;for(const[p,c]of l)i[p]=c;return i},ue=P(de,[["__scopeId","data-v-a5fbc04f"]]),pe={class:"pr-container"},fe={class:"pr-label"},he={class:"pr-note-grid"},me=["onContextmenu"],ge=["onMousedown"],_e=["onMousedown"],be=["onMousedown"],ve=e.defineComponent({__name:"PianoRoll",props:{zoomX:{default:.5},zoomY:{default:1},rangeBottom:{default:"C1"},rangeTop:{default:"G5"},currentBeat:{default:-1},currentTick:{},ticksPerBeat:{default:2},defaultNoteLength:{default:1},noteHeight:{default:2},modelValue:{},length:{default:80},loop:{type:Boolean,default:!0},noteColor:{default:"#f43f5f"},backgroundColor:{default:"rgb(76, 85, 99)"},incidentalColor:{default:"rgb(55, 65, 81)"},gridColor:{default:"rgb(107, 114, 128)"},labelColor:{default:"rgb(255, 255, 255)"},labelIncidentalColor:{default:"rgb(107, 114, 128)"},labelBackgroundColor:{default:"rgb(107, 114, 128)"},labelBorderColor:{default:"rgb(75, 85, 99)"},borderWidth:{default:1},shadowColor:{default:"rgba(255, 255, 255, 0.3)"},shadowMap:{default:()=>[]},onNoteEvent:{type:Function,default:()=>{}}},emits:["update:modelValue"],setup(r,{emit:l}){const i=l,p=e.ref({x:0,y:0}),c=e.ref(null),s=e.ref(null),d=e.ref(16),f=e.ref(!1),_=e.ref(0),b=e.ref([]),a=r,g=e.computed(()=>{if(a.length==="infinite")return{x:a.zoomX,y:a.zoomY};const t=(_.value-d.value*4)/(d.value*a.length);return{x:Math.max(t,a.zoomX),y:a.zoomY}}),$=e.computed(()=>a.shadowMap?a.shadowMap.flatMap(t=>{if(t={...t,note:O(t.note)},/[0-9]/.test(t.note))return typeof G.value[t.note]>"u"?[]:t;const o=[],n=t.start||0,u=t.length||k.value-n,h=Object.keys(G.value).filter(m=>new RegExp(`${t.note}-?[0-9]`).test(m));for(const m of h)o.push({note:m,start:n,length:u});return o}):[]),j=e.computed(()=>C.value.map(t=>({id:t.id,note:t.note}))),v=t=>Math.round(t*a.ticksPerBeat),y=(t,o=!1)=>o?Math.ceil(t/a.ticksPerBeat):t/a.ticksPerBeat,S=e.computed(()=>{const t=a.currentTick??v(a.currentBeat);return a.length==="infinite"||!a.loop?t:t%k.value}),C=e.computed({get:()=>a.modelValue||[],set:t=>i("update:modelValue",t)}),k=e.computed(()=>{var n;if(a.length!=="infinite")return v(a.length);const t=Math.ceil((((n=c.value)==null?void 0:n.getBoundingClientRect().width)||0)/(d.value*g.value.x));if(C.value.length===0)return t;const o=C.value.sort((u,h)=>h.start+h.length-(u.start+u.length))[0];return Math.max(o.start+o.length+20,t)}),A=e.computed(()=>{const t=z.findIndex(n=>n===a.rangeTop),o=z.findIndex(n=>n===a.rangeBottom);return z.slice(o,t+1).filter(n=>!/[A-G]b-?[0-9]/.test(n)).reverse()}),G=e.computed(()=>{const t={};return A.value.forEach((o,n)=>{t[o]=n}),t}),ye=t=>C.value.filter(o=>v(o.start)===t).map(o=>o.note),ke=t=>C.value.filter(o=>(t===0&&(t=k.value),v(o.start+o.length)===t)).map(o=>o.note);e.watch(S,t=>{a.onNoteEvent({notesStarting:ye(t),notesEnding:ke(t)})}),e.watch(j,(t,o)=>{if(t.filter(u=>{const h=o.find(m=>m.id===u.id);return!h||h.note!==u.note}).some(u=>{var h;return((h=s.value)==null?void 0:h.note.id)===u.id})){const u=s.value.note;Me(),X([u.note],u.length*1e3*60/120)}});const we=t=>`pr-beat pr-b${(t-1)%a.ticksPerBeat+1} pr-beat-end`,H=t=>{const o=Math.floor(t/(d.value*2*g.value.y));return A.value[o]},xe=(t,o=!1)=>{const n=d.value*4,u=d.value*g.value.x,h=o?y(t):t;return n+h*u},T=t=>{const o=d.value*4,n=d.value*g.value.x;return y(Math.floor(v((t-o)/n)))};function ze(t){return t*parseFloat(getComputedStyle(document.documentElement).fontSize)}const F=(t,{e:o,dragType:n},u=!1)=>{o.button===0&&(t.selected=!0,s.value={note:t,offset:o.offsetX,dragType:n,placement:{start:t.start,length:t.length,end:t.start+t.length}},X([t.note],t.length*1e3*60/120),setTimeout(()=>{!t.selected&&!u&&(o.shiftKey||C.value.forEach(h=>h.selected=!1),t.selected=!0)},100))},N=()=>{if(!s.value)return;const t=s.value.note;t.selected=!1,s.value=null},Be=()=>{if(!s.value)return;const{x:t,y:o}=p.value,n=s.value.note,u=s.value.dragType,h=T(t)-y(a.ticksPerBeat-1),m=Math.max(T(t-s.value.offset),0),x=H(o);if(u==="drag"){n.start=Math.min(y(k.value-v(n.length)),m),n.note=x;return}if(u==="left"){n.start=Math.min(m,s.value.placement.end-y(1)),n.length=s.value.placement.end-m||y(1);return}if(u==="right"||u==="drag-right"){const Y=h-n.start+1;n.length=Y<=0?1/a.ticksPerBeat:Y}u==="drag-right"&&n.length===1&&(n.start=m<0?0:m)},W=t=>{if(!c.value)return;const o=c.value.getBoundingClientRect(),n=t.clientX-o.left,u=t.clientY-o.top;p.value={x:n,y:u},Be()},Ee=()=>C.value.length===0?0:C.value.sort((t,o)=>o.id-t.id)[0].id,X=(t,o)=>{a.onNoteEvent({notesStarting:t,notesEnding:[]}),b.value.push(...t),setTimeout(()=>{a.onNoteEvent({notesStarting:[],notesEnding:t}),b.value=b.value.filter(n=>!t.includes(n))},o)},Me=()=>{a.onNoteEvent({notesStarting:[],notesEnding:b.value}),b.value=[]},$e=t=>{if(t.button!==0||!c.value)return;const o=p.value.x,n=p.value.y,u=T(o);let h=a.defaultNoteLength;if(v(u+h)>k.value&&(h=y(k.value-v(u))),u<0)return;const m=H(n),x={id:Ee()+1,start:u,length:h,note:m,velocity:100,color:a.noteColor,selected:!1};C.value.push(x),console.log(`${v(x.start)+2} / span ${v(x.length)}`),F(x,{e:t,dragType:"right"})},Ae=t=>{C.value=C.value.filter(o=>o.id!==t.id)};function Ge(){var t;_.value=((t=c.value)==null?void 0:t.offsetWidth)||0}e.onMounted(()=>{d.value=ze(1),c.value&&(c.value.addEventListener("mousemove",W),new ResizeObserver(Ge).observe(c.value))}),e.onUnmounted(()=>{c.value&&c.value.removeEventListener("mousemove",W)});const Fe=e.computed(()=>{const t=y(k.value),o=Math.floor(t);if(o!==t){const n=t%1,u=`calc(1rem * ${g.value.x} * ${n})`;return`4rem repeat(${o}, calc(1rem * ${g.value.x})) ${u}`}return`4rem repeat(${o}, calc(1rem * ${g.value.x}))`}),Ne=e.computed(()=>`4rem repeat(${k.value}, calc(1rem * ${y(g.value.x)}))`),De=e.computed(()=>`repeat(${k.value}, ${2*g.value.y}rem)`),je=e.computed(()=>`${2*g.value.y}rem`),Se=e.computed(()=>g.value.y<1?`${g.value.y}rem`:"1rem"),Te=e.computed(()=>`${xe(S.value,!0)}px`),Re=e.computed(()=>`${2*g.value.y*A.value.length}rem`),Le=e.computed(()=>`${y(g.value.x)}rem`),qe=e.computed(()=>S.value<0),Ie=e.computed(()=>a.backgroundColor),Ve=e.computed(()=>a.gridColor),Pe=e.computed(()=>a.incidentalColor),He=e.computed(()=>a.labelColor),We=e.computed(()=>a.labelBackgroundColor),Xe=e.computed(()=>a.labelIncidentalColor),Ye=e.computed(()=>a.labelBorderColor),Oe=e.computed(()=>a.borderWidth+"px"),Ke=e.computed(()=>`-${Math.ceil(a.borderWidth/2)}px`),Ue=e.computed(()=>`-${Math.ceil(a.borderWidth/2)}px`),Ze=e.computed(()=>a.shadowColor),Je=e.computed(()=>se(a.backgroundColor)>.5?"#000":"#fff"),Qe=t=>t.selected?D(t.color,.1):t.color,et=t=>t.selected?t.color:V(t.color,.1),tt=t=>t.selected?D(t.color,.2):D(t.color,.1),nt=e.computed(()=>`${a.noteHeight}px`),ot=t=>{const o=et(t),n=tt(t);return{backgroundColor:Qe(t),borderTopColor:n,borderLeftColor:n,borderRightColor:o,borderBottomColor:o}},rt=e.computed(()=>({"--pr-background-color":Ie.value,"--pr-grid-color":Ve.value,"--pr-incidental-color":Pe.value,"--pr-label-color":He.value,"--pr-label-background-color":We.value,"--pr-label-incidental-color":Xe.value,"--pr-label-border-color":Ye.value,"--pr-border-width":Oe.value,"--pr-shadow-color":Ze.value,"--pr-tone-grid-height":je.value,"--pr-tone-grid-template":Fe.value,"--pr-note-grid-template":Ne.value,"--pr-note-grid-template-rows":De.value,"--pr-note-grid-top":Ke.value,"--pr-note-grid-left":Ue.value,"--pr-label-font-size":Se.value,"--pr-playhead-left":Te.value,"--pr-playhead-height":Re.value,"--pr-playhead-width":Le.value,"--pr-note-height":nt.value}));return(t,o)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle(rt.value),class:e.normalizeClass(["pr-shrink-wrap",{"pr-fullscreen":f.value}])},[e.createVNode(ue,{color:Je.value,onClick:o[0]||(o[0]=n=>f.value=!f.value),open:f.value},null,8,["color","open"]),e.createElementVNode("div",pe,[e.createElementVNode("div",{ref_key:"pianoRoll",ref:c,class:"pr-piano-roll"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(A.value,n=>(e.openBlock(),e.createElementBlock("div",{onMousedown:e.withModifiers($e,["prevent"]),onMouseup:e.withModifiers(N,["prevent"]),class:e.normalizeClass(`pr-tone ${/#/.test(n)?"pr-sharp":""}`),key:n},[e.createElementVNode("div",fe,e.toDisplayString(n),1),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y(k.value,!0),u=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`${we(u)}`),key:`${n}:${u}`},null,2))),128))],34))),128)),e.createElementVNode("div",he,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList($.value,n=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`pr-ghost ${n.note}`),style:e.normalizeStyle({gridColumn:`${v(n.start||0)+2} / span ${v(n.length||k.value)}`,gridRow:`${G.value[n.note]+1} / span 1`,height:t.zoomY*2+"rem"})},null,6))),256)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(C.value,n=>{var u,h;return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`pr-note ${n.id===((h=(u=s.value)==null?void 0:u.note)==null?void 0:h.id)?"pr-dragging":""}`),style:e.normalizeStyle({gridColumn:`${v(n.start)+2} / span ${v(n.length)}`,gridRow:`${G.value[n.note]+1} / span 1`,height:t.zoomY*2+"rem"}),key:n.id,onContextmenu:e.withModifiers(m=>Ae(n),["right","prevent"])},[e.createElementVNode("div",{class:"pr-note-inner",style:e.normalizeStyle(ot(n))},[e.createElementVNode("span",{onMousedown:e.withModifiers(m=>F(n,{e:m,dragType:"left"}),["prevent"]),onMouseup:e.withModifiers(N,["prevent"]),class:"pr-edge pr-right"},null,40,ge),e.createElementVNode("span",{onMousedown:e.withModifiers(m=>F(n,{e:m,dragType:"drag"}),["prevent"]),onMouseup:e.withModifiers(N,["prevent"]),class:"pr-middle"},null,40,_e),e.createElementVNode("span",{onMousedown:e.withModifiers(m=>F(n,{e:m,dragType:"right"}),["prevent"]),onMouseup:e.withModifiers(N,["prevent"]),class:"pr-edge pr-left"},null,40,be)],4)],46,me)}),128))]),e.createElementVNode("div",{class:e.normalizeClass(`pr-playhead ${qe.value?"pr-hidden":""}`)},null,2)],512)])],6))}}),at="",Ce=P(ve,[["__scopeId","data-v-888f8760"]]);w.PianoRoll=Ce,w.notesBetweenC1AndG9=z,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});