diff --git a/src/app/cartography/map/map.component.scss b/src/app/cartography/map/map.component.scss index 42723990..7fb7062f 100644 --- a/src/app/cartography/map/map.component.scss +++ b/src/app/cartography/map/map.component.scss @@ -2,7 +2,4 @@ svg { display: block; } -image.over { - fill: #000; -} diff --git a/src/app/cartography/shared/tool.ts b/src/app/cartography/shared/tool.ts new file mode 100644 index 00000000..a3a3282a --- /dev/null +++ b/src/app/cartography/shared/tool.ts @@ -0,0 +1,5 @@ +import {SVGSelection} from "../../map/models/types"; + +export interface Tool { + connect(selection: SVGSelection); +} diff --git a/src/app/cartography/shared/tools/selection-tool.ts b/src/app/cartography/shared/tools/selection-tool.ts index 072bdb52..2918451c 100644 --- a/src/app/cartography/shared/tools/selection-tool.ts +++ b/src/app/cartography/shared/tools/selection-tool.ts @@ -1,35 +1,45 @@ import {SVGSelection} from "../../../map/models/types"; import {mouse, select} from "d3-selection"; +import {Context} from "../../../map/models/context"; export class SelectionTool { private selection: SVGSelection; private path; - public connect(selection: SVGSelection) { + public connect(selection: SVGSelection, context: Context) { const self = this; this.selection = selection; const canvas = this.selection.select("g.canvas"); - if (!canvas.select("g.selection-tool").node()) { + if (!canvas.select("g.selection-line-tool").node()) { const g = canvas.append('g'); g.attr("class", "selection-line-tool"); + this.path = g.append("path"); - this.path.attr("class", "selection").attr("visibility", "hidden"); + this.path + .attr("class", "selection") + .attr("visibility", "hidden"); } + const transformation = (p) => { + const transformation_point = context.getZeroZeroTransformationPoint(); + return [p[0] - transformation_point.x, p[1] - transformation_point.y]; + }; + selection.on("mousedown", function() { const subject = select(window); - const parent = this.parentNode; + const parent = this.parentElement; - const start = mouse(parent); - self.startSelection(start); - subject - .on("mousemove.selection", function() { - self.moveSelection(start, mouse(parent)); - }).on("mouseup.selection", function() { - self.endSelection(start, mouse(parent)); - subject.on("mousemove.selection", null).on("mouseup.selection", null); - }); + const start = transformation(mouse(parent)); + self.startSelection(start); + + subject + .on("mousemove.selection", function() { + self.moveSelection(start, transformation(mouse(parent))); + }).on("mouseup.selection", function() { + self.endSelection(start, transformation(mouse(parent))); + subject.on("mousemove.selection", null).on("mouseup.selection", null); + }); }); } @@ -38,14 +48,20 @@ export class SelectionTool { } private startSelection(start) { - + this.path + .attr("d", this.rect(start[0], start[1], 0, 0)) + .attr("visibility", "visible"); } private moveSelection(start, move) { - + this.path.attr("d", this.rect(start[0], start[1], move[0] - start[0], move[1] - start[1])); } private endSelection(start, end) { + this.path.attr("visibility", "hidden"); + } + private rect(x: number, y: number, w: number, h: number) { + return "M" + [x, y] + " l" + [w, 0] + " l" + [0, h] + " l" + [-w, 0] + "z"; } } diff --git a/src/app/cartography/shared/widgets/graph.widget.ts b/src/app/cartography/shared/widgets/graph.widget.ts index d864197c..57783d81 100644 --- a/src/app/cartography/shared/widgets/graph.widget.ts +++ b/src/app/cartography/shared/widgets/graph.widget.ts @@ -11,6 +11,7 @@ import { Drawing } from "../models/drawing.model"; import { DrawingsWidget } from "./drawings.widget"; import { DrawingLineWidget } from "./drawing-line.widget"; import {SelectionTool} from "../tools/selection-tool"; +import {Tool} from "../tool"; export class GraphLayout implements Widget { private nodes: Node[] = []; @@ -80,24 +81,25 @@ export class GraphLayout implements Widget { this.nodesWidget.draw(canvas, this.nodes); this.drawingsWidget.draw(canvas, this.drawings); - this.drawingLineTool.connect(view); - this.selectionTool.connect(view); - const onZoom = function(this: SVGSVGElement) { - const e: D3ZoomEvent = event; - if (self.centerZeroZeroPoint) { - canvas.attr( - 'transform', - `translate(${context.getSize().width / 2 + e.transform.x}, ` + - `${context.getSize().height / 2 + e.transform.y}) scale(${e.transform.k})`); - } else { - canvas.attr('transform', e.transform.toString()); - } - }; + // this.drawingLineTool.connect(view, context); + this.selectionTool.connect(view, context); - view.call(zoom() - .scaleExtent([1 / 2, 8]) - .on('zoom', onZoom)); + // const onZoom = function(this: SVGSVGElement) { + // const e: D3ZoomEvent = event; + // if (self.centerZeroZeroPoint) { + // canvas.attr( + // 'transform', + // `translate(${context.getSize().width / 2 + e.transform.x}, ` + + // `${context.getSize().height / 2 + e.transform.y}) scale(${e.transform.k})`); + // } else { + // canvas.attr('transform', e.transform.toString()); + // } + // }; + // + // view.call(zoom() + // .scaleExtent([1 / 2, 8]) + // .on('zoom', onZoom)); } } diff --git a/src/app/map/models/context.ts b/src/app/map/models/context.ts index da853e1f..ee82f333 100644 --- a/src/app/map/models/context.ts +++ b/src/app/map/models/context.ts @@ -1,9 +1,11 @@ import {Size} from "../../cartography/shared/models/size.model"; import {Selection} from "d3-selection"; +import {Point} from "../../cartography/shared/models/point.model"; export class Context { private size: Size; private root: Selection; + private centerZeroZeroPoint = true; constructor(root: Selection) { this.root = root; @@ -16,4 +18,8 @@ export class Context { public setSize(size: Size): void { this.size = size; } + + public getZeroZeroTransformationPoint() { + return new Point(this.getSize().width / 2., this.getSize().height / 2.); + } } diff --git a/src/app/project-map/project-map.component.css b/src/app/project-map/project-map.component.css index 0574f1db..0d1a0849 100644 --- a/src/app/project-map/project-map.component.css +++ b/src/app/project-map/project-map.component.css @@ -46,3 +46,23 @@ g.node text { svg image:hover, svg image.chosen { filter: grayscale(100%); } + +.selection-line-tool .selection { + fill: #7ccbe1; + stroke: #66aec2 ; + fill-opacity: 0.3; + stroke-opacity: 0.7; + stroke-width: 1; + stroke-dasharray: 5, 5; +} + + +g.node text, +.noselect { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +}