gd-canvas
Version:
This set of libraries was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.0 and no dependencies accept gd-tree (it has jquery and jstree) and gd-graph (it has jquery and chart.js).
993 lines (992 loc) • 371 kB
JavaScript
import { __read, __spread } from "tslib";
import { Component, } from '@angular/core';
import { Input } from '@angular/core';
import { ViewChild } from '@angular/core';
import { Actions } from './gd-canvas.base';
import { ShapeWithDistance } from './gd-canvas.base';
import { Types } from './gd-canvas.base';
import { CustomObject } from 'gd-canvas-custom-types';
import { Selector } from './gd-canvas.selector';
import { WireText } from './gd-canvas.wireText';
import { Tools } from './gd-canvas.tools';
import { UndoRedoManager } from './gd-canvas.undoRedo';
import { IDGenerator, State } from 'gd-common';
import { Point } from 'gd-common';
import { Rect } from 'gd-common';
import { GDCommonTools } from 'gd-common';
import * as i0 from "@angular/core";
import * as i1 from "./gd-canvas.service";
import * as i2 from "gd-common";
import * as i3 from "gd-tooltip";
var _c0 = ["tooltip"];
var GDCanvasComponent = /** @class */ (function () {
//#endregion
function GDCanvasComponent(el, _differs, service, service1) {
var _this = this;
this.el = el;
this._differs = _differs;
this.service = service;
this.service1 = service1;
this.theImageOn = true;
this.theImageZoomOn = false;
this.theImagePanOn = false;
this.theImageOffsetX = 0;
this.theImageOffsetY = 0;
this.isAltKey = false; // ADD TO SELECTED
this.isMouseDown = false;
this.scale = 1;
this.offsetLeft = 0;
this.offsetTop = 0;
this.canvasOffsetX = 0;
this.canvasOffsetY = 0;
this.startX = 0;
this.startY = 0;
this.timer = null;
this.Mode = '';
this.Action = '';
this.IsActive = true;
this.theTooltipOn = true;
this.tooltipContent = '<div></div>';
this.id = new IDGenerator().newID();
this.tools = new Tools();
this.tools2 = new GDCommonTools();
this.text = new WireText();
this.selector = new Selector(this, service);
this.undoRedo = new UndoRedoManager();
this.map = new Map();
this.mapChildren = new Map();
this.mapVisibility = new Map();
this._differ = _differs.find({}).create();
this.subscription = service.redrawRefChildren$.subscribe(function () { return _this.onRedrawRefChildren(); });
}
Object.defineProperty(GDCanvasComponent.prototype, "action", {
get: function () { return this._action; },
set: function (a) { this._action = a; },
enumerable: true,
configurable: true
});
Object.defineProperty(GDCanvasComponent.prototype, "ID", {
get: function () { return this.id; },
enumerable: true,
configurable: true
});
GDCanvasComponent.prototype.ngDoCheck = function () {
var change = this._differ.diff(this.map);
if (change) {
// change.forEachChangedItem( (record: KeyValueChangeRecord<any, any>) =>
// {
// console.log(record.key + ': ' + record.previousValue + '=>' + record.currentValue)
// });
// change.forEachRemovedItem( (record: KeyValueChangeRecord<any, any>) =>
// {
// console.log(record.key + ': ' + record.previousValue + '=>' + record.currentValue)
// });
change.forEachAddedItem(function (record) {
// console.log(record.key + ': ' + record.previousValue + '=>' + record.currentValue)
// if( record.currentValue === 1 ) this.DrawCustom( record.currentValue );
});
}
};
GDCanvasComponent.prototype.onRedrawRefChildren = function () {
// for( let i = 0; i < this.parent.areas.length; ++i ) { if( this.parent.areas[i] .IsRef ) { this.parent.areas[i] .needRefresh = true; } }
// for( let i = 0; i < this.parent.shapes.length; ++i ) { if( this.parent.shapes[i] .IsRef ) { this.parent.shapes[i] .needRefresh = true; } }
// for( let i = 0; i < this.parent.gondolas.length; ++i ) { if( this.parent.gondolas[i].IsRef ) { this.parent.gondolas[i].needRefresh = true; } }
// for( let i = 0; i < this.parent.polygons.length; ++i ) { if( this.parent.polygons[i].IsRef ) { this.parent.polygons[i].needRefresh = true; } }
// for( let i = 0; i < this.parent.texts.length; ++i ) { if( this.parent.texts[i] .IsRef ) { this.parent.texts[i] .needRefresh = true; } }
// for( let i = 0; i < this.parent.callouts.length; ++i ) { if( this.parent.callouts[i].IsRef ) { this.parent.callouts[i].needRefresh = true; } }
this.DRAW(null);
};
GDCanvasComponent.prototype.setCustomVisibility = function (type, visibile) {
this.map.set(type, 1);
this.mapVisibility.set(type, visibile);
return "OK";
};
GDCanvasComponent.prototype.addCustomContainer = function (type, children) {
if (children !== Types.shape)
return "Allowed children shapes";
this.map.set(type, 1);
this.mapChildren.set(type, children);
return "OK";
};
GDCanvasComponent.prototype.addCustomObject = function (type) {
this.map.set(type, 6);
return "OK";
};
GDCanvasComponent.prototype.ngAfterViewInit = function () {
// disable browser contextmenu
// $(document).bind( 'contextmenu', function (e) { return false; } );
// ProjectComponent has it
var _this = this;
this.canvas = this.el.nativeElement.children[0].children[0];
var polygons = this.el.nativeElement.firstChild.children[0].children[0];
polygons.width = this.width;
polygons.height = this.height;
var areas = this.el.nativeElement.firstChild.children[0].children[1];
areas.width = this.width;
areas.height = this.height;
var references = this.el.nativeElement.firstChild.children[0].children[2];
references.width = this.width;
references.height = this.height;
var blocks = this.el.nativeElement.firstChild.children[0].children[3];
blocks.width = this.width;
blocks.height = this.height;
var shapes = this.el.nativeElement.firstChild.children[0].children[4];
shapes.width = this.width;
shapes.height = this.height;
var texts = this.el.nativeElement.firstChild.children[0].children[5];
texts.width = this.width;
texts.height = this.height;
var custom2 = this.el.nativeElement.firstChild.children[0].children[6];
custom2.width = this.width;
custom2.height = this.height;
var polylines = this.el.nativeElement.firstChild.children[0].children[7];
polylines.width = this.width;
polylines.height = this.height;
var dimensions = this.el.nativeElement.firstChild.children[0].children[8];
dimensions.width = this.width;
dimensions.height = this.height;
var segments = this.el.nativeElement.firstChild.children[0].children[9];
segments.width = this.width;
segments.height = this.height;
var arcs = this.el.nativeElement.firstChild.children[0].children[10];
arcs.width = this.width;
arcs.height = this.height;
var callouts = this.el.nativeElement.firstChild.children[0].children[11];
callouts.width = this.width;
callouts.height = this.height;
var selected = this.el.nativeElement.firstChild.children[0].children[12];
selected.width = this.width;
selected.height = this.height;
var helper = this.el.nativeElement.firstChild.children[0].children[13];
helper.width = this.width;
helper.height = this.height;
this.context = Array();
this.context.push(polygons.getContext('2d'));
this.context.push(areas.getContext('2d'));
this.context.push(references.getContext('2d'));
this.context.push(blocks.getContext('2d'));
this.context.push(shapes.getContext('2d'));
this.context.push(texts.getContext('2d'));
this.context.push(custom2.getContext('2d'));
this.context.push(polylines.getContext('2d'));
this.context.push(dimensions.getContext('2d'));
this.context.push(segments.getContext('2d'));
this.context.push(arcs.getContext('2d'));
this.context.push(callouts.getContext('2d'));
this.context.push(selected.getContext('2d'));
this.context.push(helper.getContext('2d'));
this.action = Actions.none;
this.Mode = 'design';
document.addEventListener('keydown', function (event) { _this.OnKeyDown(event); }, false);
this.canvas.addEventListener('mouseleave', function (event) {
_this.tooltip.ActiveParentID = '';
_this.tooltip.Hide();
});
this.canvas.addEventListener('mouseenter', function (event) {
_this.tooltip.ActiveParentID = 'gd_canvas_' + _this.id;
});
// setTimeout( () =>
// {
// var myScroll = this.parent.element.getElementsByClassName('scrollContainer');
// this.scrollContainer = myScroll[0];
// var rect = this.scrollContainer.getBoundingClientRect();
// this.SetSizeView ( rect.width, rect.height );
// this.SetSizeDrawing( this.width, this.height );
// }, 1000);
var prt = this.el.nativeElement.parentNode;
while (prt.clientWidth === 0 || prt.clientHeight === 0) {
prt = prt.parentNode;
}
this.scrollContainer = prt;
this.SetSizeView(this.scrollContainer.clientWidth, this.scrollContainer.clientHeight);
this.SetSizeDrawing(this.width, this.height);
this.tooltip.Hide();
this.tooltip.Parent = this.canvas;
this.el.nativeElement.children[0].children[0].id = 'gd_canvas_' + this.id;
this.el.nativeElement.children[1].id = 'gd_canvas_tooltip_' + this.id;
setTimeout(function () {
_this.service.CanvasIsReady('gd_canvas_' + _this.id);
_this.service.CustomLayerRequest('gd_canvas_' + _this.id);
}, 500);
};
GDCanvasComponent.prototype.SetSizeView = function (w, h) {
this.el.nativeElement.children[0].style.width = (w + 1).toString() + 'px';
this.el.nativeElement.children[0].style.height = (h + 1).toString() + 'px';
};
GDCanvasComponent.prototype.SetSizeDrawing = function (w, h) {
this.el.nativeElement.children[0].children[0].style.width = (w + 1).toString() + 'px';
this.el.nativeElement.children[0].children[0].style.height = (h + 1).toString() + 'px';
};
GDCanvasComponent.prototype.ngOnDestroy = function () {
};
GDCanvasComponent.prototype.OnKeyDown = function (event) {
if (event.keyCode === 27) {
if (this.action === Actions.addRegularGondola) {
this.Action = '';
this.action = Actions.none;
return;
}
if (this.action === Actions.addWallGondola) {
this.Action = '';
this.action = Actions.none;
return;
}
if (this.action === Actions.addArea) {
this.Action = '';
this.action = Actions.none;
return;
}
if (this.action === Actions.selectShapesInOrder) {
this.Action = '';
this.action = Actions.none;
return;
}
if (this.action === Actions.selectShapes) {
this.Action = '';
this.action = Actions.none;
return;
}
}
if (this.selector.focused === null)
return;
if (this.IsActive === false)
return;
if (event.keyCode === 46)
this.parent.onDeleteAction1();
if (!event.ctrlKey)
return;
var step = 1 / this.scale;
switch (event.keyCode) {
case 37:
this.selector.focused.MoveOffset(-step, 0);
break;
case 38:
this.selector.focused.MoveOffset(0, -step);
break;
case 39:
this.selector.focused.MoveOffset(step, 0);
break;
case 40:
this.selector.focused.MoveOffset(0, step);
break;
case 40:
this.selector.focused.MoveOffset(0, step);
break;
case 46:
this.parent.onDeleteAction1();
break;
}
this.drawSelected(this.context[12]);
};
GDCanvasComponent.prototype.OnMouseWheel = function (event) {
var _this = this;
event.preventDefault();
if (this.scale > 4 && event.wheelDelta > 0)
return;
if (this.theImagePanOn)
return;
if (this.timer != null) {
clearTimeout(this.timer);
}
this.tooltipContent = '<div></div>';
this.canvasOffsetX = this.el.nativeElement.children[0].scrollLeft > 0 ? -this.el.nativeElement.children[0].scrollLeft / this.scale : this.canvasOffsetX;
this.canvasOffsetY = this.el.nativeElement.children[0].scrollTop > 0 ? -this.el.nativeElement.children[0].scrollTop / this.scale : this.canvasOffsetY;
this.el.nativeElement.children[0].scrollLeft = 0;
this.el.nativeElement.children[0].scrollTop = 0;
var x = event.offsetX / this.scale - this.canvasOffsetX;
var y = event.offsetY / this.scale - this.canvasOffsetY;
if (x < -0.004)
x = 0;
if (y < -0.004)
y = 0;
var pt = new Point(x, y);
var wheel = event.wheelDelta > 0 ? 1 : -1;
var factor = 0;
if (this.scale <= 1) {
factor = 0.1;
}
else if (this.scale > 1 && this.scale <= 2) {
factor = 0.2;
}
else if (this.scale > 2 && this.scale <= 4) {
factor = 0.4;
}
else {
factor = 0.8;
}
if (this.scale + (wheel * factor) < 0.1)
return;
this.action = Actions.scale;
this.Action = Actions[this.action];
this.zoom(wheel * factor, event.offsetX, event.offsetY);
var offset1 = new Point(this.canvasOffsetX, this.canvasOffsetY);
var screen = new Point(event.offsetX, event.offsetY);
this.service.CanvasInfo({ point: pt, offset: offset1, scale: this.scale, screen: screen });
if (this.theImageZoomOn) {
this.timer = setTimeout(function () {
//var d = new Date();
//var s = d.getSeconds();
//var n = d.getMilliseconds();
//console.log(s + '.' + n);
_this.adjustScrollbar();
var polygons = _this.el.nativeElement.firstChild.children[0].children[0];
polygons.width = (_this.width + _this.canvasOffsetX) * _this.scale + 1;
polygons.height = (_this.height + _this.canvasOffsetY) * _this.scale + 1;
var areas = _this.el.nativeElement.firstChild.children[0].children[1];
areas.width = (_this.width + _this.canvasOffsetX) * _this.scale + 1;
areas.height = (_this.height + _this.canvasOffsetY) * _this.scale + 1;
var references = _this.el.nativeElement.firstChild.children[0].children[2];
references.width = (_this.width + _this.canvasOffsetX) * _this.scale + 1;
references.height = (_this.height + _this.canvasOffsetY) * _this.scale + 1;
var blocks = _this.el.nativeElement.firstChild.children[0].children[3];
blocks.width = (_this.width + _this.canvasOffsetX) * _this.scale + 1;
blocks.height = (_this.height + _this.canvasOffsetY) * _this.scale + 1;
var shapes = _this.el.nativeElement.firstChild.children[0].children[4];
shapes.width = (_this.width + _this.canvasOffsetX) * _this.scale + 1;
shapes.height = (_this.height + _this.canvasOffsetY) * _this.scale + 1;
var texts = _this.el.nativeElement.firstChild.children[0].children[5];
texts.width = (_this.width + _this.canvasOffsetX) * _this.scale + 1;
texts.height = (_this.height + _this.canvasOffsetY) * _this.scale + 1;
var custom2 = _this.el.nativeElement.firstChild.children[0].children[6];
custom2.width = (_this.width + _this.canvasOffsetX) * _this.scale + 1;
custom2.height = (_this.height + _this.canvasOffsetY) * _this.scale + 1;
var polylines = _this.el.nativeElement.firstChild.children[0].children[7];
polylines.width = (_this.width + _this.canvasOffsetX) * _this.scale + 1;
polylines.height = (_this.height + _this.canvasOffsetY) * _this.scale + 1;
var dimensions = _this.el.nativeElement.firstChild.children[0].children[8];
dimensions.width = (_this.width + _this.canvasOffsetX) * _this.scale + 1;
dimensions.height = (_this.height + _this.canvasOffsetY) * _this.scale + 1;
var segments = _this.el.nativeElement.firstChild.children[0].children[9];
segments.width = (_this.width + _this.canvasOffsetX) * _this.scale + 1;
segments.height = (_this.height + _this.canvasOffsetY) * _this.scale + 1;
var arcs = _this.el.nativeElement.firstChild.children[0].children[10];
arcs.width = (_this.width + _this.canvasOffsetX) * _this.scale + 1;
arcs.height = (_this.height + _this.canvasOffsetY) * _this.scale + 1;
var callouts = _this.el.nativeElement.firstChild.children[0].children[11];
callouts.width = (_this.width + _this.canvasOffsetX) * _this.scale + 1;
callouts.height = (_this.height + _this.canvasOffsetY) * _this.scale + 1;
var selected = _this.el.nativeElement.firstChild.children[0].children[12];
selected.width = (_this.width + _this.canvasOffsetX) * _this.scale + 1;
selected.height = (_this.height + _this.canvasOffsetY) * _this.scale + 1;
var helper = _this.el.nativeElement.firstChild.children[0].children[13];
helper.width = (_this.width + _this.canvasOffsetX) * _this.scale + 1;
helper.height = (_this.height + _this.canvasOffsetY) * _this.scale + 1;
_this.DRAW(null);
_this.action = Actions.none;
_this.Action = '';
_this.theImageZoomOn = false;
//var d = new Date();
//var s = d.getSeconds();
//var n = d.getMilliseconds();
//console.log('wheel done = ' + s + '.' + n);
}, 1000);
}
};
GDCanvasComponent.prototype.OnMouseUp = function (event) {
var _this = this;
this.isMouseDown = false;
this.isAltKey = false;
if (event.button === 2)
return;
if (this.theImageZoomOn)
return;
if (this.action === Actions.select) {
this.Action = '';
this.selectInRect();
return;
}
if (this.action === Actions.selectShapes) {
this.Action = '';
this.selectShapes();
return;
}
if (this.action === Actions.selectShapesInOrder) {
this.selectShapesInOrder();
return;
}
if (CustomObject.IsCustomAction(this.action)) {
this.Action = '';
this.parent.CompleteCustomAction(this.action);
return;
}
if (this.prevPos === null || this.prevPos === undefined) // drop case
{
// const x = event.offsetX / this.scale - this.canvasOffsetX;
// const y = event.offsetY / this.scale - this.canvasOffsetY;
// this.dropPos = new PointCore( x, y );
// return;
}
this.prevPos = null;
var dragX = 0;
var dragY = 0;
if (this.Mode === 'design') {
if (this.selector.focused !== null && this.focusedInitPos != null) {
dragX = this.focusedInitPos.x - this.selector.focused.X;
dragY = this.focusedInitPos.y - this.selector.focused.Y;
this.focusedInitPos = null;
}
if (this.action === Actions.move) {
if (this.IsDragEnough(dragX, dragY)) {
for (var i = 0; i < this.selector.selected.length; ++i) {
if (this.selector.selected[i].State === State.unchanged)
continue;
alert(this.selector.selected[i].State);
if (CustomObject.IsCustomType(this.selector.focused)) {
this.parent.updateCustom(this.selector.selected[i].ID, this.selector.selected[i]);
}
else {
var id = this.selector.selected[i].ID;
var item = this.selector.selected[i].Model;
switch (this.selector.selected[i].Type) {
case Types.polygon:
this.parent.updatePolygon(id, item);
break;
case Types.reference:
this.parent.updateReference(id, item);
break;
case Types.shape:
this.parent.updateShape(id, item);
break;
case Types.text:
this.parent.updateText(id, item);
break;
case Types.block:
this.parent.updateBlock(id, item);
break;
case Types.polyline:
this.parent.updatePolyline(id, item);
break;
case Types.segment:
this.parent.updateSegment(id, item);
break;
case Types.arc:
this.parent.updateArc(id, item);
break;
case Types.dimension:
this.parent.updateDimension(id, item);
break;
case Types.callout:
this.parent.updateCalluot(id, item);
break;
}
}
}
}
}
if (this.action === Actions.moveActiveLine) {
for (var i = 0; i < this.selector.selected.length; ++i) {
if (this.selector.selected[i].State === State.unchanged)
continue;
alert(this.selector.selected[i].State);
if (CustomObject.IsCustomType(this.selector.focused)) {
this.parent.updateCustom(this.selector.selected[i].ID, this.selector.selected[i]);
}
else {
var id = this.selector.selected[i].ID;
var item = this.selector.selected[i].Model;
switch (this.selector.selected[i].Type) {
case Types.polygon:
this.parent.updatePolygon(id, item);
break;
case Types.reference:
this.parent.updateReference(id, item);
break;
case Types.shape:
this.parent.updateShape(id, item);
break;
case Types.text:
this.parent.updateText(id, item);
break;
case Types.block:
this.parent.updateBlock(id, item);
break;
case Types.polyline:
this.parent.updatePolyline(id, item);
break;
case Types.segment:
this.parent.updateSegment(id, item);
break;
case Types.arc:
this.parent.updateArc(id, item);
break;
case Types.dimension:
this.parent.updateDimension(id, item);
break;
case Types.callout:
this.parent.updateCalluot(id, item);
break;
}
}
}
}
//?????????????????????????????????????????????????????????????????????
if (this.action === Actions.resize) {
if (CustomObject.IsCustomType(this.selector.focused)) {
var x = event.offsetX / this.scale - this.canvasOffsetX;
var y = event.offsetY / this.scale - this.canvasOffsetY;
var point = new Point(x, y);
if (this.IsDragEnough(dragX, dragY)) {
CustomObject.AfterMouseAction(this.selector.focused);
for (var i = 0; i < this.selector.selected.length; ++i) {
switch (this.selector.selected[i].type) {
case Types.block:
{
this.parent.updateBlock(this.selector.selected[i].ID, this.selector.selected[i].GetModel());
}
break;
case Types.segment:
{
if (this.selector.selected[i].Parent.Type === Types.block) {
this.selector.selected[i].Parent.needRefresh = true;
this.parent.DrawBlocks();
this.parent.updateBlock(this.selector.selected[i].ID, this.selector.selected[i].GetModel());
}
else {
this.parent.updateSegment(this.selector.selected[i].ID, this.selector.selected[i].GetModel());
}
}
break;
}
}
}
}
switch (this.selector.focused.type) {
case Types.shape:
{
var x = event.offsetX / this.scale - this.canvasOffsetX;
var y = event.offsetY / this.scale - this.canvasOffsetY;
var point = new Point(x, y);
if (this.IsDragEnough(dragX, dragY)) {
this.parent.ShapeDrop(point);
for (var i = 0; i < this.selector.selected.length; ++i) {
switch (this.selector.selected[i].type) {
case Types.block:
{
this.parent.updateBlock(this.selector.selected[i].ID, this.selector.selected[i].Model);
}
break;
case Types.segment:
{
if (this.selector.selected[i].Parent.Type === Types.block) {
this.selector.selected[i].Parent.needRefresh = true;
this.parent.DrawBlocks();
this.parent.updateBlock(this.selector.selected[i].ID, this.selector.selected[i].Model);
}
else {
this.parent.updateSegment(this.selector.selected[i].ID, this.selector.selected[i].Model);
}
}
break;
}
}
}
}
break;
case Types.polyline:
{
if (this.selector.focused.State === State.changed) {
this.parent.updatePolyline(this.selector.focused.ID, this.selector.focused.Model);
}
}
break;
case Types.text:
{
if (this.IsDragEnough(dragX, dragY)) {
for (var i = 0; i < this.selector.selected.length; ++i) {
switch (this.selector.selected[i].type) {
case Types.block:
{
this.parent.updateBlock(this.selector.selected[i].ID, this.selector.selected[i].GetModel());
}
break;
case Types.segment:
{
if (this.selector.selected[i].Parent.Type === Types.block) {
this.selector.selected[i].Parent.needRefresh = true;
this.parent.DrawBlocks();
this.parent.updateBlock(this.selector.selected[i].ID, this.selector.selected[i].GetModel());
}
else {
this.parent.updateSegment(this.selector.selected[i].ID, this.selector.selected[i].GetModel());
}
}
break;
}
}
}
}
break;
// case Types.gondola :
// {
// const x = event.offsetX / this.scale - this.canvasOffsetX;
// const y = event.offsetY / this.scale - this.canvasOffsetY;
// const point = new Point( x, y );
// if( this.IsDragEnough( dragX, dragY ) )
// {
// CustomObject.AfterAction( this.selector.focused );
// for( let i = 0; i < this.selector.selected.length; ++i )
// {
// switch( this.selector.selected[i].type )
// {
// case Types.block :
// {
// this.parent.updateBlock( this.selector.selected[i].ID, this.selector.selected[i].GetModel() );
// }
// break;
// case Types.segment :
// {
// if( this.selector.selected[i].Parent.Type === Types.block )
// {
// this.selector.selected[i].Parent.needRefresh = true;
// this.parent.DrawBlocks();
// this.parent.updateBlock( this.selector.selected[i].ID, this.selector.selected[i].GetModel() );
// }
// else
// {
// this.parent.updateSegment( this.selector.selected[i].ID, this.selector.selected[i].GetModel() );
// }
// }
// break;
// }
// }
// }
// }
// break;
case Types.segment:
{
for (var i = 0; i < this.selector.selected.length; ++i) {
if (!this.IsDragEnough(dragX, dragY))
continue;
switch (this.selector.selected[i].type) {
case Types.segment:
{
if (this.selector.selected[i].Parent !== null && this.selector.selected[i].Parent.Type === Types.block) {
this.selector.selected[i].Parent.needRefresh = true;
this.DrawBlocks();
this.parent.updateBlock(this.selector.selected[i].ID, this.selector.selected[i].GetModel());
}
else {
this.parent.updateSegment(this.selector.selected[i].ID, this.selector.selected[i].GetModel());
}
}
break;
}
}
}
break;
}
this.selector.focused.activePoint = -1;
// this.selector.focused.activeLine = -1;
this.action = Actions.none;
this.Action = '';
this.selector.focused.Refresh();
return;
}
}
if (this.selector.focused !== null) {
this.selector.focused.activePoint = -1;
// this.selector.focused.activeLine = -1;
}
if (!event.ctrlKey) {
dragX = 0;
dragY = 0;
}
if (this.theImagePanOn) {
this.timer = setTimeout(function () {
if (_this.selector.focused === null) {
if (dragX === 0 && dragY === 0) {
}
else {
if (Math.abs(dragX) < 5 && Math.abs(dragY) < 5) {
_this.theImageOffsetX += dragX;
_this.theImageOffsetY += dragY;
}
}
}
_this.canvasOffsetX = _this.theImageOffsetX / _this.scale;
_this.canvasOffsetY = _this.theImageOffsetY / _this.scale;
_this.adjustScrollbar();
_this.DRAW(null);
_this.action = Actions.none;
_this.Action = '';
_this.theImagePanOn = false;
}, 2000);
}
else {
if (dragX === 0 && dragY === 0) {
}
else {
if (Math.abs(dragX) < 3 && Math.abs(dragY) < 3) {
this.canvasOffsetX += (dragX / this.scale);
this.canvasOffsetY += (dragY / this.scale);
this.DRAW(null);
}
}
if (this.selector.focused !== null && (this.action === Actions.move ||
this.action === Actions.rotate ||
this.action === Actions.resize)) {
for (var i = 0; i < this.selector.selected.length; ++i) {
// const id = this.selector.selected[i].ID;
// const item = this.selector.selected[i].GetModel();
// switch( this.selector.selected[i].Type )
// {
// case Types.block : this.parent.updateBlock( id, item ); break;
// }
}
}
this.action = Actions.none;
this.Action = '';
if (this.selector.focused !== null) {
this.selector.focused.Refresh();
}
}
};
GDCanvasComponent.prototype.OnMouseMove = function (event) {
if (this.Mode !== 'design' && !this.isMouseDown)
return;
var x = event.offsetX / this.scale - this.canvasOffsetX;
var y = event.offsetY / this.scale - this.canvasOffsetY;
if (x < -0.004)
x = 0;
if (y < -0.004)
y = 0;
var pt = new Point(x, y);
var offset = new Point(this.canvasOffsetX, this.canvasOffsetY);
var screen = new Point(event.offsetX, event.offsetY);
this.currPos = pt;
if (this.isMouseDown) {
this.Action = Actions[this.action];
if (this.action === Actions.select ||
this.action === Actions.selectShapes) {
this.selector.EndX = event.offsetX;
this.selector.EndY = event.offsetY;
this.selector.Draw(this.context[12]);
return;
}
if (this.action === Actions.selectShapesInOrder) {
this.selector.EndX = event.offsetX;
this.selector.EndY = event.offsetY;
this.selector.Draw(this.context[12]);
return;
}
if (CustomObject.IsCustomAction(this.action)) {
this.selector.EndX = event.offsetX;
this.selector.EndY = event.offsetY;
this.selector.Draw(this.context[12]);
return;
}
if (this.action === Actions.pan && event.ctrlKey) {
this.pan(event);
this.service.CanvasInfo({ point: pt, offset: offset, scale: this.scale, screen: screen });
return;
}
}
else {
this.service.CanvasInfo({ point: pt, offset: offset, scale: this.scale, screen: screen });
return;
}
if (this.Mode === 'design') {
this.parent.ShapeMoveOver(pt);
var _x = event.offsetX;
var _y = event.offsetY;
var dragX = event.pageX - this.startX;
var dragY = event.pageY - this.startY;
this.startX = event.pageX;
this.startY = event.pageY;
switch (this.action) {
case Actions.move:
this.selector.focused.Move(_x, _y);
this.undoRedo.RecordAction(this.selector.focused.X, this.selector.focused.Y, 0, 0, 0);
break;
case Actions.moveActiveLine:
this.selector.focused.MoveActiveLine(dragX, dragY);
this.undoRedo.RecordAction(this.selector.focused.X, this.selector.focused.Y, 0, 0, 0);
break;
case Actions.resize:
this.selector.focused.Resize(_x, _y);
this.undoRedo.RecordAction(0, 0, this.selector.focused.W, this.selector.focused.H, 0);
break;
case Actions.rotate:
this.selector.focused.Rotate(_x, _y);
this.undoRedo.RecordAction(0, 0, 0, 0, this.selector.focused.Angle);
break;
}
}
this.drawSelected(this.context[12]);
this.drawHelper(this.context[13]);
};
GDCanvasComponent.prototype.OnMouseDown = function (event) {
this.prevPos = new Point(event.offsetX, event.offsetY);
if (this.theImagePanOn)
return;
if (this.theImageZoomOn)
return;
var x = event.offsetX / this.scale - this.canvasOffsetX;
var y = event.offsetY / this.scale - this.canvasOffsetY;
var point = new Point(x, y);
this.startX = event.pageX;
this.startY = event.pageY;
if (event.button === 2) {
if (this.parent.isActive) {
this.selector.Select(point, true);
if (this.selector.focused !== null) {
if (this.selector.focused.IsRef)
return;
this.theTooltipOn = false;
//if( this.selector.focused.type === Types.polyline )
//{
// this.selector.focused.SetLine( point );
//}
this.service.ShowContextmenu({ canvasID: 'gd_canvas_' + this.ID, event: event, type: this.selector.focused.Type });
}
else {
this.service.ShowContextmenu({ canvasID: 'gd_canvas_' + this.ID, event: event, type: null });
}
}
return;
}
this.isMouseDown = event.buttons === 1;
this.isAltKey = event.altKey;
if (this.selector.focused !== null) {
this.selector.focused.SetPoint(point);
// redo this
var flag = false;
if (this.selector.focused.type === Types.polyline) {
if (this.selector.focused.isMiddle)
flag = true;
}
if (flag || this.selector.focused.activePoint !== -1) {
if (CustomObject.IsCustomType(this.selector.focused)) {
if (CustomObject.BeforeMouseAction(this.selector.focused)) {
this.drawShapes(this.context[4]);
}
}
this.action = Actions.resize;
this.undoRedo.TransactionStart();
this.undoRedo.CreateAction('resize', this.selector.focused);
}
else {
this.selector.focused.SetLine(point);
if (this.selector.focused.activeLine !== -1) {
if (event.ctrlKey) {
this.action = Actions.moveActiveLine;
this.undoRedo.TransactionStart();
this.undoRedo.CreateAction('moveActiveLine', this.selector.focused);
}
}
}
var center = new Point(this.selector.focused.X, this.selector.focused.Y);
var point_ = new Point(this.selector.focused.X + this.selector.focused.W / 2, this.selector.focused.Y - 16 / this.scale);
var delta = this.tools.Rotate(point_, center, this.selector.focused.Angle);
var rotated = new Point(center.x + delta.x, center.y + delta.y);
var radius = 5 / this.scale;
var rc = new Rect(rotated.x - radius, rotated.y - radius, radius + radius, radius + radius);
if (rc.IsContains(point)) {
this.selector.focused.SetCenter(point);
this.action = Actions.rotate;
this.undoRedo.TransactionStart();
this.undoRedo.CreateAction('rotate', this.selector.focused);
}
}
if (CustomObject.IsCustomAction(this.action) || this.action === Actions.selectShapesInOrder || this.action === Actions.selectShapes) {
this.selector.StartX = event.offsetX;
this.selector.StartY = event.offsetY;
if (this.action === Actions.selectShapes) {
var res = this.selector.UnSelect();
this.DRAW(res);
}
}
if (this.action !== Actions.none)
return;
if (!this.selector.Select(point, false)) {
if (!event.ctrlKey) {
this.action = Actions.select;
this.selector.StartX = event.offsetX;
this.selector.StartY = event.offsetY;
var res = this.selector.UnSelect();
this.DRAW(res);
}
else {
this.action = Actions.pan;
}
}
else {
this.action = Actions.move;
this.focusedInitPos = new Point(this.selector.focused.X, this.selector.focused.Y);
this.undoRedo.TransactionStart();
this.undoRedo.CreateAction('move', this.selector.focused);
}
};
GDCanvasComponent.prototype.IsDragEnough = function (dragX, dragY) {
var isDragEnouth = false;
if (dragX === 0 && dragY === 0)
return isDragEnouth;
if (Math.abs(dragX) < 5 && Math.abs(dragY) < 5) {
isDragEnouth = false;
switch (this.action) {
case Actions.move:
{
for (var i = 0; i < this.selector.selected.length; ++i) {
this.selector.selected[i].MoveOffset(dragX / this.scale, dragY / this.scale);
}
}
break;
case Actions.resize:
{
this.selector.focused.Resize1(dragX / this.scale, dragY / this.scale);
}
break;
}
this.drawSelected(this.context[12]);
}
else {
isDragEnouth = true;
this.service.SelectedChanged(this.selector.focused);
if (this.undoRedo.transactions[this.undoRedo.current].isRecording) {
// this.service.UndoDisabled( false );
this.undoRedo.TransactionEnd();
}
}
return isDragEnouth;
};
GDCanvasComponent.prototype.selectInRect = function () {
var redraw = new Array();
redraw.push('selected');
redraw.push('helper');
if (this.parent.drawing.IsAreasVisible) {
if (this.parent.areas !== null) {
for (var i = 0; i < this.parent.areas.length; ++i) {
var isAdded = this.selector.Add(this.parent.areas[i]);
if (isAdded && redraw.indexOf('area') === -1) {
redraw.push('area');
}
}
}
}
if (this.parent.drawing.IsShapesVisible) {
for (var i = 0; i < this.parent.shapes.length; ++i) {
if (this.parent.shapes[i].ParentType === Types.shapeContainer)
continue;
var isAdded = this.selector.Add(this.parent.shapes[i]);
if (isAdded && redraw.indexOf('shape') === -1) {
redraw.push('shape');
}
}
}
if (this.parent.drawing.IsCalloutsVisible) {
for (var i = 0; i < this.parent.callouts.length; ++i) {
var isAdded = this.selector.Add(this.parent.callouts[i]);
if (isAdded && redraw.indexOf('callout') === -1) {
redraw.push('callout');
}
}
for (var i = 0; i < this.parent.texts.length; ++i) {
if (this.parent.texts[i].ParentType !== 0)
continue;
var isAdded = this.selector.Add(this.parent.texts[i]);
if (isAdded && this.parent.texts[i].ParentType === 1) {
if (redraw.indexOf('polygon') === -1) {
redraw.push('polygon');
}
}
else {