| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link rel="icon" href="favicon.ico" type="image/x-icon"/> |
| <link rel="stylesheet" href="examples-styles.css"/> |
|
|
| <title>abcjs: Drag And Drop Demo</title> |
| <script src="../dist/abcjs-basic.js" type="text/javascript"></script> |
| <script type="text/javascript"> |
| var renderAbc |
| function sanitize(str) { |
| return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); |
| } |
| function formatAbc(start, end) { |
| var abc; |
| if (start < 0 || end < 0) |
| abc = sanitize(abcString); |
| else { |
| abc = sanitize(abcString.substring(0, start)) + |
| '<span class="select">' + |
| sanitize(abcString.substring(start, end)) + |
| '</span>' + |
| sanitize(abcString.substring(end)); |
| } |
| var el = document.getElementById("source"); |
| el.innerHTML = abc.replace(/\n/g,"<br>"); |
| } |
| function draw() { |
| var allowDragging = document.getElementById("allowDragging").checked; |
| var selectAll = document.getElementById("selectAll").checked; |
| var options = { |
| add_classes: true, |
| selectionColor: "green", |
| dragColor: "blue", |
| clickListener: clickListener, |
| dragging: allowDragging, |
| selectTypes: selectAll ? true : [ 'note', 'bar' ] |
| }; |
| |
| var start = Date.now(); |
| renderAbc = ABCJS.renderAbc("paper", abcString, options); |
| var len = Date.now() - start; |
| |
| var svg = document.getElementById("paper"); |
| var size = svg.innerHTML; |
| var el = document.getElementById("size"); |
| el.innerText = Math.round(size.length / 1000); |
| el = document.getElementById("time"); |
| el.innerText = len; |
| |
| svg.addEventListener('mouseover', hoverListener) |
| } |
| |
| var allPitches = [ |
| 'C,,,,', 'D,,,,', 'E,,,,', 'F,,,,', 'G,,,,', 'A,,,,', 'B,,,,', |
| 'C,,,', 'D,,,', 'E,,,', 'F,,,', 'G,,,', 'A,,,', 'B,,,', |
| 'C,,', 'D,,', 'E,,', 'F,,', 'G,,', 'A,,', 'B,,', |
| 'C,', 'D,', 'E,', 'F,', 'G,', 'A,', 'B,', |
| 'C', 'D', 'E', 'F', 'G', 'A', 'B', |
| 'c', 'd', 'e', 'f', 'g', 'a', 'b', |
| "c'", "d'", "e'", "f'", "g'", "a'", "b'", |
| "c''", "d''", "e''", "f''", "g''", "a''", "b''", |
| "c'''", "d'''", "e'''", "f'''", "g'''", "a'''", "b'''", |
| "c''''", "d''''", "e''''", "f''''", "g''''", "a''''", "b''''" |
| ]; |
| |
| function moveNote(note, step) { |
| var x =allPitches.indexOf(note); |
| if (x >= 0) |
| return allPitches[x-step]; |
| return note; |
| } |
| |
| function tokenize(str) { |
| var arr = str.split(/(!.+?!|".+?")/); |
| var output = []; |
| for (var i = 0; i < arr.length; i++) { |
| var token = arr[i]; |
| if (token.length > 0) { |
| if (token[0] !== '"' && token[0] !== '!') { |
| var arr2 = arr[i].split(/([A-Ga-g][,']*)/); |
| output = output.concat(arr2); |
| } else |
| output.push(token); |
| } |
| } |
| return output; |
| } |
| |
| var selectionCallback; |
| var currentIndex = -1; |
| var maxIndex = -1; |
| |
| function selectPrevious() { |
| if (selectionCallback && currentIndex > 0) |
| selectionCallback(currentIndex-1); |
| } |
| |
| function selectNext() { |
| if (selectionCallback && currentIndex < maxIndex) |
| selectionCallback(currentIndex+1); |
| } |
| |
| function hoverListener(event) { |
| var ret = renderAbc[0].findSelectableElement(event.relatedTarget) |
| if (ret) |
| console.log(ret) |
| } |
| |
| function clickListener(abcelem, tuneNumber, classes, analysis, drag, mouseEvent) { |
| if (drag) { |
| selectionCallback = drag.setSelection; |
| currentIndex = drag.index; |
| maxIndex = drag.max; |
| } |
| var originalText = abcString.substring(abcelem.startChar, abcelem.endChar); |
| if (abcelem.pitches && drag && drag.step && abcelem.startChar >= 0 && abcelem.endChar >= 0) { |
| var arr = tokenize(originalText); |
| |
| for (var i = 0; i < arr.length; i++) { |
| arr[i] = moveNote(arr[i], drag.step); |
| } |
| var newText = arr.join(""); |
| |
| abcString = abcString.substring(0, abcelem.startChar) + newText + abcString.substring(abcelem.endChar); |
| formatAbc(abcelem.startChar, abcelem.endChar); |
| draw(); |
| } else if (abcelem.startChar >= 0 && abcelem.endChar >= 0) |
| formatAbc(abcelem.startChar, abcelem.endChar); |
| |
| var data = ""; |
| if (abcelem.startChar >= 0) |
| data += "src: " + originalText + "<br>"; |
| else |
| data += "src: unknown<br>"; |
| data += "type: " + abcelem.type + "<br>"; |
| data += "el_type: " + abcelem.el_type + "<br>"; |
| data += "name: " + analysis.name + "<br>"; |
| data += "clickedName: " + analysis.clickedName + "<br>"; |
| data += "clickedClasses: " + analysis.clickedClasses + "<br>"; |
| data += "classes: " + analysis.parentClasses + "<br>"; |
| document.getElementById("click-data").innerHTML = data; |
| } |
| function optionChanged() { |
| formatAbc(-1,-1); |
| draw(); |
| } |
| |
| function load() { |
| formatAbc(-1,-1); |
| draw(); |
| } |
| |
| var abcString = |
| 'X:1' + '\n' + |
| 'M:4/4' + '\n' + |
| 'L:1/16' + '\n' + |
| '%%partsfont box' + '\n' + |
| '%%stretchlast .7' + '\n' + |
| '%%barnumbers 1' + '\n' + |
| 'T: Selection And Dragging Test' + '\n' + |
| 'T: Demonstrates a lot the different types of elements and their effect.' + '\n' + |
| 'C: Public Domain' + '\n' + |
| 'R: Play steady' + '\n' + |
| 'A: Paul Rosen' + '\n' + |
| 'S: abcjs website' + '\n' + |
| 'W: Now is the time for all good men' + '\n' + |
| 'W:' + '\n' + |
| 'W: To come to the aid of their party.' + '\n' + |
| 'H: This shows every type of thing that can possibly be drawn.' + '\n' + |
| 'H:' + '\n' + |
| 'H: And two lines of history.' + '\n' + |
| 'Q: "Easy Swing" 1/4=140' + '\n' + |
| 'P: AABB' + '\n' + |
| '%%staves {(RH extra) (LH)}' + '\n' + |
| 'V:RH clef=treble name=RH' + '\n' + |
| 'V:LH clef=bass name=LH' + '\n' + |
| 'K:Bb' + '\n' + |
| 'P:A' + '\n' + |
| '[V: RH] !mp![b8B8d8] f3g f4|!<(![d12b12] !<)![b4g4]| \\' + '\n' + |
| '[Q:"left" 1/4=170"right"]z4 !<(! (bfdf) (3B2d2c2 !<)!B4|!f![c4f4] z4 [b8d8]|' + '\n' + |
| '!p![G8e8] Tu[c8f8]|!<(![d12f12] !<)!g4|!f!a4 [g4b4] z4 =e4|[A8c8f8] d8|' + '\n' + |
| '|1 [c8F8] [B4G4] z4|[d12B12] A4|!>(![D8A8] Bcde fAB!>)!c|!mp!d16:|' + '\n' + |
| 'w:Strang- ers in the night' + '\n' + |
| '[V: extra] B,4- B,4- B,4 B,4 | "Bb"{C}B,4 {CD}B,4 B,4 B,4 | B,4 B,4 B,4 B,4 | B,4 B,4 B,4 B,4 |' + '\n' + |
| 'B,4 B,4 B,4 B,4 | B,4 B,4 B,4 B,4 | B,4 B,4 B,4 B,4 | B,4 B,4 B,4 B,4 |' + '\n' + |
| 'B,4 B,4 B,4 B,4 |B,4 B,4 B,4 B,4 |"^annotation"B,4 B,4 B,4 B,4 |B,4 B,4 B,4 B,4 :|' + '\n' + |
| '[V: LH] B,6 D2 [F,8F8A,8]|B,2B,,2 C,4 D,4 E,F,G,2|F,2A,2 D4 D4 G,2E,2|[C4F,4A,4] z4 [F8B,8]|' + '\n' + |
| 'G,8 A,8|A,12 B,G,D,E,|F,G,A,F, (G,A,B,G,) C4 C4|[C,8A,8] [F8F,8B,8]|' + '\n' + |
| 'A,3C B,3D G,F,E,D, F,2A,2|D,2C,2 B,,2A,,2 G,,4 F,,A,,C,F,|F,,6 D,,2 [D,4G,,4] z4|B,,16:|' + '\n'; |
| </script> |
| <style> |
| .side-by-side { |
| display: flex; |
| } |
| .row { |
| display: flex; |
| flex-wrap: wrap; |
| } |
| #source { |
| font-size: 13px; |
| max-width: 700px; |
| overflow: auto; |
| font-family: "Lucida Console", Monaco, monospace; |
| white-space: nowrap; |
| } |
| .select { |
| background-color: #FCF9BB; |
| box-shadow: 0 0 1px black; |
| } |
| ul { |
| max-width: 700px; |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
| li { |
| margin-top: 10px; |
| } |
| label { |
| font-weight: bold; |
| } |
| .click-data { |
| background: #dddddd; |
| padding: 10px; |
| margin-left: 10px; |
| width: 200px; |
| } |
| .click-data h2 { |
| margin: 0; |
| padding: 0; |
| font-weight: normal; |
| } |
| </style> |
| </head> |
| <body onload="load()"> |
| <header> |
| <img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"> |
| <h1>Drag and drop demo</h1> |
| </header> |
| <div class="container"> |
| <div class="side-by-side"> |
| <div> |
| <div>Render Time: <span id="time"></span>ms</div> |
| <div>SVG size: <span id="size"></span>K</div> |
| <ul> |
| <li><label><input type="checkbox" id="allowDragging" onclick="optionChanged()" checked>Allow Dragging</label> |
| <div>When checked, then text is not selectable on the music and notes are draggable. You can |
| also navigate through the music with the tab key, and change notes with the up and down arrows. When not checked, then items are selectable, but not draggable. |
| </div> |
| </li> |
| <li><label><input type="checkbox" id="selectAll" onclick="optionChanged()">Select All</label> |
| <div>When this is checked, nearly every visible thing is selectable. When it is not checked, then only |
| the notes, rests, and measures are selectable. |
| </div> |
| </li> |
| <li><button onclick="selectPrevious()">Previous</button><button onclick="selectNext()">Next</button></li> |
| </ul> |
| </div> |
| <div class="click-data"> |
| <h2>Last Click</h2> |
| <div id="click-data"> |
|
|
| </div> |
| </div> |
| </div> |
| <div class="row"> |
| <div> |
| <h2>Output</h2> |
| <div id="paper"></div> |
| </div> |
| <div> |
| <h2>Source</h2> |
| <div id="source"></div> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |
|
|
