wisemapping-frontend/packages/mindplot/src/components/MainTopic.ts
2022-02-16 08:16:01 -08:00

153 lines
4.8 KiB
TypeScript

/*
* Copyright [2021] [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.
*/
import { $assert, $defined } from '@wisemapping/core-js';
import { Point, Group, ElementClass } from '@wisemapping/web2d';
import Topic from './Topic';
import { TopicShape } from './model/INodeModel';
import Shape from './util/Shape';
import NodeModel from './model/NodeModel';
import Workspace from './Workspace';
import SizeType from './SizeType';
class MainTopic extends Topic {
private INNER_RECT_ATTRIBUTES: { stroke: string; };
constructor(model: NodeModel, options) {
super(model, options);
this.INNER_RECT_ATTRIBUTES = { stroke: '0.5 solid #009900' };
}
_buildDragShape(): ElementClass {
const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
const size = this.getSize();
innerShape.setSize(size.width, size.height);
innerShape.setPosition(0, 0);
innerShape.setOpacity(0.5);
innerShape.setCursor('default');
innerShape.setVisibility(true);
const brColor = this.getBorderColor();
innerShape.setAttribute('strokeColor', brColor);
const bgColor = this.getBackgroundColor();
innerShape.setAttribute('fillColor', bgColor);
// Create group ...
const groupAttributes = {
width: 100,
height: 100,
coordSizeWidth: 100,
coordSizeHeight: 100,
};
const group = new Group(groupAttributes);
group.append(innerShape);
// Add Text ...
if (this.getShapeType() !== TopicShape.IMAGE) {
const textShape = this._buildTextShape(true);
const text = this.getText();
textShape.setText(text);
textShape.setOpacity(0.5);
group.append(textShape);
}
return group;
}
updateTopicShape(targetTopic: Topic) {
// Change figure based on the connected topic ...
const model = this.getModel();
let shapeType = model.getShapeType();
if (!targetTopic.isCentralTopic()) {
if (!$defined(shapeType)) {
// Get the real shape type ...
shapeType = this.getShapeType();
this._setShapeType(shapeType, false);
}
}
}
disconnect(workspace: Workspace) {
super.disconnect(workspace);
const model = this.getModel();
let shapeType = model.getShapeType();
if (!$defined(shapeType)) {
// Change figure ...
shapeType = this.getShapeType();
this._setShapeType(TopicShape.ROUNDED_RECT, false);
}
const innerShape = this.getInnerShape();
innerShape.setVisibility(true);
}
_updatePositionOnChangeSize(oldSize: SizeType, newSize: SizeType) {
const xOffset = Math.round((newSize.width - oldSize.width) / 2);
const pos = this.getPosition();
if ($defined(pos)) {
if (pos.x > 0) {
pos.x += xOffset;
} else {
pos.x -= xOffset;
}
this.setPosition(pos);
}
}
workoutIncomingConnectionPoint(sourcePosition: Point) {
return Shape.workoutIncomingConnectionPoint(this, sourcePosition);
}
workoutOutgoingConnectionPoint(targetPosition: Point) {
$assert(targetPosition, 'targetPoint can not be null');
const pos = this.getPosition();
const isAtRight = Shape.isAtRight(targetPosition, pos);
const size = this.getSize();
let result: Point;
if (this.getShapeType() === TopicShape.LINE) {
result = new Point();
const groupPosition = this.get2DElement().getPosition();
const innerShareSize = this.getInnerShape().getSize();
if (innerShareSize) {
const magicCorrectionNumber = 0.3;
if (!isAtRight) {
result.x = groupPosition.x + innerShareSize.width - magicCorrectionNumber;
} else {
result.x = groupPosition.x + magicCorrectionNumber;
}
result.y = groupPosition.y + innerShareSize.height;
} else {
// Hack: When the size has not being defined. This is because the node has not being added.
// Try to do our best ...
if (!isAtRight) {
result.x = pos.x + size.width / 2;
} else {
result.x = pos.x - size.width / 2;
}
result.y = pos.y + size.height / 2;
}
} else {
result = Shape.calculateRectConnectionPoint(pos, size, isAtRight);
}
return result;
}
}
export default MainTopic;