atome 0.5.7.1.0 → 0.5.7.1.4

data/vendor/assets/application/examples/text_align.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal
+
+text({data: :centering,align: :center, width: 180, top: 33, left: 0, position: :absolute, color: :red})

data/vendor/assets/application/examples/tools.rb

@@ -23,11 +23,12 @@ class Atome
   class << self
     def init_intuition
       Atome.start_click_analysis
-      root = [:box, :blur, :drag, :rotate, :select, :move,:project]
+      root = Universe.tools_root
       root.each_with_index do |root_tool, index|
         tools_scheme = Universe.tools[root_tool]
         A.build_tool({ name: root_tool, scheme: tools_scheme, index: index })
       end
+
       # Universe.tools.each_with_index do |(tool_name, bloc), index|
       #
       #   A.build_tool({ name: tool_name, index: index }, &bloc)
@@ -511,6 +512,7 @@ end
 new({ tool: :rotate }) do
   { alteration: { height: 150, rotate: 45 } }
 end
+
 new({ tool: :move }) do |params|
   active_code = lambda {
     # if  Atome.selection.instance_of? Array
@@ -564,6 +566,7 @@ new({ tool: :move }) do |params|
     int8: { french: :drag, english: :drag, german: :drag } }
 
 end
+
 new({ tool: :project }) do
   active_code = lambda {
 
@@ -579,43 +582,55 @@ new({ tool: :project }) do
   }
   { activation: active_code }
 end
-# new({ tool: :move }) do
-#   inactivate=lambda{|param|
-#      param[:treated].each do |atome_f|
-#        atome_f.drag(false)
-#      end
-#   }
-#   { alteration: { drag: true, left: nil , top: nil}, inactivation: inactivate }
-# end
-### tool2 test
 
-Atome.init_intuition
+new({tool: :test}) do
+  active_code = lambda {
+    # alert :ok
+    b=Object.box
+    # b=grab(:view).box
+    b.touch(true) do
+      Object.alert :kool
+    end
+  }
+  # active_code=:tito
+  { activation: active_code }
+end
 
-# ###################
 
-b = box({ left: 123, top: 66, selected: false, id: :the_box, color: :green })
-b.touch(:down) do
-  puts " on touch : #{Universe.allow_localstorage}"
-end
-b.resize(true) do
-  puts :good!
-end
-the_circ = circle({ left: 123, top: 120, selected: false, id: :the_circle })
+# Universe.tools_root=[:box, :blur, :drag, :rotate, :select, :move,:project]
+Universe.tools_root=[:test]
+  Atome.init_intuition
 
-the_circ.touch(:down) do |params|
-  puts " down : params: #{params}, id: #{the_circ.id}"
-end
 
-the_circ.touch(:up) do
-  puts "up :kool"
-end
-the_circ.drag(true) do
-  puts "drag : now"
-end
 
-bb = box({ left: 333, width: 120, selected: false, id: :big_box })
 
-b = box({ id: :the_big_boxy })
+# ################### check below
+
+# b = box({ left: 123, top: 66, selected: false, id: :the_box, color: :green })
+# b.touch(:down) do
+#   puts " on touch : #{Universe.allow_localstorage}"
+# end
+# b.resize(true) do
+#   puts :good!
+# end
+# the_circ = circle({ left: 123, top: 120, selected: false, id: :the_circle })
+#
+# the_circ.touch(:down) do |params|
+#   puts " down : params: #{params}, id: #{the_circ.id}"
+# end
+#
+# the_circ.touch(:up) do
+#   puts "up :kool"
+# end
+# the_circ.drag(true) do
+#   puts "drag : now"
+# end
+#
+# bb = box({ left: 333, width: 120, selected: false, id: :big_box })
+#
+# b = box({ id: :the_big_boxy })
+
+#################@
 # text({ data: :hello, selected: true, left: 120, id: :texting, blur: 12 })
 # text({data: :hello, left: 120, id: :texting})
 # Universe.tools.each_with_index do |(tool_name, bloc), index|

data/vendor/assets/src/index.html

@@ -14,6 +14,8 @@
     <script type="text/javascript" src="js/third_parties/popmotion.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/sortable.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/wad.min.js" defer></script>
+    <script type="text/javascript" src="js/third_parties/wavesurfer.min.js" defer></script>
+    <script type="text/javascript" src="js/third_parties/webaudio-pianoroll.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/sha256.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/ping.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/fabric.min.js" defer></script>
@@ -42,16 +44,22 @@
     const NativeMode = true; // used by atome.js to load code on the fly
 </script>
 <script defer src="js/atome/atome.js" type="text/javascript"></script>
+<script>
+    // to prevent right click
+    document.addEventListener("contextmenu", function (e) {
+        e.preventDefault();
+    });
+</script>
 <script defer>
-    document.addEventListener('touchstart', function(event) {
+    document.addEventListener('touchstart', function (event) {
         if (event.touches.length > 1) {
             event.preventDefault();
         }
-    }, { passive: false });
-    document.addEventListener('wheel', function(event) {
+    }, {passive: false});
+    document.addEventListener('wheel', function (event) {
         if (event.ctrlKey === true) {
-            event.preventDefault(); // Empêche le zoom quand Ctrl est pressé et que l'utilisateur scroll avec le trackpad
+            event.preventDefault(); // prevent zoom
         }
-    }, { passive: false });
-</script >
+    }, {passive: false});
+</script>
 </html>

data/vendor/assets/src/index_opal.html

@@ -3,7 +3,8 @@
 <head>
     <link rel="icon" type="image/x-icon"
           href="https://github.com/atomecorp/atome/blob/master/vendor/assets/src/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover,user-scalable=no">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover,user-scalable=no">
     <meta charset='UTF-8'/>
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
@@ -13,6 +14,8 @@
     <script type="text/javascript" src="js/third_parties/popmotion.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/sortable.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/wad.min.js" defer></script>
+    <script type="text/javascript" src="js/third_parties/wavesurfer.min.js" defer></script>
+    <script type="text/javascript" src="js/third_parties/webaudio-pianoroll.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/sha256.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/ping.min.js" defer></script>
     <script defer src="js/third_parties/fabric.min.js" type="text/javascript"></script>
@@ -36,16 +39,22 @@
 </script>
 <script defer src="js/atome/atome.js" type="text/javascript"></script>
 <script src='js/application.js' defer></script>
+<script>
+    // to prevent right click
+    document.addEventListener("contextmenu", function (e) {
+        e.preventDefault();
+    });
+</script>
 <script defer>
-    document.addEventListener('touchstart', function(event) {
+    document.addEventListener('touchstart', function (event) {
         if (event.touches.length > 1) {
             event.preventDefault();
         }
-    }, { passive: false });
-    document.addEventListener('wheel', function(event) {
+    }, {passive: false});
+    document.addEventListener('wheel', function (event) {
         if (event.ctrlKey === true) {
-            event.preventDefault(); // Empêche le zoom quand Ctrl est pressé et que l'utilisateur scroll avec le trackpad
+            event.preventDefault(); // prevent zoom
         }
-    }, { passive: false });
-</script >
+    }, {passive: false});
+</script>
 </html>

data/vendor/assets/src/index_server.html

@@ -13,6 +13,8 @@
     <script defer src="js/third_parties/popmotion.min.js" type="text/javascript"></script>
     <script defer src="js/third_parties/sortable.min.js" type="text/javascript"></script>
     <script defer src="js/third_parties/wad.min.js" type="text/javascript"></script>
+    <script defer src="js/third_parties/wavesurfer.min.js" type="text/javascript"></script>
+    <script type="text/javascript" src="js/third_parties/webaudio-pianoroll.min.js" defer></script>
     <script defer src="js/third_parties/sha256.min.js" type="text/javascript"></script>
     <script defer src="js/third_parties/ping.min.js" type="text/javascript"></script>
     <script defer src="js/third_parties/fabric.min.js" type="text/javascript"></script>
@@ -35,4 +37,22 @@
     const NativeMode = false; // used by atome.js to load code on the fly
 </script>
 <script defer src="js/atome/atome.js" type="text/javascript"></script>
+<script>
+    // to prevent right click
+    document.addEventListener("contextmenu", function (e) {
+        e.preventDefault();
+    });
+</script>
+<script defer>
+    document.addEventListener('touchstart', function (event) {
+        if (event.touches.length > 1) {
+            event.preventDefault();
+        }
+    }, {passive: false});
+    document.addEventListener('wheel', function (event) {
+        if (event.ctrlKey === true) {
+            event.preventDefault(); // prevent zoom
+        }
+    }, {passive: false});
+</script>
 </html>

data/vendor/assets/src/index_server_wasm.html

@@ -14,6 +14,8 @@
     <script type="text/javascript" src="js/third_parties/popmotion.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/sortable.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/wad.min.js" defer></script>
