Skip to content

Commit 30038d9

Browse files
paulrosenpaulrosen
committed
Use the new simplified parameters to abcjs.
1 parent d78c162 commit 30038d9

File tree

4 files changed

+85
-106
lines changed

4 files changed

+85
-106
lines changed

‎layouts/default.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ K:Bb
239239
V:1 nm="abcjs"
240240
|:GBcd-d4|zcdc dc3|
241241
`;
242-
this.renderAbc()("abcjs-logo", logoMusic, {}, {
242+
this.renderAbc()("abcjs-logo", logoMusic, { add_classes: true }, {
243243
paddingtop: 0,
244244
paddingbottom: 0,
245245
paddingright: 0,

‎pages/audio.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ ${this.formatDrumTable()}`,
239239
abcjs.midi.stopPlaying();
240240
},
241241
constructMidiParams() {
242-
this.abcjsParams.listener = this.abcjsParams.doListener ? this.listenerCallback : undefined;
242+
this.abcjsParams.midiListener = this.abcjsParams.doListener ? this.listenerCallback : undefined;
243243
this.abcjsParams.animate = this.abcjsParams.doAnimate ?
244244
{ listener: this.animateCallback, target: this.tunes[0] }
245245
: undefined;
@@ -312,7 +312,7 @@ ${this.formatDrumTable()}`,
312312
if (this.abcjsParams.drumIntro !== "0")
313313
params += `\n drumIntro: ${this.abcjsParams.drumIntro},`;
314314
if (this.abcjsParams.doListener)
315-
params += `\n listener: function(abcjsElement, currentEvent, context) {},`;
315+
params += `\n midiListener: function(abcjsElement, currentEvent, context) {},`;
316316
if (this.abcjsParams.doAnimate)
317317
params += `\n animate: { listener: function(abcjsElement, currentEvent, context) {}, target: tunes[0], qpm: 120 },`;
318318
if (this.abcjsParams.context)

‎pages/interactive.vue‎

Lines changed: 71 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -15,32 +15,32 @@
1515
<CheckboxItem label="Download MIDI" :help="helpText.specifyDownloadMidiId" v-model="editorParams.specifyDownloadMidiId"></CheckboxItem>
1616
<CheckboxItem label="Show Warnings" :help="helpText.specifyWarningsId" v-model="editorParams.specifyWarningsId"></CheckboxItem>
1717
<CheckboxItem label="Callback On Change" :help="helpText.callbackOnChange" v-model="editorParams.callbackOnChange"></CheckboxItem>
18-
<CheckboxItem label="GUI Mode" :help="helpText.gui" v-model="editorParams.gui"></CheckboxItem>
18+
<!--<CheckboxItem label="GUI Mode" :help="helpText.gui" v-model="editorParams.gui"></CheckboxItem>-->
1919
<CheckboxItem label="Use Dirty Flag" :help="helpText.indicate_changed" v-model="editorParams.indicate_changed"></CheckboxItem>
2020
</v-layout>
2121

2222
<h2>Parser Parameters</h2>
2323
<v-layout wrap justify-start align-center>
24-
<CheckboxItem label="Format For Printing" :help="helpText.print" v-model="editorParams.parser_options.print"></CheckboxItem>
24+
<CheckboxItem label="Format For Printing" :help="helpText.print" v-model="editorParams.abcjsParams.print"></CheckboxItem>
2525
</v-layout>
2626

2727
<h2>Engraver Parameters</h2>
2828
<v-layout wrap justify-start align-center>
29-
<TextInputItem label="Scale" :help="helpText.scale" v-model="editorParams.render_options.scale"></TextInputItem>
30-
<TextInputItem label="Staff Width" :help="helpText.staffwidth" v-model="editorParams.render_options.staffwidth"></TextInputItem>
31-
<TextInputItem label="Padding Left" :help="helpText.paddingleft" v-model="editorParams.render_options.paddingleft"></TextInputItem>
32-
<TextInputItem label="Padding Top" :help="helpText.paddingtop" v-model="editorParams.render_options.paddingtop"></TextInputItem>
33-
<TextInputItem label="Padding Right" :help="helpText.paddingright" v-model="editorParams.render_options.paddingright"></TextInputItem>
34-
<TextInputItem label="Padding Bottom" :help="helpText.paddingbottom" v-model="editorParams.render_options.paddingbottom"></TextInputItem>
35-
<CheckboxItem label="Responsive Sizing" :help="helpText.responsiveResize" v-model="editorParams.render_options.responsiveResize"></CheckboxItem>
36-
<CheckboxItem label="Add Classes" :help="helpText.add_classes" v-model="editorParams.render_options.add_classes"></CheckboxItem>
37-
<CheckboxItem label="User Click Listener" :help="helpText.highlightListener" v-model="editorParams.render_options.highlightListener"></CheckboxItem>
38-
<CheckboxItem label="Music Changed Listener" :help="helpText.modelChangedListener" v-model="editorParams.render_options.modelChangedListener"></CheckboxItem>
39-
<CheckboxItem label="Editable" :help="helpText.editable" v-model="editorParams.render_options.editable"></CheckboxItem>
29+
<TextInputItem label="Scale" :help="helpText.scale" v-model="editorParams.abcjsParams.scale"></TextInputItem>
30+
<TextInputItem label="Staff Width" :help="helpText.staffwidth" v-model="editorParams.abcjsParams.staffwidth"></TextInputItem>
31+
<TextInputItem label="Padding Left" :help="helpText.paddingleft" v-model="editorParams.abcjsParams.paddingleft"></TextInputItem>
32+
<TextInputItem label="Padding Top" :help="helpText.paddingtop" v-model="editorParams.abcjsParams.paddingtop"></TextInputItem>
33+
<TextInputItem label="Padding Right" :help="helpText.paddingright" v-model="editorParams.abcjsParams.paddingright"></TextInputItem>
34+
<TextInputItem label="Padding Bottom" :help="helpText.paddingbottom" v-model="editorParams.abcjsParams.paddingbottom"></TextInputItem>
35+
<CheckboxItem label="Responsive Sizing" :help="helpText.responsiveResize" v-model="editorParams.abcjsParams.responsiveResize"></CheckboxItem>
36+
<CheckboxItem label="Add Classes" :help="helpText.add_classes" v-model="editorParams.abcjsParams.add_classes"></CheckboxItem>
37+
<CheckboxItem label="User Click Listener" :help="helpText.highlightListener" v-model="editorParams.abcjsParams.highlightListener"></CheckboxItem>
38+
<!--<CheckboxItem label="Music Changed Listener" :help="helpText.modelChangedListener" v-model="editorParams.abcjsParams.modelChangedListener"></CheckboxItem>-->
39+
<!--<CheckboxItem label="Editable" :help="helpText.editable" v-model="editorParams.abcjsParams.editable"></CheckboxItem>-->
4040
</v-layout>
4141

4242
<h2>MIDI Parameters</h2>
43-
<p>See the <nuxt-link to="/audio">audio page</nuxt-link>: all of the same parameters apply. Put the parameters in the property <code class="subtle-code">midi_options</code>.</p>
43+
<p>See the <nuxt-link to="/audio">audio page</nuxt-link>: all of the same parameters apply. Put the parameters in the property <code class="subtle-code">abcjsParams</code>.</p>
4444

4545
<h2>Commands</h2>
4646
<div class="button-row">
@@ -78,15 +78,21 @@
7878
Output</v-card-title>
7979
<v-card-text :class="outputOpen ? 'opened' : 'closed'">
8080
<div>
81+
<div v-if="editorParams.specifyWarningsId">
82+
<div class="footnote">Type something nonsensical in the abcString to see warnings.</div>
83+
</div>
84+
<div v-if="editorParams.indicate_changed">
85+
<div class="footnote">Type something in the abcString and notice that the style of the editor changes. You can reset the dirty flag with the "Set Not Dirty" button, or by undoing your changes until it matches the original string.</div>
86+
</div>
8187
<div v-if="editorParams.callbackOnChange">
8288
<div class="footnote">Type in the textarea to see the output of the callback function.</div>
8389
<code class="indented">{{onChangeOutput}}</code>
8490
</div>
85-
<div v-if="editorParams.render_options.highlightListener">
91+
<div v-if="editorParams.abcjsParams.highlightListener">
8692
<div class="footnote">Click on the displayed music to see the output of the callback function.</div>
8793
<code class="indented">{{highlightListenerOutput}}</code>
8894
</div>
89-
<div v-if="editorParams.render_options.responsive === 'resize'">
95+
<div v-if="editorParams.abcjsParams.responsive === 'resize'">
9096
<div class="footnote"><span>When using resize, do not place the </span><code class="subtle-code">&lt;div id="paper"&gt;</code><span> as a flex element: the flex functionality will interfere. Just wrap in another </span><code class="subtle-code">&lt;div&gt;</code></div>
9197
</div>
9298
<div id="warnings-id"></div>
@@ -138,10 +144,8 @@
138144
callbackOnChange: false,
139145
gui: false,
140146
indicate_changed: false,
141-
parser_options: {
142-
print: false
143-
},
144-
render_options: {
147+
abcjsParams: {
148+
print: false,
145149
scale: "1",
146150
staffwidth: "740",
147151
paddingtop: "15",
@@ -153,8 +157,6 @@
153157
highlightListener: false,
154158
modelChangedListener: false,
155159
responsiveResize: false,
156-
},
157-
midi_options: {
158160
midi_download_id: null,
159161
midi_id: null,
160162
}
@@ -239,25 +241,20 @@ K:Em
239241
params += "\n indicate_changed: true,";
240242
if (this.editorParams.callbackOnChange)
241243
params += "\n onchange: function(editorInstance) {},";
242-
if (this.editorParams.parser_options.print) {
243-
params += "\n parser_options: {\n print: true\n },";
244-
}
245-
params += "\n render_options: " + this.formatEngraverParams() + ",";
246244
if (this.editorParams.specifyDownloadMidiId || this.editorParams.specifyInlineMidiId) {
247245
params += "\n generate_midi: true,";
248-
params += "\n midi_options: {";
249246
if (this.editorParams.specifyDownloadMidiId) {
250-
params += "\n generateDownload: true,";
251-
params += "\n midi_download_id: \"midi-download\",";
247+
params += "\n generateDownload: true,";
248+
params += "\n midi_download_id: \"midi-download\",";
252249
}
253250
if (this.editorParams.specifyInlineMidiId) {
254-
params += "\n midi_id: \"midi-inline\",";
251+
params += "\n midi_id: \"midi-inline\",";
255252
} else {
256-
params += "\n generateInline: false,";
253+
params += "\n generateInline: false,";
257254
}
258-
params += "\n // Add any other MIDI options from \"Audio\" page.";
259-
params += "\n },";
260255
}
256+
params += "\n abcjsParams: " + this.formatAbcjsParams() + ",";
257+
261258
if (params === "")
262259
params = "{ }";
263260
else
@@ -266,46 +263,43 @@ K:Em
266263
return params;
267264
},
268265
constructEngraverParams() {
269-
this.editorParams.render_options.listener = {};
270-
if (this.editorParams.render_options.highlightListener)
271-
this.editorParams.render_options.listener.highlight = this.highlightListenerCallback;
272-
if (this.editorParams.render_options.modelChangedListener)
273-
this.editorParams.render_options.listener.modelChanged = this.modelChangedListenerCallback;
274-
this.editorParams.render_options.responsive = this.editorParams.render_options.responsiveResize ? "resize" : undefined;
275-
return this.editorParams.render_options;
266+
if (this.editorParams.abcjsParams.highlightListener)
267+
this.editorParams.abcjsParams.clickListener = this.highlightListenerCallback;
268+
// if (this.editorParams.abcjsParams.modelChangedListener)
269+
// this.editorParams.abcjsParams.listener.modelChanged = this.modelChangedListenerCallback;
270+
this.editorParams.abcjsParams.responsive = this.editorParams.abcjsParams.responsiveResize ? "resize" : undefined;
271+
return this.editorParams.abcjsParams;
276272
},
277-
formatEngraverParams() {
278-
let params = "";
279-
if (this.editorParams.render_options.scale !== "1")
280-
params += `\n scale: ${this.editorParams.render_options.scale},`;
281-
if (this.editorParams.render_options.staffwidth !== "740")
282-
params += `\n staffwidth: ${this.editorParams.render_options.staffwidth},`;
283-
if (this.editorParams.render_options.paddingtop !== "15")
284-
params += `\n paddingtop: ${this.editorParams.render_options.paddingtop},`;
285-
if (this.editorParams.render_options.paddingbottom !== "30")
286-
params += `\n paddingbottom: ${this.editorParams.render_options.paddingbottom},`;
287-
if (this.editorParams.render_options.paddingright !== "50")
288-
params += `\n paddingright: ${this.editorParams.render_options.paddingright},`;
289-
if (this.editorParams.render_options.paddingleft !== "15")
290-
params += `\n paddingleft: ${this.editorParams.render_options.paddingleft},`;
291-
if (this.editorParams.render_options.editable)
292-
params += "\n editable: true,";
293-
if (this.editorParams.render_options.add_classes)
294-
params += "\n add_classes: true,";
295-
if (this.editorParams.render_options.highlightListener || this.editorParams.render_options.modelChangedListener) {
296-
params += "\n listener: { ";
297-
if (this.editorParams.render_options.highlightListener)
298-
params += "highlight: function(abcElem) { console.log(abcElem, tuneNumber); }, ";
299-
if (this.editorParams.render_options.modelChangedListener)
300-
params += "modelChanged: function(abcElem) { console.log(abcElem); }, ";
301-
params += "},";
302-
}
303-
if (this.editorParams.render_options.responsiveResize)
304-
params += "\n responsive: \"resize\",";
305-
if (params === "")
273+
formatAbcjsParams() {
274+
let params = [];
275+
if (this.editorParams.specifyDownloadMidiId || this.editorParams.specifyInlineMidiId)
276+
params.push("// Add any other MIDI options from \"Audio\" page.");
277+
if (this.editorParams.abcjsParams.print)
278+
params.push("print: true,");
279+
if (this.editorParams.abcjsParams.scale !== "1")
280+
params.push(`scale: ${this.editorParams.abcjsParams.scale},`);
281+
if (this.editorParams.abcjsParams.staffwidth !== "740")
282+
params.push(`staffwidth: ${this.editorParams.abcjsParams.staffwidth},`);
283+
if (this.editorParams.abcjsParams.paddingtop !== "15")
284+
params.push(`paddingtop: ${this.editorParams.abcjsParams.paddingtop},`);
285+
if (this.editorParams.abcjsParams.paddingbottom !== "30")
286+
params.push(`paddingbottom: ${this.editorParams.abcjsParams.paddingbottom},`);
287+
if (this.editorParams.abcjsParams.paddingright !== "50")
288+
params.push(`paddingright: ${this.editorParams.abcjsParams.paddingright},`);
289+
if (this.editorParams.abcjsParams.paddingleft !== "15")
290+
params.push(`paddingleft: ${this.editorParams.abcjsParams.paddingleft},`);
291+
if (this.editorParams.abcjsParams.editable)
292+
params.push("editable: true,");
293+
if (this.editorParams.abcjsParams.add_classes)
294+
params.push("add_classes: true,");
295+
if (this.editorParams.abcjsParams.highlightListener)
296+
params.push("clickListener: function(abcElem) { console.log(abcElem, tuneNumber); },");
297+
if (this.editorParams.abcjsParams.responsiveResize)
298+
params.push("responsive: \"resize\",");
299+
if (params.length === 0)
306300
params = "{ }";
307301
else
308-
params = `{${params}
302+
params = `{\n ${params.join("\n ")}
309303
}`;
310304
return params;
311305
},
@@ -326,9 +320,9 @@ K:Em
326320
this.highlightListenerOutput += `tuneNumber: ${tuneNumber}\n`;
327321
this.highlightListenerOutput += `classes:\n ${classes.join("\n ")}\n`;
328322
},
329-
modelChangedListenerCallback(abcElem) {
330-
console.log(abcElem);
331-
},
323+
// modelChangedListenerCallback(abcElem) {
324+
// console.log(abcElem);
325+
// },
332326
onChangeCallback(editorInstance) {
333327
this.onChangeOutput = `onChangeCallback(editorInstance)\n\neditorInstance.isDirty() returns ${editorInstance.isDirty()}\n`;
334328
},
@@ -361,10 +355,10 @@ import abcjs from 'abcjs/midi;` : "import abcjs from 'abcjs;";
361355
this.editorParams.midi_download_id = this.editorParams.specifyDownloadMidiId ? "midi-download" : undefined;
362356
this.editorParams.midi_id = this.editorParams.specifyInlineMidiId ? "midi-inline" : undefined;
363357
this.editorParams.generate_midi = (this.editorParams.specifyDownloadMidiId || this.editorParams.specifyInlineMidiId);
364-
this.editorParams.midi_options.midi_id = this.editorParams.specifyInlineMidiId ? "midi-inline" : undefined;
365-
this.editorParams.midi_options.generateInline = this.editorParams.specifyInlineMidiId;
366-
this.editorParams.midi_options.generateDownload = this.editorParams.specifyDownloadMidiId;
367-
this.editorParams.midi_options.midi_download_id = this.editorParams.specifyDownloadMidiId ? "midi-download" : undefined;
358+
this.editorParams.abcjsParams.midi_id = this.editorParams.specifyInlineMidiId ? "midi-inline" : undefined;
359+
this.editorParams.abcjsParams.generateInline = this.editorParams.specifyInlineMidiId;
360+
this.editorParams.abcjsParams.generateDownload = this.editorParams.specifyDownloadMidiId;
361+
this.editorParams.abcjsParams.midi_download_id = this.editorParams.specifyDownloadMidiId ? "midi-download" : undefined;
368362
369363
this.constructEngraverParams();
370364
@@ -394,16 +388,10 @@ import abcjs from 'abcjs/midi;` : "import abcjs from 'abcjs;";
394388
this.theEditor.pauseMidi(this.isMidiPaused !== 'running');
395389
}
396390
},
397-
// | `setReadOnly(bool)` |adds or removes the class abc_textarea_readonly, and adds or removes the attribute readonly=yes |
398-
// | `setNotDirty()` | Called by the client app to reset the dirty flag |
399-
// | `isDirty()` | Returns true or false, whether the textarea contains the same text that it started with. |
400-
// | `pause(bool)` | Stops the automatic rendering when the user is typing. |
401-
// | `pauseMidi(shouldPause)` | Stops the automatic re-rendering of the MIDI. |
402391
}
403392
}
404393
// | Editor entry points | Description |
405394
// | ------------- | ----------- |
406-
// | `setReadOnly(bool)` |adds or removes the class abc_textarea_readonly, and adds or removes the attribute readonly=yes |
407395
// | `setDirtyStyle(bool)` | adds or removes the class abc_textarea_dirty |
408396
// | `renderTune(abc, parserParams, domElement)` | Immediately renders the tune. (Useful for creating the SVG output behind the scenes, if div is hidden) |
409397
// | `modelChanged()` | Called when the model has been changed to trigger re-rendering |
@@ -415,8 +403,6 @@ import abcjs from 'abcjs/midi;` : "import abcjs from 'abcjs;";
415403
// | `setNotDirty()` | Called by the client app to reset the dirty flag |
416404
// | `isDirty()` | Returns true or false, whether the textarea contains the same text that it started with. |
417405
// | `highlight(abcelem)` | Called by the engraver_controller to highlight an area. |
418-
// | `pause(bool)` | Stops the automatic rendering when the user is typing. |
419-
// | `pauseMidi(shouldPause)` | Stops the automatic re-rendering of the MIDI. |
420406
421407
</script>
422408

0 commit comments

Comments
 (0)