implemented editing of layout in browser
This commit is contained in:
@@ -1,3 +1,8 @@
|
|||||||
|
body{
|
||||||
|
background: gray;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.tile{
|
.tile{
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
@@ -26,17 +31,20 @@ svg text{
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu .tile .list{
|
.menu .list{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu .tile:hover .list{
|
.menu div:hover .list{
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu .tile .list{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 40px;
|
bottom: 40px;
|
||||||
display: inline-block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu .tile .list .tile{
|
.menu .tile .list .tile{
|
||||||
|
|||||||
@@ -1 +1,60 @@
|
|||||||
alert('hallo!');
|
const ADD = 1;
|
||||||
|
const SQUARE = 30;
|
||||||
|
const BODY = 'body';
|
||||||
|
const SVG = 'svg';
|
||||||
|
var selected = null;
|
||||||
|
var mode = null;
|
||||||
|
|
||||||
|
|
||||||
|
function addTile(tile,x,y){
|
||||||
|
console.log("addTile:",tile.id,x,y);
|
||||||
|
x = Math.floor(x/SQUARE);
|
||||||
|
y = Math.floor(y/SQUARE);
|
||||||
|
var id = 'tile-'+x+'-'+y;
|
||||||
|
$('#'+id).remove();
|
||||||
|
var tile = $(tile).clone().css({left:(30*x)+'px',top:(30*y)+'px','border':''}).attr('id',id);
|
||||||
|
console.log(tile);
|
||||||
|
$(BODY).append(tile);
|
||||||
|
}
|
||||||
|
|
||||||
|
function bodyClick(ev){
|
||||||
|
console.log('bodyClick:',ev);
|
||||||
|
switch (mode){
|
||||||
|
case undefined:
|
||||||
|
case null: return;
|
||||||
|
case ADD:
|
||||||
|
return addTile(selected,ev.clientX,ev.clientY);
|
||||||
|
}
|
||||||
|
console.log(ev.clientX,ev.clientY);
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeMenu(ev){
|
||||||
|
console.log('closeMenu:',ev);
|
||||||
|
if (selected != null) $(selected).css('border','');
|
||||||
|
$('.menu .list').css('display','')
|
||||||
|
mode = null;
|
||||||
|
selected = null;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function enableAdding(ev){
|
||||||
|
console.log('enableAdding:',ev);
|
||||||
|
if (selected != null) $(selected).css('border','');
|
||||||
|
selected = ev.target;
|
||||||
|
while (selected != null && selected.nodeName != SVG) selected = selected.parentNode;
|
||||||
|
if (selected == null){
|
||||||
|
mode = null;
|
||||||
|
} else {
|
||||||
|
$(selected).css('border','2px solid red');
|
||||||
|
$('.menu .tile .list').css('display','inherit');
|
||||||
|
mode = ADD;
|
||||||
|
}
|
||||||
|
return false; // otherwise body.click would also be triggered
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onload = function () {
|
||||||
|
var isDragging = false;
|
||||||
|
$('.menu > div').click(closeMenu);
|
||||||
|
$('.menu .tile .list svg').click(enableAdding);
|
||||||
|
$(BODY).click(bodyClick);
|
||||||
|
}
|
||||||
|
|||||||
3
resources/svg/DiagES.svg
Normal file
3
resources/svg/DiagES.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="100" height="100" viewbox="0 0 100 100">
|
||||||
|
<polygon points="65,100 35,100 100,35 100,65" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 109 B |
@@ -8,6 +8,7 @@ import java.io.OutputStream;
|
|||||||
import java.net.InetSocketAddress;
|
import java.net.InetSocketAddress;
|
||||||
import java.net.URI;
|
import java.net.URI;
|
||||||
import java.nio.charset.StandardCharsets;
|
import java.nio.charset.StandardCharsets;
|
||||||
|
import java.nio.file.Files;
|
||||||
|
|
||||||
import org.slf4j.Logger;
|
import org.slf4j.Logger;
|
||||||
import org.slf4j.LoggerFactory;
|
import org.slf4j.LoggerFactory;
|
||||||
@@ -62,6 +63,7 @@ public class Application {
|
|||||||
File file = new File(System.getProperty("user.dir")+"/resources"+uri);
|
File file = new File(System.getProperty("user.dir")+"/resources"+uri);
|
||||||
LOG.debug("requesting file: {}",file);
|
LOG.debug("requesting file: {}",file);
|
||||||
if (file.exists()) {
|
if (file.exists()) {
|
||||||
|
client.getResponseHeaders().add("Content-Type", Files.probeContentType(file.toPath()));
|
||||||
client.sendResponseHeaders(200, file.length());
|
client.sendResponseHeaders(200, file.length());
|
||||||
OutputStream out = client.getResponseBody();
|
OutputStream out = client.getResponseBody();
|
||||||
FileInputStream in = new FileInputStream(file);
|
FileInputStream in = new FileInputStream(file);
|
||||||
@@ -86,7 +88,7 @@ public class Application {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private static void sendPlan(HttpExchange client) throws IOException {
|
private static void sendPlan(HttpExchange client) throws IOException {
|
||||||
send(client,plan.html().style("css/style.css").js("jquery-3.5.1.slim.min.js").js("js/plan.js"));
|
send(client,plan.html().style("css/style.css").js("js/jquery-3.5.1.slim.min.js").js("js/plan.js"));
|
||||||
}
|
}
|
||||||
|
|
||||||
private static void send(HttpExchange client, Page response) throws IOException {
|
private static void send(HttpExchange client, Page response) throws IOException {
|
||||||
|
|||||||
@@ -24,6 +24,7 @@ public class Page {
|
|||||||
StringBuffer sb = new StringBuffer()
|
StringBuffer sb = new StringBuffer()
|
||||||
.append("<html>\n")
|
.append("<html>\n")
|
||||||
.append("\t<head>\n");
|
.append("\t<head>\n");
|
||||||
|
sb.append("\t\t"+new Tag("meta").attr("charset", "UTF-8")+"\n");
|
||||||
for (String cssFile : cssFiles) {
|
for (String cssFile : cssFiles) {
|
||||||
sb.append("\t\t"+new Tag("link").attr("rel", "stylesheet").attr("type", "text/css").attr("href", cssFile)+"\n");
|
sb.append("\t\t"+new Tag("link").attr("rel", "stylesheet").attr("type", "text/css").attr("href", cssFile)+"\n");
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,9 +5,18 @@ import java.util.HashMap;
|
|||||||
import java.util.Map.Entry;
|
import java.util.Map.Entry;
|
||||||
|
|
||||||
import de.srsoftware.tools.Tag;
|
import de.srsoftware.tools.Tag;
|
||||||
|
import de.srsoftware.web4rail.tiles.DiagES;
|
||||||
|
import de.srsoftware.web4rail.tiles.DiagNE;
|
||||||
|
import de.srsoftware.web4rail.tiles.DiagSW;
|
||||||
|
import de.srsoftware.web4rail.tiles.DiagWN;
|
||||||
|
import de.srsoftware.web4rail.tiles.EndE;
|
||||||
|
import de.srsoftware.web4rail.tiles.EndW;
|
||||||
import de.srsoftware.web4rail.tiles.StraightH;
|
import de.srsoftware.web4rail.tiles.StraightH;
|
||||||
import de.srsoftware.web4rail.tiles.StraightV;
|
import de.srsoftware.web4rail.tiles.StraightV;
|
||||||
import de.srsoftware.web4rail.tiles.Tile;
|
import de.srsoftware.web4rail.tiles.Tile;
|
||||||
|
import de.srsoftware.web4rail.tiles.TurnoutSE;
|
||||||
|
import de.srsoftware.web4rail.tiles.TurnoutSW;
|
||||||
|
import de.srsoftware.web4rail.tiles.TurnoutWS;
|
||||||
|
|
||||||
public class Plan {
|
public class Plan {
|
||||||
private HashMap<Integer,HashMap<Integer,Tile>> tiles = new HashMap<Integer,HashMap<Integer,Tile>>();
|
private HashMap<Integer,HashMap<Integer,Tile>> tiles = new HashMap<Integer,HashMap<Integer,Tile>>();
|
||||||
@@ -50,6 +59,15 @@ public class Plan {
|
|||||||
StringBuffer tiles = new StringBuffer();
|
StringBuffer tiles = new StringBuffer();
|
||||||
tiles.append(new StraightH().html());
|
tiles.append(new StraightH().html());
|
||||||
tiles.append(new StraightV().html());
|
tiles.append(new StraightV().html());
|
||||||
|
tiles.append(new DiagES().html());
|
||||||
|
tiles.append(new DiagSW().html());
|
||||||
|
tiles.append(new DiagNE().html());
|
||||||
|
tiles.append(new DiagWN().html());
|
||||||
|
tiles.append(new EndE().html());
|
||||||
|
tiles.append(new EndW().html());
|
||||||
|
tiles.append(new TurnoutSE().html());
|
||||||
|
tiles.append(new TurnoutWS().html());
|
||||||
|
tiles.append(new TurnoutSW().html());
|
||||||
new Tag("div").clazz("list").content(tiles.toString()).addTo(tileMenu).addTo(menu);
|
new Tag("div").clazz("list").content(tiles.toString()).addTo(tileMenu).addTo(menu);
|
||||||
|
|
||||||
return menu;
|
return menu;
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ import de.srsoftware.web4rail.Application;
|
|||||||
|
|
||||||
public abstract class Tile {
|
public abstract class Tile {
|
||||||
|
|
||||||
protected int x,y;
|
protected int x = -1,y = -1;
|
||||||
protected HashSet<String> classes = new HashSet<String>();
|
protected HashSet<String> classes = new HashSet<String>();
|
||||||
|
|
||||||
public Tile() {
|
public Tile() {
|
||||||
@@ -28,12 +28,12 @@ public abstract class Tile {
|
|||||||
public String html() throws IOException {
|
public String html() throws IOException {
|
||||||
|
|
||||||
Tag svg = new Tag("svg")
|
Tag svg = new Tag("svg")
|
||||||
.id("tile-"+x+"-"+y)
|
.id((x!=-1 && y!=-1)?("tile-"+x+"-"+y):(getClass().getSimpleName()))
|
||||||
.clazz(classes)
|
.clazz(classes)
|
||||||
.size(100,100)
|
.size(100,100)
|
||||||
.attr("name", getClass().getSimpleName())
|
.attr("name", getClass().getSimpleName())
|
||||||
.attr("viewbox", "0 0 100 100")
|
.attr("viewbox", "0 0 100 100");
|
||||||
.style("left: "+(30*x)+"px; top: "+(30*y)+"px");
|
if (x>-1) svg.style("left: "+(30*x)+"px; top: "+(30*y)+"px");
|
||||||
|
|
||||||
File file = new File(System.getProperty("user.dir")+"/resources/svg/"+getClass().getSimpleName()+".svg");
|
File file = new File(System.getProperty("user.dir")+"/resources/svg/"+getClass().getSimpleName()+".svg");
|
||||||
if (file.exists()) {
|
if (file.exists()) {
|
||||||
|
|||||||
Reference in New Issue
Block a user