n0rdye/puzzle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code optimization, new log system, appp optimizawion

Browse Source
This commit is contained in:
N0rdye
2023-07-03 00:05:13 +05:00
parent af8e44d1ce
commit 3583e5e588
19 changed files with 681 additions and 542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
public/lib/inter.js
View File

@ -8,7 +8,7 @@ function get_count(clas){
return count;
}
function create(clas,x,y,body,id){
function create(clas,x,y,body,id,size){
let main_clas = clas.split(" ")[0];
// if (body == null || body == "") body = "[]";
let obj = document.createElement("img");
@ -18,7 +18,7 @@ function create(clas,x,y,body,id){
clas.forEach(cl => {
obj.classList.add(cl);
});
load_obj(main_clas,(db_data)=>{
load_obj(main_clas,"`img`,`name`,`description`,`width`,`height`",(db_data)=>{
if (db_data == null) {
delete objs[main_clas][id];
save(()=>{
@ -27,7 +27,12 @@ function create(clas,x,y,body,id){
}
else if (db_data != null){
obj.src = db_data["img"];
obj.title = `${db_data["name"]} \n ${db_data["description"]}`;
obj.title = `${db_data["name"]}\n${db_data["description"]}\nwidth:${db_data["width"]}см height:${db_data["height"]}см`;
// drag.transform = `translate(${drag.getAttribute("data-y")}px, ${drag.getAttribute("data-y")}px) scale(${db_data["width"] * 2} ${db_data["height"] * 2})`;
if(size){
obj.style.width = `${db_data["width"] * 2}px`;
obj.style.height = `${db_data["height"] * 2}px`;
}
}
})
obj.setAttribute("max-width","100px");
@ -41,7 +46,8 @@ function wall_size_change(type,value){
if(type != null && type == "width") {
if (value == null) scroll = document.getElementById("wall_width").value;
else scroll = value;
document.getElementById("wall_width_value").innerHTML = (Math.ceil((parseFloat(scroll)+0.1)*10)/ 10);
// document.getElementById("wall_width_value").innerHTML = (Math.ceil((parseFloat(scroll)+0.1)*10)/ 10);
document.getElementById("wall_width_value").innerHTML = scroll;
// console.log(scroll);
wall.style.width = `${scroll * 200}px`;
@ -50,7 +56,8 @@ function wall_size_change(type,value){
if(type != null && type == "height") {
if (value == null) scroll = document.getElementById("wall_height").value;
else scroll = value;
document.getElementById("wall_height_value").innerHTML = (Math.ceil((parseFloat(scroll)+0.1)*10)/ 10);
// document.getElementById("wall_height_value").innerHTML = (Math.ceil((parseFloat(scroll)+0.1)*10)/ 10);
document.getElementById("wall_height_value").innerHTML = scroll;
// console.log(scroll);
wall.style.height = `${scroll * 200}px`;
@ -71,21 +78,23 @@ function load_local(objss){
// console.log(keys,value["x"],value["y"],value["body"]);
// let count = Object.keys(objs[keys]).length;
// console.log(count);
create(keys+" drag",value["x"],value["y"],value["body"],key);
create(keys+" drag",value["x"],value["y"],value["body"],key,true);
}
})
}
else {
document.getElementById(`wall_${keys}`).value = values;
wall_size_change(keys,values);
// document.getElementById("drags").style.left = $(".dropzone")[0].getBoundingClientRect().x;
}
});
document.getElementById("drags").style.left = $(".dropzone")[0].getBoundingClientRect().x;
drag_start();
}
function load_proj(){
$.post( "/load_proj",{name:proj_name})
.done(function( res ) {
drag_start();
if(res["out"] == "good"){
// console.log("good");
// console.log(JSON.parse(`'${res["body"]}'`));
@ -107,7 +116,7 @@ function save(callback){
html2canvas(document.querySelector("body"),{height: 500, width:(window.innerWidth /1.65),x:(window.innerWidth / 5), y:250}).then(canvas => {
let scr = "";
console.log(canvas.toDataURL().length);
if (canvas.toDataURL().length < 100000) scr = canvas.toDataURL()
if (canvas.toDataURL().length < 120000) scr = canvas.toDataURL()
// console.log(scr);
$.post( "/save_proj", {proj:JSON.stringify(objs),name:proj_name,img:scr})
.done(function( res ) {
@ -130,8 +139,8 @@ function load_objs(callback){
});
}
function load_obj(name,callback){
$.post( "/get_obj",{name:name})
function load_obj(name,key,callback){
$.post( "/get_obj",{name:name,key:key})
.done(function( res ) {
if(res["out"] == "good"){
// console.log(res["body"]);
@ -152,13 +161,14 @@ function dragMoveListener (event) {
var y = (parseFloat(drag.getAttribute('data-y')) || 0) + event.dy
set_pos(drag,x,y);
}
let dragzone = document.getElementsByClassName('wall')[0];
interact('.drag').draggable({
inertia: true,
// modifiers: [
// interact.modifiers.restrictRect({restriction: 'parent',endOnly: true}),
// interact.modifiers.snap({targets: [interact.snappers.grid({ x: 5, y: 5 })],range: Infinity,relativePoints: [ { x: 0, y: 0 } ]}),],
// autoScroll: true,
modifiers: [
interact.modifiers.restrictRect({restriction: dragzone,endOnly: true}),
interact.modifiers.snap({targets: [interact.snappers.grid({ x: 2, y: 2 })],range: Infinity,relativePoints: [ { x: 0, y: 0 } ]}),
],
autoScroll: true,
listeners: {move: dragMoveListener, end (event) {}}
})
@ -166,13 +176,18 @@ interact('.trash').dropzone({
accept: '.drag',
overlap: 0.2,
ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target; zone.classList.add('drop-target');drag.classList.add('can-drop');},
ondragenter: function (event) {
var drag = event.relatedTarget;
var zone = event.target;
delete objs[drag.classList[0]][drag.id];
drag.remove();
zone.classList.add('drop-target');
drag.classList.add('can-drop');
},
ondragleave: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.remove('drop-target');drag.classList.remove('in_zone');drag.classList.remove('can-drop');},
ondrop: function (event) {
var drag = event.relatedTarget;
// console.log(drag.id);
delete objs[drag.classList[0]][drag.id];
drag.remove();
// console.log(objs);
drag.classList.add('in_zone')
drag.classList.remove('can-drop')
@ -217,11 +232,19 @@ interact('.createzone').dropzone({
ondragleave: function (event) {
var drag = event.relatedTarget;
var zone = event.target;
if(drag.classList[1] == "spawn" && drag.classList[0] == zone.classList[0]){
load_obj(drag.classList[0],"`height`, `width`",(db_data)=>{
// drag.transform = `translate(${drag.getAttribute("data-y")}px, ${drag.getAttribute("data-y")}px) scale(${db_data["width"] * 2} ${db_data["height"] * 2})`;
drag.style.width = `${db_data["width"] * 2}px`;
drag.style.height = `${db_data["height"] * 2}px`;
console.log(db_data);
})
let x = zone.getBoundingClientRect().left - document.getElementById("drags").getBoundingClientRect().left;
let y = zone.getBoundingClientRect().top - document.getElementById("drags").getBoundingClientRect().top;
create(`${zone.classList[0]} spawn drag`,x,y,`${zone.classList[0]}`,`none`);
drag.classList.remove('spawn');
}
zone.classList.remove('drop-target');
drag.classList.remove('spawn');
let x = zone.getBoundingClientRect().left + window.scrollX - 15;
let y = zone.getBoundingClientRect().top + window.scrollY - 32;
create(`${zone.classList[0]} drag spawn`,x,y,`${zone.classList[0]}`,`none`);
},
ondrop: function (event) {var drag = event.relatedTargetdrag.classList.remove('in_zone');drag.classList.remove('can-drop');},
ondropdeactivate: function (event) {var zone = event.target;zone.classList.remove('drop-active');zone.classList.remove('drop-target');}
@ -230,10 +253,10 @@ interact('.createzone').dropzone({
function drag_start() {
let zones = document.getElementsByClassName("createzone");
Object.entries(zones).forEach(([key, zone]) => {
let x = zone.getBoundingClientRect().left - scrollX - 15;
let y = zone.getBoundingClientRect().top - scrollY - 32;
let x = zone.getBoundingClientRect().left - document.getElementById("drags").getBoundingClientRect().left;
let y = zone.getBoundingClientRect().top - document.getElementById("drags").getBoundingClientRect().top;
// console.log(x,y);
create(`${zone.classList[0]} drag spawn`,x,y,`${zone.classList[0]}`,`none`);
create(`${zone.classList[0]} spawn drag`,x,y,`${zone.classList[0]}`,`none`);
});
}