1496 lines
60 KiB
JavaScript
1496 lines
60 KiB
JavaScript
// Scripting by Oleg Okhotnikov, contact - svoboda200786@gmail.com
|
||
// Скрипт работает с элементами управления
|
||
let editor_start = true;
|
||
let ctrl = false;
|
||
let shift = false;
|
||
let stroke_width = 1;
|
||
let button_active;
|
||
let zoom_size = 0;
|
||
let default_zoom = {
|
||
text: 3,
|
||
rect: 0,
|
||
circle: 0,
|
||
pencil: 0,
|
||
line: 0,
|
||
size: 2,
|
||
geometry: 2,
|
||
arrow: 0,
|
||
socket: 3,
|
||
cap: 2,
|
||
svg: 1
|
||
};
|
||
let arrow_size_dimension = [[13, 5],[19, 8],[31, 13],[37, 16]];
|
||
let arrow_dimension = [[13, 5],[19, 8],[26, 11],[29, 12],[36, 15],[38, 16],[45, 19],[55, 24]];
|
||
let socket_dimension = [18, 21, 23, 28, 30, 34, 37, 42];
|
||
let text_dimension = [10, 12, 13, 14, 16, 20, 24, 32];
|
||
let resize_value;
|
||
let scroll_val;
|
||
let middle_button = false;
|
||
const zoom_item = document.querySelectorAll(".zoom .top-menu-items div");
|
||
const back_canvas = document.querySelector("#back-canvas");
|
||
const btn_delete = document.querySelector("#delete");
|
||
const btn_copy = document.querySelector("#copy");
|
||
const scroll_block = document.querySelector(".canvas-container");
|
||
const elements = document.querySelectorAll(".top-menu-button#elements .top-menu-items");
|
||
const palette = document.querySelector(".palette");
|
||
const scale_indicator = document.querySelector("#scale");
|
||
let element_pos = new Image;
|
||
let cur_ico = {
|
||
"cross": "url('cursors/cross.svg') " + element_ico_size / 2 + " " + element_ico_size / 2 + ", auto",
|
||
"pencil": "url('cursors/pencil.svg') " + 0 + " " + element_ico_size + ", auto",
|
||
"pointer": "url('cursors/move.svg') " + 0 + " " + 0 + ", auto",
|
||
"rotate": "url('cursors/rotate.svg') " + 8 + " " + 8 + ", auto"
|
||
}
|
||
canvas.freeDrawingCursor = cur_ico.pencil;
|
||
canvas.hoverCursor = cur_ico.pointer;
|
||
canvas.moveCursor = cur_ico.pointer;
|
||
let old_mouse_X = 0;
|
||
let old_arrow_X = 0;
|
||
let old_arrow_Y = 0;
|
||
let line_min_length = 20;
|
||
let geometry_obj = null;
|
||
let window_zoom = [0.5, 0.75, 1, 1.5, 2, 3, 4, 6, 8];
|
||
let window_zoom_index = 2;
|
||
window.global_zoom = 1;
|
||
let new_zoom = 1;
|
||
element_pos.active = 0;
|
||
canvas.defaultCursor_old = 'default';
|
||
let color_cell = document.querySelectorAll(".color-cell");
|
||
var editor_command;
|
||
var fake_selection_obj;
|
||
// temp — прямоугольник для расчета точного положения линии в _render в скрипте fabric.js.
|
||
// Стандартные свойства x1, y1, x2, y2 у линии дают погрешность,
|
||
// из-за чего стрелка (arrow) становится не посередине линии, что особенно заметно при большой толщине
|
||
let temp = editor_obj.add_rect(null, true, canvas.width, canvas.height, 200, 200, "#000", "transparent", "temp");
|
||
// temp.visible = false;
|
||
// canvas.add(temp);
|
||
// temp.excludeFromExport = true; // temp не добавляется на канвас и соответсвенно не попадает в экспорт (также в экспортне попадают объекты с visible = true)
|
||
var mouse_down_flag = false;
|
||
var rotate_flag = false;
|
||
let top_menu_buttons = document.querySelectorAll(".top-menu-button");
|
||
|
||
// scale_indicator.active = zoom_item[0];
|
||
for(let i = 0; i < zoom_item.length; i++){
|
||
zoom_item[i].setAttribute("size", i);
|
||
zoom_item[i].parentElement.addEventListener("click", function(){
|
||
setZoomingParam(i);
|
||
})
|
||
}
|
||
scale_indicator.addEventListener("mouseover", function(){
|
||
var item = canvas.getActiveObject();
|
||
if(item && !item.is_background){
|
||
var selected_item = document.querySelector(".zoom-size-selected");
|
||
if(selected_item){
|
||
selected_item.classList.remove("zoom-size-selected");
|
||
}
|
||
|
||
scale_indicator.active = document.querySelector("[size='" + item.parent.zoom_size + "']");
|
||
if(scale_indicator.active){
|
||
scale_indicator.active.classList.add("zoom-size-selected");
|
||
}
|
||
}
|
||
else{
|
||
scale_indicator.active = document.querySelector("[size='" + zoom_size + "']");
|
||
scale_indicator.active.classList.add("zoom-size-selected");
|
||
//scale_indicator.setAttribute("scale_value", (zoom_size + 1) + "x");
|
||
}
|
||
})
|
||
function setZoomingParam(i, item){
|
||
zoom_size = i;
|
||
|
||
if(scale_indicator.active){
|
||
scale_indicator.active.classList.remove("zoom-size-selected");
|
||
}
|
||
|
||
zoom_item[i].classList.add("zoom-size-selected");
|
||
|
||
var item = canvas.getActiveObject();
|
||
if(item){
|
||
changeStrokeWidth();
|
||
}
|
||
scale_indicator.active = zoom_item[i];
|
||
//scale_indicator.setAttribute("scale_value", (zoom_size + 1) + "x");
|
||
}
|
||
function selectStrokeWidth(type, name){
|
||
var stroke_width; // local var
|
||
switch(type){
|
||
case "size":
|
||
case "socket":
|
||
case "geometry":
|
||
if(name == "geometry_line_part1" || name == "geometry_line_part2"){
|
||
// десятые доли, чтобы не было пикселбной лесенки
|
||
if(zoom_size == 6 || zoom_size == 7){
|
||
stroke_width = 2.1;
|
||
}
|
||
else{
|
||
stroke_width = 1.1;
|
||
}
|
||
}
|
||
else{
|
||
if(zoom_size == 7){
|
||
stroke_width = 4;
|
||
}
|
||
else{
|
||
stroke_width = Math.ceil((zoom_size + 1) / 3);
|
||
}
|
||
}
|
||
break;
|
||
case "cap":
|
||
if(zoom_size == 7){
|
||
stroke_width = 4;
|
||
}
|
||
else{
|
||
stroke_width = Math.ceil((zoom_size + 1) / 3);
|
||
}
|
||
break;
|
||
default:
|
||
stroke_width = zoom_size + 1;
|
||
break;
|
||
}
|
||
return stroke_width;
|
||
}
|
||
|
||
function changeStrokeWidth(item){
|
||
if (canvas.isDrawingMode == 1){
|
||
canvas.freeDrawingBrush.width = zoom_size + 1;
|
||
}
|
||
if(item == undefined){
|
||
var active_object = canvas.getActiveObject();
|
||
if(active_object && !active_object.is_background){
|
||
item = active_object;
|
||
}
|
||
}
|
||
if(item != null && !/back/.test(item.groupName) && !/legend/.test(item.groupName) && zoom_size + 1 > 0 && !item.isEditing){
|
||
oldParam(item);
|
||
changeStrokeWidth_subfunction(item);
|
||
let shape_type = /shape_svg/.test(item.groupName);
|
||
if(!shape_type){ // если не svg,
|
||
//проходимся по всем частям составного объекта
|
||
if(item.parent.objects != undefined){
|
||
for(let i of item.parent.objects){
|
||
changeStrokeWidth_subfunction(item.parent[i]);
|
||
}
|
||
// ждем 10 милисекунд пока обновятся параметры, потом перерисовываем сцену
|
||
setTimeout(function(){
|
||
canvas.renderAll();
|
||
}, 10)
|
||
}
|
||
if(item.parent._objects != undefined){ // выделение или группа
|
||
for(let obj of item.parent._objects){
|
||
changeStrokeWidth_subfunction(obj, "group");
|
||
}
|
||
|
||
// пересчитываем размеры выделения после changeStrokeWidth_subfunction,
|
||
// поскольку они меняются в зависимости от размера линий, шрифта и т.п.
|
||
setTimeout(function(){
|
||
item._restoreObjectsState();
|
||
fabric.util.resetObjectTransform(item);
|
||
item._calcBounds();
|
||
item._updateObjectsCoords();
|
||
item.dirty = true;
|
||
item.setCoords();
|
||
canvas.renderAll();
|
||
}, 10)
|
||
}
|
||
canvas.renderAll();
|
||
}
|
||
}
|
||
if(item){
|
||
changes(item, "5");
|
||
}
|
||
var ctx = canvas.contextTop;
|
||
ctx.clearRect(0, 0, canvas2.width, canvas2.height);
|
||
drawBounds(item);
|
||
}
|
||
function changeStrokeWidth_subfunction(item, active_object_type){
|
||
let shape_type = /shape_svg.*/.test(item.groupName);
|
||
if(!shape_type && item.type != "activeSelection"
|
||
&& (!/socket.*/.test(item.parent.groupName)
|
||
|| (!/circle.*/.test(item.name)
|
||
&& item != item.parent) )
|
||
&& item.type != "polyline" && item.type != "path"
|
||
&& item.type != "image" && item.groupType != "crop"){
|
||
item.strokeWidth = selectStrokeWidth(item.groupType, item.groupType + "_" + item.name);
|
||
item.parent.zoom_size = zoom_size;
|
||
}
|
||
else if(shape_type){
|
||
if(element_pos.width / element_pos.height > 1){
|
||
item.scaleToWidth(dimension[item.caption_type][zoom_size][0]);
|
||
}
|
||
else{
|
||
item.scaleToHeight(dimension[item.caption_type][zoom_size][1]);
|
||
}
|
||
item.parent.zoom_size = zoom_size;
|
||
canvas.requestRenderAll();
|
||
}
|
||
if(item.text != undefined){
|
||
item.fontSize = text_dimension[zoom_size];
|
||
if(/shape_text.*/.test(item.groupName)){
|
||
item.setCoords();
|
||
}
|
||
}
|
||
if( ( (item.type == "polyline" || item.type == "path") && (item.pointType == "arrow_start"
|
||
|| item.pointType == "arrow_end") ) || item.type == "circle" && /cap.*/.test(item.groupName)){
|
||
// теперь изменение радиуса в fabric.js в render
|
||
let arrow = item;
|
||
scaleArrow(arrow);
|
||
}
|
||
if(item.type == "path" && item.groupType == "shape_pencil"){
|
||
item.strokeWidth = zoom_size + 1;
|
||
}
|
||
if(/socket.*/.test(item.groupName)){
|
||
scaleSocket(item.parent);
|
||
}
|
||
}
|
||
|
||
function scaleSocket(socket){
|
||
var zoom = socket_dimension[zoom_size] / socket_dimension[0];
|
||
|
||
socket.rect.scale(zoom);
|
||
socket.rect_back.scale(zoom);
|
||
}
|
||
|
||
function scaleArrow(arrow){
|
||
var old_angle = arrow.angle;
|
||
arrow.angle = 0;
|
||
if(/size.*/.test(arrow.groupName) || /socket.*/.test(arrow.groupName) || /geometry.*/.test(arrow.groupName)){
|
||
if(zoom_size == 7){
|
||
var id = 3;
|
||
}
|
||
else{
|
||
var id = Math.floor((zoom_size) / 3);
|
||
}
|
||
arrow.scaleX = arrow_dimension[id][0] / arrow.width;
|
||
arrow.scaleY = arrow_dimension[id][1] / arrow.height;
|
||
}
|
||
if(/arrow.*/.test(arrow.groupName)){
|
||
arrow.scaleX = arrow_dimension[zoom_size][0] / arrow.width;
|
||
arrow.scaleY = arrow_dimension[zoom_size][1] / arrow.height;
|
||
}
|
||
|
||
if(/cap.*/.test(arrow.groupName)){
|
||
// теперь изменение радиуса в fabric.js в render
|
||
// var diameter = arrow.parent.line.strokeWidth * 3 + 1;
|
||
// arrow.radius = diameter / 2;
|
||
}
|
||
|
||
// Обновление положения стрелки
|
||
if(arrow.parent && arrow.name != "arrow2" && arrow.name != "arrow_part2"){
|
||
if(!/socket.*/.test(arrow.parent.groupName)){
|
||
setTimeout(function(){
|
||
var fake_line = {
|
||
text2: arrow.parent.text2,
|
||
parent: arrow.parent,
|
||
line: {
|
||
x1: arrow.parent.arrow.left,
|
||
y1: arrow.parent.arrow.top,
|
||
x2: arrow.parent.arrow2.left,
|
||
y2: arrow.parent.arrow2.top,
|
||
}
|
||
}
|
||
textRotate(fake_line);
|
||
}, 10);
|
||
}
|
||
else{
|
||
setTimeout(function(){
|
||
var fake_line = {
|
||
text2: arrow.parent.line_part1.text2,
|
||
parent: arrow.parent,
|
||
line: {
|
||
x1: arrow.parent.arrow_part1.left,
|
||
y1: arrow.parent.arrow_part1.top,
|
||
x2: arrow.parent.left,
|
||
y2: arrow.parent.top
|
||
}
|
||
}
|
||
textRotate(fake_line);
|
||
fake_line = {
|
||
text2: arrow.parent.line_part2.text2,
|
||
parent: arrow.parent,
|
||
line: {
|
||
x1: arrow.parent.arrow_part2.left,
|
||
y1: arrow.parent.arrow_part2.top,
|
||
x2: arrow.parent.left,
|
||
y2: arrow.parent.top
|
||
}
|
||
}
|
||
textRotate(fake_line);
|
||
}, 10);
|
||
}
|
||
}
|
||
arrow.setCoords()
|
||
arrow.angle = old_angle;
|
||
}
|
||
|
||
for(let i = 0; i < color_cell.length; i++){
|
||
color_cell[i].setAttribute("color", getComputedStyle(color_cell[i]).backgroundColor);
|
||
color_cell[i].addEventListener("click", function(){
|
||
if(!mouse_down_flag){
|
||
fieldcolor = getComputedStyle(this).backgroundColor;
|
||
changeColor();
|
||
}
|
||
});
|
||
}
|
||
|
||
function changeColor(item){
|
||
if (canvas.isDrawingMode == 1){
|
||
canvas.freeDrawingBrush.color = fieldcolor;
|
||
}
|
||
if(item == undefined){
|
||
item = canvas.getActiveObject();
|
||
}
|
||
if(item != null && !/back/.test(item.groupName) && !item.isEditing){
|
||
oldParam(item);
|
||
changeColor_subfunction(item);
|
||
var has_svg = false;
|
||
if( (item.parent.objects || item.parent._objects != undefined) ){ // если не примтив,
|
||
//проходимся по всем частям составного объекта
|
||
if(item.parent.objects != undefined){
|
||
for(let i of item.parent.objects){
|
||
if(item.parent[i].groupType == "shape_svg"){
|
||
has_svg = true;
|
||
}
|
||
if(item.parent[i] != item){
|
||
changeColor_subfunction(item.parent[i])
|
||
}
|
||
}
|
||
}
|
||
if(item.parent._objects != undefined){ // выделение или группа и не часть другого объекта
|
||
for(let obj of item.parent._objects){
|
||
if(obj.groupType == "shape_svg"){
|
||
has_svg = true;
|
||
}
|
||
changeColor_subfunction(obj)
|
||
}
|
||
}
|
||
}
|
||
|
||
changes(item, "6");
|
||
if(has_svg){
|
||
editor_obj.add_legend();
|
||
}
|
||
canvas.renderAll();
|
||
}
|
||
}
|
||
|
||
function changeColor_subfunction(item){
|
||
if( ( item.type == "path" && item.groupType != "shape_pencil") || item.type == "polygon" || item.type == "i-text" || item.type == "textbox"
|
||
|| item.colorable || item.colorable == "undefined"){
|
||
item.fill = fieldcolor;
|
||
}
|
||
else if( (item.stroke_colorable || item.stroke_colorable == undefined) && item.groupType != "shape_svg" ){ // иначе - меняем цвет заливки
|
||
item.stroke = fieldcolor;
|
||
}
|
||
}
|
||
|
||
for (let i = 0; i < top_menu_buttons.length; i++){
|
||
let _this = top_menu_buttons[i];
|
||
if(_this.id != "" && _this.dataset.btn_type != "tool"){
|
||
|
||
top_menu_buttons[i].addEventListener("click", function(){
|
||
editor_command = this.id;
|
||
hideLens();
|
||
});
|
||
}
|
||
if(top_menu_buttons[i].closest(".panel").classList.contains("left-menu") && top_menu_buttons[i].dataset.btn_type != "tool"){
|
||
top_menu_buttons[i].addEventListener("click", function(){
|
||
showToolName(this);
|
||
});
|
||
}
|
||
else{
|
||
element_cursor();
|
||
}
|
||
};
|
||
|
||
function showToolName(element, change_cursor = true){
|
||
var styles = window.getComputedStyle(element,':before');
|
||
var img = styles['mask'];
|
||
var text_field = document.getElementById("selected-tool");
|
||
text_field.classList.remove("mfp-hide");
|
||
text_field.style = '--icon-img: ' + img;
|
||
var text = element.getAttribute("value")
|
||
text_field.setAttribute("value", text);
|
||
|
||
hideLens();
|
||
|
||
if(change_cursor){
|
||
canvas.defaultCursor = cur_ico.cross;
|
||
canvas.defaultCursor_old = canvas.defaultCursor;
|
||
}
|
||
|
||
if(!scale_indicator.active){
|
||
if(element.classList.contains("top-menu-items")){
|
||
zoom_size = default_zoom["svg"];
|
||
}
|
||
else{
|
||
zoom_size = default_zoom[element.id];
|
||
}
|
||
//scale_indicator.setAttribute("scale_value", (zoom_size + 1) + "x");
|
||
}
|
||
}
|
||
for(let i = 0; i < elements.length; i++){
|
||
elements[i].addEventListener("click", function(e){
|
||
showToolName(this, false);
|
||
canvas.discardActiveObject().renderAll();
|
||
if(button_active != undefined){
|
||
document.querySelector("#" + button_active).classList.remove("top-menu-button-selected");
|
||
}
|
||
element_pos.active = 1;
|
||
element_pos.src = "icons/3_" + this.id + ".svg";
|
||
element_pos.id = this.id;
|
||
element_pos.i = i;
|
||
canvas.defaultCursor_old = canvas.defaultCursor;
|
||
canvas.defaultCursor = 'none';
|
||
editor_command = "svg";
|
||
let array = canvas.getObjects();
|
||
// for(let n in array){
|
||
// array[n].selectable = false;
|
||
// }
|
||
})
|
||
}
|
||
document.querySelector("#pointer").addEventListener("click", function(){
|
||
element_cursor();
|
||
});
|
||
function element_cursor(from_exit_editing){ // очистка (элеменирование) курсора, обнуление переменных по esc или нажатию по полю
|
||
if(geometry_obj){
|
||
var item = geometry_obj;
|
||
oldParam(item);
|
||
changes(item, "7");
|
||
actionsHist[actionsIndex].flag = 'add';
|
||
actionsHist.index = item.index;
|
||
}
|
||
if(!from_exit_editing){ //если не после завершения редактирования текста составного элемента
|
||
editor_command = ""; // очищаем переменную, в которой хранится тип создаваемого объекта
|
||
hideLens()
|
||
if(button_active != undefined && button_active != "move"){
|
||
document.querySelector("#" + button_active).classList.remove("top-menu-button-selected");
|
||
}
|
||
button_active = undefined;
|
||
// canvas.defaultCursor = canvas.defaultCursor_old;
|
||
// canvas.defaultCursor_old = cur_ico.pointer;
|
||
}
|
||
|
||
geometry_obj = null;
|
||
|
||
mouse_down_flag = false;
|
||
|
||
if(element_pos.id){
|
||
var sizeX = dimension[element_pos.id][zoom_size][0] * window.global_zoom;
|
||
var sizeY = dimension[element_pos.id][zoom_size][1] * window.global_zoom;
|
||
canvas.contextTop.clearRect(element_pos.xor - sizeX / 2, element_pos.yor - sizeY / 2, sizeX, sizeY);
|
||
element_pos.id = "";
|
||
}
|
||
|
||
element_pos.active = 0;
|
||
if(group.cloneOne){
|
||
let obj = canvas.getActiveObject();
|
||
if(obj.type == "activeSelection"){
|
||
let objectsInSelection = obj._objects;
|
||
canvas.discardActiveObject();
|
||
objectsInSelection.forEach(function(object) {
|
||
canvas.remove(object);
|
||
});
|
||
}
|
||
else{
|
||
canvas.remove(obj);
|
||
}
|
||
// index = index_before.index;
|
||
group.cloneOne = false;
|
||
}
|
||
let array = canvas.getObjects();
|
||
|
||
var text_field = document.getElementById("selected-tool");
|
||
text_field.classList.add("mfp-hide");
|
||
text_field.style = '--icon-img: url("")';
|
||
|
||
if(button_active != "move"){
|
||
document.getElementById("pointer").click();
|
||
}
|
||
|
||
}
|
||
document.querySelector(".left-menu").addEventListener("click", function(e){
|
||
panelButtonFunctions(e);
|
||
});
|
||
document.querySelector(".top-menu").addEventListener("click", function(e){
|
||
panelButtonFunctions(e);
|
||
});
|
||
function panelButtonFunctions(e){
|
||
if(!/zoom.*/.test(e.target.className) && e.target.id != "undo-btn" && e.target.id != "redo-btn" && e.target.innerHTML == ""){
|
||
if(e.target.className != "color-cell color-cell-active"){
|
||
canvas.isDrawingMode = 0;
|
||
}
|
||
|
||
switch(e.target.id){
|
||
case "pointer":
|
||
canvas.defaultCursor = cur_ico.pointer;
|
||
canvas.defaultCursor_old = canvas.defaultCursor;
|
||
break;
|
||
case "selection":
|
||
canvas.defaultCursor = cur_ico.cross;
|
||
canvas.defaultCursor_old = canvas.defaultCursor;
|
||
editor_obj.add_selection();
|
||
break;
|
||
case "pencil":
|
||
canvas.freeDrawingBrush.width = zoom_size + 1;
|
||
canvas.freeDrawingBrush.color = fieldcolor;
|
||
canvas.defaultCursor = cur_ico.pencil;
|
||
canvas.defaultCursor_old = canvas.defaultCursor;
|
||
canvas.isDrawingMode = 1;
|
||
break;
|
||
}
|
||
|
||
if (e.target.classList.contains("top-menu-button")){
|
||
if(button_active != undefined && e.target.id != "stick"){
|
||
document.querySelector("#" + button_active).classList.remove("top-menu-button-selected");
|
||
}
|
||
if(!e.target.classList.contains("top-menu-button-selected")){
|
||
if(e.target.id != "move"){
|
||
e.target.classList.add("top-menu-button-selected");
|
||
}
|
||
|
||
if(e.target.id != "stick"){
|
||
button_active = e.target.id;
|
||
}
|
||
if(e.target.dataset.btn_type != "tool"){
|
||
element_pos.active = 2;
|
||
}
|
||
else{ // не фигуры, не объекты
|
||
element_pos.active = 0;
|
||
}
|
||
}
|
||
else{
|
||
if(e.target.id != "stick"){
|
||
element_cursor();
|
||
}
|
||
if(e.target.id != "move"){
|
||
e.target.classList.remove("top-menu-button-selected");
|
||
}
|
||
}
|
||
if(e.target.id == "move"){
|
||
e.target.classList.toggle("top-menu-button-selected");
|
||
}
|
||
else if(e.target.id != "stick"){
|
||
document.querySelector("#move").classList.remove("top-menu-button-selected");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
document.querySelector(".palette").addEventListener("click", function(e){
|
||
if(e.target != this){
|
||
if(this.active != undefined){
|
||
this.active.classList.remove("color-cell-active");
|
||
}
|
||
e.target.classList.add("color-cell-active");
|
||
this.active = e.target;
|
||
}
|
||
});
|
||
document.addEventListener("keydown", function(e){
|
||
let item = canvas.getActiveObject();
|
||
switch(e.key){
|
||
case "Delete":
|
||
if(item && !item.isEditing){
|
||
deleteObj(item);
|
||
}
|
||
break;
|
||
case "Escape":
|
||
element_cursor();
|
||
canvas.isDrawingMode = 0;
|
||
break;
|
||
case "Shift":
|
||
shift = true;
|
||
break;
|
||
case "Control":
|
||
ctrl = true;
|
||
break;
|
||
case "ArrowLeft":
|
||
moveByStep(-1, 0);
|
||
break;
|
||
case "ArrowRight":
|
||
moveByStep(1, 0);
|
||
break;
|
||
case "ArrowUp":
|
||
moveByStep(0, -1);
|
||
break;
|
||
case "ArrowDown":
|
||
moveByStep(0, 1);
|
||
break;
|
||
}
|
||
if(e.ctrlKey){
|
||
if(e.keyCode == 67 || e.keyCode == 68){
|
||
e.preventDefault();
|
||
editor_obj.clone();
|
||
}
|
||
if(e.keyCode == 86){
|
||
e.preventDefault();
|
||
if(group.cloneOne){ // __onMouseDown в fabric.js, там установлен getActiveObject().setCoords()
|
||
let item = canvas.getActiveObject();
|
||
editor_obj.setClone(item);
|
||
// item.hasControls = true;
|
||
// canvas.setActiveObject(item);
|
||
canvas.renderAll();
|
||
element_cursor();
|
||
}
|
||
}
|
||
if(e.keyCode == 72){
|
||
e.preventDefault();
|
||
legend_back.visible = !legend_back.visible;
|
||
canvas.discardActiveObject();
|
||
canvas.renderAll();
|
||
}
|
||
let array = canvas.getObjects();
|
||
for(var i in array){
|
||
let shape_type = /legend.*/.test(array[i].groupName);
|
||
if(shape_type){
|
||
if(!legend_back.visible){
|
||
array[i].visible = false;
|
||
}
|
||
else{
|
||
array[i].visible = true;
|
||
}
|
||
canvas.bringToFront(array[i]).renderAll();
|
||
}
|
||
}
|
||
}
|
||
|
||
if (e.ctrlKey && e.code == "KeyZ") {
|
||
e.preventDefault();
|
||
myUndo.click();
|
||
poupup.classList.add("mfp-hide");
|
||
}
|
||
if (e.ctrlKey && e.code == "KeyX") {
|
||
e.preventDefault();
|
||
myRedo.click();
|
||
poupup.classList.add("mfp-hide");
|
||
}
|
||
});
|
||
document.addEventListener("keyup", function(e){
|
||
ctrl = false;
|
||
shift = false;
|
||
});
|
||
btn_copy.addEventListener("click", function(){//
|
||
editor_obj.clone();
|
||
});
|
||
btn_delete.addEventListener("click", function(){//
|
||
onObjectRemoved(canvas.getActiveObject());
|
||
deleteObj();
|
||
});
|
||
function deleteObj(item, flag){
|
||
if (item == undefined){
|
||
var item = canvas.getActiveObject();
|
||
}
|
||
if (!group.cloneOne && item != undefined && !/back/.test(item.groupName) && !/legend/.test(item.groupName)){
|
||
let shape_type = /shape.*/.test(item.groupName);
|
||
let has_svg = false;
|
||
if(!shape_type || item.type == "activeSelection"){ // если не примитив
|
||
// let array = canvas.getObjects();
|
||
if(!flag){ // если вызываем не после отмены создания, иначе просто скрываем и не перезаписываем свойства
|
||
// // с помощью oldParam
|
||
oldParam(item);
|
||
}
|
||
if(item.parent.objects != undefined){
|
||
for(let i of item.parent.objects){
|
||
item.parent[i].visible = false;
|
||
shape_type = /shape_svg.*/.test(item.parent[i].groupName);
|
||
if(shape_type){
|
||
has_svg = true;
|
||
}
|
||
}
|
||
var ctx = canvas.contextTop;
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
}
|
||
if(item.parent._objects != undefined){ // выделение или группа и не часть другого объекта
|
||
for(let obj of item.parent._objects){
|
||
obj.visible = false;
|
||
shape_type = /shape_svg.*/.test(obj.groupName);
|
||
if(shape_type){
|
||
has_svg = true;
|
||
}
|
||
}
|
||
}
|
||
if(!flag){ // если вызываем не после отмены создания
|
||
onObjectRemoved(item);
|
||
}
|
||
}
|
||
else{
|
||
if(!flag){ // если вызываем не после отмены создания
|
||
oldParam(item);
|
||
}
|
||
item.visible = false;
|
||
if(!flag){
|
||
onObjectRemoved(item);
|
||
}
|
||
shape_type = /shape_svg.*/.test(item.groupName);
|
||
if(shape_type){
|
||
has_svg = true;
|
||
}
|
||
}
|
||
// var ctx = canvas.contextTop;
|
||
// ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
canvas.discardActiveObject();
|
||
// shape_type = /shape_svg.*/.test(item.groupName);
|
||
if(has_svg){
|
||
editor_obj.add_legend();
|
||
}
|
||
}
|
||
canvas.renderAll();
|
||
}
|
||
|
||
canvas.on('mouse:move', function(e){
|
||
document.body.style.cursor = "default";
|
||
if(!canvas.isDragging){
|
||
if(button_active == "move"){
|
||
canvas.upperCanvasEl.style.cursor = "grab";
|
||
}
|
||
else if(canvas.upperCanvasEl.style.cursor.split("-")[1] != "resize" && editor_command != "svg" && !rotate_flag){
|
||
if(document.getElementById("selection").classList.contains("top-menu-button-selected") && (e.target != canvas._activeObject || !e.target && !canvas._activeObject) ){
|
||
canvas.upperCanvasEl.style.cursor = cur_ico["cross"]
|
||
}
|
||
else{
|
||
canvas.upperCanvasEl.style.cursor = canvas.defaultCursor_old;
|
||
}
|
||
}
|
||
|
||
}
|
||
else{
|
||
canvas.defaultCursor = "grabbing";
|
||
canvas.upperCanvasEl.style.cursor = "grabbing";
|
||
}
|
||
|
||
// if(document.getElementById("selection").classList.contains("top-menu-button-selected") && (e.target != canvas._activeObject || !e.target && !canvas._activeObject) ){
|
||
// console.log("1: ");
|
||
// canvas.upperCanvasEl.style.cursor = cur_ico["cross"]
|
||
// }
|
||
// else{
|
||
// canvas.upperCanvasEl.style.cursor = canvas.defaultCursor_old
|
||
// }
|
||
|
||
if(!move_flag && (!canvas.getActiveObject() || canvas.getActiveObject() == canvas.backgroundImage) && !top_panel_display ){
|
||
resizeBG(e);
|
||
}
|
||
})
|
||
function resizeBG(e){
|
||
if(canvas.backgroundImage){
|
||
canvas.backgroundImage.canvas = canvas;
|
||
// canvas.backgroundImage.drawControls(canvas.lowerCanvasEl.getContext('2d'));
|
||
}
|
||
if(canvas.backgroundImage && canvas.backgroundImage.oCoords && !mouse_down_flag){
|
||
|
||
let left_border = canvas.backgroundImage.oCoords.tl.x;
|
||
let right_border = canvas.backgroundImage.oCoords.tr.x;
|
||
let top_border = canvas.backgroundImage.oCoords.tl.y;
|
||
let bottom_border = canvas.backgroundImage.oCoords.bl.y;
|
||
|
||
var luft = 10;
|
||
if( (e.pointer.x >= left_border - luft && e.pointer.x <= left_border + luft ||
|
||
e.pointer.x >= right_border - luft && e.pointer.x <= right_border + luft) ){
|
||
// canvas.backgroundImage.hasControls = true;
|
||
if(canvas.getActiveObject() != canvas.backgroundImage){
|
||
canvas.setActiveObject(canvas.backgroundImage);
|
||
canvas.backgroundImage.canvas = canvas;
|
||
// canvas.backgroundImage.drawControls(canvas.lowerCanvasEl.getContext('2d'));
|
||
}
|
||
}
|
||
else if( (e.pointer.y <= bottom_border + luft && e.pointer.y >= bottom_border - luft ||
|
||
e.pointer.y >= top_border - luft && e.pointer.y <= top_border + luft) ){
|
||
// canvas.backgroundImage.hasControls = true;
|
||
if(canvas.getActiveObject() != canvas.backgroundImage){
|
||
canvas.setActiveObject(canvas.backgroundImage);
|
||
canvas.backgroundImage.canvas = canvas;
|
||
// canvas.backgroundImage.drawControls(canvas.lowerCanvasEl.getContext('2d'));
|
||
}
|
||
}
|
||
else{
|
||
if(canvas.getActiveObject() == canvas.backgroundImage){
|
||
canvas._activeObject = null;
|
||
// canvas.renderAll();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function drawSVGElements(e, obj, flag){
|
||
if(!obj){
|
||
obj = canvas.getActiveObject();
|
||
}
|
||
if(element_pos.active != 0 && !mouse_down_flag){
|
||
|
||
canvas.defaultCursor = 'none';
|
||
if(!flag){
|
||
element_pos.xor = e.pointer.x;
|
||
element_pos.yor = e.pointer.y;
|
||
}
|
||
|
||
if(editor_command != "pencil" && !(obj != undefined && obj.isEditing) && element_pos.active != 2){
|
||
canvas.contextTop.fillStyle = fieldcolor;
|
||
// canvas.defaultCursor = "default"; // отладка
|
||
var sizeX = dimension[element_pos.id][zoom_size][0] * window.global_zoom;
|
||
var sizeY = dimension[element_pos.id][zoom_size][1] * window.global_zoom;
|
||
canvas.contextTop.fillRect(element_pos.xor - sizeX/2, element_pos.yor - sizeY/2, sizeX, sizeY);
|
||
canvas.contextTop.globalCompositeOperation = 'destination-atop';
|
||
canvas.contextTop.drawImage(element_pos, 0, 0, element_pos.width, element_pos.height, element_pos.xor - sizeX / 2, element_pos.yor - sizeY / 2, sizeX, sizeY);
|
||
}
|
||
}
|
||
else{
|
||
canvas.contextTop.globalCompositeOperation = 'source-over';
|
||
}
|
||
}
|
||
|
||
canvas.on('mouse:move', function(e){
|
||
let item = canvas.getObjects()[canvas.getObjects().length - 1];
|
||
if(mouse_down_flag && editor_command != undefined && editor_command != "" && editor_command != "text" && editor_command != "socket"
|
||
&& editor_command != "svg" && editor_command != "pencil" && canvas.getActiveObject() == undefined && !text_editing){
|
||
let length = calcLineLength({x1: old_arrow_X, y1: old_arrow_Y, x2: canvas.getPointer(e.e).x, y2: canvas.getPointer(e.e).y});
|
||
if(length >= line_min_length || editor_command == "rect" || editor_command == "circle"){
|
||
if(typeof editor_obj["add_" + editor_command] == "function"){
|
||
editor_obj["add_" + editor_command](e);
|
||
}
|
||
}
|
||
}
|
||
mousePointer(e);
|
||
let obj = canvas.getActiveObject();
|
||
|
||
if(element_pos.width / element_pos.height > 2){
|
||
element_ico_size = 25;
|
||
}
|
||
else if(element_pos.width / element_pos.height > 1.4){
|
||
element_ico_size = 16;
|
||
}
|
||
else if(element_pos.width / element_pos.height > 1.3){
|
||
element_ico_size = 20;
|
||
}
|
||
else if(element_pos.width / element_pos.height < 1){
|
||
element_ico_size = 16;
|
||
}
|
||
else{
|
||
element_ico_size = 16;
|
||
}
|
||
|
||
drawSVGElements(e, obj);
|
||
|
||
if(obj != undefined && obj != legend_back){
|
||
if(mouse_down_flag && button_active != "move"){
|
||
canvas.upperCanvasEl.style.cursor = 'none';
|
||
}
|
||
canvas.preserveObjectStacking = false;
|
||
if(group.cloneOne){
|
||
canvas.defaultCursor = 'none';
|
||
canvas.defaultCursor_old = 'none';
|
||
if(e.target != undefined){
|
||
// e.target.selectable = false;
|
||
// e.target.hoverCursor = 'none';
|
||
}
|
||
if(obj.parent.originX != 'center' && obj.parent.originY != 'center'){
|
||
obj.left = canvas.getPointer(e.e).x - obj.parent.width*obj.parent.scaleX/2;
|
||
obj.top = canvas.getPointer(e.e).y - obj.parent.height*obj.parent.scaleY/2;
|
||
}
|
||
else{
|
||
obj.left = canvas.getPointer(e.e).x;
|
||
obj.top = canvas.getPointer(e.e).y;
|
||
}
|
||
|
||
canvas.renderAll();
|
||
}
|
||
}
|
||
});
|
||
canvas.on('mouse:down:before', function(e){
|
||
if(geometry_obj && geometry_obj.text2 != undefined && geometry_obj.text2.isEditing){
|
||
if(geometry_obj){
|
||
var item = geometry_obj;
|
||
oldParam(item);
|
||
changes(item, "8");
|
||
actionsHist[actionsIndex].flag = 'add';
|
||
actionsHist.index = item.index;
|
||
}
|
||
geometry_obj = null
|
||
}
|
||
if(!geometry_obj){
|
||
var item = e.target;
|
||
if(item && item.parent){
|
||
oldParam(item.parent);
|
||
}
|
||
}
|
||
})
|
||
canvas.on('mouse:down', function(e){
|
||
if(button_active != "move"){
|
||
fake_selection_obj = {};
|
||
}
|
||
let item = canvas.getActiveObject();
|
||
if(item != undefined){
|
||
var ctx = canvas.contextTop;
|
||
ctx.clearRect(0, 0, canvas2.width, canvas2.height);
|
||
|
||
let shape_type = /shape.*/.test(item.groupName);
|
||
if(shape_type && item.type != "activeSelection" && !/shape_svg.*/.test(item.groupName)){
|
||
item.hasControls = true;
|
||
item.hasBorders = true;
|
||
}
|
||
}
|
||
if(e.target != legend_back){
|
||
legend_back.selectable = false;
|
||
}
|
||
if(editor_command != "" && editor_command != undefined){
|
||
canvas.selection = false;
|
||
if(item != undefined && item.parent.added && !geometry_obj){
|
||
element_cursor();
|
||
}
|
||
else if(!text_editing){
|
||
// клик по полю либо по элементу создаваемого (в процессе создания) объекта geometry
|
||
// item равен null, поэтому используется geometry_obj
|
||
putObject(e);
|
||
}
|
||
}
|
||
// if( document.getElementById("selection").classList.contains("top-menu-button-selected") ){
|
||
// move_flag = true;
|
||
// canvas._groupSelector = true;
|
||
// }
|
||
if(geometry_obj){
|
||
item = geometry_obj;
|
||
if(item.text2 != undefined){
|
||
canvas.setActiveObject(item.text2);
|
||
item.text2.enterEditing();
|
||
item.text2.hiddenTextarea.focus();
|
||
item.text2.selectLine(1);
|
||
element_pos.style.display = "none";
|
||
}
|
||
// canvas.renderAll();
|
||
}
|
||
if(item && item.groupType == "geometry"){
|
||
window.geometry_selected = true;
|
||
}
|
||
mouse_down_flag = true;
|
||
|
||
if(!e.target){
|
||
if(palette.active){
|
||
palette.active.classList.remove("color-cell-active");
|
||
}
|
||
|
||
palette.active = document.querySelector("[color='" + fieldcolor + "']");
|
||
|
||
if(palette.active){
|
||
palette.active.classList.add("color-cell-active");
|
||
}
|
||
|
||
if(palette.active){
|
||
palette.active.classList.remove("color-cell-active");
|
||
}
|
||
|
||
palette.active = document.querySelector("[color='" + fieldcolor + "']");
|
||
|
||
if(palette.active){
|
||
palette.active.classList.add("color-cell-active");
|
||
}
|
||
|
||
if(scale_indicator.active){
|
||
scale_indicator.active.classList.remove("zoom-size-selected");
|
||
}
|
||
|
||
scale_indicator.active = document.querySelector("[size='" + zoom_size + "']");
|
||
|
||
if(scale_indicator.active){
|
||
scale_indicator.active.classList.add("zoom-size-selected");
|
||
//scale_indicator.setAttribute("scale_value", (zoom_size + 1) + "x");
|
||
}
|
||
}
|
||
});
|
||
function putObject(e){
|
||
if((editor_command == "text" || editor_command == "socket" || editor_command == "svg") && canvas.getActiveObject() == undefined){
|
||
editor_obj["add_" + editor_command](e);
|
||
}
|
||
move_flag = true; // нужно, чтобы не было выделения
|
||
mouse_down_flag = true;
|
||
old_arrow_X = canvas.getPointer(e.e).x;
|
||
old_arrow_Y = canvas.getPointer(e.e).y;
|
||
}
|
||
canvas.on('mouse:up', function(e){
|
||
if(scale_indicator.active){
|
||
scale_indicator.active.classList.remove("zoom-size-selected");
|
||
scale_indicator.active = null;
|
||
//scale_indicator.setAttribute("scale_value", (zoom_size + 1) + "x");
|
||
}
|
||
|
||
if( (e.target == null || element_pos.active != 1) && !geometry_obj){
|
||
endOfCreating(null, e);
|
||
}
|
||
|
||
mouse_down_flag = false;
|
||
shape_change_flag = false;
|
||
|
||
if(!crop_selection.visible){
|
||
crop_selection.added = false;
|
||
}
|
||
|
||
if(window.lens.style.display == "block"){
|
||
hideLens();
|
||
}
|
||
drawing_object = false;
|
||
|
||
var ctx = canvas.contextTop;
|
||
if(button_active != "move"){
|
||
ctx.clearRect(0, 0, canvas2.width, canvas2.height);
|
||
}
|
||
|
||
if(e.target){
|
||
var target = e.target;
|
||
}
|
||
else{
|
||
var target = canvas.getActiveObject();
|
||
}
|
||
|
||
// если было выделение, то сохраняем его после перемещения
|
||
if(target && target.parent && (target.parent.objects || target.parent._objects) && (!move_flag || move_flag && target.parent.was_selected) || button_active == "move" ){
|
||
if(button_active != "move"){
|
||
var item = e.target;
|
||
}
|
||
else{
|
||
var item = canvas.getActiveObject();
|
||
}
|
||
if(item){
|
||
drawBounds(item);
|
||
}
|
||
}
|
||
|
||
if(item && item.groupType == "geometry" && window.geometry_selected){
|
||
var ctx = canvas.contextTop;
|
||
ctx.clearRect(0, 0, canvas2.width, canvas2.height);
|
||
selection_temp2 = new fabric.ActiveSelection(geometry_array, {
|
||
canvas: canvas,
|
||
});
|
||
selection_temp2.parent = selection_temp2;
|
||
canvas.setActiveObject(selection_temp2);
|
||
window.geometry_selected = false;
|
||
}
|
||
// setTimeout(function(){
|
||
// canvas.renderAll();
|
||
// }, 100);
|
||
})
|
||
function drawBounds(item){
|
||
if(item){
|
||
if(item.parent.objects){
|
||
var array = [];
|
||
for(let i of item.parent.objects){ // добавляем в выделение части составного объекта
|
||
array.push(item.parent[i]);
|
||
};
|
||
|
||
if(item.groupType == "geometry"){
|
||
window.geometry_array = array;
|
||
}
|
||
|
||
selection_temp = new fabric.ActiveSelection([], {
|
||
canvas: canvas,
|
||
});
|
||
// объект, который подставляем аргументом вместо ActiveSelection, чтобы не менять положение выделения
|
||
fake_selection_obj = {_objects:array};
|
||
var ctx = canvas.contextTop;
|
||
|
||
for(var i in array){
|
||
selection_temp.addWithUpdate(item.parent[array[i]], true);
|
||
}
|
||
selection_temp._calcBounds(null, fake_selection_obj);
|
||
|
||
myDrawBorder_inner(ctx);
|
||
}
|
||
if(item.parent._objects){
|
||
var _this = canvas.getActiveObject();
|
||
const delta = 10;
|
||
_this.setCoords()
|
||
poupup.classList.remove("mfp-hide");
|
||
poupup.style.left = canvas.lowerCanvasEl.getBoundingClientRect().x + _this.oCoords.br.x - poupup.offsetWidth + "px";
|
||
poupup.style.top = canvas.lowerCanvasEl.getBoundingClientRect().y + _this.oCoords.br.y + delta + "px";
|
||
}
|
||
|
||
}
|
||
}
|
||
function endOfCreating(item, e){
|
||
if(editor_command != "" && editor_command != undefined && !geometry_obj){
|
||
if (!item){
|
||
item = canvas.getActiveObject();
|
||
}
|
||
if(item != undefined && !window.resizing_el){
|
||
let shape_type = /shape_svg.*/.test(item.groupName);
|
||
if(shape_type){
|
||
// item.hoverCursor = 'none';
|
||
}
|
||
if(item.text2 == undefined && item.text == undefined){
|
||
canvas.discardActiveObject();
|
||
}
|
||
else if(item.text2 != undefined){
|
||
canvas.setActiveObject(item.text2);
|
||
item.text2.enterEditing();
|
||
item.text2.hiddenTextarea.focus();
|
||
item.text2.selectLine(1);
|
||
element_pos.style.display = "none";
|
||
}
|
||
else{
|
||
canvas.setActiveObject(item);
|
||
item.enterEditing();
|
||
item.hiddenTextarea.focus();
|
||
item.selectLine(1);
|
||
// canvas.renderAll();
|
||
element_pos.style.display = "none";
|
||
}
|
||
if(!/geometry.*/.test(item.groupName)){
|
||
oldParam(item);
|
||
if(!item.ispart && file_loaded){
|
||
changes(item, "8");
|
||
actionsHist[actionsIndex].flag = 'add';
|
||
actionsHist.index = item.index;
|
||
}
|
||
}
|
||
|
||
if(item.parent.line_part1 != undefined && item.parent.line_part1.text2 == undefined){
|
||
item.parent.line_part1.set('x1', item.parent.line.x1);
|
||
item.parent.line_part1.set('y1', item.parent.line.y1);
|
||
item.parent.line_part2.set('x1', item.parent.line.x2);
|
||
item.parent.line_part2.set('y1', item.parent.line.y2);
|
||
}
|
||
item.parent.added = true;
|
||
if(/geometry.*/.test(item.groupName)){ // создан родительский объект (линия со стрелками) объекта geometry
|
||
canvas.setActiveObject(item.parent.line);
|
||
item.parent.line.first_center = {
|
||
x: item.parent.line.x1 + (item.parent.line.x2 - item.parent.line.x1) / 2,
|
||
y: item.parent.line.y1 + (item.parent.line.y2 - item.parent.line.y1) / 2
|
||
};
|
||
item.parent.line.first_click = {
|
||
x: canvas.getPointer(e.e).x,
|
||
y: canvas.getPointer(e.e).y
|
||
};
|
||
geometry_obj = item.parent; // объект geometry в процессе создания
|
||
// canvas.renderAll();
|
||
}
|
||
}
|
||
if(!geometry_obj){ // завершение создания объекта
|
||
mouse_down_flag = false;
|
||
}
|
||
else{
|
||
mouse_down_flag = true;
|
||
}
|
||
}
|
||
canvas.selection = true;
|
||
}
|
||
function mousePointer(e){
|
||
let item = canvas.getActiveObject();
|
||
if(item != null){
|
||
let shape_type = /shape.*/.test(item.groupName);
|
||
if(item != undefined && mouse_down_flag){
|
||
// если объект содержит стрелку, присваиваем координаты (процесс рисования, то есть объект не создан)
|
||
if (item.pointType == 'arrow_start' && !item.parent.added){
|
||
item.left = canvas.getPointer(e.e).x;
|
||
item.top = canvas.getPointer(e.e).y;
|
||
item.setCoords();
|
||
// canvas.renderAll();
|
||
}
|
||
if(shape_type && !item.added){
|
||
switch(editor_command){
|
||
case "rect":
|
||
item.width = canvas.getPointer(e.e).x - item.left;
|
||
if(ctrl){
|
||
item.height = item.width;
|
||
}
|
||
else{
|
||
item.height = canvas.getPointer(e.e).y - item.top;
|
||
}
|
||
break;
|
||
case "circle":
|
||
item.scaleX = (canvas.getPointer(e.e).x - item.left) / 2;
|
||
if(ctrl){
|
||
item.scaleY = item.scaleX;
|
||
}
|
||
else{
|
||
item.scaleY = (canvas.getPointer(e.e).y - item.top) / 2;
|
||
}
|
||
break;
|
||
// case "text":
|
||
// item.scaleX = (canvas.getPointer(e.e).x - item.left) / item.width;
|
||
// item.scaleY = item.scaleX;
|
||
// break;
|
||
}
|
||
canvas.renderAll();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function hideLens(){
|
||
var item = canvas.getActiveObject();
|
||
if(window.lens){
|
||
if(shape_change_flag || editor_command == "size" || editor_command == "arrow"
|
||
|| editor_command == "line" || editor_command == "cap"
|
||
|| document.getElementById("selection").classList.contains("top-menu-button-selected")
|
||
|| item && (item.pointType == "arrow_start" || item.pointType == "arrow_end") && mouse_down_flag ){
|
||
window.lens_move = true;
|
||
window.lens.style.display = "block";
|
||
}
|
||
else{
|
||
window.lens_move = false;
|
||
window.lens.style.display = "none";
|
||
}
|
||
if(editor_command == "cap" && mouse_down_flag){
|
||
window.lens_move = false;
|
||
window.lens.style.display = "none";
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
scroll_block.addEventListener("wheel", function(e){
|
||
zoomField(e);
|
||
// resizeWindow();
|
||
});
|
||
|
||
|
||
document.querySelectorAll(".zoom-btn").forEach(function(obj){
|
||
obj.addEventListener("click", function(e){
|
||
zoomField({
|
||
offsetX: canvas.width / 2,
|
||
offsetY: canvas.height / 2,
|
||
direct: this.id
|
||
});
|
||
canvas.viewportTransform[4] = canvas.width / 2 - canvas.backgroundImage.left * window_zoom[window_zoom_index];
|
||
canvas.viewportTransform[5] = canvas.height / 2 - canvas.backgroundImage.top * window_zoom[window_zoom_index];
|
||
});
|
||
});
|
||
|
||
function zoomField(e){
|
||
if(e.direct == "zoom-in" || e.deltaY < 0){
|
||
if(window_zoom_index < 8){
|
||
window_zoom_index++;
|
||
canvas.zoomToPoint(new fabric.Point(e.offsetX, e.offsetY), window_zoom[window_zoom_index]);
|
||
}
|
||
document.getElementById("zoom-text").setAttribute("value", window_zoom[window_zoom_index] + "x");
|
||
window.global_zoom = window_zoom[window_zoom_index];
|
||
}
|
||
else{
|
||
if(window_zoom_index > 0){
|
||
window_zoom_index--;
|
||
canvas.zoomToPoint(new fabric.Point(e.offsetX, e.offsetY), window_zoom[window_zoom_index]);
|
||
}
|
||
document.getElementById("zoom-text").setAttribute("value", window_zoom[window_zoom_index] + "x");
|
||
window.global_zoom = window_zoom[window_zoom_index];
|
||
}
|
||
window.screen_shot_available = true;
|
||
|
||
var item = canvas.getActiveObject();
|
||
if(item){
|
||
var ctx = canvas.contextTop;
|
||
ctx.clearRect(0, 0, canvas2.width, canvas2.height);
|
||
drawBounds(item);
|
||
}
|
||
else{
|
||
drawSVGElements(e, null, true);
|
||
}
|
||
}
|
||
|
||
document.querySelector("#move").addEventListener("click", function(){
|
||
element_cursor();
|
||
|
||
if(!this.classList.contains("top-menu-button-selected")){
|
||
canvas.defaultCursor_old = canvas.defaultCursor;
|
||
canvas.defaultCursor = "grab";
|
||
}
|
||
})
|
||
|
||
canvas.on('mouse:down', function(opt) {
|
||
event.preventDefault();
|
||
var evt = opt.e;
|
||
if (button_active == "move") {
|
||
this.isDragging = true;
|
||
this.isDrawingMode = 0;
|
||
this.selection = false;
|
||
this.lastPosX = evt.clientX;
|
||
this.lastPosY = evt.clientY;
|
||
}
|
||
});
|
||
|
||
document.addEventListener("mousedown", function(e){
|
||
if(e.button == 1){
|
||
middle_button = true;
|
||
}
|
||
if(middle_button) {
|
||
e.preventDefault();
|
||
canvas.isDragging = true;
|
||
canvas.isDrawingMode = 0;
|
||
canvas.selection = false;
|
||
canvas.lastPosX = e.clientX;
|
||
canvas.lastPosY = e.clientY;
|
||
}
|
||
});
|
||
document.addEventListener("mouseup", function(e){
|
||
if( document.querySelector("#pencil").classList.contains("top-menu-button-selected") ){
|
||
canvas.isDrawingMode = 1;
|
||
}
|
||
canvas.isDragging = false;
|
||
|
||
clearCursor();
|
||
if(middle_button ){
|
||
var item = canvas.getActiveObject();
|
||
if(item){
|
||
drawBounds(item);
|
||
}
|
||
}
|
||
|
||
middle_button = false;
|
||
if(button_active != "move"){
|
||
canvas.isDragging = false;
|
||
}
|
||
});
|
||
canvas.on('mouse:up', function(opt) {
|
||
this.selection = true;
|
||
});
|
||
|
||
document.addEventListener("keyup", function(e){
|
||
clearCursor();
|
||
});
|
||
|
||
function clearCursor(){
|
||
if(button_active != "move"){
|
||
canvas.defaultCursor = canvas.defaultCursor_old;
|
||
canvas.upperCanvasEl.style.cursor = canvas.defaultCursor_old;
|
||
}
|
||
else{
|
||
canvas.defaultCursor = "grab";
|
||
}
|
||
}
|
||
|
||
canvas.on('mouse:move', function(opt) {
|
||
if (this.isDragging) {
|
||
var e = opt.e;
|
||
window.vpt = this.viewportTransform;
|
||
|
||
if(window_zoom[window_zoom_index] >= 1){
|
||
var vpt4_temp = vpt[4] + e.clientX - this.lastPosX;
|
||
var vpt5_temp = vpt[5] + e.clientY - this.lastPosY;
|
||
|
||
if(typeof canvas.backgroundImage != "undefined" && canvas.backgroundImage){
|
||
window.borders_left = Math.round(canvas.backgroundImage.left - (canvas.backgroundImage.width / 2) * canvas.backgroundImage.scaleX) * window_zoom[window_zoom_index] + vpt4_temp;
|
||
window.borders_right = Math.round(canvas.backgroundImage.left + (canvas.backgroundImage.width / 2) * canvas.backgroundImage.scaleX) * window_zoom[window_zoom_index] + vpt4_temp;
|
||
window.borders_top = Math.round(canvas.backgroundImage.top - (canvas.backgroundImage.height / 2) * canvas.backgroundImage.scaleY) * window_zoom[window_zoom_index] + vpt5_temp;
|
||
window.borders_bottom = Math.round(canvas.backgroundImage.top + (canvas.backgroundImage.height / 2) * canvas.backgroundImage.scaleY) * window_zoom[window_zoom_index] + vpt5_temp;
|
||
|
||
if(canvas.backgroundImage.width * canvas.backgroundImage.scaleX * window_zoom[window_zoom_index] <= canvas.width){
|
||
vpt[4] += e.clientX - this.lastPosX;
|
||
if(borders_left <= 0){
|
||
vpt[4] = -Math.round(canvas.backgroundImage.left - (canvas.backgroundImage.width / 2) * canvas.backgroundImage.scaleX) * window_zoom[window_zoom_index];
|
||
}
|
||
if(borders_right >= canvas.width){
|
||
vpt[4] = canvas.width - Math.round(canvas.backgroundImage.left + (canvas.backgroundImage.width / 2) * canvas.backgroundImage.scaleX) * window_zoom[window_zoom_index];
|
||
}
|
||
}
|
||
else{
|
||
if(borders_left <= 0 && this.lastPosX <= e.clientX || borders_right >= canvas.width && this.lastPosX >= e.clientX){
|
||
vpt[4] = vpt4_temp;
|
||
}
|
||
}
|
||
if(canvas.backgroundImage.height * canvas.backgroundImage.scaleY * window_zoom[window_zoom_index] <= canvas.height){
|
||
vpt[5] += e.clientY - this.lastPosY;
|
||
if(borders_top <= 0){
|
||
vpt[5] = 0;
|
||
}
|
||
if(borders_bottom >= canvas.height){
|
||
vpt[5] = canvas.height - Math.round(canvas.backgroundImage.top + (canvas.backgroundImage.height / 2) * canvas.backgroundImage.scaleY) * window_zoom[window_zoom_index];
|
||
}
|
||
}
|
||
else{
|
||
if(borders_top <= 0 && this.lastPosY <= e.clientY || borders_bottom >= canvas.height && this.lastPosY >= e.clientY){
|
||
vpt[5] = vpt5_temp;
|
||
}
|
||
}
|
||
this.requestRenderAll();
|
||
this.lastPosX = e.clientX;
|
||
this.lastPosY = e.clientY;
|
||
}
|
||
}
|
||
}
|
||
// if(canvas.getActiveObject() && canvas.getActiveObject().type == "activeSelection" && mouse_down_flag){
|
||
// poupup.classList.add("mfp-hide");
|
||
// }
|
||
|
||
if(mouse_down_flag || group.cloneOne){
|
||
move_flag = true;
|
||
poupup.classList.add("mfp-hide");
|
||
}
|
||
|
||
if(middle_button || button_active == "move" && mouse_down_flag){
|
||
poupup.classList.add("mfp-hide");
|
||
}
|
||
});
|
||
|
||
function resizeWindow(){
|
||
|
||
var deltaX = scroll_block.offsetWidth - canvas.width;
|
||
var deltaY = scroll_block.offsetHeight - canvas.height;
|
||
canvas.setWidth(scroll_block.offsetWidth);
|
||
canvas.setHeight(scroll_block.offsetHeight);
|
||
|
||
// canvas.viewportTransform[4] += deltaX * window_zoom[window_zoom_index];
|
||
// canvas.viewportTransform[5] += deltaY * window_zoom[window_zoom_index];
|
||
|
||
document.getElementById("back-canvas").width = scroll_block.offsetWidth;
|
||
document.getElementById("back-canvas").height = scroll_block.offsetHeight;
|
||
|
||
window.screen_shot_available = true;
|
||
|
||
// vpt в центр фона
|
||
if(canvas.backgroundImage){
|
||
canvas.viewportTransform[4] = canvas.width / 2 - canvas.backgroundImage.left * window_zoom[window_zoom_index];
|
||
canvas.viewportTransform[5] = canvas.height / 2 - canvas.backgroundImage.top * window_zoom[window_zoom_index];
|
||
}
|
||
|
||
// сбиваются координаты — обновляем
|
||
let array = canvas.getObjects();
|
||
for(var i in array){
|
||
array[i].setCoords();
|
||
}
|
||
|
||
// var qq = (canvas.viewportTransform[4] - (canvas.backgroundImage.left) + window_zoom[window_zoom_index] * (canvas.backgroundImage.left)) / window_zoom[window_zoom_index];
|
||
// canvas.viewportTransform[4] = (canvas.width / 2 * (1 - window_zoom[window_zoom_index]) + qq*window_zoom[window_zoom_index]);
|
||
|
||
// canvas.renderAll();
|
||
}
|
||
// canvas.upperCanvasEl.getContext('2d').fillRect(555 * 0.5, 400, 10, 10)
|
||
window.addEventListener('resize', function(event) {
|
||
resizeWindow();
|
||
}, true);
|
||
|
||
function init(){
|
||
|
||
window._x = 0;
|
||
window._y = 0;
|
||
|
||
window.field2 = [];
|
||
window.cellSize2 = 16;
|
||
window.canvas2 = document.querySelector("#back-canvas");
|
||
|
||
window.scene2 = canvas2.getContext("2d");
|
||
window.fieldWidth2 = Math.round(canvas2.width / cellSize2);
|
||
window.fieldHeight2 = Math.round(canvas2.height / cellSize2);
|
||
|
||
// canvas.setWidth(scroll_block.offsetWidth);
|
||
|
||
// canvas.setHeight(scroll_block.offsetHeight);
|
||
|
||
// document.getElementById("back-canvas").width = scroll_block.offsetWidth;
|
||
|
||
// document.getElementById("back-canvas").height = scroll_block.offsetHeight;
|
||
resizeWindow();
|
||
|
||
window.screen_shot_available = true;
|
||
|
||
document.getElementById("pointer").click();
|
||
|
||
if(canvas.backgroundImage && !canvas.backgroundImage.oCoords){
|
||
canvas.backgroundImage.lockMovementX = true;
|
||
canvas.backgroundImage.lockMovementY = true;
|
||
canvas.setActiveObject(canvas.backgroundImage)
|
||
canvas.backgroundImage.canvas = canvas
|
||
canvas.backgroundImage.drawControls(canvas.lowerCanvasEl.getContext('2d'));
|
||
canvas.discardActiveObject();
|
||
// canvas.renderAll();
|
||
}
|
||
|
||
canvas.renderAll();
|
||
}
|
||
|
||
init();
|
||
canvasEvents();
|
||
|