wisemapping-frontend/packages/web2d/lib/components/peer/svg/CurvedLinePeer.js

195 lines
5.6 KiB
JavaScript
Raw Normal View History

2021-07-16 16:41:58 +02:00
/*
* Copyright [2015] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const Shape = require('@wisemapping/mindplot/lib/components/util/Shape').default; //eslint-disable-line
const ElementPeer = require('./ElementPeer').default;
const CurvedLinePeer = new Class({
2021-10-05 01:56:40 +02:00
Extends: ElementPeer,
initialize() {
const svgElement = window.document.createElementNS(this.svgNamespace, 'path');
this.parent(svgElement);
this._style = { fill: '#495879' };
this._updateStyle();
this._customControlPoint_1 = false;
this._customControlPoint_2 = false;
this._control1 = new core.Point();
this._control2 = new core.Point();
this._lineStyle = true;
},
setSrcControlPoint(control) {
this._customControlPoint_1 = true;
const change = this._control1.x != control.x || this._control1.y != control.y;
if ($defined(control.x)) {
this._control1 = control;
this._control1.x = parseInt(this._control1.x);
this._control1.y = parseInt(this._control1.y);
}
if (change) this._updatePath();
},
setDestControlPoint(control) {
this._customControlPoint_2 = true;
const change = this._control2.x != control.x || this._control2.y != control.y;
if ($defined(control.x)) {
this._control2 = control;
this._control2.x = parseInt(this._control2.x);
this._control2.y = parseInt(this._control2.y);
}
if (change) this._updatePath();
},
isSrcControlPointCustom() {
return this._customControlPoint_1;
},
isDestControlPointCustom() {
return this._customControlPoint_2;
},
setIsSrcControlPointCustom(isCustom) {
this._customControlPoint_1 = isCustom;
},
setIsDestControlPointCustom(isCustom) {
this._customControlPoint_2 = isCustom;
},
getControlPoints() {
return [this._control1, this._control2];
},
setFrom(x1, y1) {
const change = this._x1 != parseInt(x1) || this._y1 != parseInt(y1);
this._x1 = parseInt(x1);
this._y1 = parseInt(y1);
if (change) this._updatePath();
},
setTo(x2, y2) {
const change = this._x2 != parseInt(x2) || this._y2 != parseInt(y2);
this._x2 = parseInt(x2);
this._y2 = parseInt(y2);
if (change) this._updatePath();
},
getFrom() {
return new core.Point(this._x1, this._y1);
},
getTo() {
return new core.Point(this._x2, this._y2);
},
setStrokeWidth(width) {
this._style['stroke-width'] = width;
this._updateStyle();
},
setColor(color) {
this._style.stroke = color;
this._style.fill = color;
this._updateStyle();
},
updateLine(avoidControlPointFix) {
this._updatePath(avoidControlPointFix);
},
setLineStyle(style) {
this._lineStyle = style;
if (this._lineStyle) {
this._style.fill = this._fill;
} else {
this._fill = this._style.fill;
this._style.fill = 'none';
}
this._updateStyle();
this.updateLine();
},
getLineStyle() {
return this._lineStyle;
},
setShowEndArrow(visible) {
this._showEndArrow = visible;
this.updateLine();
},
isShowEndArrow() {
return this._showEndArrow;
},
setShowStartArrow(visible) {
this._showStartArrow = visible;
this.updateLine();
},
isShowStartArrow() {
return this._showStartArrow;
},
_updatePath(avoidControlPointFix) {
if ($defined(this._x1) && $defined(this._y1) && $defined(this._x2) && $defined(this._y2)) {
this._calculateAutoControlPoints(avoidControlPointFix);
const path = `M${this._x1},${this._y1
} C${this._control1.x + this._x1},${this._control1.y + this._y1} ${
this._control2.x + this._x2},${this._control2.y + this._y2} ${
this._x2},${this._y2
}${this._lineStyle ? ` ${
this._control2.x + this._x2},${this._control2.y + this._y2 + 3} ${
this._control1.x + this._x1},${this._control1.y + this._y1 + 5} ${
this._x1},${this._y1 + 7} Z`
: ''}`;
this._native.setAttribute('d', path);
}
},
_updateStyle() {
let style = '';
for (const key in this._style) {
style += `${key}:${this._style[key]} `;
}
this._native.setAttribute('style', style);
},
_calculateAutoControlPoints(avoidControlPointFix) {
// Both points available, calculate real points
const defaultpoints = Shape.calculateDefaultControlPoints(new core.Point(this._x1, this._y1), new core.Point(this._x2, this._y2));
if (!this._customControlPoint_1 && !($defined(avoidControlPointFix) && avoidControlPointFix == 0)) {
this._control1.x = defaultpoints[0].x;
this._control1.y = defaultpoints[0].y;
}
if (!this._customControlPoint_2 && !($defined(avoidControlPointFix) && avoidControlPointFix == 1)) {
this._control2.x = defaultpoints[1].x;
this._control2.y = defaultpoints[1].y;
}
},
2021-07-16 16:41:58 +02:00
2021-10-05 01:56:40 +02:00
setDashed(length, spacing) {
if ($defined(length) && $defined(spacing)) {
this._native.setAttribute('stroke-dasharray', `${length},${spacing}`);
} else {
this._native.setAttribute('stroke-dasharray', '');
2021-07-16 16:41:58 +02:00
}
2021-10-05 01:56:40 +02:00
},
2021-07-16 16:41:58 +02:00
});
export default CurvedLinePeer;