498 lines
22 KiB
JavaScript
498 lines
22 KiB
JavaScript
var fieldcolor = "rgb(0, 0, 0)";
|
||
shape = [];
|
||
var index = -1;
|
||
var legend = {}; // объект с айтемами легенды
|
||
var legend_img_margin_left = 5;
|
||
var text_height;
|
||
var element_ico_size = 16;
|
||
var dimension = [];
|
||
dimension["naprav"] = [[22, 10], [24, 13.33], [28, 15.56], [32, 17.78], [34, 18.89], [40, 22.22], [46, 25.56], [52, 28.89]];
|
||
dimension["petlya"] = [[16, 16], [18, 18], [20, 20], [24, 24], [28, 28], [32, 32], [36, 36], [40, 40]];
|
||
dimension["gazlift"] = [[16, 11.08], [18, 12.46], [20, 13.85], [24, 16.62], [28, 19.38], [32, 22.15], [36, 24.92], [40, 27.69]];
|
||
dimension["podyomnik"] = [[16, 16], [18, 16.88], [20, 18.75], [24, 22.5], [28, 26.25], [32, 30], [36, 33.75], [40, 37.5]];
|
||
dimension["sushka"] = [[16, 13], [18, 14.62], [20, 16.25], [24, 19.5], [28, 22.75], [32, 26], [36, 29.25], [40, 32.5]];
|
||
dimension["lotok"] = [[16, 16], [18, 18], [20, 20], [24, 24], [28, 28], [32, 32], [36, 36], [40, 40]];
|
||
dimension["vnutr-yaschik"] = [[16, 9], [18, 10.13], [20, 11.25], [26, 14.63], [30, 16.88], [34, 19.13], [38, 21.38], [42, 23.63]];
|
||
dimension["butilochnitsa"] = [[12, 18], [13.33,20], [14.67, 22], [17.33, 26], [20, 30], [22.67, 34], [25.33, 38], [28, 42]];
|
||
dimension["dampfer"] = [[16, 8], [18, 9], [22, 11], [26, 13], [30, 15], [34, 17], [38, 19], [42, 21]];
|
||
dimension["tip-on"] = [[16, 16], [18, 18], [20, 20], [24, 24], [28, 28], [32, 32], [36, 36], [40, 40]];
|
||
dimension["zamok"] = [[16, 16], [18, 18], [20, 20], [24, 24], [28, 28], [32, 32], [36, 36], [40, 40]];
|
||
dimension["skritiy-krepezh"] = [[18, 14.59], [22, 17.84], [24, 19.46], [30, 24.32], [32, 25.94], [36, 29.19], [44, 35.67], [50, 40.54]];
|
||
var text_item_width = 0;
|
||
var biggest_legend_item_width;
|
||
function changeTextWidth(item){
|
||
if(item.width < 10){
|
||
if(biggest_legend_item_width > 0 && /legend.*/.test(item.groupName)){
|
||
item.width = biggest_legend_item_width - (legend_back.margin * 2 + legend_img_margin_left);
|
||
}
|
||
else{
|
||
item.width = 10;
|
||
}
|
||
}
|
||
canvas.renderAll();
|
||
}
|
||
var editor_obj = {
|
||
add_text: function(e={}, x=canvas.getPointer(e.e).x, y=canvas.getPointer(e.e).y, ang = 0, text = "Выделите и кликните, чтобы ввести текст", group_name="shape_text", flag=false, fill = fieldcolor){
|
||
if(group_name != 'legend'){
|
||
var font_size = text_dimension[zoom_size];
|
||
}
|
||
else{
|
||
var font_size = 11;
|
||
}
|
||
let temp_shape;
|
||
if(group_name == "shape_text"){
|
||
temp_shape = new fabric.Textbox(text, {
|
||
selectable: true,
|
||
lockMovementX: flag,
|
||
lockMovementY: flag,
|
||
fontSize: font_size,
|
||
fontFamily: "Golos Text",
|
||
fill: fill,
|
||
backgroundColor: "rgba(0, 0, 0, 0)",
|
||
left: x,
|
||
top: y,
|
||
width: 295,
|
||
// height: 150,
|
||
angle: ang,
|
||
textAlign: 'left',
|
||
perPixelTargetFind: flag,
|
||
groupName: group_name + index,
|
||
index: index
|
||
})
|
||
}
|
||
else{
|
||
temp_shape = new fabric.IText(text, {
|
||
selectable: true,
|
||
lockMovementX: flag,
|
||
lockMovementY: flag,
|
||
fontSize: font_size,
|
||
fontFamily: "Golos Text",
|
||
fill: fill,
|
||
backgroundColor: "rgba(0, 0, 0, 0)",
|
||
left: x,
|
||
top: y,
|
||
width: 500,
|
||
height: 150,
|
||
angle: ang,
|
||
textAlign: 'center',
|
||
perPixelTargetFind: flag,
|
||
groupName: group_name + index,
|
||
index: index
|
||
})
|
||
}
|
||
|
||
temp_shape.parent = temp_shape;
|
||
if(group_name != 'legend'){
|
||
// canvas.setActiveObject(temp_shape);
|
||
}
|
||
else{
|
||
temp_shape.backgroundColor = legend_back.fill;
|
||
}
|
||
setTimeout(function(){
|
||
changeTextWidth(temp_shape);
|
||
}, 100);
|
||
temp_shape.on('changed', function () {
|
||
changeTextWidth(temp_shape);
|
||
});
|
||
canvas.add(temp_shape);
|
||
return temp_shape;
|
||
},
|
||
add_rect: function(e, flag=true, x=canvas.getPointer(e.e).x, y=canvas.getPointer(e.e).y, w=0, h=0, color='rgba(0, 0, 0, 0)', stroke=fieldcolor, group_name="shape_rect", ispart=false){
|
||
if(group_name == "socket"){
|
||
var stroke_width = 1;
|
||
}
|
||
else{
|
||
var stroke_width = zoom_size + 1;
|
||
}
|
||
let temp_shape = new fabric.Rect({
|
||
selectable: flag,
|
||
left: x,
|
||
top: y,
|
||
stroke: stroke,
|
||
strokeUniform: true,
|
||
strokeWidth: stroke_width,
|
||
fill: color,
|
||
width: w,
|
||
height: h,
|
||
hasControls: flag,
|
||
perPixelTargetFind: true,
|
||
groupName: group_name + index,
|
||
index: index
|
||
});
|
||
temp_shape.parent = temp_shape;
|
||
if(!ispart && group_name != "temp"){
|
||
if(group_name != "crop"){
|
||
canvas.setActiveObject(temp_shape);
|
||
}
|
||
canvas.add(temp_shape);
|
||
}
|
||
else{
|
||
temp_shape.originX = 'center';
|
||
temp_shape.originY = 'center';
|
||
}
|
||
return temp_shape;
|
||
},
|
||
add_circle: function(e, flag=true, x=canvas.getPointer(e.e).x, y=canvas.getPointer(e.e).y, r=1, color='rgba(0, 0, 0, 0)', stroke=fieldcolor, group_name="shape_circle", ispart=false, objects=undefined){
|
||
let temp_shape = new fabric.Circle({
|
||
selectable: flag,
|
||
left: x,
|
||
top: y,
|
||
radius: r,
|
||
stroke: stroke,
|
||
strokeWidth: zoom_size + 1,
|
||
strokeUniform: true,
|
||
fill: color,
|
||
objects: objects,
|
||
perPixelTargetFind: true,
|
||
groupName: group_name + index,
|
||
index: index
|
||
});
|
||
temp_shape.parent = temp_shape;
|
||
if(!ispart){
|
||
canvas.setActiveObject(temp_shape);
|
||
canvas.add(temp_shape);
|
||
}
|
||
else{
|
||
temp_shape.originX = 'center';
|
||
temp_shape.originY = 'center';
|
||
}
|
||
return temp_shape;
|
||
},
|
||
add_line: add_line,
|
||
add_size: add_size,
|
||
add_geometry: add_geometry,
|
||
add_cap: add_cap,
|
||
add_socket: add_socket,
|
||
add_arrow: add_arrow,
|
||
add_selection: function(){
|
||
element_cursor();
|
||
canvas.isDrawingMode = 0;
|
||
},
|
||
add_image: function(img, not_from_url = false){
|
||
let original = new Image();
|
||
original.src = img;
|
||
original.onload = function() {
|
||
let scaleX, scaleY;
|
||
scaleX = canvas.width*0.25 / this.width;
|
||
scaleY = scaleX;
|
||
if(!not_from_url){
|
||
new fabric.Image.fromURL(img,
|
||
function(temp_shape){
|
||
temp_shape.groupName = "shape_img" + index;
|
||
temp_shape.scaleX = scaleX;
|
||
temp_shape.scaleY = scaleY;
|
||
temp_shape.perPixelTargetFind = true,
|
||
temp_shape.index = index;
|
||
temp_shape.parent = temp_shape;
|
||
canvas.add(temp_shape);
|
||
temp_shape.sendToBack();
|
||
});
|
||
}
|
||
else{
|
||
var temp_shape = new fabric.Image(original);
|
||
temp_shape.groupName = "shape_img" + index;
|
||
temp_shape.left = crop_selection.left;
|
||
temp_shape.top = crop_selection.top;
|
||
temp_shape.setCoords();
|
||
temp_shape.index = index;
|
||
temp_shape.parent = temp_shape;
|
||
canvas.add(temp_shape);
|
||
temp_shape.sendToBack();
|
||
canvas.setActiveObject(temp_shape);
|
||
}
|
||
}
|
||
},
|
||
add_svg: function(e, img = element_pos.src, x = e.pointer.x, y = e.pointer.y, groupName = "shape_svg", flag = true, fill = fieldcolor){
|
||
new fabric.loadSVGFromURL(img,
|
||
function(objects, options) {
|
||
let temp_shape = fabric.util.groupSVGElements(objects, options);
|
||
temp_shape.set({
|
||
selectable: flag,
|
||
fill: fill,
|
||
centeredScaling: true,
|
||
perPixelTargetFind: true,
|
||
groupName: groupName + index,
|
||
caption: elements[element_pos.i].getAttribute("value"),
|
||
caption_type: elements[element_pos.i].id,
|
||
hasControls: false,
|
||
originX: "center",
|
||
originY: "center",
|
||
index: index
|
||
});
|
||
temp_shape.parent = temp_shape;
|
||
temp_shape.lockRotation = true;
|
||
|
||
if(element_pos.width / element_pos.height > 1){
|
||
temp_shape.scaleToWidth(element_pos.width);
|
||
}
|
||
else{
|
||
temp_shape.scaleToHeight(element_pos.height);
|
||
}
|
||
|
||
temp_shape.scaleConstX = temp_shape.scaleX;
|
||
temp_shape.scaleConstY = temp_shape.scaleY;
|
||
|
||
if(element_pos.width / element_pos.height > 1){
|
||
temp_shape.scaleToWidth(dimension[element_pos.id][zoom_size][0]);
|
||
}
|
||
else{
|
||
temp_shape.scaleToHeight(dimension[element_pos.id][zoom_size][1]);
|
||
}
|
||
// temp_shape.left = canvas.getPointer(e.e).x - window.devicePixelRatio / 2;
|
||
// temp_shape.top = canvas.getPointer(e.e).y + window.devicePixelRatio;
|
||
temp_shape.left = canvas.getPointer(e.e).x;
|
||
temp_shape.top = canvas.getPointer(e.e).y;
|
||
temp_shape.stroke_colorable = false;
|
||
|
||
canvas.add(temp_shape).renderAll();
|
||
endOfCreating(temp_shape);
|
||
editor_obj.add_legend();
|
||
}
|
||
);
|
||
},
|
||
add_legend: function(e, x = legend_back.left + legend_img_margin_left, y = legend_back.top){
|
||
biggest_legend_item_width = 0;
|
||
let array = canvas.getObjects();
|
||
for(let i in array){
|
||
let shape_type = /legend.*/.test(array[i].groupName);
|
||
if(shape_type){
|
||
let marker = array[i].caption_type + array[i].fill;
|
||
delete legend[marker];
|
||
// удаляем айтемы с канваса
|
||
canvas.remove(array[i]);
|
||
}
|
||
}
|
||
canvas.renderAll();
|
||
// создаем айтемы
|
||
legend_back.margin = 12;
|
||
const margin_top = 10;
|
||
const margin_bottom = 10;
|
||
text_height = margin_top;
|
||
|
||
for(let i in array){
|
||
let marker = array[i].caption_type + array[i].fill;
|
||
let shape_type = /shape_svg.*/.test(array[i].groupName);
|
||
// проверяем, есть ли айтем такого типа и цвета
|
||
if(shape_type && array[i].visible && !legend[marker]){
|
||
|
||
legend[marker] = true;
|
||
|
||
var img_item = fabric.util.object.clone(array[i]);
|
||
|
||
img_item.originX = 'center';
|
||
img_item.originY = 'center';
|
||
|
||
img_item.set({
|
||
"left": x + legend_back.margin,
|
||
"top": 0, // определено ниже
|
||
"scaleX": array[i].scaleConstX,
|
||
"scaleY": array[i].scaleConstY
|
||
});
|
||
|
||
img_item.groupName = "legend";
|
||
img_item.group = undefined;
|
||
img_item.selectable = false;
|
||
var text_item = editor_obj.add_text(e, x + legend_back.margin + legend_img_margin_left * 3, y + text_height, 0, array[i].caption, "legend", true, "black");
|
||
text_item.originY = 'center';
|
||
text_item.hasControls = false;
|
||
text_item.hasBorders = false;
|
||
text_item.fontFamily = 'Golos Text';
|
||
text_item.fontSize = 11;
|
||
text_item.textAlign = 'left';
|
||
text_item.index = array[i].index;
|
||
|
||
img_item.top = text_item.top = text_item.top + text_item.height / 2;
|
||
const outdent = img_item.left - legend_back.left;
|
||
|
||
canvas.renderAll();
|
||
|
||
text_item_width = text_item.width + outdent * 2;
|
||
|
||
if(text_item_width > biggest_legend_item_width){
|
||
biggest_legend_item_width = text_item_width;
|
||
}
|
||
|
||
text_height += text_item.height + margin_bottom;
|
||
|
||
legend_back.scaleX = (legend_back.margin + biggest_legend_item_width) / legend_back.width;
|
||
legend_back.scaleY = text_height / legend_back.height;
|
||
|
||
legend_back.rx = legend_back.border_radius * (1 / legend_back.scaleX);
|
||
legend_back.ry = legend_back.border_radius * (1 / legend_back.scaleY);
|
||
|
||
canvas.add(img_item);
|
||
|
||
text_item.on('changed', function () {
|
||
text_height = margin_top;
|
||
text_item_width = this.width + outdent * 2;
|
||
shape[this.index].caption = this.text;
|
||
if(text_item_width > biggest_legend_item_width){
|
||
biggest_legend_item_width = text_item_width;
|
||
}
|
||
if(legend_back.width * legend_back.scaleX < biggest_legend_item_width + legend_back.margin){
|
||
legend_back.scaleX = (legend_back.margin + biggest_legend_item_width) / legend_back.width;
|
||
}
|
||
let array = canvas.getObjects();
|
||
let array2 = [];
|
||
for(var i = 0; i < array.length; i++){
|
||
let shape_type = /legend.*/.test(array[i].groupName);
|
||
if(shape_type){
|
||
array2.push(array[i]);
|
||
}
|
||
}
|
||
for(var i = 0; i < array2.length; i+=2){
|
||
var img_item = array2[i + 1];
|
||
var text_item = array2[i];
|
||
if(img_item != undefined){
|
||
var top = legend_back.top + text_height + text_item.height / 2;
|
||
text_item.set("top", top);
|
||
img_item.set("top", top);
|
||
text_height += text_item.height + margin_bottom;
|
||
}
|
||
}
|
||
legend_back.scaleY = text_height / legend_back.height;
|
||
legend_back.rx = legend_back.border_radius * (1 / legend_back.scaleX);
|
||
legend_back.ry = legend_back.border_radius * (1 / legend_back.scaleY);
|
||
});
|
||
}
|
||
}
|
||
canvas.renderAll();
|
||
},
|
||
change_source: function(img){
|
||
let original = new Image();
|
||
original.src = img;
|
||
editor_start = true;
|
||
original.onload = function() {
|
||
let scaleX, scaleY, left, top;
|
||
if(canvas.width / canvas.height > this.width / this.height){
|
||
scaleY = canvas.height / this.height;
|
||
scaleX = scaleY;
|
||
}
|
||
else{
|
||
scaleX = canvas.width / this.width;
|
||
scaleY = scaleX;
|
||
}
|
||
let firstWidth = this.width * scaleX;
|
||
let firstHeight = this.height * scaleY;
|
||
let firstLeft = canvas.width / 2;
|
||
let firstTop = canvas.height / 2;
|
||
canvas.setBackgroundImage(img, function(){
|
||
canvas.backgroundImage.firstWidth = firstWidth;
|
||
canvas.backgroundImage.firstHeight = firstHeight;
|
||
canvas.backgroundImage.firstLeft = firstLeft;
|
||
canvas.backgroundImage.firstTop = firstTop;
|
||
canvas.renderAll()
|
||
}, {
|
||
scaleX: scaleX,
|
||
scaleY: scaleY,
|
||
left: firstLeft,
|
||
top: firstTop,
|
||
originX: 'center',
|
||
originY: 'center'
|
||
});
|
||
}
|
||
},
|
||
clone: function(){
|
||
let item = canvas.getActiveObject();
|
||
if(item != undefined && !group.cloneOne && item.groupName != "crop-1"){
|
||
if(item.type == "activeSelection" || item.parent.objects){
|
||
if(item.type == "activeSelection"){
|
||
var array = item._objects;
|
||
}
|
||
else{
|
||
var array = [];
|
||
for(let i of item.parent.objects){
|
||
array.push(item.parent[i]);
|
||
}
|
||
}
|
||
|
||
let array_temp = [];
|
||
canvas.discardActiveObject();
|
||
// let new_index = [];
|
||
for(let i = 0; i < array.length; i++){
|
||
// let index_temp = [Number(/\-*[0-9]+/.exec(array[i].groupName))];
|
||
let obj_temp = fabric.util.object.clone(array[i]);
|
||
obj_temp.clonned = true;
|
||
canvas.add(obj_temp);
|
||
let shape_type = /shape.*/.test(obj_temp.groupName); // если groupName не shape, то это примитив
|
||
if(!shape_type){ // если не примитив
|
||
obj_temp.groupName = obj_temp.groupName + "clone";
|
||
}
|
||
array_temp.push(obj_temp);
|
||
}
|
||
loadObjects(array_temp);
|
||
|
||
let selection_temp = new fabric.ActiveSelection(array_temp, {
|
||
canvas: canvas,
|
||
// originX: 'center',
|
||
// originY: 'center'
|
||
});
|
||
group = {groupName: undefined};
|
||
canvas.setActiveObject(selection_temp);
|
||
selection_temp.parent = selection_temp;
|
||
selection_temp.hasControls = false;
|
||
canvas.renderAll();
|
||
}
|
||
else{
|
||
let obj_temp = fabric.util.object.clone(item);
|
||
obj_temp.hasControls = false;
|
||
obj_temp.clonned = true;
|
||
canvas.add(obj_temp);
|
||
canvas.setActiveObject(shape[index]);
|
||
canvas.renderAll();
|
||
}
|
||
group.cloneOne = group.mousedown = true;
|
||
}
|
||
},
|
||
setClone: function(item){ // устанавливает клон в текущей позиции курсора, вызывается в undo_redo.js
|
||
group.cloneOne = false;
|
||
group.param_saved = false;
|
||
oldParam(item);
|
||
changes(item, "10");
|
||
actionsHist[actionsIndex].flag = 'add';
|
||
actionsHist.index = item.index;
|
||
if(item.type == "image"){
|
||
canvas.sendToBack(item);
|
||
}
|
||
if(item.groupType == "shape_rect" || item.groupType == "shape_circle"){
|
||
setTimeout(function(){
|
||
canvas.setActiveObject(item); // в _setActiveObject в fabric.js
|
||
}, 10);
|
||
}
|
||
group.param_saved = true;
|
||
canvas.renderAll();
|
||
}
|
||
};
|
||
var big_square_line_left = 0;
|
||
var big_square_line_top = 0;
|
||
class Cell{
|
||
constructor(scene, x, y, size, value, deltaX = 0, deltaY = 0, bg = true){
|
||
this.scene = scene;
|
||
this.x = x;
|
||
this.y = y;
|
||
this.deltaX = deltaX;
|
||
this.deltaY = deltaY;
|
||
this.size = size;
|
||
this.value = value;
|
||
this.bg = bg;
|
||
this._value;
|
||
}
|
||
set value(value){
|
||
this.scene.lineWidth = 0.4;
|
||
this._value = value;
|
||
this.scene.strokeStyle = value;
|
||
if(this.bg){
|
||
this.scene.strokeStyle = "#374448";
|
||
this.scene.fillStyle = value;
|
||
this.scene.fillRect(this.x * this.size + this.deltaX, this.y * this.size + this.deltaY, this.size, this.size);
|
||
this.scene.strokeRect(this.x * this.size + this.deltaX, this.y * this.size + this.deltaY, this.size, this.size);
|
||
}
|
||
else{
|
||
this.scene.strokeRect(this.x * this.size + this.deltaX + big_square_line_left, this.y * this.size + this.deltaY + big_square_line_top, this.size, this.size);
|
||
}
|
||
|
||
}
|
||
get value(){
|
||
return this._value;
|
||
}
|
||
} |