mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-22 14:47:56 +01:00
Add background shadow on relationship.
This commit is contained in:
parent
2a9c79fe92
commit
9860ac782c
@ -40,7 +40,7 @@ class Relationship extends ConnectionLine {
|
|||||||
|
|
||||||
private _endArrow: Arrow;
|
private _endArrow: Arrow;
|
||||||
|
|
||||||
private _controlPointControllerListener;
|
private _onFocusHandler: (event: MouseEvent) => void;
|
||||||
|
|
||||||
private _showStartArrow: Arrow;
|
private _showStartArrow: Arrow;
|
||||||
|
|
||||||
@ -63,10 +63,12 @@ class Relationship extends ConnectionLine {
|
|||||||
|
|
||||||
// Build focus shape ...
|
// Build focus shape ...
|
||||||
this._focusShape = this._createLine(this.getLineType(), ConnectionLine.SIMPLE_CURVED);
|
this._focusShape = this._createLine(this.getLineType(), ConnectionLine.SIMPLE_CURVED);
|
||||||
this._focusShape.setStroke(2, 'solid', '#3f96ff');
|
this._focusShape.setStroke(8, 'solid', '#3f96ff');
|
||||||
this._focusShape.setIsSrcControlPointCustom(false);
|
this._focusShape.setIsSrcControlPointCustom(false);
|
||||||
this._focusShape.setIsDestControlPointCustom(false);
|
this._focusShape.setIsDestControlPointCustom(false);
|
||||||
this._focusShape.setVisibility(false);
|
this._focusShape.setVisibility(true);
|
||||||
|
this._focusShape.setOpacity(0);
|
||||||
|
this._focusShape.setCursor('pointer');
|
||||||
|
|
||||||
// Build arrow ...
|
// Build arrow ...
|
||||||
this._startArrow = new Arrow();
|
this._startArrow = new Arrow();
|
||||||
@ -96,8 +98,16 @@ class Relationship extends ConnectionLine {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Reposition all nodes ...
|
// Reposition all nodes ...
|
||||||
this._updatePositions();
|
this.updatePositions();
|
||||||
this._controlPointsController = new RelationshipControlPoints(this);
|
this._controlPointsController = new RelationshipControlPoints(this);
|
||||||
|
|
||||||
|
// Initialize handler ..
|
||||||
|
|
||||||
|
this._onFocusHandler = (event) => {
|
||||||
|
this.setOnFocus(true);
|
||||||
|
event.stopPropagation();
|
||||||
|
event.preventDefault();
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
setStroke(color: string, style: string, opacity: number): void {
|
setStroke(color: string, style: string, opacity: number): void {
|
||||||
@ -105,7 +115,7 @@ class Relationship extends ConnectionLine {
|
|||||||
this._startArrow.setStrokeColor(color);
|
this._startArrow.setStrokeColor(color);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _updatePositions() {
|
private updatePositions() {
|
||||||
const line2d = this._line2d;
|
const line2d = this._line2d;
|
||||||
const sourceTopic = this._sourceTopic;
|
const sourceTopic = this._sourceTopic;
|
||||||
const sPos = sourceTopic.getPosition();
|
const sPos = sourceTopic.getPosition();
|
||||||
@ -145,17 +155,17 @@ class Relationship extends ConnectionLine {
|
|||||||
line2d.setTo(ntPos.x, ntPos.y);
|
line2d.setTo(ntPos.x, ntPos.y);
|
||||||
|
|
||||||
// Positionate Arrows
|
// Positionate Arrows
|
||||||
this._positionArrows();
|
this.positionArrows();
|
||||||
|
|
||||||
// Add connector ...
|
// Add connector ...
|
||||||
this._positionateConnector(targetTopic);
|
this._positionateConnector(targetTopic);
|
||||||
|
|
||||||
// Poisition refresh shape ...
|
// Poisition refresh shape ...
|
||||||
this._positionRefreshShape();
|
this.positionRefreshShape();
|
||||||
}
|
}
|
||||||
|
|
||||||
redraw(): void {
|
redraw(): void {
|
||||||
this._updatePositions();
|
this.updatePositions();
|
||||||
|
|
||||||
this._line2d.moveToFront();
|
this._line2d.moveToFront();
|
||||||
this._startArrow.moveToBack();
|
this._startArrow.moveToBack();
|
||||||
@ -172,7 +182,7 @@ class Relationship extends ConnectionLine {
|
|||||||
this._controlPointsController.redraw();
|
this._controlPointsController.redraw();
|
||||||
}
|
}
|
||||||
|
|
||||||
private _positionArrows(): void {
|
private positionArrows(): void {
|
||||||
const tpos = this._line2d.getTo();
|
const tpos = this._line2d.getTo();
|
||||||
const spos = this._line2d.getFrom();
|
const spos = this._line2d.getFrom();
|
||||||
|
|
||||||
@ -196,16 +206,16 @@ class Relationship extends ConnectionLine {
|
|||||||
}
|
}
|
||||||
|
|
||||||
addToWorkspace(workspace: Workspace): void {
|
addToWorkspace(workspace: Workspace): void {
|
||||||
this._updatePositions();
|
this.updatePositions();
|
||||||
|
|
||||||
workspace.append(this._focusShape);
|
workspace.append(this._focusShape);
|
||||||
workspace.append(this._controlPointsController);
|
workspace.append(this._controlPointsController);
|
||||||
|
|
||||||
this._controlPointControllerListener = this._initializeControlPointController.bind(this);
|
|
||||||
if (workspace.isReadOnly()) {
|
if (workspace.isReadOnly()) {
|
||||||
this._line2d.setCursor('default');
|
this._line2d.setCursor('default');
|
||||||
} else {
|
} else {
|
||||||
this._line2d.addEvent('click', this._controlPointControllerListener);
|
this._line2d.addEvent('click', this._onFocusHandler);
|
||||||
|
this._focusShape.addEvent('click', this._onFocusHandler);
|
||||||
}
|
}
|
||||||
this._isInWorkspace = true;
|
this._isInWorkspace = true;
|
||||||
|
|
||||||
@ -213,19 +223,15 @@ class Relationship extends ConnectionLine {
|
|||||||
if (this._endArrow) workspace.append(this._endArrow);
|
if (this._endArrow) workspace.append(this._endArrow);
|
||||||
|
|
||||||
super.addToWorkspace(workspace);
|
super.addToWorkspace(workspace);
|
||||||
this._positionArrows();
|
this.positionArrows();
|
||||||
this.redraw();
|
this.redraw();
|
||||||
}
|
}
|
||||||
|
|
||||||
private _initializeControlPointController(): void {
|
|
||||||
this.setOnFocus(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
removeFromWorkspace(workspace: Workspace): void {
|
removeFromWorkspace(workspace: Workspace): void {
|
||||||
workspace.removeChild(this._focusShape);
|
workspace.removeChild(this._focusShape);
|
||||||
workspace.removeChild(this._controlPointsController);
|
workspace.removeChild(this._controlPointsController);
|
||||||
|
|
||||||
this._line2d.removeEvent('click', this._controlPointControllerListener);
|
this._line2d.removeEvent('click', this._onFocusHandler);
|
||||||
this._isInWorkspace = false;
|
this._isInWorkspace = false;
|
||||||
workspace.removeChild(this._startArrow);
|
workspace.removeChild(this._startArrow);
|
||||||
if (this._endArrow) {
|
if (this._endArrow) {
|
||||||
@ -241,18 +247,21 @@ class Relationship extends ConnectionLine {
|
|||||||
|
|
||||||
setOnFocus(focus: boolean): void {
|
setOnFocus(focus: boolean): void {
|
||||||
if (focus) {
|
if (focus) {
|
||||||
this._positionRefreshShape();
|
this.positionRefreshShape();
|
||||||
}
|
}
|
||||||
// Change focus shape
|
// Change focus shape
|
||||||
if (this.isOnFocus() !== focus) {
|
if (this.isOnFocus() !== focus) {
|
||||||
this._focusShape.setVisibility(focus);
|
// Focus is always present to support on over
|
||||||
|
this._focusShape.setOpacity(focus ? 1 : 0);
|
||||||
|
this._focusShape.setStroke(focus ? 2 : 8, 'solid', '#3f96ff');
|
||||||
|
|
||||||
this._controlPointsController.setVisibility(focus);
|
this._controlPointsController.setVisibility(focus);
|
||||||
this._onFocus = focus;
|
this._onFocus = focus;
|
||||||
this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
|
this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private _positionRefreshShape(): void {
|
private positionRefreshShape(): void {
|
||||||
const sPos = this._line2d.getFrom();
|
const sPos = this._line2d.getFrom();
|
||||||
const tPos = this._line2d.getTo();
|
const tPos = this._line2d.getTo();
|
||||||
|
|
||||||
@ -292,10 +301,13 @@ class Relationship extends ConnectionLine {
|
|||||||
// If visibility change, remove the on focus.
|
// If visibility change, remove the on focus.
|
||||||
this.setOnFocus(false);
|
this.setOnFocus(false);
|
||||||
|
|
||||||
|
// Hide on gocus shade ...
|
||||||
|
|
||||||
if (this._showEndArrow) {
|
if (this._showEndArrow) {
|
||||||
this._endArrow.setVisibility(this._showEndArrow);
|
this._endArrow.setVisibility(this._showEndArrow);
|
||||||
}
|
}
|
||||||
this._startArrow.setVisibility(this._showStartArrow && value, fade);
|
this._startArrow.setVisibility(this._showStartArrow && value, fade);
|
||||||
|
this._focusShape.setVisibility(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
setOpacity(opacity: number): void {
|
setOpacity(opacity: number): void {
|
||||||
|
Loading…
Reference in New Issue
Block a user