123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406 |
- "use strict";
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
- if (k2 === undefined) k2 = k;
- var desc = Object.getOwnPropertyDescriptor(m, k);
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
- desc = { enumerable: true, get: function() { return m[k]; } };
- }
- Object.defineProperty(o, k2, desc);
- }) : (function(o, m, k, k2) {
- if (k2 === undefined) k2 = k;
- o[k2] = m[k];
- }));
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
- Object.defineProperty(o, "default", { enumerable: true, value: v });
- }) : function(o, v) {
- o["default"] = v;
- });
- var __importStar = (this && this.__importStar) || function (mod) {
- if (mod && mod.__esModule) return mod;
- var result = {};
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
- __setModuleDefault(result, mod);
- return result;
- };
- Object.defineProperty(exports, "__esModule", { value: true });
- exports.Segments = void 0;
- const x6_common_1 = require("@antv/x6-common");
- const x6_geometry_1 = require("@antv/x6-geometry");
- const view_1 = require("../../view/view");
- const tool_1 = require("../../view/tool");
- const Util = __importStar(require("./util"));
- class Segments extends tool_1.ToolsView.ToolItem {
- constructor() {
- super(...arguments);
- this.handles = [];
- }
- get vertices() {
- return this.cellView.cell.getVertices();
- }
- update() {
- this.render();
- return this;
- }
- onRender() {
- x6_common_1.Dom.addClass(this.container, this.prefixClassName('edge-tool-segments'));
- this.resetHandles();
- const edgeView = this.cellView;
- const vertices = [...this.vertices];
- vertices.unshift(edgeView.sourcePoint);
- vertices.push(edgeView.targetPoint);
- for (let i = 0, l = vertices.length; i < l - 1; i += 1) {
- const vertex = vertices[i];
- const nextVertex = vertices[i + 1];
- const handle = this.renderHandle(vertex, nextVertex, i);
- this.stamp(handle.container);
- this.handles.push(handle);
- }
- return this;
- }
- renderHandle(vertex, nextVertex, index) {
- const handle = this.options.createHandle({
- index,
- graph: this.graph,
- guard: (evt) => this.guard(evt),
- attrs: this.options.attrs || {},
- });
- if (this.options.processHandle) {
- this.options.processHandle(handle);
- }
- this.updateHandle(handle, vertex, nextVertex);
- this.container.appendChild(handle.container);
- this.startHandleListening(handle);
- return handle;
- }
- startHandleListening(handle) {
- handle.on('change', this.onHandleChange, this);
- handle.on('changing', this.onHandleChanging, this);
- handle.on('changed', this.onHandleChanged, this);
- }
- stopHandleListening(handle) {
- handle.off('change', this.onHandleChange, this);
- handle.off('changing', this.onHandleChanging, this);
- handle.off('changed', this.onHandleChanged, this);
- }
- resetHandles() {
- const handles = this.handles;
- this.handles = [];
- if (handles) {
- handles.forEach((handle) => {
- this.stopHandleListening(handle);
- handle.remove();
- });
- }
- }
- shiftHandleIndexes(delta) {
- const handles = this.handles;
- for (let i = 0, n = handles.length; i < n; i += 1) {
- handles[i].options.index += delta;
- }
- }
- resetAnchor(type, anchor) {
- const edge = this.cellView.cell;
- const options = {
- ui: true,
- toolId: this.cid,
- };
- if (anchor) {
- edge.prop([type, 'anchor'], anchor, options);
- }
- else {
- edge.removeProp([type, 'anchor'], options);
- }
- }
- snapHandle(handle, position, data) {
- const axis = handle.options.axis;
- const index = handle.options.index;
- const edgeView = this.cellView;
- const edge = edgeView.cell;
- const vertices = edge.getVertices();
- const prev = vertices[index - 2] || data.sourceAnchor;
- const next = vertices[index + 1] || data.targetAnchor;
- const snapRadius = this.options.snapRadius;
- if (Math.abs(position[axis] - prev[axis]) < snapRadius) {
- position[axis] = prev[axis];
- }
- else if (Math.abs(position[axis] - next[axis]) < snapRadius) {
- position[axis] = next[axis];
- }
- return position;
- }
- onHandleChanging({ handle, e, }) {
- const graph = this.graph;
- const options = this.options;
- const edgeView = this.cellView;
- const anchorFn = options.anchor;
- const axis = handle.options.axis;
- const index = handle.options.index - 1;
- const data = this.getEventData(e);
- const evt = this.normalizeEvent(e);
- const coords = graph.snapToGrid(evt.clientX, evt.clientY);
- const position = this.snapHandle(handle, coords.clone(), data);
- const vertices = x6_common_1.ObjectExt.cloneDeep(this.vertices);
- let vertex = vertices[index];
- let nextVertex = vertices[index + 1];
- // First Segment
- const sourceView = edgeView.sourceView;
- const sourceBBox = edgeView.sourceBBox;
- let changeSourceAnchor = false;
- let deleteSourceAnchor = false;
- if (!vertex) {
- vertex = edgeView.sourceAnchor.toJSON();
- vertex[axis] = position[axis];
- if (sourceBBox.containsPoint(vertex)) {
- changeSourceAnchor = true;
- }
- else {
- vertices.unshift(vertex);
- this.shiftHandleIndexes(1);
- deleteSourceAnchor = true;
- }
- }
- else if (index === 0) {
- if (sourceBBox.containsPoint(vertex)) {
- vertices.shift();
- this.shiftHandleIndexes(-1);
- changeSourceAnchor = true;
- }
- else {
- vertex[axis] = position[axis];
- deleteSourceAnchor = true;
- }
- }
- else {
- vertex[axis] = position[axis];
- }
- if (typeof anchorFn === 'function' && sourceView) {
- if (changeSourceAnchor) {
- const sourceAnchorPosition = data.sourceAnchor.clone();
- sourceAnchorPosition[axis] = position[axis];
- const sourceAnchor = x6_common_1.FunctionExt.call(anchorFn, edgeView, sourceAnchorPosition, sourceView, edgeView.sourceMagnet || sourceView.container, 'source', edgeView, this);
- this.resetAnchor('source', sourceAnchor);
- }
- if (deleteSourceAnchor) {
- this.resetAnchor('source', data.sourceAnchorDef);
- }
- }
- // Last segment
- const targetView = edgeView.targetView;
- const targetBBox = edgeView.targetBBox;
- let changeTargetAnchor = false;
- let deleteTargetAnchor = false;
- if (!nextVertex) {
- nextVertex = edgeView.targetAnchor.toJSON();
- nextVertex[axis] = position[axis];
- if (targetBBox.containsPoint(nextVertex)) {
- changeTargetAnchor = true;
- }
- else {
- vertices.push(nextVertex);
- deleteTargetAnchor = true;
- }
- }
- else if (index === vertices.length - 2) {
- if (targetBBox.containsPoint(nextVertex)) {
- vertices.pop();
- changeTargetAnchor = true;
- }
- else {
- nextVertex[axis] = position[axis];
- deleteTargetAnchor = true;
- }
- }
- else {
- nextVertex[axis] = position[axis];
- }
- if (typeof anchorFn === 'function' && targetView) {
- if (changeTargetAnchor) {
- const targetAnchorPosition = data.targetAnchor.clone();
- targetAnchorPosition[axis] = position[axis];
- const targetAnchor = x6_common_1.FunctionExt.call(anchorFn, edgeView, targetAnchorPosition, targetView, edgeView.targetMagnet || targetView.container, 'target', edgeView, this);
- this.resetAnchor('target', targetAnchor);
- }
- if (deleteTargetAnchor) {
- this.resetAnchor('target', data.targetAnchorDef);
- }
- }
- if (!x6_geometry_1.Point.equalPoints(vertices, this.vertices)) {
- this.cellView.cell.setVertices(vertices, { ui: true, toolId: this.cid });
- }
- this.updateHandle(handle, vertex, nextVertex, 0);
- if (!options.stopPropagation) {
- edgeView.notifyMouseMove(evt, coords.x, coords.y);
- }
- }
- onHandleChange({ handle, e }) {
- const options = this.options;
- const handles = this.handles;
- const edgeView = this.cellView;
- const index = handle.options.index;
- if (!Array.isArray(handles)) {
- return;
- }
- for (let i = 0, n = handles.length; i < n; i += 1) {
- if (i !== index) {
- handles[i].hide();
- }
- }
- this.focus();
- this.setEventData(e, {
- sourceAnchor: edgeView.sourceAnchor.clone(),
- targetAnchor: edgeView.targetAnchor.clone(),
- sourceAnchorDef: x6_common_1.ObjectExt.cloneDeep(this.cell.prop(['source', 'anchor'])),
- targetAnchorDef: x6_common_1.ObjectExt.cloneDeep(this.cell.prop(['target', 'anchor'])),
- });
- this.cell.startBatch('move-segment', { ui: true, toolId: this.cid });
- if (!options.stopPropagation) {
- const normalizedEvent = this.normalizeEvent(e);
- const coords = this.graph.snapToGrid(normalizedEvent.clientX, normalizedEvent.clientY);
- edgeView.notifyMouseDown(normalizedEvent, coords.x, coords.y);
- }
- }
- onHandleChanged({ e }) {
- const options = this.options;
- const edgeView = this.cellView;
- if (options.removeRedundancies) {
- edgeView.removeRedundantLinearVertices({ ui: true, toolId: this.cid });
- }
- const normalizedEvent = this.normalizeEvent(e);
- const coords = this.graph.snapToGrid(normalizedEvent.clientX, normalizedEvent.clientY);
- this.render();
- this.blur();
- this.cell.stopBatch('move-segment', { ui: true, toolId: this.cid });
- if (!options.stopPropagation) {
- edgeView.notifyMouseUp(normalizedEvent, coords.x, coords.y);
- }
- edgeView.checkMouseleave(normalizedEvent);
- options.onChanged && options.onChanged({ edge: edgeView.cell, edgeView });
- }
- updateHandle(handle, vertex, nextVertex, offset = 0) {
- const precision = this.options.precision || 0;
- const vertical = Math.abs(vertex.x - nextVertex.x) < precision;
- const horizontal = Math.abs(vertex.y - nextVertex.y) < precision;
- if (vertical || horizontal) {
- const segmentLine = new x6_geometry_1.Line(vertex, nextVertex);
- const length = segmentLine.length();
- if (length < this.options.threshold) {
- handle.hide();
- }
- else {
- const position = segmentLine.getCenter();
- const axis = vertical ? 'x' : 'y';
- position[axis] += offset || 0;
- const angle = segmentLine.vector().vectorAngle(new x6_geometry_1.Point(1, 0));
- handle.updatePosition(position.x, position.y, angle, this.cellView);
- handle.show();
- handle.options.axis = axis;
- }
- }
- else {
- handle.hide();
- }
- }
- onRemove() {
- this.resetHandles();
- }
- }
- exports.Segments = Segments;
- (function (Segments) {
- class Handle extends view_1.View {
- constructor(options) {
- super();
- this.options = options;
- this.render();
- this.delegateEvents({
- mousedown: 'onMouseDown',
- touchstart: 'onMouseDown',
- });
- }
- render() {
- this.container = view_1.View.createElement('rect', true);
- const attrs = this.options.attrs;
- if (typeof attrs === 'function') {
- const defaults = Segments.getDefaults();
- this.setAttrs(Object.assign(Object.assign({}, defaults.attrs), attrs(this)));
- }
- else {
- this.setAttrs(attrs);
- }
- this.addClass(this.prefixClassName('edge-tool-segment'));
- }
- updatePosition(x, y, angle, view) {
- const p = view.getClosestPoint(new x6_geometry_1.Point(x, y)) || new x6_geometry_1.Point(x, y);
- let matrix = x6_common_1.Dom.createSVGMatrix().translate(p.x, p.y);
- if (!p.equals({ x, y })) {
- const line = new x6_geometry_1.Line(x, y, p.x, p.y);
- let deg = line.vector().vectorAngle(new x6_geometry_1.Point(1, 0));
- if (deg !== 0) {
- deg += 90;
- }
- matrix = matrix.rotate(deg);
- }
- else {
- matrix = matrix.rotate(angle);
- }
- this.setAttrs({
- transform: x6_common_1.Dom.matrixToTransformString(matrix),
- cursor: angle % 180 === 0 ? 'row-resize' : 'col-resize',
- });
- }
- onMouseDown(evt) {
- if (this.options.guard(evt)) {
- return;
- }
- this.trigger('change', { e: evt, handle: this });
- evt.stopPropagation();
- evt.preventDefault();
- this.options.graph.view.undelegateEvents();
- this.delegateDocumentEvents({
- mousemove: 'onMouseMove',
- touchmove: 'onMouseMove',
- mouseup: 'onMouseUp',
- touchend: 'onMouseUp',
- touchcancel: 'onMouseUp',
- }, evt.data);
- }
- onMouseMove(evt) {
- this.emit('changing', { e: evt, handle: this });
- }
- onMouseUp(evt) {
- this.emit('changed', { e: evt, handle: this });
- this.undelegateDocumentEvents();
- this.options.graph.view.delegateEvents();
- }
- show() {
- this.container.style.display = '';
- }
- hide() {
- this.container.style.display = 'none';
- }
- }
- Segments.Handle = Handle;
- })(Segments = exports.Segments || (exports.Segments = {}));
- (function (Segments) {
- Segments.config({
- name: 'segments',
- precision: 0.5,
- threshold: 40,
- snapRadius: 10,
- stopPropagation: true,
- removeRedundancies: true,
- attrs: {
- width: 20,
- height: 8,
- x: -10,
- y: -4,
- rx: 4,
- ry: 4,
- fill: '#333',
- stroke: '#fff',
- 'stroke-width': 2,
- },
- createHandle: (options) => new Segments.Handle(options),
- anchor: Util.getAnchor,
- });
- })(Segments = exports.Segments || (exports.Segments = {}));
- //# sourceMappingURL=segments.js.map
|