Re: A snippet for editing Beams using the mouse
On Tue, 17 Dec 2019, Paolo Prete wrote: Here's the fixed version: waiting for feedbacks! (Again and again: I write these snippets really in a hurry, in these days. A more "structured" collaboration is getting necessary for me, at this point) Put it in a little Github project? -- MT
Re: Indentation, was Re: A snippet for editing Beams using the mouse
Hi David, I probably have messed something up in the editor coding style. Currently I'm using at least three different editors ad the same time. I know it's weird and bad, but don't have time to switch to a proper env. In Christmas days things are even more difficult... On Tue, Dec 17, 2019 at 2:17 AM David Wright wrote: > On Mon 16 Dec 2019 at 23:55:52 (+0100), Paolo Prete wrote: > > P.S) I don't know why the browser's viewer messes up the indentation of > > these attachments. > > If so, I ask if are there volunteers to fix that and re-post the snippet > (I > > see correct indentation if I paste the code to any online js editor) > > I don't know how scheme is meant to be indented so, other than to say > that my emacs (LilyPond mode) indents by aligning parentheses of the > same nesting-level (which indents the 8th and 9th lines to >60 chars), > I'll move on to C. > > It appears you're indenting with real TAB characters, possibly > generated by your pressing the TAB key. My tabs are set at the > standard size (8) which makes some of the code cross the screen. > Perhaps you are expecting something else? > > Looking, for example, at the lines that you've split, editing your > TABS to two spaces brings the continuation line into sensible > alignment with the initial line. So, if you want your indentation to > be displayed correctly by other people (including your own browser?) I > would replace your real TABs with spaces before attaching the files. > > Editing in emacs, the TAB key can be made to indent by two spaces, > and conversion of 8 (or any other number of) spaces into a TAB > prevented. > > > distanceFromCenter = Math.abs(event.pageX * scaleX - > > > (leftX + (rightX - > leftX)/2)) > > becomes > > > distanceFromCenter = Math.abs(event.pageX * scaleX - > > (leftX + (rightX - leftX)/2)) > > and > > > minDistance = Math.min(distanceFromLeftSide, > > > distanceFromCenter, > > > distanceFromRightSide) > > becomes > > > minDistance = Math.min(distanceFromLeftSide, > > distanceFromCenter, > > distanceFromRightSide) > > when TAB is replaced by two spaces. > > Cheers, > David. >
Re: A snippet for editing Beams using the mouse
Here's the fixed version:
waiting for feedbacks!
(Again and again: I write these snippets really in a hurry, in these days.
A more "structured" collaboration is getting necessary for me, at this
point)
Any Javascript volunteer?
On Tue, Dec 17, 2019 at 1:24 AM Paolo Prete wrote:
> I'm just noting that there's a bug with more than one Beam. I'm fixing it.
> Have a bit of patience please ;-)
>
> On Mon, Dec 16, 2019 at 11:55 PM Paolo Prete wrote:
>
>> Hello everybody,
>>
>> here is another snippet that uses the system that I previously
>> implemented. This time for the tuning of the beams.
>> This is too a very tedious operation to do with just the code and for
>> this I believe that this tool is also useful.
>> As you can see, the code is not only shorter than the previous one, but
>> it recycles the whole template of the previous snippet, which I'm making
>> more and more generic.
>> In short, the goal is to have Lilypond itself automatically create a GUI
>> tool for the tuning of the main properties of the grobs.
>>
>> This is somewhat crazy: Lilypond used as a factory for WYSIWYG editors!
>> :-)
>>
>> HTH
>>
>> Paolo
>>
>> P.S) I don't know why the browser's viewer messes up the indentation of
>> these attachments.
>> If so, I ask if are there volunteers to fix that and re-post the snippet
>> (I see correct indentation if I paste the code to any online js editor)
>>
>>
\version "2.19.45"
JSSVGBeamTuner = #(define-void-function (body) (string?)
(let* ((mod (resolve-module '(scm framework-svg)))
(svg-end (module-ref mod 'svg-end #f)))
(if (procedure? svg-end)
(module-define! mod 'svg-end (lambda () (string-join
(list "" (svg-end)) "\n"))
JSSVGBeamTunerScript = #"
rootNode = document.querySelector('svg')
pixelsX = rootNode.getAttribute('width').replace('mm', '') * 96 / 25.4
pixelsY = rootNode.getAttribute('height').replace('mm', '') * 96 / 25.4
scaleX = rootNode.getAttribute('viewBox').split(' ')[2] / pixelsX
scaleY = rootNode.getAttribute('viewBox').split(' ')[3] / pixelsY
var beamId = 0
var currGrob = null
function pointsArrToStr(points)
{
pointsStr = ''
for (var i = 0; i< 8; i++) {
pointsStr += points[i] + ' '
}
return pointsStr.substring(0, pointsStr.length - 1)
}
function initBeam(n1) {
n1.setAttribute('id', beamId)
for (n2 = n1.firstChild; n2 !== null; n2 = n2.nextSibling) {
if (n2.nodeName == 'polygon') {
//TODO Ugly parsering, replace with a proper and safer one
transf = n2.getAttribute('transform')
// TODO: check backspaces?
// TODO: check if it doesn't have transform attr?
translateX = transf.replace('translate(', '').split(',')[0]
translateY = transf.split(',')[1].trim().replace(')', '')
points = n2.getAttribute('points').split(' ')
//alert(translateX)
for (var i = 0; i<7; i = i+2) {
points[i] = Number(points[i]) + Number(translateX)
}
for (var i = 1; i<8; i = i+2) {
points[i] = Number(points[i]) + Number(translateY)
}
pointsStr = pointsArrToStr(points)
n2.setAttribute('points', pointsStr)
n2.setAttribute('origPoints', pointsStr)
n2.setAttribute('id', 'lilyBeamPoly_'+beamId)
n2.setAttribute('onmousedown', 'selectGrob(this)')
n2.removeAttribute('transform')
n2.setAttribute('anchor', '')
}
}
beamId++
}
function selectGrob(grob) {
if (!grob.hasAttribute('id'))
return
if (!detectLeftButton(event)) {
event.preventDefault()
showGrobModifyExpr(grob)
return
}
grob.setAttribute('color', 'cyan')
points = grob.getAttribute('points').split(' ')
leftX = Number(points[4])
rightX = Number(points[0])
distanceFromRightSide = Math.abs(event.pageX * scaleX - rightX)
distanceFromLeftSide = Math.abs(event.pageX * scaleX - leftX)
distanceFromCenter = Math.abs(event.pageX * scaleX -
(leftX + (rightX - leftX)/2))
minDistance = Math.min(distanceFromLeftSide,
distanceFromCenter,
distanceFromRightSide)
switch(minDistance)
{
case distanceFromRightSide:
grob.setAttribute('anchor','right')
break;
case distanceFromLeftSide:
grob.setAttribute('anchor','left')
break;
case distanceFromCenter:
grob.setAttribute('anchor','center')
break;
}
grob.setAttribute('yScreenPrev', event.pageY * scaleY)
currGrob = grob
}
function detectLeftButton(evt) {
evt = evt || window.event
if ('buttons' in evt) {
return evt.buttons == 1
}
var button = evt.which || evt.button
return button == 1
}
function unselectGrob() {
if (currGrob)
currGrob.setAttribute('color', 'black')
currGrob = null
}
function moveGrob() {
if (!currGrob)
return
points = currGrob.getAttribute('points').split(' ')
origPoints = currGrob.getAttribute('origPoints').split(' ')
idx1 = 1
idx2 = 8
if (currGrob.getAttribute('anchor') == 'left') {
idx1 = 5
}
else if (currGrob.getAttribute('anchor') == 'right') {
idx2 = 5
}
for (var i = idx1; i < idx2;
Indentation, was Re: A snippet for editing Beams using the mouse
On Mon 16 Dec 2019 at 23:55:52 (+0100), Paolo Prete wrote: > P.S) I don't know why the browser's viewer messes up the indentation of > these attachments. > If so, I ask if are there volunteers to fix that and re-post the snippet (I > see correct indentation if I paste the code to any online js editor) I don't know how scheme is meant to be indented so, other than to say that my emacs (LilyPond mode) indents by aligning parentheses of the same nesting-level (which indents the 8th and 9th lines to >60 chars), I'll move on to C. It appears you're indenting with real TAB characters, possibly generated by your pressing the TAB key. My tabs are set at the standard size (8) which makes some of the code cross the screen. Perhaps you are expecting something else? Looking, for example, at the lines that you've split, editing your TABS to two spaces brings the continuation line into sensible alignment with the initial line. So, if you want your indentation to be displayed correctly by other people (including your own browser?) I would replace your real TABs with spaces before attaching the files. Editing in emacs, the TAB key can be made to indent by two spaces, and conversion of 8 (or any other number of) spaces into a TAB prevented. > distanceFromCenter = Math.abs(event.pageX * scaleX - > > (leftX + (rightX - leftX)/2)) becomes > distanceFromCenter = Math.abs(event.pageX * scaleX - > (leftX + (rightX - leftX)/2)) and > minDistance = Math.min(distanceFromLeftSide, > > distanceFromCenter, > > distanceFromRightSide) becomes > minDistance = Math.min(distanceFromLeftSide, > distanceFromCenter, > distanceFromRightSide) when TAB is replaced by two spaces. Cheers, David.
Re: A snippet for editing Beams using the mouse
I'm just noting that there's a bug with more than one Beam. I'm fixing it. Have a bit of patience please ;-) On Mon, Dec 16, 2019 at 11:55 PM Paolo Prete wrote: > Hello everybody, > > here is another snippet that uses the system that I previously > implemented. This time for the tuning of the beams. > This is too a very tedious operation to do with just the code and for this > I believe that this tool is also useful. > As you can see, the code is not only shorter than the previous one, but it > recycles the whole template of the previous snippet, which I'm making more > and more generic. > In short, the goal is to have Lilypond itself automatically create a GUI > tool for the tuning of the main properties of the grobs. > > This is somewhat crazy: Lilypond used as a factory for WYSIWYG editors! :-) > > HTH > > Paolo > > P.S) I don't know why the browser's viewer messes up the indentation of > these attachments. > If so, I ask if are there volunteers to fix that and re-post the snippet > (I see correct indentation if I paste the code to any online js editor) > >
Re: A snippet for editing Beams using the mouse
On 12/16, Paolo Prete wrote: > Hello everybody, > > here is another snippet that uses the system that I previously > implemented. This time for the tuning of the beams. This is too a > very tedious operation to do with just the code and for this I believe > that this tool is also useful. As you can see, the code is not only > shorter than the previous one, but it recycles the whole template of > the previous snippet, which I'm making more and more generic. In > short, the goal is to have Lilypond itself automatically create a GUI > tool for the tuning of the main properties of the grobs. > > This is somewhat crazy: Lilypond used as a factory for WYSIWYG > editors! :-) > > HTH > > Paolo > > P.S) I don't know why the browser's viewer messes up the indentation > of these attachments. If so, I ask if are there volunteers to fix > that and re-post the snippet (I see correct indentation if I paste the > code to any online js editor) Hi Paolo, I haven't yet had time to thoroughly read your recent threads, but at first glance what you're working on seems very cool, and I look forward to having a chance to take a closer look. Keep up the great work! Mason signature.asc Description: PGP signature
A snippet for editing Beams using the mouse
Hello everybody,
here is another snippet that uses the system that I previously implemented.
This time for the tuning of the beams.
This is too a very tedious operation to do with just the code and for this
I believe that this tool is also useful.
As you can see, the code is not only shorter than the previous one, but it
recycles the whole template of the previous snippet, which I'm making more
and more generic.
In short, the goal is to have Lilypond itself automatically create a GUI
tool for the tuning of the main properties of the grobs.
This is somewhat crazy: Lilypond used as a factory for WYSIWYG editors! :-)
HTH
Paolo
P.S) I don't know why the browser's viewer messes up the indentation of
these attachments.
If so, I ask if are there volunteers to fix that and re-post the snippet (I
see correct indentation if I paste the code to any online js editor)
\version "2.19.45"
JSSVGBeamTuner = #(define-void-function (body) (string?)
(let* ((mod (resolve-module '(scm framework-svg)))
(svg-end (module-ref mod 'svg-end #f)))
(if (procedure? svg-end)
(module-define! mod 'svg-end (lambda () (string-join
(list "" (svg-end)) "\n"))
JSSVGBeamTunerScript = #"
rootNode = document.querySelector('svg')
pixelsX = rootNode.getAttribute('width').replace('mm', '') * 96 / 25.4
pixelsY = rootNode.getAttribute('height').replace('mm', '') * 96 / 25.4
scaleX = rootNode.getAttribute('viewBox').split(' ')[2] / pixelsX
scaleY = rootNode.getAttribute('viewBox').split(' ')[3] / pixelsY
var beamId = 0
var currGrob = null
function pointsArrToStr(points)
{
pointsStr = ''
for (i = 0; i< 8; i++) {
pointsStr += points[i] + ' '
}
return pointsStr.substring(0, pointsStr.length - 1)
}
function initBeam(n1) {
for (n2 = n1.firstChild; n2 !== null; n2 = n2.nextSibling) {
if (n2.nodeName == 'polygon') {
//TODO Ugly parsering, replace with a proper and safer one
transf = n2.getAttribute('transform')
// TODO: check backspaces?
// TODO: check if it doesn't have transform attr?
translateX = transf.replace('translate(', '').split(',')[0]
translateY = transf.split(',')[1].trim().replace(')', '')
points = n2.getAttribute('points').split(' ')
//alert(translateX)
for (i = 0; i<7; i = i+2) {
points[i] = Number(points[i]) + Number(translateX)
}
for (i = 1; i<8; i = i+2) {
points[i] = Number(points[i]) + Number(translateY)
}
pointsStr = pointsArrToStr(points)
n2.setAttribute('points', pointsStr)
n2.setAttribute('origPoints', pointsStr)
n2.setAttribute('id', beamId++)
n2.setAttribute('onmousedown', 'selectGrob(this)')
n2.removeAttribute('transform')
n2.setAttribute('anchor', '')
}
}
}
function selectGrob(grob) {
if (!grob.hasAttribute('id'))
return
if (!detectLeftButton(event)) {
event.preventDefault()
showGrobModifyExpr(grob)
return
}
grob.setAttribute('color', 'cyan')
points = grob.getAttribute('points').split(' ')
leftX = Number(points[4])
rightX = Number(points[0])
distanceFromRightSide = Math.abs(event.pageX * scaleX - rightX)
distanceFromLeftSide = Math.abs(event.pageX * scaleX - leftX)
distanceFromCenter = Math.abs(event.pageX * scaleX -
(leftX + (rightX - leftX)/2))
minDistance = Math.min(distanceFromLeftSide,
distanceFromCenter,
distanceFromRightSide)
switch(minDistance)
{
case distanceFromRightSide:
grob.setAttribute('anchor','right')
break;
case distanceFromLeftSide:
grob.setAttribute('anchor','left')
break;
case distanceFromCenter:
grob.setAttribute('anchor','center')
break;
}
grob.setAttribute('yScreenPrev', event.pageY * scaleY)
currGrob = grob
}
function detectLeftButton(evt) {
evt = evt || window.event
if ('buttons' in evt) {
return evt.buttons == 1
}
var button = evt.which || evt.button
return button == 1
}
function unselectGrob() {
if (currGrob)
currGrob.setAttribute('color', 'black')
currGrob = null
}
function moveGrob() {
if (!currGrob)
return
points = currGrob.getAttribute('points').split(' ')
origPoints = currGrob.getAttribute('origPoints').split(' ')
idx1 = 1
idx2 = 8
if (currGrob.getAttribute('anchor') == 'left') {
idx1 = 5
}
else if (currGrob.getAttribute('anchor') == 'right') {
idx2 = 5
}
for (i = idx1; i < idx2; i = i + 2) {
points[i] = Number(points[i]) +
event.pageY * scaleY -
Number(currGrob.getAttribute('yScreenPrev'))
}
console.log (points[1])
currGrob.setAttribute('yScreenPrev', event.pageY * scaleY)
currGrob.setAttribute('points', pointsArrToStr(points))
}
window.oncontextmenu = function(evt) {
evt.preventDefault()
}
function showGrobModifyExpr(grob) {
angleLeft = +((grob.getAttribute('origPoints').split(' ')[5] -
grob.getAttribute('points').split(' ')[5]).toFixed(3))
angleRight = +((grob.getAttribute('origPoints').split(' ')[1] -
