<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<script src="./assets/js/jquery-1.11.1.min.js"></script>
<script src="./assets/hydrogen/matrix.js"></script>
<script src="./assets/js/hydrogen.js"></script>
<style>
body,
html {
padding: 0;
margin: 0;
background-color: #002f63;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
position: relative;
color: #000;
}
canvas {
display: block;
margin: auto;
}
</style>
</head>
<body>
<div id="container" class="container">
<canvas id="canvas" onmousedown="clickDown(event)" onmouseup="clickUp(event)" width="2900" height="1600"></canvas>
</div>
</body>
</html>
<script>
var container,
canvas,
ctx,
scale,
deltaX = 0,
deltaY = 0,
width = 2900,
height = 1600,
fps = 2,
img1= new Image(),
img2= new Image(),
ratio = 1;
var number = 0;
var data = {};
$(function () {
let keys = Object.keys(apex);
number = keys.length ? Number(keys[keys.length - 1].split("A")[1]) : 0;
container = $("#container");
canvas = $("#canvas");
ctx = canvas[0].getContext("2d");
img1.src = "./assets/img/icon-1.png"
img2.src = "./assets/img/icon-2.png"
getSize();
draw();
});
function draw() {
let t = 1000 / fps;
ctx.save();
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "#002f63";
ctx.fillRect(0, 0, width, height);
ctx.translate(deltaX, deltaY);
ctx.scale(ratio, ratio);
drawInfo();
drawStatusBlock();
drawTubes();
drawTanks();
drawRocket();
drawCooler();
drawLiquidomes();
drawSensors();
ctx.drawImage(img1, 1285, 797,img1.width/2.1,img1.height/2.1)
ctx.restore();
setTimeout(() => {
draw();
}, 1000/fps);
}
function drawTanks() {
let arr = [
{ x: 320, y: 700, name: "液氧固定罐A" },
{ x: 320, y: 1120, name: "液氧固定罐B" },
];
arr.forEach((item) => {
drawTank(item);
});
}
function getAllTubes(m) {
let tubeObj = {};
for (let key1 in m) {
for (let key2 in m[key1]) {
let item = m[key1][key2];
if (item) {
let a = Number(key1.split("A")[1]);
let b = Number(key2.split("A")[1]);
let key = a < b ? "A" + a + "_" + "A" + b : "A" + b + "_" + "A" + a;
if (tubeObj[key] === undefined) tubeObj[key] = false;
}
}
}
return tubeObj;
}
function drawTubes() {
let tubeObj = getAllTubes(matrix);
let { arr, apexArr } = getConnectTubes();
for (let key in tubeObj) {
if (tubeObj[key] === false) {
let point = key.split("_");
let a = Number(point[0].split("A")[1]);
let b = Number(point[1].split("A")[1]);
let path = a < b ? "A" + a + "_" + "A" + b : "A" + b + "_" + "A" + a;
let item = {
x1: apex[point[0]].x,
y1: apex[point[0]].y,
x2: apex[point[1]].x,
y2: apex[point[1]].y,
point1: apex[point[0]],
point2: apex[point[1]],
};
item.type = item.x1 == item.x2 ? "v" : "h";
liquidTube(item, arr.indexOf(path) >= 0);
}
}
for (let key in apex) {
if(apex[key].type=="liquidome"){
drawLiquidome(apex[key])
}
if (apex[key].type == "switcher") {
drawSwitcher(apex[key], apex[key].switcher.status);
}
if (apex[key].type == "output") {
drawOutput(apex[key]);
}
if (apex[key].apex_type) {
drawApex(apex[key], apexArr.indexOf(key) >= 0);
}
}
}
function getConnectTubes() {
let arr = [],
apexArr = [];
for (let key in apex) {
if (apex[key].type && apex[key].type == "input") {
let result = checkTubsForwards(key);
let a = new Set([...arr, ...result.arr]);
let b = new Set([...apexArr, ...result.apexArr]);
arr = [];
apexArr = [];
a.forEach((item) => {
arr.push(item);
});
b.forEach((item) => {
apexArr.push(item);
});
}
}
return { arr, apexArr };
}
var click_position = {},
click_timer = false,
isHold = false;
function clickDown(e) {
return
if (click_timer) clearTimeout(click_timer);
isHold = false;
let x1 = parseInt(e.offsetX / scale / ratio) - deltaX / ratio;
let y1 = parseInt(e.offsetY / scale / ratio) - deltaY / ratio;
let name = "A" + (number + 1);
let isHave = false;
for (let key in apex) {
if (Math.abs(apex[key].x - x1) <= 15 && Math.abs(apex[key].y - y1) <= 15) {
isHave = true;
x1 = Number(apex[key].x);
y1 = Number(apex[key].y);
name = key.toString();
console.log(name);
sn = $("#sn").val();
if (sn) {
sn = sn == 999 ? "" : sn;
let s = { name: sn, dir: dir };
apex[key].type = "switcher";
apex[key].switcher = s;
localStorage.setItem("apex", JSON.stringify(apex));
}
break;
}
}
click_position = { x1, y1, name, isHave };
click_timer = setTimeout(() => {
isHold = true;
}, 500);
}
function clickUp(e) {
return
let { x1, y1, name } = click_position;
if (!isHold) {
console.log(x1, y1, name);
return;
}
isHold = false;
if (!click_position.isHave) {
number++;
}
let x2 = parseInt(e.offsetX / scale / ratio) - deltaX / ratio;
let y2 = parseInt(e.offsetY / scale / ratio) - deltaY / ratio;
let name2 = "A" + (number + 1);
let isHave = false;
let addType = "";
let obj = apex;
let obj2 = matrix;
for (let key in obj) {
if (Math.abs(obj[key].x - x2) <= 15 && Math.abs(obj[key].y - y2) <= 15) {
isHave = true;
x2 = Number(obj[key].x);
y2 = Number(obj[key].y);
name2 = key.toString();
break;
}
}
if (!isHave) {
number++;
}
if (!click_position.isHave || !isHave) {
if (!click_position.isHave) {
obj[name] = { x: x1, y: y1 };
obj2[name] = {};
}
if (!isHave) {
obj[name2] = { x: x2, y: y2 };
obj2[name2] = {};
}
obj2[name][name2] = 1;
obj2[name2][name] = 1;
let w = Math.abs(x1 - x2);
let h = Math.abs(y1 - y2);
w > h ? (y2 = Number(y1)) : (x2 = Number(x1));
obj[name2] = { x: x2, y: y2 };
localStorage.setItem("apex", JSON.stringify(obj));
localStorage.setItem("matrix", JSON.stringify(obj2));
} else {
obj2[name][name2] = 1;
obj2[name2][name] = 1;
localStorage.setItem("matrix", JSON.stringify(obj2));
}
if (addType == "gas") {
} else {
apex = obj;
matrix = obj2;
}
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<script src="./assets/js/jquery-1.11.1.min.js"></script>
<script src="./assets/js/matrix.js"></script>
<script src="./assets/js/matrix_gas.js"></script>
<script src="./assets/js/common.js"></script>
<script src="./assets/js/index.js"></script>
<style>
body,
html {
padding: 0;
margin: 0;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
position: relative;
color: #000;
}
.tool {
position: fixed;
z-index: 20;
}
</style>
</head>
<body>
<div id="container" class="container">
<canvas id="canvas" onmousedown="clickDown(event)" onmouseup="clickUp(event)"></canvas>
</div>
</body>
</html>
<script>
function d(num1, num2) {
dir = num1;
$("#dir_" + num1).css({ background: "cornflowerblue" });
$("#dir_" + num2).css({ background: "" });
}
</script>
<script>
var container,
canvas,
ctx,
switcherOpen,
scale,
color1,
color2,
rocket = new Image(),
pumpImg = new Image(),
fanImg = new Image(),
dtImg = new Image(),
chimneyImg = new Image();
var imgScale = 1.25,
isLoop = true,
isDrawPoint = false,
isDrawBG = false,
isTubes = true,
isGasTubes = true,
deltaX = 0 || 150,
deltaY = 0,
width = 4800,
height = 1500,
fps = 2,
radio = 1;
_status = 1;
var number = 0;
var data = {};
$(function () {
let keys = Object.keys(apex_gas);
number = Number(keys[keys.length - 1].split("A")[1]);
container = $("#container");
canvas = $("#canvas");
ctx = canvas[0].getContext("2d");
rocket.src = "./assets/img/rocket.png";
pumpImg.src = "./assets/img/pump.png";
fanImg.src = "./assets/img/fan.png";
dtImg.src = "./assets/img/sensor-dt.png";
chimneyImg.src = "./assets/img/chimney.png";
getParams();
setTimeout(() => {
getSize();
draw(ctx);
}, 1000);
});
function getParams() {
$.ajax("./assets/json/data.json").then((res) => {
data = res;
for (let key in data) {
if (typeof data[key] == "boolean") {
data[key] = Math.random() > 0.5 ? true : false;
} else {
data[key] = parseInt(Math.random() * 10000);
}
}
setTimeout(() => {
getParams();
}, 5000);
});
}
function draw() {
let t = 1000 / fps;
color1 = _status % 2 == 1 ? "#00582a" : "#00582a";
color2 = _status % 2 != 1 ? "#00582a" : "#00582a";
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "#002f63";
ctx.fillRect(0, 0, width, height);
ctx.save();
ctx.translate(deltaX, deltaY);
ctx.scale(radio, radio);
drawTrain();
drawTanks();
if (isGasTubes) {
drawGasTubes();
drawConnectGas();
}
if (isTubes) {
drawTubes();
drawConnectTubes();
}
if (isGasTubes) drawSwitchers(apex_gas);
if (isTubes) drawSwitchers(apex);
drawFluidMeters();
drawPumps();
drawSensorDTs();
drawOther();
ctx.restore();
drawInfo();
drawRocket();
if (!isLoop) return;
setTimeout(() => {
_status++;
_status = _status > fps ? 1 : _status;
draw();
}, t);
}
var click_timer,
click_position,
isHold = false;
var sn = null;
var dir = 1;
function handleSwitcher(name) {
if (apex[name] && apex[name].type == "switcher") {
apex[name].switcher.status = apex[name].switcher.status ? false : true;
}
}
function clickDown(e) {
return;
if (click_timer) clearTimeout(click_timer);
isHold = false;
let x1 = parseInt((e.layerX * scale) / radio) - deltaX / radio;
let y1 = parseInt((e.layerY * scale) / radio) - deltaY / radio;
let name = "A" + (number + 1);
let isHave = false;
for (let key in apex_gas) {
if (Math.abs(apex_gas[key].x - x1) <= 8 && Math.abs(apex_gas[key].y - y1) <= 8) {
isHave = true;
x1 = Number(apex_gas[key].x);
y1 = Number(apex_gas[key].y);
name = key.toString();
console.log(name);
sn = $("#sn").val();
if (sn) {
sn = sn == 999 ? "" : sn;
let s = { name: sn, dir: dir };
apex_gas[key].type = "switcher";
apex_gas[key].switcher = s;
localStorage.setItem("a_gas", JSON.stringify(apex_gas));
}
break;
}
}
click_position = { x1, y1, name, isHave };
click_timer = setTimeout(() => {
isHold = true;
}, 500);
if (!sn) handleSwitcher(name);
}
function clickUp(e) {
return;
let { x1, y1, name } = click_position;
if (!isHold) {
console.log(x1, y1, name);
return;
}
isHold = false;
if (!click_position.isHave) {
number++;
}
let x2 = parseInt((e.layerX * scale) / radio) - deltaX / radio;
let y2 = parseInt((e.layerY * scale) / radio) - deltaY / radio;
let name2 = "A" + (number + 1);
let isHave = false;
let addType = "gas";
let obj = addType == "gas" ? apex_gas : apex;
let obj2 = addType == "gas" ? matrix_gas : matrix;
for (let key in obj) {
if (Math.abs(obj[key].x - x2) <= 8 && Math.abs(obj[key].y - y2) <= 8) {
isHave = true;
x2 = Number(obj[key].x);
y2 = Number(obj[key].y);
name2 = key.toString();
break;
}
}
if (!isHave) {
number++;
}
if (!click_position.isHave || !isHave) {
if (!click_position.isHave) {
obj[name] = { x: x1, y: y1, tube: "gas" };
obj2[name] = {};
}
if (!isHave) {
obj[name2] = { x: x2, y: y2, tube: "gas" };
obj2[name2] = {};
}
obj2[name][name2] = 1;
obj2[name2][name] = 1;
let w = Math.abs(x1 - x2);
let h = Math.abs(y1 - y2);
w > h ? (y2 = Number(y1)) : (x2 = Number(x1));
obj[name2] = { x: x2, y: y2, tube: "gas" };
localStorage.setItem("a_gas", JSON.stringify(obj));
localStorage.setItem("m_gas", JSON.stringify(obj2));
} else {
obj2[name][name2] = 1;
obj2[name2][name] = 1;
localStorage.setItem("m_gas", JSON.stringify(obj2));
}
if (addType == "gas") {
apex_gas = obj;
matrix_gas = obj2;
} else {
apex = obj;
matrix = obj2;
}
}
function getAllTubes(m) {
let tubeObj = {};
for (let key1 in m) {
for (let key2 in m[key1]) {
let item = m[key1][key2];
if (item) {
let a = Number(key1.split("A")[1]);
let b = Number(key2.split("A")[1]);
let key = a < b ? "A" + a + "_" + "A" + b : "A" + b + "_" + "A" + a;
if (tubeObj[key] === undefined) tubeObj[key] = false;
}
}
}
return tubeObj;
}
function drawTubes() {
let tubeObj = getAllTubes(matrix);
for (let key in tubeObj) {
if (tubeObj[key] === false) {
let point = key.split("_");
let a = Number(point[0].split("A")[1]);
let b = Number(point[1].split("A")[1]);
let path = a < b ? "A" + a + "_" + "A" + b : "A" + b + "_" + "A" + a;
let item = {
x1: apex[point[0]].x,
y1: apex[point[0]].y,
x2: apex[point[1]].x,
y2: apex[point[1]].y,
};
if (specialTube[path]) {
drawSpecialTube(specialTube[path], item);
} else {
let item = {
x1: apex[point[0]].x,
y1: apex[point[0]].y,
x2: apex[point[1]].x,
y2: apex[point[1]].y,
point1: apex[point[0]],
point2: apex[point[1]],
};
item.type = item.x1 == item.x2 ? "v" : "h";
liquidTube(item);
}
}
}
if (isDrawPoint) {
for (let key in apex) {
if (apex[key].type != "switcher") {
ctx.font = "24px 黑体";
ctx.fillStyle = "#f00";
ctx.fillText(key, apex[key].x, apex[key].y);
}
}
}
}
function drawGasTubes() {
let tubeObj = getAllTubes(matrix_gas);
for (let key in tubeObj) {
if (tubeObj[key] === false) {
let point = key.split("_");
let a = Number(point[0].split("A")[1]);
let b = Number(point[1].split("A")[1]);
let path = a < b ? "A" + a + "_" + "A" + b : "A" + b + "_" + "A" + a;
let item = {
x1: apex_gas[point[0]].x,
y1: apex_gas[point[0]].y,
x2: apex_gas[point[1]].x,
y2: apex_gas[point[1]].y,
point1: apex_gas[point[0]],
point2: apex_gas[point[1]],
};
if (specialTube_gas[path]) {
drawSpecialTube(specialTube_gas[path], item);
} else {
item.type = item.x1 == item.x2 ? "v" : "h";
liquidTube(item);
}
}
}
if (isDrawPoint) {
for (let key in apex_gas) {
if (apex_gas[key].type != "switcher") {
ctx.font = "24px 黑体";
ctx.fillStyle = "#f00";
ctx.fillText(key, apex_gas[key].x, apex_gas[key].y);
}
}
}
}
var new_matrix = {};
function drawConnectTubes() {
for (let key in apex) {
if (apex[key].type && apex[key].type == "input") {
let arr = checkTubsForwards(matrix, apex, key);
if (arr.length) {
arr = arr.forEach((path) => {
let point = path.split("_");
let a = Number(point[0].split("A")[1]);
let b = Number(point[1].split("A")[1]);
path = a < b ? "A" + a + "_" + "A" + b : "A" + b + "_" + "A" + a;
let item = {
x1: apex[point[0]].x,
y1: apex[point[0]].y,
x2: apex[point[1]].x,
y2: apex[point[1]].y,
point1: apex[point[0]],
point2: apex[point[1]],
};
if (specialTube[path]) {
drawSpecialTube(specialTube[path], item, true);
} else {
item.type = item.x1 == item.x2 ? "v" : "h";
liquidTube(item, true);
}
});
}
}
}
}
function drawConnectGas() {
for (let key in apex_gas) {
if (apex_gas[key].type && apex_gas[key].type == "input") {
let arr = checkTubsForwards(matrix_gas, apex_gas, key);
if (arr.length) {
arr = arr.forEach((path) => {
let point = path.split("_");
let a = Number(point[0].split("A")[1]);
let b = Number(point[1].split("A")[1]);
path = a < b ? "A" + a + "_" + "A" + b : "A" + b + "_" + "A" + a;
let item = {
x1: apex_gas[point[0]].x,
y1: apex_gas[point[0]].y,
x2: apex_gas[point[1]].x,
y2: apex_gas[point[1]].y,
point1: apex_gas[point[0]],
point2: apex_gas[point[1]],
};
if (specialTube_gas[path]) {
drawSpecialTube(specialTube_gas[path], item, true);
} else {
item.type = item.x1 == item.x2 ? "v" : "h";
liquidTube(item, true);
}
});
}
}
}
}
function getNewArr(m) {
let arr = [];
for (let point1 in m) {
for (let point2 in m[point1]) {
arr.push(point1 + "_" + point2);
}
}
return arr;
}
function foreachMatrix(point1, output) {
for (let point2 in new_matrix[point1]) {
if (!new_matrix[point2] && output.indexOf(point2) < 0) {
if (new_matrix[point1]) delete new_matrix[point1][point2];
let keys = Object.keys(new_matrix[point1]);
if (!keys.length) {
delete new_matrix[point1];
for (let key in new_matrix) {
if (new_matrix[key] && new_matrix[key][point1]) {
foreachMatrix(key, output);
}
}
}
} else {
foreachMatrix(point2, output);
}
}
}
function checkTubsForwards(_matrix, _apex, point1, arr) {
arr = arr || [];
for (let point2 in _matrix[point1]) {
let a = Number(point1.split("A")[1]);
let b = Number(point2.split("A")[1]);
let path = a < b ? "A" + a + "_" + "A" + b : "A" + b + "_" + "A" + a;
let status = _apex[point2] && _apex[point2].switcher ? data["FMFK_" + _apex[point2].switcher.name] : false;
if (!status) status = _apex[point2].type == "pump" && data["HMI_B" + _apex[point2].pump + "YXZS"];
if (_apex[point2] && _apex[point2].type == "switcher" && !status) {
if (arr.indexOf(path) < 0) {
arr.push(path);
}
} else {
if (arr.indexOf(path) < 0) {
arr.push(path);
arr = checkTubsForwards(_matrix, _apex, point2, arr);
}
}
}
return arr;
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<script src="./assets/js/jquery-1.11.1.min.js"></script>
<script src="./assets/oxygen/matrix.js"></script>
<script src="./assets/js/oxygen.js"></script>
<style>
body,
html {
padding: 0;
margin: 0;
background-color: #002f63;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
position: relative;
color: #000;
}
canvas {
display: block;
margin: auto;
}
</style>
</head>
<body>
<div id="container" class="container">
<canvas
id="canvas"
onmousedown="clickDown(event)"
onmouseup="clickUp(event)"
width="2900"
height="1600"
></canvas>
</div>
</body>
</html>
<script>
var container,
canvas,
ctx,
scale,
deltaX = 0,
deltaY = 0,
width = 2900,
height = 1600,
fps = 2,
img1 = new Image(),
img2 = new Image(),
ratio = 1;
var number = 0;
var data = {};
$(function () {
let keys = Object.keys(apex);
number = keys.length ? Number(keys[keys.length - 1].split("A")[1]) : 0;
container = $("#container");
canvas = $("#canvas");
ctx = canvas[0].getContext("2d");
img1.src = "./assets/img/icon-1.png";
img2.src = "./assets/img/icon-2.png";
getSize();
draw();
});
function draw() {
let t = 1000 / fps;
ctx.save();
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "#002f63";
ctx.fillRect(0, 0, width, height);
ctx.translate(deltaX, deltaY);
ctx.scale(ratio, ratio);
drawInfo();
drawStatusBlock();
drawTubes();
drawTanks();
drawRocket();
drawCooler();
drawLiquidomes();
drawSensors();
ctx.drawImage(img1, 1285, 797, img1.width / 2.1, img1.height / 2.1);
ctx.restore();
setTimeout(() => {
draw();
}, 1000 / fps);
}
function drawTanks() {
let arr = [
{ x: 320, y: 700, name: "液氧固定罐A" },
{ x: 320, y: 1120, name: "液氧固定罐B" },
];
arr.forEach((item) => {
drawTank(item);
});
}
function getAllTubes(m) {
let tubeObj = {};
for (let key1 in m) {
for (let key2 in m[key1]) {
let item = m[key1][key2];
if (item) {
let a = Number(key1.split("A")[1]);
let b = Number(key2.split("A")[1]);
let key =
a < b
? "A" + a + "_" + "A" + b
: "A" + b + "_" + "A" + a;
if (tubeObj[key] === undefined) tubeObj[key] = false;
}
}
}
return tubeObj;
}
function drawTubes() {
let tubeObj = getAllTubes(matrix);
let { arr, apexArr } = getConnectTubes();
for (let key in tubeObj) {
if (tubeObj[key] === false) {
let point = key.split("_");
let a = Number(point[0].split("A")[1]);
let b = Number(point[1].split("A")[1]);
let path =
a < b ? "A" + a + "_" + "A" + b : "A" + b + "_" + "A" + a;
let item = {
x1: apex[point[0]].x,
y1: apex[point[0]].y,
x2: apex[point[1]].x,
y2: apex[point[1]].y,
point1: apex[point[0]],
point2: apex[point[1]],
};
item.type = item.x1 == item.x2 ? "v" : "h";
liquidTube(item, arr.indexOf(path) >= 0);
}
}
for (let key in apex) {
if (apex[key].type == "liquidome") {
drawLiquidome(apex[key]);
}
if (apex[key].type == "switcher") {
drawSwitcher(apex[key], apex[key].switcher.status);
}
if (apex[key].type == "output") {
drawOutput(apex[key]);
}
if (apex[key].apex_type) {
drawApex(apex[key], apexArr.indexOf(key) >= 0);
}
}
}
function getConnectTubes() {
let arr = [],
apexArr = [];
for (let key in apex) {
if (apex[key].type && apex[key].type == "input") {
let result = checkTubsForwards(key);
let a = new Set([...arr, ...result.arr]);
let b = new Set([...apexArr, ...result.apexArr]);
arr = [];
apexArr = [];
a.forEach((item) => {
arr.push(item);
});
b.forEach((item) => {
apexArr.push(item);
});
}
}
return { arr, apexArr };
}
var click_position = {},
click_timer = false,
isHold = false;
function clickDown(e) {
return;
if (click_timer) clearTimeout(click_timer);
isHold = false;
let x1 = parseInt(e.offsetX / scale / ratio) - deltaX / ratio;
let y1 = parseInt(e.offsetY / scale / ratio) - deltaY / ratio;
let name = "A" + (number + 1);
let isHave = false;
for (let key in apex) {
if (
Math.abs(apex[key].x - x1) <= 15 &&
Math.abs(apex[key].y - y1) <= 15
) {
isHave = true;
x1 = Number(apex[key].x);
y1 = Number(apex[key].y);
name = key.toString();
console.log(name);
sn = $("#sn").val();
if (sn) {
sn = sn == 999 ? "" : sn;
let s = { name: sn, dir: dir };
apex[key].type = "switcher";
apex[key].switcher = s;
localStorage.setItem("apex", JSON.stringify(apex));
}
break;
}
}
click_position = { x1, y1, name, isHave };
click_timer = setTimeout(() => {
isHold = true;
}, 500);
}
function clickUp(e) {
return;
let { x1, y1, name } = click_position;
if (!isHold) {
console.log(x1, y1, name);
return;
}
isHold = false;
if (!click_position.isHave) {
number++;
}
let x2 = parseInt(e.offsetX / scale / ratio) - deltaX / ratio;
let y2 = parseInt(e.offsetY / scale / ratio) - deltaY / ratio;
let name2 = "A" + (number + 1);
let isHave = false;
let addType = "";
let obj = apex;
let obj2 = matrix;
for (let key in obj) {
if (
Math.abs(obj[key].x - x2) <= 15 &&
Math.abs(obj[key].y - y2) <= 15
) {
isHave = true;
x2 = Number(obj[key].x);
y2 = Number(obj[key].y);
name2 = key.toString();
break;
}
}
if (!isHave) {
number++;
}
if (!click_position.isHave || !isHave) {
if (!click_position.isHave) {
obj[name] = { x: x1, y: y1 };
obj2[name] = {};
}
if (!isHave) {
obj[name2] = { x: x2, y: y2 };
obj2[name2] = {};
}
obj2[name][name2] = 1;
obj2[name2][name] = 1;
let w = Math.abs(x1 - x2);
let h = Math.abs(y1 - y2);
w > h ? (y2 = Number(y1)) : (x2 = Number(x1));
obj[name2] = { x: x2, y: y2 };
localStorage.setItem("apex", JSON.stringify(obj));
localStorage.setItem("matrix", JSON.stringify(obj2));
} else {
obj2[name][name2] = 1;
obj2[name2][name] = 1;
localStorage.setItem("matrix", JSON.stringify(obj2));
}
if (addType == "gas") {
} else {
apex = obj;
matrix = obj2;
}
}
</script>