+    <script type="text/javascript" src="js/third_parties/wavesurfer.min.js" defer></script>
+    <script type="text/javascript" src="js/third_parties/webaudio-pianoroll.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/sha256.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/ping.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/fabric.min.js" defer></script>
@@ -42,16 +44,22 @@
     const NativeMode = false; // used by atome.js to load code on the fly
 </script>
 <script defer src="js/atome/atome.js" type="text/javascript"></script>
+<script>
+    // to prevent right click
+    document.addEventListener("contextmenu", function (e) {
+        e.preventDefault();
+    });
+</script>
 <script defer>
-    document.addEventListener('touchstart', function(event) {
+    document.addEventListener('touchstart', function (event) {
         if (event.touches.length > 1) {
             event.preventDefault();
         }
-    }, { passive: false });
-    document.addEventListener('wheel', function(event) {
+    }, {passive: false});
+    document.addEventListener('wheel', function (event) {
         if (event.ctrlKey === true) {
-            event.preventDefault(); // Empêche le zoom quand Ctrl est pressé et que l'utilisateur scroll avec le trackpad
+            event.preventDefault(); // prevent zoom
         }
-    }, { passive: false });
-</script >
+    }, {passive: false});
+</script>
 </html>

data/vendor/assets/src/index_wasm.html

@@ -14,18 +14,20 @@
     <script type="text/javascript" src="js/third_parties/popmotion.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/sortable.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/wad.min.js" defer></script>
+    <script type="text/javascript" src="js/third_parties/wavesurfer.min.js" defer></script>
+    <script type="text/javascript" src="js/third_parties/webaudio-pianoroll.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/sha256.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/ping.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/fabric.min.js" defer></script>
     <script type="text/javascript" src="js/third_parties/papaparse.min.js" defer></script>
     <script defer src="js/atome/atome_helpers/communication.js" type="text/javascript"></script>
     <script defer src="js/atome/atome_helpers/file.js" type="text/javascript"></script>
-        <script>
-            // to prevent right click
-            document.addEventListener("contextmenu", function (e) {
-                e.preventDefault();
-            });
-        </script>
+<!--        <script>-->
+<!--            // to prevent right click-->
+<!--            document.addEventListener("contextmenu", function (e) {-->
+<!--                e.preventDefault();-->
+<!--            });-->
+<!--        </script>-->
     <title>atome</title>
 </head>
 <body id='user_view' class='atome'>
@@ -47,16 +49,22 @@
     const NativeMode = false; // used by atome.js to load code on the fly
 </script>
 <script defer src="js/atome/atome.js" type="text/javascript"></script>
+<script>
+    // to prevent right click
+    document.addEventListener("contextmenu", function (e) {
+        e.preventDefault();
+    });
+</script>
 <script defer>
-    document.addEventListener('touchstart', function(event) {
+    document.addEventListener('touchstart', function (event) {
         if (event.touches.length > 1) {
             event.preventDefault();
         }
-    }, { passive: false });
-    document.addEventListener('wheel', function(event) {
+    }, {passive: false});
+    document.addEventListener('wheel', function (event) {
         if (event.ctrlKey === true) {
-            event.preventDefault(); // Empêche le zoom quand Ctrl est pressé et que l'utilisateur scroll avec le trackpad
+            event.preventDefault(); // prevent zoom
         }
-    }, { passive: false });
-</script >
+    }, {passive: false});
+</script>
 </html>

