index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
<script>
var mydragg = (function () {
return {
move: function (divid, xpos, ypos) {
divid.style.left = xpos + "px";
divid.style.top = ypos + "px";
},
startMoving: function (divid, container, evt) {
evt = evt || window.event;
var posX = evt.clientX,
posY = evt.clientY,
divTop = divid.style.top,
divLeft = divid.style.left,
eWi = parseInt(divid.style.width),
eHe = parseInt(divid.style.height),
cWi = parseInt(
document.getElementById(container).style.width
),
cHe = parseInt(
document.getElementById(container).style.height
);
document.getElementById(container).style.cursor =
"move";
divTop = divTop.replace("px", "");
divLeft = divLeft.replace("px", "");
var diffX = posX - divLeft,
diffY = posY - divTop;
document.onmousemove = function (evt) {
evt = evt || window.event;
var posX = evt.clientX,
posY = evt.clientY,
aX = posX - diffX,
aY = posY - diffY;
if (aX < 0) aX = 0;
if (aY < 0) aY = 0;
if (aX + eWi > cWi) aX = cWi - eWi;
if (aY + eHe > cHe) aY = cHe - eHe;
mydragg.move(divid, aX, aY);
};
},
stopMoving: function (container) {
var a = document.createElement("script");
document.getElementById(container).style.cursor =
"default";
document.onmousemove = function () {};
},
};
})();
function addBox() {
var container = document.getElementById("container");
var newBox = document.createElement("div");
newBox.className = "box";
newBox.style.width = "200px";
newBox.style.height = "150px";
newBox.style.left = "0px";
newBox.style.top = "0px";
var inputNode = document.createElement("div");
inputNode.className = "input-node";
newBox.appendChild(inputNode);
var outputNode = document.createElement("div");
outputNode.className = "output-node";
newBox.appendChild(outputNode);
var gateSelect = document.createElement("select");
gateSelect.innerHTML = `
<option value="AND">AND</option>
<option value="OR">OR</option>
<option value="NOT">NOT</option>
<option value="XOR">XOR</option>
`;
newBox.appendChild(gateSelect);
newBox.onmousedown = function(event) {
mydragg.startMoving(this, "container", event);
};
newBox.onmouseup = function() {
mydragg.stopMoving("container");
};
container.appendChild(newBox);
}
function deleteBox() {
var container = document.getElementById("container");
var boxes = document.getElementsByClassName("box");
if (boxes.length > 0) {
container.removeChild(boxes[boxes.length - 1]);
}
}
</script>
<script src="./func/fileControl.js"></script>
</head>
<body>
<div id="container" style="width: 800px; height: 600px; top: 50px; left: 50px">
<button onclick="addBox()">Add</button>
<button onclick="deleteBox()">Delete</button>
<button onclick="exportBoxes()">Export</button>
<button onclick="importBoxes()">Import</button>
</div>
</body>
</html>
fileControl.js
function exportBoxes() {
var boxes = document.getElementsByClassName("box");
var xml = '<?xml version="1.0" encoding="UTF-8"?>\n<boxes>\n';
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
var left = box.style.left;
var top = box.style.top;
var gate = box.querySelector("select").value;
xml += ' <box left="' + left + '" top="' + top + '" gate="' + gate + '"/>\n';
}
xml += '</boxes>';
var blob = new Blob([xml], {type: 'text/xml'});
var url = URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = url;
a.download = "boxes.xml";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
function importBoxes() {
var input = document.createElement("input");
input.type = "file";
input.accept = ".xml";
input.onchange = function(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function() {
var xmlText = reader.result;
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlText, "text/xml");
var boxes = xmlDoc.getElementsByTagName("box");
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
var left = box.getAttribute("left");
var top = box.getAttribute("top");
var gate = box.getAttribute("gate");
var container = document.getElementById("container");
var newBox = document.createElement("div");
newBox.className = "box";
newBox.style.width = "200px";
newBox.style.height = "150px";
newBox.style.left = left;
newBox.style.top = top;
var inputNode = document.createElement("div");
inputNode.className = "input-node";
newBox.appendChild(inputNode);
var outputNode = document.createElement("div");
outputNode.className = "output-node";
newBox.appendChild(outputNode);
var gateSelect = document.createElement("select");
gateSelect.innerHTML = `
<option value="AND">AND</option>
<option value="OR">OR</option>
<option value="NOT">NOT</option>
<option value="XOR">XOR</option>
`;
gateSelect.value = gate;
newBox.appendChild(gateSelect);
newBox.onmousedown = function(event) {
mydragg.startMoving(this, "container", event);
};
newBox.onmouseup = function() {
mydragg.stopMoving("container");
};
container.appendChild(newBox);
}
};
reader.readAsText(file);
};
input.click();
}
'웹 > 개발' 카테고리의 다른 글
| 게임 디자이너 [2] - DB 설계 (0) | 2024.01.20 |
|---|---|
| Clash Of Clans API 불러오기 (0) | 2022.06.12 |
