From 8ce86bbbeea00a38df3505847da382f9834bafac Mon Sep 17 00:00:00 2001 From: Steffen Pohle Date: Tue, 25 Jan 2022 23:33:33 +0100 Subject: [PATCH] adding to move an area of the track --- webinterface/serverinout.js | 10 -- webinterface/track.js | 240 +++++++++++++++++++++++++++--------- 2 files changed, 183 insertions(+), 67 deletions(-) diff --git a/webinterface/serverinout.js b/webinterface/serverinout.js index f528072..0b0c682 100644 --- a/webinterface/serverinout.js +++ b/webinterface/serverinout.js @@ -24,18 +24,14 @@ function serverinout(request, callback) { request.sid = sessionID; request.rid = randomID; -// e.preventDefault(); senddata = JSON.stringify(request); -// debug('serverinout: send request:' + senddata); $.ajax({ type: "POST", -// url: '/modelbahn/serverinout.php', url: '/cgi-bin/modelbahn-cgi', data: senddata, success: function(response) { var jsonData = {}; -// ENABLE LATER try { jsonData = JSON.parse(response); if (jsonData.success == "1") { @@ -48,10 +44,6 @@ function serverinout(request, callback) { var clientstatus = document.getElementById("infoclient"); clientstatus.innerHTML = "-trying-"; } -// ENABLE LATER } catch(err) { -// ENABLE LATER var serverstatus = document.getElementById("infoserver"); -// ENABLE LATER serverstatus.innerHTML = "-error-"; -// ENABLE LATER } }, error: function(error) { var status = document.getElementById("infoclient"); @@ -92,7 +84,6 @@ function serverinout_Save(data) { function serverinout_defaultCallback(data) { -// if (data.changes) if (data.changes.length > 0) debug ("From Server :" + JSON.stringify(data)); if (data.sid && data.rid) { // // valid data from server @@ -206,7 +197,6 @@ function serverinout_defaultCallback(data) { else if (data.rid == randomID && data.sid > 0) { // we got a new sessionID --> request track data if (sessionID == 0) { - debug ("setup session ID"); sessionID = data.sid; serverinout( {command: "getall" }, serverinout_defaultCallback); } diff --git a/webinterface/track.js b/webinterface/track.js index 043815c..92b1a83 100644 --- a/webinterface/track.js +++ b/webinterface/track.js @@ -19,9 +19,13 @@ var track = { elements: [] }; +// trackMouse.step = 0 normal +// trackMouse.step = 1 destination var trackMouse = { pos: {x: -1, y: -1, subx: 0.5, suby: 0.5}, - down: {x :-1 , y: -1, subx: 0.5, suby: 0.5} + down: {x :-1 , y: -1, subx: 0.5, suby: 0.5}, + rect: {x1: -1, x2: -1, y1: -1, y2: -1}, + step: 0 }; @@ -404,44 +408,6 @@ function trackDraw() { } tmpblocks.length = 0; - // - // draw down position - if (trackMouse.down.x >= 0) { - var p1 = {}; - var p2 = {}; - - if (trackMouse.pos.x < trackMouse.down.x) { - p1.x = trackMouse.pos.x; - p2.x = trackMouse.down.x; - } - else { - p1.x = trackMouse.down.x; - p2.x = trackMouse.pos.x; - } - - if (trackMouse.pos.y < trackMouse.down.y) { - p1.y = trackMouse.pos.y; - p2.y = trackMouse.down.y; - } - else { - p1.y = trackMouse.down.y; - p2.y = trackMouse.pos.y; - } - - ctx.lineWidth = 1; - ctx.lineJoin="round"; - ctx.miterLimit = 1; - ctx.setLineDash([2,2]); - ctx.strokeStyle = cssVar('--track-color-selectframe'); - ctx.beginPath(); - ctx.moveTo(0.5+(p1.x + 0) * track.scale, 0.5+(p1.y+0) * track.scale); - ctx.lineTo(0.5+(p2.x + 1) * track.scale, 0.5+(p1.y+0) * track.scale); - ctx.lineTo(0.5+(p2.x + 1) * track.scale, 0.5+(p2.y+1) * track.scale); - ctx.lineTo(0.5+(p1.x + 0) * track.scale, 0.5+(p2.y+1) * track.scale); - ctx.lineTo(0.5+(p1.x + 0) * track.scale, 0.5+(p1.y+0) * track.scale); - ctx.stroke(); - } - // // draw mouse cursor ctx.lineWidth = 1; @@ -461,21 +427,96 @@ function trackDraw() { // draw mouseselection var mode = sideBtnCmdGet(); - if ((mode == "cmd-track-rail" || mode == "cmd-track-delete") && - trackMouse.down.x >= 0 && trackMouse.down.y >= 0) { - var selected = new Array(); - - selected.length = 0; - selected = trackGetElementList(trackMouse.down, trackMouse.pos, trackMouse.direction); - for (i = 0; i < selected.length; i++) { - trackDrawElement(ctx, selected[i], 1); + if (mode == "cmd-track-rail" || mode == "cmd-track-delete") { + if (trackMouse.down.x >= 0 && trackMouse.down.y >= 0) { + var selected = new Array(); + + selected.length = 0; + selected = trackGetElementList(trackMouse.down, trackMouse.pos, trackMouse.direction); + for (i = 0; i < selected.length; i++) { + trackDrawElement(ctx, selected[i], 1); + } + selected.length = 0; + var infoline = document.getElementById("infoline"); + if (infoline) infoline.innerHTML = trackMouse.direction; } - selected.length = 0; - var infoline = document.getElementById("infoline"); - if (infoline) infoline.innerHTML = trackMouse.direction; } - else if (!mode == "cmd-track-none") alert("track.js: unknown mode:" + mode); + else if (mode == "cmd-track-move") { + if (trackMouse.step == 0) { + // draw rectangle for selection + let x1, x2, y1, y2; + + // sort position down < pos + if (trackMouse.pos.x > trackMouse.down.x) { + x1 = trackMouse.down.x; + x2 = trackMouse.pos.x; + } + else { + x2 = trackMouse.down.x; + x1 = trackMouse.pos.x; + } + if (trackMouse.pos.y > trackMouse.down.y) { + y1 = trackMouse.down.y; + y2 = trackMouse.pos.y; + } + else { + y2 = trackMouse.down.y; + y1 = trackMouse.pos.y; + } + + if (trackMouse.down.x >= 0) { + ctx.lineWidth = 1; + ctx.lineJoin="round"; + ctx.miterLimit = 1; + ctx.setLineDash([2,2]); + ctx.strokeStyle = cssVar('--track-element-fgborder'); + ctx.beginPath(); + ctx.moveTo(0.5+(x1 + 0) * track.scale, 0.5+(y1+0) * track.scale); + ctx.lineTo(0.5+(x2 + 1) * track.scale, 0.5+(y1+0) * track.scale); + ctx.lineTo(0.5+(x2 + 1) * track.scale, 0.5+(y2+1) * track.scale); + ctx.lineTo(0.5+(x1 + 0) * track.scale, 0.5+(y2+1) * track.scale); + ctx.lineTo(0.5+(x1 + 0) * track.scale, 0.5+(y1+0) * track.scale); + ctx.stroke(); + } + } + + else if (trackMouse.step == 1) { + let dx = trackMouse.pos.x - trackMouse.down.x; + let dy = trackMouse.pos.y - trackMouse.down.y; + + ctx.lineWidth = 1; + ctx.lineJoin="round"; + ctx.miterLimit = 1; + ctx.setLineDash([2,2]); + ctx.strokeStyle = cssVar('--track-element-selectframe'); + ctx.beginPath(); + ctx.moveTo(0.5+(trackMouse.rect.x1 + 0) * track.scale, 0.5+(trackMouse.rect.y1+0) * track.scale); + ctx.lineTo(0.5+(trackMouse.rect.x2 + 1) * track.scale, 0.5+(trackMouse.rect.y1+0) * track.scale); + ctx.lineTo(0.5+(trackMouse.rect.x2 + 1) * track.scale, 0.5+(trackMouse.rect.y2+1) * track.scale); + ctx.lineTo(0.5+(trackMouse.rect.x1 + 0) * track.scale, 0.5+(trackMouse.rect.y2+1) * track.scale); + ctx.lineTo(0.5+(trackMouse.rect.x1 + 0) * track.scale, 0.5+(trackMouse.rect.y1+0) * track.scale); + ctx.stroke(); + + ctx.lineWidth = 1; + ctx.lineJoin="round"; + ctx.miterLimit = 1; + ctx.setLineDash([1,1]); + ctx.strokeStyle = cssVar('--track-element-selectframe'); + ctx.beginPath(); + ctx.moveTo(0.5+(trackMouse.rect.x1 + dx + 0) * track.scale, 0.5+(trackMouse.rect.y1 + dy + 0) * track.scale); + ctx.lineTo(0.5+(trackMouse.rect.x2 + dx + 1) * track.scale, 0.5+(trackMouse.rect.y1 + dy + 0) * track.scale); + ctx.lineTo(0.5+(trackMouse.rect.x2 + dx + 1) * track.scale, 0.5+(trackMouse.rect.y2 + dy + 1) * track.scale); + ctx.lineTo(0.5+(trackMouse.rect.x1 + dx + 0) * track.scale, 0.5+(trackMouse.rect.y2 + dy + 1) * track.scale); + ctx.lineTo(0.5+(trackMouse.rect.x1 + dx + 0) * track.scale, 0.5+(trackMouse.rect.y1 + dy + 0) * track.scale); + ctx.stroke(); + } + } + + else if (mode == "cmd-track-rail" || mode == "cmd-track-detail" || mode == "cmd-track-none" || mode == "cmd-none") { + } + + else alert("track.js: unknown mode:" + mode); // // flip screen - double buffering @@ -532,6 +573,9 @@ function trackMousedown(event) { if (mode == "cmd-track-rail" || mode == "cmd-track-delete") { trackMouse.down = trackMouseGetPos(event); } + else if (mode == "cmd-track-move") { + if (trackMouse.step == 0) trackMouse.down = trackMouseGetPos(event); + } // debug ("trackMousedown pos: " + tmp.x + "," + tmp.y + " subx: " + tmp.subx + " suby:" + tmp.suby); @@ -549,6 +593,7 @@ function trackMouseup(event) { debug ("trackMouseup tmp: " + tmp.x + "," + tmp.y + " mode:" + mode); debug ("trackMouseup down: " + trackMouse.down.x + "," + trackMouse.down.y); debug ("trackMouseup pos: " + trackMouse.pos.x + "," + trackMouse.pos.y); + debug ("trackMouseup step: " + trackMouse.step); gContextmenuClose(); @@ -560,10 +605,14 @@ function trackMouseup(event) { selected = trackGetElementList(trackMouse.down, trackMouse.pos, trackMouse.direction); serverinout_addTrack(selected); selected.length = 0; + trackMouse.down.x = -1; + trackMouse.down.y = -1; } else if (mode == "cmd-track-detail") { rwdetail_show(trackMouse.pos.x, trackMouse.pos.y); + trackMouse.down.x = -1; + trackMouse.down.y = -1; } else if (mode == "cmd-track-delete") { @@ -593,24 +642,63 @@ function trackMouseup(event) { ye = trackMouse.down.y; } - debug ("delete: xs: " + xs + " , " + ys + " xe: " + xe + " , " + ye); - for (x = xs; x <= xe; x++) for (y = ys; y <= ye; y++) { selected.push({x: x, y: y, dir: 1, type: 0}); } serverinout_delTrack(selected); selected.length = 0; + trackMouse.down.x = -1; + trackMouse.down.y = -1; + } + + else if (mode == "cmd-track-move") { + if (trackMouse.step == 0) { + let x1, x2, y1, y2; + + // sort position down < pos + if (trackMouse.pos.x > trackMouse.down.x) { + trackMouse.rect.x1 = trackMouse.down.x; + trackMouse.rect.x2 = trackMouse.pos.x; + } + else { + trackMouse.rect.x2 = trackMouse.down.x; + trackMouse.rect.x1 = trackMouse.pos.x; + } + if (trackMouse.pos.y > trackMouse.down.y) { + trackMouse.rect.y1 = trackMouse.down.y; + trackMouse.rect.y2 = trackMouse.pos.y; + } + else { + trackMouse.rect.y2 = trackMouse.down.y; + trackMouse.rect.y1 = trackMouse.pos.y; + } + trackMouse.step = 1; + trackMouse.down = trackMouse.pos; + } + else if (trackMouse.step == 1) { + // + // move railways + let dx = trackMouse.pos.x - trackMouse.down.x; + let dy = trackMouse.pos.y - trackMouse.down.y; + trackMoveArea(trackMouse.rect, dx, dy); + + trackMouse.step = 0; + trackMouse.down.x = -1; + trackMouse.down.y = -1; + } + else { + trackMouse.step = 0; + } } + else { debug ("rw_Click was das?"); rw_Click(trackMouse.pos.x, trackMouse.pos.y); + trackMouse.down.x = -1; + trackMouse.down.y = -1; } - trackMouse.down.x = -1; - trackMouse.down.y = -1; - trackMouse.step = 0; - trackDraw(); }; @@ -809,6 +897,7 @@ function trackGetElementList(start, end) { return list; }; + // // returns the element at the givin point function trackGetTurnout(mousepos) { @@ -824,3 +913,40 @@ function trackGetTurnout(mousepos) { return elm; }; + +// +// trackMoveArea: moves an area from one to another place, it will overwrite the objects on this place. +// +function trackMoveArea (rect, dx, dy) { + let elmMove = new Array(); + let elmDel = new Array(); + let elm; + let x, y, idx; + + if (dx == 0 && dy == 0) return; + + for (x = rect.x1; x <= rect.x2; x++) for (y = rect.y1; y <= rect.y2; y++) { + idx = x + y * track.size.x; + elm = track.elements[idx]; + + if (!elm) { + elm = { x: x + dx, + y: y + dy, + type: RAILWAY_T_NOTHING, + dir: 0, + altdir: 0, + name: "" }; + } + else { + elm.x = elm.x + dx; + elm.y = elm.y + dy; + } + elmMove.push (track.elements[idx]); + + elm = {x: x, y: y}; + elmDel.push (elm); + } + + serverinout_delTrack(elmDel); + serverinout_addTrack(elmMove); +};