123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- import { app as App } from "../app";
- import { label as Label } from "./label";
- import { menu as Menu } from "../core/application/menu";
- import { ELEMENTS_CLASS } from "../core/enums/elements-class-enum";
- const HOVER_STYLE = {
- fill: "#9bc364",
- strokeWidth: 2,
- stroke: "#FF0000"
- };
- export const point = (function() {
- let style = {
- fill: "#9bc364",
- strokeWidth: 1,
- stroke: "#9bc364"
- };
- let _tool = {};
- let states = ["center"];
- let state = undefined;
- let points = [0, 0];
- function _draw(e) {
- if (state == undefined) {
- state = states[0];
- App.setStatus("Selecione o centro do Ponto");
- } else if (state == states[0]) {
- let pos = App.pos();
- this.points[0] = pos.x;
- this.points[1] = pos.y;
- let p = this.points.slice();
- this.drawPoint(p[0], p[1], true);
- state = undefined;
- App.clearSelectedTool();
- App.setStatus("");
- }
- }
- function _bootstrap() {
- Menu.add(_tool);
- }
- function _drawPoint(x, y, useLabel) {
- let group = new Konva.Group({
- draggable: true,
- resizeEnabled: false
- });
- let circle = new Konva.Circle({
- x: x,
- y: y,
- radius: 5,
- fill: "#9bc364",
- stroke: "#9bc364",
- strokeWidth: 1,
- strokeScaleEnabled: false,
- draggable: false,
- resizeEnabled: false,
- transformEnabled: false,
- style: style,
- class: ELEMENTS_CLASS.POINT,
- connections: [],
- listening: true
- });
- // mouse over event
- circle.on("mouseover", function() {
- this.strokeWidth(HOVER_STYLE.strokeWidth);
- this.stroke(HOVER_STYLE.stroke);
- App.stage.draw();
- });
- circle.on("mouseout", function() {
- this.strokeWidth(style.strokeWidth);
- this.stroke(style.stroke);
- App.stage.draw();
- });
- let text = new Konva.Text({
- x: x + 10,
- y: y - 10,
- text: Label.draw(),
- fontSize: 12,
- fontFamily: "Calibri",
- fill: "#434a45",
- draggable: false,
- resizeEnabled: false,
- transformEnabled: false,
- selectable: false
- });
- group.add(circle);
- if (useLabel != undefined && useLabel) {
- group.add(text);
- }
- let layer = App.currentLayer();
- layer.add(group);
- App.stage.draw();
- App.pushObject(group);
- return group;
- }
- function _click(e) {
- if (state == states[0]) {
- App.clearSelectedTool();
- _clearState();
- return;
- }
- App.setSelectedTool(_tool);
- state = states[0];
- App.setStatus("Selecione o centro da Ponto");
- }
- function _clearState() {
- state = undefined;
- }
- _tool = {
- id: "point",
- title: "Ponto",
- icon: "point",
- click: _click,
- draw: _draw,
- drawPoint: _drawPoint,
- points: points
- };
- _bootstrap();
- return {
- draw: _draw,
- click: _click,
- drawPoint: _drawPoint
- };
- })();
|