Commit 346871ab authored by jan.koester's avatar jan.koester
Browse files

move symbol

parent 605bd1fb

editor/html/js/canvas.js

+9 −0
Changes for editor/html/js/canvas.js: 9 added lines, 0 removed lines.
Original line number Diff line number Diff line
@@ -99,6 +99,15 @@ var Canvas = (function() { 
            EditorApi.setProperties(d.uuid, props).catch(function(err) {

                console.error('Inline text edit failed to save:', err);

            });

        } else if (d.type === 'blogi-margin-change') {

            // The canvas already shows the dragged margin live; save it and

            // refresh so the properties sidebar (if open on this element)

            // picks up the new value.

            EditorApi.setProperties(d.uuid, { margin: d.value }).then(function() {

                if (onChangeCallback) onChangeCallback();

            }).catch(function(err) {

                console.error('Margin change failed to save:', err);

            });

        } else if (d.type === 'blogi-reorder') {

            EditorApi.moveElementTo(d.uuid, d.targetUuid, d.position).then(function() {

                if (onChangeCallback) onChangeCallback();

editor/src/webedit_api.cpp

+58 −4
Changes for editor/src/webedit_api.cpp: 58 added lines, 4 removed lines.
Original line number Diff line number Diff line
@@ -1777,10 +1777,21 @@ std::string buildCanvasScript(const std::string &metaJson) { 
        "document.body.appendChild(insertBtn);"

        "var insertCtx=null;"



        // --- Margin drag handle, shown next to the "+" button ---

        "var marginBtn=document.createElement('div');"

        "marginBtn.textContent='\\u2195';"

        "marginBtn.title='Drag to adjust margin';"

        "marginBtn.style.cssText='position:absolute;width:22px;height:22px;line-height:20px;"

        "text-align:center;background:#607d8b;color:#fff;border-radius:50%;cursor:ns-resize;"

        "z-index:99999;display:none;font:14px/20px sans-serif;user-select:none;';"

        "document.body.appendChild(marginBtn);"

        "var marginCtx=null;"

        "var marginDrag=null;"



        "document.addEventListener('mousemove',function(ev){"

        "if(dragUuid)return;"

        "if(dragUuid||marginDrag)return;"

        "var we=findWe(ev.target);"

        "if(!we){insertBtn.style.display='none';return;}"

        "if(!we){insertBtn.style.display='none';marginBtn.style.display='none';return;}"

        "var rect=we.el.getBoundingClientRect();"

        "var canChild=meta[we.uuid]&&meta[we.uuid].canHaveChildren;"

        "var isEmpty=canChild&&!we.el.querySelector('[class*=\"we-\"]');"
@@ -1789,15 +1800,21 @@ std::string buildCanvasScript(const std::string &metaJson) { 
        "insertBtn.style.display='block';"

        "insertBtn.style.left=(rect.left+rect.width/2-11+window.scrollX)+'px';"

        "insertBtn.style.top=(rect.top+rect.height/2-11+window.scrollY)+'px';"

        "marginBtn.style.display='none';"

        "return;"

        "}"

        "var nearTop=ev.clientY-rect.top<10;"

        "var nearBottom=rect.bottom-ev.clientY<10;"

        "if(!nearTop&&!nearBottom){insertBtn.style.display='none';return;}"

        "insertCtx={targetUuid:we.uuid,position:nearTop?'before':'after'};"

        "if(!nearTop&&!nearBottom){insertBtn.style.display='none';marginBtn.style.display='none';return;}"

        "var pos=nearTop?'before':'after';"

        "insertCtx={targetUuid:we.uuid,position:pos};"

        "insertBtn.style.display='block';"

        "insertBtn.style.left=(rect.left+window.scrollX)+'px';"

        "insertBtn.style.top=((nearTop?rect.top:rect.bottom)+window.scrollY-11)+'px';"

        "marginCtx={uuid:we.uuid,el:we.el,position:pos};"

        "marginBtn.style.display='block';"

        "marginBtn.style.left=(rect.left+28+window.scrollX)+'px';"

        "marginBtn.style.top=insertBtn.style.top;"

        "});"

        "insertBtn.addEventListener('click',function(ev){"

        "ev.stopPropagation();"
@@ -1809,6 +1826,43 @@ std::string buildCanvasScript(const std::string &metaJson) { 
        "rect:insertBtn.getBoundingClientRect()"

        "},'*');"

        "});"



        // Dragging the margin handle changes margin-top (handle sits on the

        // block's top edge) or margin-bottom (bottom edge) live; the resulting

        // 4-value shorthand is only sent to the parent on release.

        "marginBtn.addEventListener('mousedown',function(ev){"

        "ev.preventDefault();"

        "ev.stopPropagation();"

        "if(!marginCtx)return;"

        "var prop=marginCtx.position==='before'?'marginTop':'marginBottom';"

        "var start=parseFloat(getComputedStyle(marginCtx.el)[prop])||0;"

        "marginDrag={el:marginCtx.el,uuid:marginCtx.uuid,pos:marginCtx.position,prop:prop,"

        "startY:ev.clientY,startVal:start,currentVal:start};"

        "});"

        "document.addEventListener('mousemove',function(ev){"

        "if(!marginDrag)return;"

        "if(ev.buttons===0){marginDrag=null;marginBtn.style.display='none';return;}"

        "var d=marginDrag;"

        "var delta=ev.clientY-d.startY;"

        "var signed=d.pos==='before'?-delta:delta;"

        "var val=Math.max(0,Math.round(d.startVal+signed));"

        "d.el.style[d.prop]=val+'px';"

        "d.currentVal=val;"

        "marginBtn.style.top=(ev.clientY+window.scrollY-11)+'px';"

        "});"

        "document.addEventListener('mouseup',function(){"

        "if(!marginDrag)return;"

        "var d=marginDrag;"

        "marginDrag=null;"

        "if(d.currentVal===d.startVal)return;"

        "var cs=getComputedStyle(d.el);"

        "var top=d.el.style.marginTop||cs.marginTop;"

        "var right=d.el.style.marginRight||cs.marginRight;"

        "var bottom=d.el.style.marginBottom||cs.marginBottom;"

        "var left=d.el.style.marginLeft||cs.marginLeft;"

        "window.parent.postMessage({type:'blogi-margin-change',uuid:d.uuid,"

        "value:[top,right,bottom,left].join(' ')},'*');"

        "});"

        "})();</script>";

}