data/vendor/assets/src/js/third_parties/wavesurfer.min.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):((t="undefined"!=typeof globalThis?globalThis:t||self).WaveSurfer=t.WaveSurfer||{},t.WaveSurfer.Regions=e())}(this,(function(){"use strict";class t{constructor(){this.listeners={}}on(t,e,i){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==i?void 0:i.once){const i=()=>{this.un(t,i),this.un(t,e)};return this.on(t,i),i}return()=>this.un(t,e)}un(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}_init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function i(t,e,i,n,s=3,o=0,r=100){if(!t)return()=>{};const a=matchMedia("(pointer: coarse)").matches;let l=()=>{};const h=h=>{if(h.button!==o)return;h.preventDefault(),h.stopPropagation();let d=h.clientX,c=h.clientY,u=!1;const g=Date.now(),p=n=>{if(n.preventDefault(),n.stopPropagation(),a&&Date.now()-g<r)return;const o=n.clientX,l=n.clientY,h=o-d,p=l-c;if(u||Math.abs(h)>s||Math.abs(p)>s){const n=t.getBoundingClientRect(),{left:s,top:r}=n;u||(null==i||i(d-s,c-r),u=!0),e(h,p,o-s,l-r),d=o,c=l}},v=e=>{if(u){const i=e.clientX,s=e.clientY,o=t.getBoundingClientRect(),{left:r,top:a}=o;null==n||n(i-r,s-a)}l()},m=t=>{t.relatedTarget&&t.relatedTarget!==document.documentElement||v(t)},f=t=>{u&&(t.stopPropagation(),t.preventDefault())},b=t=>{u&&t.preventDefault()};document.addEventListener("pointermove",p),document.addEventListener("pointerup",v),document.addEventListener("pointerout",m),document.addEventListener("pointercancel",m),document.addEventListener("touchmove",b,{passive:!1}),document.addEventListener("click",f,{capture:!0}),l=()=>{document.removeEventListener("pointermove",p),document.removeEventListener("pointerup",v),document.removeEventListener("pointerout",m),document.removeEventListener("pointercancel",m),document.removeEventListener("touchmove",b),setTimeout((()=>{document.removeEventListener("click",f,{capture:!0})}),10)}};return t.addEventListener("pointerdown",h),()=>{l(),t.removeEventListener("pointerdown",h)}}function n(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,s]of Object.entries(e))if("children"===t)for(const[t,s]of Object.entries(e))"string"==typeof s?i.appendChild(document.createTextNode(s)):i.appendChild(n(t,s));else"style"===t?Object.assign(i.style,s):"textContent"===t?i.textContent=s:i.setAttribute(t,s.toString());return i}function s(t,e,i){const s=n(t,e||{});return null==i||i.appendChild(s),s}class o extends t{constructor(t,e,i=0){var n,s,o,r,a,l,h,d;super(),this.totalDuration=e,this.numberOfChannels=i,this.minLength=0,this.maxLength=1/0,this.contentEditable=!1,this.subscriptions=[],this.subscriptions=[],this.id=t.id||`region-${Math.random().toString(32).slice(2)}`,this.start=this.clampPosition(t.start),this.end=this.clampPosition(null!==(n=t.end)&&void 0!==n?n:t.start),this.drag=null===(s=t.drag)||void 0===s||s,this.resize=null===(o=t.resize)||void 0===o||o,this.color=null!==(r=t.color)&&void 0!==r?r:"rgba(0, 0, 0, 0.1)",this.minLength=null!==(a=t.minLength)&&void 0!==a?a:this.minLength,this.maxLength=null!==(l=t.maxLength)&&void 0!==l?l:this.maxLength,this.channelIdx=null!==(h=t.channelIdx)&&void 0!==h?h:-1,this.contentEditable=null!==(d=t.contentEditable)&&void 0!==d?d:this.contentEditable,this.element=this.initElement(),this.setContent(t.content),this.setPart(),this.renderPosition(),this.initMouseEvents()}clampPosition(t){return Math.max(0,Math.min(this.totalDuration,t))}setPart(){const t=this.start===this.end;this.element.setAttribute("part",`${t?"marker":"region"} ${this.id}`)}addResizeHandles(t){const e={position:"absolute",zIndex:"2",width:"6px",height:"100%",top:"0",cursor:"ew-resize",wordBreak:"keep-all"},n=s("div",{part:"region-handle region-handle-left",style:Object.assign(Object.assign({},e),{left:"0",borderLeft:"2px solid rgba(0, 0, 0, 0.5)",borderRadius:"2px 0 0 2px"})},t),o=s("div",{part:"region-handle region-handle-right",style:Object.assign(Object.assign({},e),{right:"0",borderRight:"2px solid rgba(0, 0, 0, 0.5)",borderRadius:"0 2px 2px 0"})},t);this.subscriptions.push(i(n,(t=>this.onResize(t,"start")),(()=>null),(()=>this.onEndResizing()),1),i(o,(t=>this.onResize(t,"end")),(()=>null),(()=>this.onEndResizing()),1))}removeResizeHandles(t){const e=t.querySelector('[part*="region-handle-left"]'),i=t.querySelector('[part*="region-handle-right"]');e&&t.removeChild(e),i&&t.removeChild(i)}initElement(){const t=this.start===this.end;let e=0,i=100;this.channelIdx>=0&&this.channelIdx<this.numberOfChannels&&(i=100/this.numberOfChannels,e=i*this.channelIdx);const n=s("div",{style:{position:"absolute",top:`${e}%`,height:`${i}%`,backgroundColor:t?"none":this.color,borderLeft:t?"2px solid "+this.color:"none",borderRadius:"2px",boxSizing:"border-box",transition:"background-color 0.2s ease",cursor:this.drag?"grab":"default",pointerEvents:"all"}});return!t&&this.resize&&this.addResizeHandles(n),n}renderPosition(){const t=this.start/this.totalDuration,e=(this.totalDuration-this.end)/this.totalDuration;this.element.style.left=100*t+"%",this.element.style.right=100*e+"%"}toggleCursor(t){var e;this.drag&&(null===(e=this.element)||void 0===e?void 0:e.style)&&(this.element.style.cursor=t?"grabbing":"grab")}initMouseEvents(){const{element:t}=this;t&&(t.addEventListener("click",(t=>this.emit("click",t))),t.addEventListener("mouseenter",(t=>this.emit("over",t))),t.addEventListener("mouseleave",(t=>this.emit("leave",t))),t.addEventListener("dblclick",(t=>this.emit("dblclick",t))),t.addEventListener("pointerdown",(()=>this.toggleCursor(!0))),t.addEventListener("pointerup",(()=>this.toggleCursor(!1))),this.subscriptions.push(i(t,(t=>this.onMove(t)),(()=>this.toggleCursor(!0)),(()=>{this.toggleCursor(!1),this.drag&&this.emit("update-end")}))),this.contentEditable&&this.content&&(this.content.addEventListener("click",(t=>this.onContentClick(t))),this.content.addEventListener("blur",(()=>this.onContentBlur()))))}_onUpdate(t,e){if(!this.element.parentElement)return;const{width:i}=this.element.parentElement.getBoundingClientRect(),n=t/i*this.totalDuration,s=e&&"start"!==e?this.start:this.start+n,o=e&&"end"!==e?this.end:this.end+n,r=o-s;s>=0&&o<=this.totalDuration&&s<=o&&r>=this.minLength&&r<=this.maxLength&&(this.start=s,this.end=o,this.renderPosition(),this.emit("update",e))}onMove(t){this.drag&&this._onUpdate(t)}onResize(t,e){this.resize&&this._onUpdate(t,e)}onEndResizing(){this.resize&&this.emit("update-end")}onContentClick(t){t.stopPropagation();t.target.focus(),this.emit("click",t)}onContentBlur(){this.emit("update-end")}_setTotalDuration(t){this.totalDuration=t,this.renderPosition()}play(){this.emit("play")}setContent(t){var e;if(null===(e=this.content)||void 0===e||e.remove(),t){if("string"==typeof t){const e=this.start===this.end;this.content=s("div",{style:{padding:`0.2em ${e?.2:.4}em`,display:"inline-block"},textContent:t})}else this.content=t;this.contentEditable&&(this.content.contentEditable="true"),this.content.setAttribute("part","region-content"),this.element.appendChild(this.content)}else this.content=void 0}setOptions(t){var e,i;if(t.color&&(this.color=t.color,this.element.style.backgroundColor=this.color),void 0!==t.drag&&(this.drag=t.drag,this.element.style.cursor=this.drag?"grab":"default"),void 0!==t.start||void 0!==t.end){const n=this.start===this.end;this.start=this.clampPosition(null!==(e=t.start)&&void 0!==e?e:this.start),this.end=this.clampPosition(null!==(i=t.end)&&void 0!==i?i:n?this.start:this.end),this.renderPosition(),this.setPart()}if(t.content&&this.setContent(t.content),t.id&&(this.id=t.id,this.setPart()),void 0!==t.resize&&t.resize!==this.resize){const e=this.start===this.end;this.resize=t.resize,this.resize&&!e?this.addResizeHandles(this.element):this.removeResizeHandles(this.element)}}remove(){this.emit("remove"),this.subscriptions.forEach((t=>t())),this.element.remove(),this.element=null}}class r extends e{constructor(t){super(t),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(t){return new r(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().appendChild(this.regionsContainer);let t=[];this.subscriptions.push(this.wavesurfer.on("timeupdate",(e=>{const i=this.regions.filter((t=>t.start<=e&&(t.end===t.start?t.start+.05:t.end)>=e));i.forEach((e=>{t.includes(e)||this.emit("region-in",e)})),t.forEach((t=>{i.includes(t)||this.emit("region-out",t)})),t=i})))}initRegionsContainer(){return s("div",{style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",zIndex:"3",pointerEvents:"none"}})}getRegions(){return this.regions}avoidOverlapping(t){if(!t.content)return;const e=t.content,i=e.getBoundingClientRect(),n=this.regions.map((e=>{if(e===t||!e.content)return 0;const n=e.content.getBoundingClientRect();return i.left<n.left+n.width&&n.left<i.left+i.width?n.height:0})).reduce(((t,e)=>t+e),0);e.style.marginTop=`${n}px`}adjustScroll(t){var e,i;const n=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper())||void 0===i?void 0:i.parentElement;if(!n)return;const{clientWidth:s,scrollWidth:o}=n;if(o<=s)return;const r=n.getBoundingClientRect(),a=t.element.getBoundingClientRect(),l=a.left-r.left,h=a.right-r.left;l<0?n.scrollLeft+=l:h>s&&(n.scrollLeft+=h-s)}saveRegion(t){this.regionsContainer.appendChild(t.element),this.avoidOverlapping(t),this.regions.push(t);const e=[t.on("update",(e=>{e||this.adjustScroll(t)})),t.on("update-end",(()=>{this.avoidOverlapping(t),this.emit("region-updated",t)})),t.on("play",(()=>{var e,i;null===(e=this.wavesurfer)||void 0===e||e.play(),null===(i=this.wavesurfer)||void 0===i||i.setTime(t.start)})),t.on("click",(e=>{this.emit("region-clicked",t,e)})),t.on("dblclick",(e=>{this.emit("region-double-clicked",t,e)})),t.once("remove",(()=>{e.forEach((t=>t())),this.regions=this.regions.filter((e=>e!==t)),this.emit("region-removed",t)}))];this.subscriptions.push(...e),this.emit("region-created",t)}addRegion(t){var e,i;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const n=this.wavesurfer.getDuration(),s=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDecodedData())||void 0===i?void 0:i.numberOfChannels,r=new o(t,n,s);return n?this.saveRegion(r):this.subscriptions.push(this.wavesurfer.once("ready",(t=>{r._setTotalDuration(t),this.saveRegion(r)}))),r}enableDragSelection(t,e=3){var n;const s=null===(n=this.wavesurfer)||void 0===n?void 0:n.getWrapper();if(!(s&&s instanceof HTMLElement))return()=>{};let r=null,a=0;return i(s,((t,e,i)=>{r&&r._onUpdate(t,i>a?"end":"start")}),(e=>{var i,n;if(a=e,!this.wavesurfer)return;const s=this.wavesurfer.getDuration(),l=null===(n=null===(i=this.wavesurfer)||void 0===i?void 0:i.getDecodedData())||void 0===n?void 0:n.numberOfChannels,{width:h}=this.wavesurfer.getWrapper().getBoundingClientRect(),d=e/h*s,c=(e+5)/h*s;r=new o(Object.assign(Object.assign({},t),{start:d,end:c}),s,l),this.regionsContainer.appendChild(r.element)}),(()=>{r&&(this.saveRegion(r),r=null)}),e)}clearRegions(){this.regions.forEach((t=>t.remove()))}destroy(){this.clearRegions(),super.destroy(),this.regionsContainer.remove()}}return r}));

data/vendor/assets/src/js/third_parties/webaudio-pianoroll.min.js

@@ -0,0 +1,66 @@
+customElements.define("webaudio-pianoroll",class t extends HTMLElement{constructor(){super()}defineprop(){let t=this.module.properties;for(let e in t){let i=t[e];this["_"+e]=this.getAttr(e,i.value),Object.defineProperty(this,e,{get:()=>this["_"+e],set:t=>{this["_"+e]=t,"function"==typeof this[i.observer]&&this[i.observer]()}})}}connectedCallback(){let t;t=this,this.module={is:"webaudio-pianoroll",properties:{width:{type:Number,value:640,observer:"layout"},height:{type:Number,value:320,observer:"layout"},timebase:{type:Number,value:16,observer:"layout"},editmode:{type:String,value:"dragpoly"},xrange:{type:Number,value:16,observer:"layout"},yrange:{type:Number,value:16,observer:"layout"},xoffset:{type:Number,value:0,observer:"layout"},yoffset:{type:Number,value:60,observer:"layout"},grid:{type:Number,value:4},snap:{type:Number,value:1},wheelzoom:{type:Number,value:0},wheelzoomx:{type:Number,value:0},wheelzoomy:{type:Number,value:0},xscroll:{type:Number,value:0},yscroll:{type:Number,value:0},gridnoteratio:{type:Number,value:.5,observer:"updateTimer"},xruler:{type:Number,value:24,observer:"layout"},yruler:{type:Number,value:24,observer:"layout"},octadj:{type:Number,value:-1},cursor:{type:Number,value:0,observer:"redrawMarker"},markstart:{type:Number,value:0,observer:"redrawMarker"},markend:{type:Number,value:16,observer:"redrawMarker"},defvelo:{type:Number,value:100},collt:{type:String,value:"#ccc"},coldk:{type:String,value:"#aaa"},colgrid:{type:String,value:"#666"},colnote:{type:String,value:"#f22"},colnotesel:{type:String,value:"#0f0"},colnoteborder:{type:String,value:"#000"},colnoteselborder:{type:String,value:"#fff"},colrulerbg:{type:String,value:"#666"},colrulerfg:{type:String,value:"#fff"},colrulerborder:{type:String,value:"#000"},colselarea:{type:String,value:"rgba(0,0,0,0.3)"},bgsrc:{type:String,value:null,observer:"layout"},cursorsrc:{type:String,value:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4NCjxwYXRoIGZpbGw9InJnYmEoMjU1LDEwMCwxMDAsMC44KSIgZD0iTTAsMSAyNCwxMiAwLDIzIHoiLz4NCjwvc3ZnPg0K"},cursoroffset:{type:Number,value:0},markstartsrc:{type:String,value:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCjxwYXRoIGZpbGw9IiMwYzAiIGQ9Ik0wLDEgMjQsMSAwLDIzIHoiLz4NCjwvc3ZnPg0K"},markstartoffset:{type:Number,value:0},markendsrc:{type:String,value:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCjxwYXRoIGZpbGw9IiMwYzAiIGQ9Ik0wLDEgMjQsMSAyNCwyMyB6Ii8+DQo8L3N2Zz4NCg=="},markendoffset:{type:Number,value:-24},kbsrc:{type:String,value:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSI0ODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8cGF0aCBmaWxsPSIjZmZmIiBzdHJva2U9IiMwMDAiIGQ9Ik0wLDAgaDI0djQ4MGgtMjR6Ii8+CjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0wLDQwIGgxMnY0MGgtMTJ6IE0wLDEyMCBoMTJ2NDBoLTEyeiBNMCwyMDAgaDEydjQwaC0xMnogTTAsMzIwIGgxMnY0MGgtMTJ6IE0wLDQwMCBoMTJ2NDBoLTEyeiIvPgo8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIGQ9Ik0wLDYwIGgyNCBNMCwxNDAgaDI0IE0wLDIyMCBoMjQgTTAsMjgwIGgyNCBNMCwzNDAgaDI0IE0wLDQyMCBoMjQiLz4KPC9zdmc+Cg==",observer:"layout"},kbwidth:{type:Number,value:40},loop:{type:Number,value:0},preload:{type:Number,value:1},tempo:{type:Number,value:120,observer:"updateTimer"},enable:{type:Boolean,value:!0}}},this.defineprop(),t.innerHTML=`<style>
+.pianoroll{
+    background:#ccc;
+}
+:host {
+    user-select: none;
+    display: inline-block;
+    font-family: sans-serif;
+    font-size: 11px;
+    padding:0;
+    margin:0;
+}
+#wac-body {
+    position: relative;
+    margin:0;
+    padding:0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+#wac-pianoroll {
+    cursor: pointer;
+    margin:0;
+    padding:0;
+    width: 100%;
+    height: 100%;
+    background-size:100% calc(100%*12/16);
+    background-position:left bottom;
+}
+#wac-menu {
+    display:none;
+    position:absolute;
+    top:0px;
+    left:0px;
+    background:#eef;
+    color:#000;
+    padding:2px 10px;
+    border:1px solid #66f;
+    border-radius: 4px;
+    cursor:pointer;
+}
+.marker{
+    position: absolute;
+    left:0px;
+    top:0px;
+    cursor:ew-resize;
+}
+#wac-kb{
+    position:absolute;
+    left:0px;
+    top:0px;
+    width:100px;
+    height:100%;
+    background: repeat-y;
+    background-size:100% calc(100%*12/16);
+    background-position:left bottom;
+}
+</style>
+<div class="wac-body" id="wac-body" touch-action="none">
+<canvas id="wac-pianoroll" touch-action="none" tabindex="0"></canvas>
+<div id="wac-kb"></div>
+<img id="wac-markstart" class="marker" src="${this.markstartsrc}"/>
+<img id="wac-markend" class="marker" src="${this.markendsrc}"/>
+<img id="wac-cursor" class="marker" src="${this.cursorsrc}"/>
+<div id="wac-menu">Delete</div>
+</div>`,this.sortSequence=function(){this.sequence.sort((t,e)=>t.t-e.t)},this.findNextEv=function(t){for(let e=0;e<this.sequence.length;++e){let i=this.sequence[e];if(i.t>=this.markend)return{t1:t,n2:this.markend,dt:this.markend-t,i:-1};if(i.t>=t)return{t1:t,t2:i.t,dt:i.t-t,i:e}}return{t1:t,t2:this.markend,dt:this.markend-t,i:-1}},this.locate=function(t){this.cursor=t},this.updateTimer=function(){this.tick2time=240/this.tempo/this.timebase},this.play=function(t,e,i){if(void 0!==i&&this.locate(i),null!=this.timer)return;this.actx=t,this.playcallback=e,this.timestack=[],this.time0=this.time1=this.actx.currentTime+.1,this.tick0=this.tick1=this.cursor,this.tick2time=240/this.tempo/this.timebase;let s=this.findNextEv(this.cursor);this.index1=s.i,this.timestack.push([0,this.cursor,0]),this.timestack.push([this.time0,this.cursor,this.tick2time]),this.time1+=s.dt*this.tick2time,s.i<0?this.timestack.push([this.time1,this.markstart,this.tick2time]):this.timestack.push([this.time1,s.t1,this.tick2time]),this.timer=setInterval((function t(){let e=this.actx.currentTime;for(;this.timestack.length>1&&e>=this.timestack[1][0];)this.timestack.shift();for(this.cursor=this.timestack[0][1]+(e-this.timestack[0][0])/this.timestack[0][2],this.redrawMarker();e+this.preload>=this.time1;){this.time0=this.time1,this.tick0=this.tick1;let i=this.sequence[this.index1];if(!i||i.t>=this.markend){this.timestack.push([this.time1,this.markstart,this.tick2time]);let s=this.findNextEv(this.markstart);this.time1+=s.dt*this.tick2time,this.index1=s.i}else{this.tick1=i.t,this.timestack.push([this.time1,i.t,this.tick2time]);let h=Math.min(i.t+i.g,this.markend)-i.t;("gridmono"==this.editmode||"gridpoly"==this.editmode)&&(h*=this.gridnoteratio);let r={t:this.time1,g:this.time1+h*this.tick2time,n:i.n};if(this.playcallback&&this.playcallback(r),(i=this.sequence[++this.index1])&&!(i.t>=this.markend))this.time1+=(i.t-this.tick1)*this.tick2time;else{this.time1+=(this.markend-this.tick1)*this.tick2time;let n=this.findNextEv(this.markstart);this.timestack.push([this.time1,this.markstart,this.tick2time]),this.time1+=n.dt*this.tick2time,this.index1=n.i}}}}).bind(this),25)},this.stop=function(){this.timer&&clearInterval(this.timer),this.timer=null},this.setMMLString=function(t){this.sequence=[];let e,i,s,h,r,n,a,o,l={s:t,i:e,tb:this.timebase};function c(t){for(var e=0;t.s[t.i]>="0"&&t.s[t.i]<="9";)e=10*e+parseInt(t.s[t.i]),++t.i;return e}function d(t){var e=c(t);0==e&&(e=n);for(var i=e=t.tb/e;"."==t.s[t.i];)++t.i,e+=i>>=1;return e}function g(t){switch(t.s[t.i]){case"c":case"C":s=0;break;case"d":case"D":s=2;break;case"e":case"E":s=4;break;case"f":case"F":s=5;break;case"g":case"G":s=7;break;case"a":case"A":s=9;break;case"b":case"B":s=11;break;default:s=-1}if(++t.i,s<0)return -1;for(;;){switch(t.s[t.i]){case"-":--s;break;case"+":case"#":++s;break;default:return s}++t.i}}for(r=4,n=8,h=0,a=0,o=null,l.i=0;l.i<l.s.length;){switch(l.s[l.i]){case">":++l.i,++r,s=-1,i=0;break;case"<":++l.i,--r,s=-1,i=0;break;case"&":case"^":++l.i,a=1,s=-1,i=0;break;case"t":case"T":++l.i,s=-1,i=0,this.tempo=c(l);break;case"o":case"O":++l.i,s=-1,i=0,r=c(l);break;case"l":case"L":++l.i,s=-1,i=0,n=c(l);break;case"r":case"R":++l.i,s=-1,i=d(l);break;default:i=(s=g(l))>=0?d(l):0}s>=0&&(s=(r-this.octadj)*12+s,a&&o&&o.n==s?(o.g+=i,a=0):this.sequence.push(o={t:h,n:s,g:i,f:0})),h+=i}this.redraw()},this.getMMLString=function(){function t(t,e,i){console.log("*****> "+t+" : "+e+" : "+i+" : ");var s="",h=[[960,"1"],[840,"2.."],[720,"2."],[480,"2"],[420,"4.."],[360,"4."],[240,"4"],[210,"8.."],[180,"8."],[120,""],[105,"16.."],[90,"16."],[60,"16"],[45,"32."],[30,"32"],[16,"60"],[15,"64"],[8,"120"],[4,"240"],[2,"480"],[1,"960"]];for(e=960*e/i;e>0;)for(let r=0;r<h.length;++r)for(;e>=h[r][0];)e-=h[r][0],s+="&"+t+h[r][1];return s.substring(1)}var e,i="t"+this.tempo+"o4l8",s=0,h=5,r=["c","d-","d","e-","e","f","g-","g","a-","a","b-","b"];for(let n=0;n<this.sequence.length;++n){var a=this.sequence[n];if(a.t>s){var o=a.t-s;i+=t("r",o,this.timebase),s=a.t}var e=a.n;(e<12*h||e>=12*h+12)&&(i+="o"+((h=e/12|0)+this.octadj)),e=r[e%12];var o=a.g;if(n+1<this.sequence.length){var l=this.sequence[n+1];l.t<a.t+o?(o=l.t-a.t,s=l.t):s=a.t+a.g}else s=a.t+a.g;i+=t(e,o,this.timebase)}return i},this.hitTest=function(t){let e={t:0,n:0,i:-1,m:" "},i=this.sequence.length;if(t.t==this.menu)return e.m="m",e;if(e.t=this.xoffset+(t.x-this.yruler-this.kbwidth)/this.swidth*this.xrange,e.n=this.yoffset-(t.y-this.height)/this.steph,t.y>=this.height||t.x>=this.width)return e;if(t.y<this.xruler)return e.m="x",e;if(t.x<this.yruler+this.kbwidth)return e.m="y",e;for(let s=0;s<i;++s){let h=this.sequence[s];if((0|e.n)==h.n){if(h.f&&Math.abs(h.t-e.t)*this.stepw<8)return e.m="B",e.i=s,e;if(h.f&&Math.abs(h.t+h.g-e.t)*this.stepw<8)return e.m="E",e.i=s,e;if(e.t>=h.t&&e.t<h.t+h.g)return e.i=s,this.sequence[s].f?e.m="N":e.m="n",e}}return e.m="s",e},this.addNote=function(t,e,i,s,h){if(t>=0&&e>=0&&e<128){let r={t:t,c:144,n:e,g:i,v:s,f:h};return this.sequence.push(r),this.sortSequence(),this.redraw(),r}return null},this.selAreaNote=function(t,e,i,s){let h,r=0,n=this.sequence[r];for(i>s&&(h=i,i=s,s=h),t>e&&(h=t,t=e,e=h);n;)n.t>=t&&n.t<e&&n.n>=i&&n.n<=s?n.f=1:n.f=0,n=this.sequence[++r]},this.delNote=function(t){this.sequence.splice(t,1),this.redraw()},this.delAreaNote=function(t,e,i){let s=this.sequence.length;for(let h=s-1;h>=0;--h){let r=this.sequence[h];void 0!==i&&i!=h&&(t<=r.t&&t+e>=r.t+r.g?this.sequence.splice(h,1):t<=r.t&&t+e>r.t&&t+e<r.t+r.g?(r.g=r.t+r.g-(t+e),r.t=t+e):t>=r.t&&t<r.t+r.g&&t+e>=r.t+r.g?r.g=t-r.t:t>r.t&&t+e<r.t+r.g&&(this.addNote(t+e,r.n,r.t+r.g-t-e,this.defvelo),r.g=t-r.t))}},this.delSelectedNote=function(){let t=this.sequence.length;for(let e=t-1;e>=0;--e){let i=this.sequence[e];i.f&&this.sequence.splice(e,1)}},this.moveSelectedNote=function(t,e){let i=this.sequence.length;for(let s=0;s<i;++s){let h=this.sequence[s];h.f&&h.ot+t<0&&(t=-h.ot)}for(let r=0;r<i;++r){let n=this.sequence[r];n.f&&(n.t=((n.ot+t)/this.snap+.5|0)*this.snap,n.n=n.on+e)}},this.clearSel=function(){let t=this.sequence.length;for(let e=0;e<t;++e)this.sequence[e].f=0},this.selectedNotes=function(){let t=[];for(let e=this.sequence.length-1;e>=0;--e){let i=this.sequence[e];i.f&&t.push({i:e,ev:i,t:i.t,g:i.g})}return t},this.editDragDown=function(t){let e=this.hitTest(t),i;if("N"==e.m){i=this.sequence[e.i],this.dragging={o:"D",m:"N",i:e.i,t:e.t,n:i.n,dt:e.t-i.t};for(let s=0,h=this.sequence.length;s<h;++s)(i=this.sequence[s]).f&&(i.on=i.n,i.ot=i.t,i.og=i.g);this.redraw()}else if("n"==e.m)i=this.sequence[e.i],this.clearSel(),i.f=1,this.redraw();else if("E"==e.m){let r=this.sequence[e.i];this.dragging={o:"D",m:"E",i:e.i,t:r.t,g:r.g,ev:this.selectedNotes()}}else if("B"==e.m){let n=this.sequence[e.i];this.dragging={o:"D",m:"B",i:e.i,t:n.t,g:n.g,ev:this.selectedNotes()}}else if("s"==e.m&&e.t>=0){this.clearSel();var a=(e.t/this.snap|0)*this.snap;this.sequence.push({t:a,n:0|e.n,g:1,f:1}),this.dragging={o:"D",m:"E",i:this.sequence.length-1,t:a,g:1,ev:[{t:a,g:1,ev:this.sequence[this.sequence.length-1]}]},this.redraw()}},this.editDragMove=function(t){let e=this.hitTest(t),i;if("D"==this.dragging.o)switch(this.dragging.m){case"E":if(this.dragging.ev){let s=(Math.max(0,e.t)/this.snap+.9|0)*this.snap-this.dragging.t-this.dragging.g,h=this.dragging.ev;for(let r=h.length-1;r>=0;--r){let n=h[r].ev;n.g=h[r].g+s,n.g<=0&&(n.g=1),"dragmono"==this.editmove&&this.delAreaNote(n.t,n.g)}}this.redraw();break;case"B":if(this.dragging.ev){let a=(Math.max(0,e.t)/this.snap+.9|0)*this.snap-this.dragging.t,o=this.dragging.ev;for(let l=o.length-1;l>=0;--l){let c=o[l].ev;c.t=o[l].t+a,c.g=o[l].g-a,c.g<=0&&(c.g=1),"dragmono"==this.editmove&&this.delAreaNote(c.t,c.g)}}this.redraw();break;case"N":i=this.sequence[this.dragging.i],this.moveSelectedNote(e.t-this.dragging.t|0,(0|e.n)-this.dragging.n),this.redraw()}},this.editGridDown=function(t){let e=this.hitTest(t);if("n"==e.m)this.delNote(e.i),this.dragging={o:"G",m:"0"};else if("s"==e.m&&e.t>=0){let i=Math.floor(e.t);"gridmono"==this.editmode&&this.delAreaNote(i,1,e.i),this.addNote(i,0|e.n,1,this.defvelo),this.dragging={o:"G",m:"1"}}},this.editGridMove=function(t){let e=this.hitTest(t);if("G"==this.dragging.o)switch(this.dragging.m){case"1":let i=Math.floor(e.t);"s"==e.m&&("gridmono"==this.editmode&&this.delAreaNote(i,1,e.i),this.addNote(i,0|e.n,1,this.defvelo));break;case"0":"n"==e.m&&this.delNote(e.i)}},this.setListener=function(t,e){this.bindcontextmenu=this.contextmenu.bind(this),this.bindpointermove=this.pointermove.bind(this),this.bindcancel=this.cancel.bind(this),t.addEventListener("mousedown",this.pointerdown.bind(this),!0),t.addEventListener("touchstart",this.pointerdown.bind(this),!1),e&&(t.addEventListener("mouseover",this.pointerover.bind(this),!1),t.addEventListener("mouseout",this.pointerout.bind(this),!1))},this.ready=function(){this.body=t.children[1],this.elem=t.childNodes[2],this.proll=this.elem.children[0],this.canvas=this.elem.children[0],this.kb=this.elem.children[1],this.ctx=this.canvas.getContext("2d"),this.kbimg=this.elem.children[1],this.markstartimg=this.elem.children[2],this.markendimg=this.elem.children[3],this.cursorimg=this.elem.children[4],this.menu=this.elem.children[5],this.rcMenu={x:0,y:0,width:0,height:0},this.lastx=0,this.lasty=0,this.canvas.addEventListener("mousemove",this.mousemove.bind(this),!1),this.canvas.addEventListener("keydown",this.keydown.bind(this),!1),this.canvas.addEventListener("DOMMouseScroll",this.wheel.bind(this),!1),this.canvas.addEventListener("mousewheel",this.wheel.bind(this),!1),this.setListener(this.canvas,!0),this.setListener(this.markendimg,!0),this.setListener(this.markstartimg,!0),this.setListener(this.cursorimg,!0),this.setListener(this.menu,!1),this.sequence=[],this.dragging={o:null},this.kbimg.style.height=this.sheight+"px",this.kbimg.style.backgroundSize=12*this.steph+"px",this.layout(),this.initialized=1,this.redraw()},this.setupImage=function(){},this.preventScroll=function(t){t.preventDefault&&t.preventDefault()},this.getPos=function(t){let e=null;return t&&(e=t.target,this.lastx=t.clientX-this.rcTarget.left,this.lasty=t.clientY-this.rcTarget.top),this.lastx>=this.rcMenu.x&&this.lastx<this.rcMenu.x+this.rcMenu.width&&this.lasty>=this.rcMenu.y&&this.lasty<this.rcMenu.y+this.rcMenu.height&&(e=this.menu),{t:e,x:this.lastx,y:this.lasty}},this.contextmenu=function(t){return t.stopPropagation(),t.preventDefault(),window.removeEventListener("contextmenu",this.bindcontextmenu),!1},this.keydown=function(t){46===t.keyCode&&(this.delSelectedNote(),this.redraw())},this.popMenu=function(t){let e=this.menu.style;e.display="block",e.top=t.y+8+"px",e.left=t.x+8+"px",this.rcMenu=this.menu.getBoundingClientRect()},this.longtapcountup=function(){if(++this.longtapcount>=18)switch(clearInterval(this.longtaptimer),this.downht.m){case"N":case"B":case"E":this.popMenu(this.downpos),this.dragging={o:"m"}}},this.pointerdown=function(t){let e;if(this.enable){if(e=t.touches?t.touches[0]:t,this.rcTarget=this.canvas.getBoundingClientRect(),this.downpos=this.getPos(e),this.downht=this.hitTest(this.downpos),console.log("======> "+this.downht),this.longtapcount=0,this.longtaptimer=setInterval(this.longtapcountup.bind(this),100),window.addEventListener("touchmove",this.bindpointermove,!1),window.addEventListener("mousemove",this.bindpointermove,!1),window.addEventListener("touchend",this.bindcancel),window.addEventListener("mouseup",this.bindcancel),window.addEventListener("contextmenu",this.bindcontextmenu),2==e.button||e.ctrlKey){switch(this.downht.m){case"N":case"B":case"E":this.popMenu(this.downpos),this.dragging={o:"m"};break;default:("dragmono"==this.editmode||"dragpoly"==this.editmode)&&(this.dragging={o:"A",p:this.downpos,p2:this.downpos,t1:this.downht.t,n1:this.downht.n})}return t.preventDefault(),t.stopPropagation(),this.canvas.focus(),!1}switch(e.target){case this.markendimg:return this.dragging={o:"E",x:this.downpos.x,m:this.markend},t.preventDefault(),t.stopPropagation(),!1;case this.markstartimg:return this.dragging={o:"S",x:this.downpos.x,m:this.markstart},t.preventDefault(),t.stopPropagation(),!1;case this.cursorimg:return this.dragging={o:"P",x:this.downpos.x,m:this.cursor},t.preventDefault(),t.stopPropagation(),!1}switch(this.dragging={o:null,x:this.downpos.x,y:this.downpos.y,offsx:this.xoffset,offsy:this.yoffset},this.canvas.focus(),this.editmode){case"gridpoly":case"gridmono":this.editGridDown(this.downpos);break;case"dragpoly":case"dragmono":this.editDragDown(this.downpos)}return this.press=1,t.preventDefault&&t.preventDefault(),t.stopPropagation&&t.stopPropagation(),!1}},this.mousemove=function(t){if(null==this.dragging.o){this.rcTarget=this.canvas.getBoundingClientRect();let e=this.getPos(t),i=this.hitTest(e);switch(i.m){case"E":this.canvas.style.cursor="e-resize";break;case"B":this.canvas.style.cursor="w-resize";break;case"N":this.canvas.style.cursor="move";break;case"n":case"s":this.canvas.style.cursor="pointer"}}},this.pointermove=function(t){let e;this.rcTarget=this.canvas.getBoundingClientRect(),e=t.touches?t.touches[0]:t,this.longtaptimer&&clearInterval(this.longtaptimer);let i=this.getPos(e),s=this.hitTest(i);switch(this.dragging.o){case null:this.xscroll&&(this.xoffset=this.dragging.offsx+(this.dragging.x-i.x)*(this.xrange/this.width)),this.yscroll&&(this.yoffset=this.dragging.offsy+(i.y-this.dragging.y)*(this.yrange/this.height));break;case"m":"m"==s.m?this.menu.style.background="#ff6":this.menu.style.background="#eef";break;case"A":this.dragging.p2=i,this.dragging.t2=s.t,this.dragging.n2=s.n,this.redraw();break;case"E":var h=Math.max(1,this.dragging.m+(i.x-this.dragging.x)/this.stepw+.5|0);this.markstart>=h&&(this.markstart=h-1),this.markend=h;break;case"S":var h=Math.max(0,this.dragging.m+(i.x-this.dragging.x)/this.stepw+.5|0);this.markend<=h&&(this.markend=h+1),this.markstart=h;break;case"P":this.cursor=Math.max(0,this.dragging.m+(i.x-this.dragging.x)/this.stepw+.5|0)}switch(this.editmode){case"gridpoly":case"gridmono":this.editGridMove(i);break;case"dragpoly":case"dragmono":this.editDragMove(i)}return t.stopPropagation(),!1},this.cancel=function(t){let e;e=t.touches?null:t,this.longtaptimer&&clearInterval(this.longtaptimer);let i=this.getPos(e);if("m"==this.dragging.o&&(this.menu.style.display="none",this.rcMenu={x:0,y:0,width:0,height:0},i.t==this.menu&&this.delSelectedNote(),this.redraw()),"A"==this.dragging.o&&(this.selAreaNote(this.dragging.t1,this.dragging.t2,this.dragging.n1,this.dragging.n2),this.dragging={o:null},this.redraw()),"dragmono"==this.editmode)for(let s=this.sequence.length-1;s>=0;--s){let h=this.sequence[s];h&&h.f&&this.delAreaNote(h.t,h.g,s)}return this.redraw(),this.dragging={o:null},this.press&&this.sortSequence(),this.press=0,window.removeEventListener("touchstart",this.preventScroll,!1),window.removeEventListener("mousemove",this.bindpointermove,!1),window.removeEventListener("touchend",this.bindcancel,!1),window.removeEventListener("mouseup",this.bindcancel,!1),t.preventDefault(),t.stopPropagation(),!1},this.pointerover=function(t){},this.pointerout=function(t){},this.wheel=function(t){let e=0,i=this.getPos(t);t||(t=window.event),t.wheelDelta?e=t.wheelDelta/120:t.detail&&(e=-t.detail/3);let s=this.hitTest(i);(this.wheelzoomx||this.wheelzoom)&&"x"==s.m&&(e>0?(this.xoffset=s.t-(s.t-this.xoffset)/1.2,this.xrange/=1.2):(this.xoffset=s.t-(s.t-this.xoffset)*1.2,this.xrange*=1.2)),(this.wheelzoomy||this.wheelzoom)&&"y"==s.m&&(e>0?(this.yoffset=s.n-(s.n-this.yoffset)/1.2,this.yrange/=1.2):(this.yoffset=s.n-(s.n-this.yoffset)*1.2,this.yrange*=1.2)),t.preventDefault()},this.layout=function(){if(void 0===this.kbwidth)return;let t=this.proll,e=this.body.style;this.bgsrc&&(t.style.background="url('"+this.bgsrc+"')"),this.kbimg.style.background="url('"+this.kbsrc+"')",this.width&&(t.width=this.width,e.width=t.style.width=this.width+"px"),this.height&&(t.height=this.height,e.height=t.style.height=this.height+"px"),this.swidth=t.width-this.yruler,this.swidth-=this.kbwidth,this.sheight=t.height-this.xruler,this.redraw()},this.redrawMarker=function(){if(!this.initialized)return;let t=(this.cursor-this.xoffset)*this.stepw+this.yruler+this.kbwidth;this.cursorimg.style.left=t+this.cursoroffset+"px";let e=(this.markstart-this.xoffset)*this.stepw+this.yruler+this.kbwidth;this.markstartimg.style.left=e+this.markstartoffset+"px";let i=(this.markend-this.xoffset)*this.stepw+this.yruler+this.kbwidth;this.markendimg.style.left=i+this.markendoffset+"px"},this.redrawGrid=function(){for(let t=0;t<128;++t){1&this.semiflag[t%12]?this.ctx.fillStyle=this.coldk:this.ctx.fillStyle=this.collt;let e=this.height-(t-this.yoffset)*this.steph;this.ctx.fillRect(this.yruler+this.kbwidth,0|e,this.swidth,-this.steph),this.ctx.fillStyle=this.colgrid,this.ctx.fillRect(this.yruler+this.kbwidth,0|e,this.swidth,1)}for(let i=0;;i+=this.grid){let s=this.stepw*(i-this.xoffset)+this.yruler+this.kbwidth;if(this.ctx.fillRect(0|s,this.xruler,1,this.sheight),s>=this.width)break}},this.semiflag=[6,1,0,1,0,2,1,0,1,0,1,0],this.redrawXRuler=function(){if(this.xruler){this.ctx.textAlign="left",this.ctx.font=this.xruler/2+"px 'sans-serif'",this.ctx.fillStyle=this.colrulerbg,this.ctx.fillRect(0,0,this.width,this.xruler),this.ctx.fillStyle=this.colrulerborder,this.ctx.fillRect(0,0,this.width,1),this.ctx.fillRect(0,0,1,this.xruler),this.ctx.fillRect(0,this.xruler-1,this.width,1),this.ctx.fillRect(this.width-1,0,1,this.xruler),this.ctx.fillStyle=this.colrulerfg;for(let t=0;;t+=this.timebase){let e=(t-this.xoffset)*this.stepw+this.yruler+this.kbwidth;if(this.ctx.fillRect(e,0,1,this.xruler),this.ctx.fillText(t/this.timebase+1,e+4,this.xruler-8),e>=this.width)break}}},this.redrawYRuler=function(){if(this.yruler){this.ctx.textAlign="right",this.ctx.font=this.steph/2+"px 'sans-serif'",this.ctx.fillStyle=this.colrulerbg,this.ctx.fillRect(0,this.xruler,this.yruler,this.sheight),this.ctx.fillStyle=this.colrulerborder,this.ctx.fillRect(0,this.xruler,1,this.sheight),this.ctx.fillRect(this.yruler,this.xruler,1,this.sheight),this.ctx.fillRect(0,this.height-1,this.yruler,1),this.ctx.fillStyle=this.colrulerfg;for(let t=0;t<128;t+=12){let e=this.height-this.steph*(t-this.yoffset);this.ctx.fillRect(0,0|e,this.yruler,-1),this.ctx.fillText("C"+((t/12|0)+this.octadj),this.yruler-4,e-4)}}this.kbimg.style.top=this.xruler+"px",this.kbimg.style.left=this.yruler+"px",this.kbimg.style.width=this.kbwidth+"px",this.kbimg.style.backgroundSize="100% "+12*this.steph+"px",this.kbimg.style.backgroundPosition="0px "+(this.sheight+this.steph*this.yoffset)+"px"},this.redrawKeyboard=function(){if(this.yruler){for(this.ctx.textAlign="right",this.ctx.font=this.steph/2+"px 'sans-serif'",this.ctx.fillStyle=this.colortab.kbwh,this.ctx.fillRect(1,this.xruler,this.yruler,this.sheight),this.ctx.fillStyle=this.colortab.kbbk,y=0;y<128;++y){let t=this.height-this.steph*(y-this.yoffset),e=y%12,i=this.semiflag[e];1&i&&(this.ctx.fillRect(0,t,this.yruler/2,-this.steph),this.ctx.fillRect(0,t-this.steph/2|0,this.yruler,-1)),2&i&&this.ctx.fillRect(0,0|t,this.yruler,-1),4&i&&this.ctx.fillText("C"+((y/12|0)+this.octadj),this.yruler-4,t-4)}this.ctx.fillRect(this.yruler,this.xruler,1,this.sheight)}},this.redrawAreaSel=function(){this.dragging&&"A"==this.dragging.o&&(this.ctx.fillStyle=this.colselarea,this.ctx.fillRect(this.dragging.p.x,this.dragging.p.y,this.dragging.p2.x-this.dragging.p.x,this.dragging.p2.y-this.dragging.p.y))},this.redraw=function(){let t,e,i,s,h;if(!this.ctx)return;this.ctx.clearRect(0,0,this.width,this.height),this.stepw=this.swidth/this.xrange,this.steph=this.sheight/this.yrange,this.redrawGrid();let r=this.sequence.length;for(let n=0;n<r;++n){let a=this.sequence[n];a.f?this.ctx.fillStyle=this.colnotesel:this.ctx.fillStyle=this.colnote,e=a.g*this.stepw,s=(t=(a.t-this.xoffset)*this.stepw+this.yruler+this.kbwidth)+e|0,t|=0,h=(i=this.height-(a.n-this.yoffset)*this.steph)-this.steph|0,i|=0,this.ctx.fillRect(t,i,s-t,h-i),a.f?this.ctx.fillStyle=this.colnoteselborder:this.ctx.fillStyle=this.colnoteborder,this.ctx.fillRect(t,i,1,h-i),this.ctx.fillRect(s,i,1,h-i),this.ctx.fillRect(t,i,s-t,1),this.ctx.fillRect(t,h,s-t,1)}this.redrawYRuler(),this.redrawXRuler(),this.redrawMarker(),this.redrawAreaSel()},this.ready()}sendEvent(t){let e;(e=document.createEvent("HTMLEvents")).initEvent(t,!1,!0),this.dispatchEvent(e)}getAttr(t,e){let i=this.getAttribute(t);if(""==i||null==i)return e;if("number"==typeof e){if("true"==i)return 1;if(isNaN(i=+i))return 0}return i}disconnectedCallback(){}});

data/vendor/assets/src/medias/images/icons/module.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" height="1024"  xml:space="preserve" id="moduleCanvas">
+	<path id="moduleCanvas-bezier" stroke="none" fill="rgb(255, 255, 255)" d="M 896,85.33 L 597.33,85.33 597.33,85.33 C 573.77,85.33 554.67,104.44 554.67,128 L 554.67,426.67 554.67,426.67 C 554.67,450.23 573.77,469.33 597.33,469.33 L 896,469.33 896,469.33 C 919.56,469.33 938.67,450.23 938.67,426.67 L 938.67,128 938.67,128 C 938.67,104.44 919.56,85.33 896,85.33 Z M 853.33,384 L 640,384 640,170.67 853.33,170.67 853.33,384 Z M 853.33,384" />
+	<path id="moduleCanvas-bezier2" stroke="none" fill="rgb(255, 255, 255)" d="M 810.67,512 L 512,512 512,213.33 512,213.33 C 512,189.77 492.9,170.67 469.33,170.67 L 128,170.67 128,170.67 C 104.44,170.67 85.33,189.77 85.33,213.33 L 85.33,896 85.33,896 C 85.33,919.56 104.44,938.67 128,938.67 L 810.67,938.67 810.67,938.67 C 834.23,938.67 853.33,919.56 853.33,896 L 853.33,554.67 853.33,554.67 C 853.33,531.1 834.23,512 810.67,512 Z M 170.67,256 L 426.67,256 426.67,512 170.67,512 170.67,256 Z M 170.67,597.33 L 426.67,597.33 426.67,853.33 170.67,853.33 170.67,597.33 Z M 768,853.33 L 512,853.33 512,597.33 768,597.33 768,853.33 Z M 768,853.33" />
+</svg>

data/vendor/assets/src/medias/images/utils/full_keyboard.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="120"  xml:space="preserve" id="canvas1">
+    <!-- Generated by PaintCode - http://www.paintcodeapp.com -->
+  <defs>
+        <filter id="canvas1-shadow-outer" filterUnits="objectBoundingBox">
+            <feGaussianBlur stdDeviation="1" />
+          <feOffset dx="0.5" dy="0.5" result="blur" />
+          <feFlood flood-color="rgb(0, 0, 0)" flood-opacity="1" />
+          <feComposite in2="blur" operator="in" result="colorShadow" />
+          <feComposite in="SourceGraphic" in2="colorShadow" operator="over" />
+        </filter>
+    <filter id="canvas1-shadow-outer" filterUnits="objectBoundingBox">
+            <feGaussianBlur stdDeviation="1" />
+      <feOffset dx="0.5" dy="0.5" result="blur" />
+      <feFlood flood-color="rgb(0, 0, 0)" flood-opacity="1" />
+      <feComposite in2="blur" operator="in" result="colorShadow" />
+      <feComposite in="SourceGraphic" in2="colorShadow" operator="over" />
+        </filter>
+    </defs>
+  <g id="canvas1-notes">
+        <rect id="canvas1-rectangle" stroke="none" fill="rgb(187, 187, 187)" filter="url(#canvas1-shadow-outer)" x="0" y="42" width="15" height="75" />
+    <rect id="canvas1-rectangle3" stroke="none" fill="rgb(187, 187, 187)" filter="url(#canvas1-shadow-outer)" x="15" y="42" width="15" height="75" />
+    <rect id="canvas1-rectangle4" stroke="none" fill="rgb(187, 187, 187)" filter="url(#canvas1-shadow-outer)" x="30" y="42" width="15" height="75" />
+    <rect id="canvas1-rectangle5" stroke="none" fill="rgb(187, 187, 187)" filter="url(#canvas1-shadow-outer)" x="45" y="42" width="15" height="75" />
+    <rect id="canvas1-rectangle6" stroke="none" fill="rgb(187, 187, 187)" filter="url(#canvas1-shadow-outer)" x="60" y="42" width="15" height="75" />
+    <rect id="canvas1-rectangle7" stroke="none" fill="rgb(187, 187, 187)" filter="url(#canvas1-shadow-outer)" x="75" y="42" width="15" height="75" />
+    <rect id="canvas1-rectangle8" stroke="none" fill="rgb(187, 187, 187)" filter="url(#canvas1-shadow-outer)" x="90" y="42" width="15" height="75" />
+    <rect id="canvas1-rectangle9" stroke="none" fill="rgb(187, 187, 187)" filter="url(#canvas1-shadow-outer)" x="105" y="42" width="15" height="75" />
+    <rect id="canvas1-rectangle2" stroke="none" fill="rgb(78, 78, 78)" filter="url(#canvas1-shadow-outer)" x="10" y="42" width="10" height="61" />
+    <rect id="canvas1-rectangle10" stroke="none" fill="rgb(78, 78, 78)" filter="url(#canvas1-shadow-outer)" x="30" y="42" width="10" height="61" />
+    <rect id="canvas1-rectangle11" stroke="none" fill="rgb(78, 78, 78)" filter="url(#canvas1-shadow-outer)" x="70" y="42" width="10" height="61" />
+    <rect id="canvas1-rectangle12" stroke="none" fill="rgb(78, 78, 78)" filter="url(#canvas1-shadow-outer)" x="90" y="42" width="10" height="61" />
+    <rect id="canvas1-rectangle13" stroke="none" fill="rgb(78, 78, 78)" filter="url(#canvas1-shadow-outer)" x="110" y="42" width="10" height="61" />
+    </g>
+  <g id="canvas1-guide" filter="url(#canvas1-shadow-outer)">
+        <rect id="canvas1-rectangle14" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(109, 108, 108)" x="0" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle15" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(92, 92, 92)" x="10" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle16" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(109, 108, 108)" x="20" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle17" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(92, 92, 92)" x="30" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle18" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(109, 108, 108)" x="40" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle19" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(109, 108, 108)" x="50" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle20" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(109, 108, 108)" x="60" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle21" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(92, 92, 92)" x="70" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle22" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(109, 108, 108)" x="80" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle23" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(92, 92, 92)" x="90" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle24" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(109, 108, 108)" x="100" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle25" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(92, 92, 92)" x="110" y="0" width="10" height="45" />
+    </g>
+</svg>

data/vendor/assets/src/medias/images/utils/keyboard.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="78"  xml:space="preserve" id="canvas1">
+    <!-- Generated by PaintCode - http://www.paintcodeapp.com -->
+  <defs>
+        <filter id="canvas1-shadow-outer" filterUnits="objectBoundingBox">
+            <feGaussianBlur stdDeviation="1" />
+          <feOffset dx="0.5" dy="0.5" result="blur" />
+          <feFlood flood-color="rgb(0, 0, 0)" flood-opacity="1" />
+          <feComposite in2="blur" operator="in" result="colorShadow" />
+          <feComposite in="SourceGraphic" in2="colorShadow" operator="over" />
+        </filter>
+    </defs>
+  <g id="canvas1-notes">
+        <rect id="canvas1-rectangle" stroke="none" fill="rgb(187, 187, 187)" filter="url(#canvas1-shadow-outer)" x="0" y="0" width="15" height="75" />
+    <rect id="canvas1-rectangle3" stroke="none" fill="rgb(187, 187, 187)" filter="url(#canvas1-shadow-outer)" x="15" y="0" width="15" height="75" />
+    <rect id="canvas1-rectangle4" stroke="none" fill="rgb(187, 187, 187)" filter="url(#canvas1-shadow-outer)" x="30" y="0" width="15" height="75" />
+    <rect id="canvas1-rectangle5" stroke="none" fill="rgb(187, 187, 187)" filter="url(#canvas1-shadow-outer)" x="45" y="0" width="15" height="75" />
+    <rect id="canvas1-rectangle6" stroke="none" fill="rgb(187, 187, 187)" filter="url(#canvas1-shadow-outer)" x="60" y="0" width="15" height="75" />
+    <rect id="canvas1-rectangle7" stroke="none" fill="rgb(187, 187, 187)" filter="url(#canvas1-shadow-outer)" x="75" y="0" width="15" height="75" />
+    <rect id="canvas1-rectangle8" stroke="none" fill="rgb(187, 187, 187)" filter="url(#canvas1-shadow-outer)" x="90" y="0" width="15" height="75" />
+    <rect id="canvas1-rectangle9" stroke="none" fill="rgb(187, 187, 187)" filter="url(#canvas1-shadow-outer)" x="105" y="0" width="15" height="75" />
+    <rect id="canvas1-rectangle2" stroke="none" fill="rgb(78, 78, 78)" filter="url(#canvas1-shadow-outer)" x="10" y="0" width="10" height="61" />
+    <rect id="canvas1-rectangle10" stroke="none" fill="rgb(78, 78, 78)" filter="url(#canvas1-shadow-outer)" x="30" y="0" width="10" height="61" />
+    <rect id="canvas1-rectangle11" stroke="none" fill="rgb(78, 78, 78)" filter="url(#canvas1-shadow-outer)" x="70" y="0" width="10" height="61" />
+    <rect id="canvas1-rectangle12" stroke="none" fill="rgb(78, 78, 78)" filter="url(#canvas1-shadow-outer)" x="90" y="0" width="10" height="61" />
+    <rect id="canvas1-rectangle13" stroke="none" fill="rgb(78, 78, 78)" filter="url(#canvas1-shadow-outer)" x="110" y="0" width="10" height="61" />
+    </g>
+</svg>

data/vendor/assets/src/medias/images/utils/notes.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="39"  xml:space="preserve" id="canvas1">
+    <!-- Generated by PaintCode - http://www.paintcodeapp.com -->
+  <defs>
+        <filter id="canvas1-shadow-outer" filterUnits="objectBoundingBox">
+            <feGaussianBlur stdDeviation="1" />
+          <feOffset dx="0.5" dy="0.5" result="blur" />
+          <feFlood flood-color="rgb(0, 0, 0)" flood-opacity="1" />
+          <feComposite in2="blur" operator="in" result="colorShadow" />
+          <feComposite in="SourceGraphic" in2="colorShadow" operator="over" />
+        </filter>
+    </defs>
+  <g id="canvas1-guide" filter="url(#canvas1-shadow-outer)">
+        <rect id="canvas1-rectangle14" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(109, 108, 108)" x="0" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle15" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(92, 92, 92)" x="10" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle16" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(109, 108, 108)" x="20" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle17" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(92, 92, 92)" x="30" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle18" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(109, 108, 108)" x="40" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle19" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(109, 108, 108)" x="50" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle20" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(109, 108, 108)" x="60" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle21" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(92, 92, 92)" x="70" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle22" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(109, 108, 108)" x="80" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle23" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(92, 92, 92)" x="90" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle24" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(109, 108, 108)" x="100" y="0" width="10" height="45" />
+    <rect id="canvas1-rectangle25" stroke="rgb(0, 0, 0)" stroke-width="0.1" stroke-miterlimit="10" fill="rgb(92, 92, 92)" x="110" y="0" width="10" height="45" />
+    </g>
+</svg>