Clean up refresh code.
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 99 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 100 KiB |
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 102 KiB |
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 99 KiB |
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 90 KiB |
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 61 KiB |
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 67 KiB |
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 118 KiB |
Before Width: | Height: | Size: 189 KiB After Width: | Height: | Size: 194 KiB |
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 67 KiB |
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 101 KiB |
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 149 KiB |
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 73 KiB |
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 93 KiB |
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 100 KiB |
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 93 KiB |
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 103 KiB |
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 100 KiB |
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 99 KiB |
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 100 KiB |
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 105 KiB |
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 104 KiB |
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 93 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 96 KiB |
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 95 KiB |
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
@ -67,7 +67,7 @@ class MainTopic extends Topic {
|
|||||||
textShape.setOpacity(0.5);
|
textShape.setOpacity(0.5);
|
||||||
|
|
||||||
// Copy text position of the topic element ...
|
// Copy text position of the topic element ...
|
||||||
const textPosition = this.getTextShape().getPosition();
|
const textPosition = this.getOrBuildTextShape().getPosition();
|
||||||
textShape.setPosition(textPosition.x, textPosition.y);
|
textShape.setPosition(textPosition.x, textPosition.y);
|
||||||
|
|
||||||
group.append(textShape);
|
group.append(textShape);
|
||||||
@ -76,27 +76,16 @@ class MainTopic extends Topic {
|
|||||||
}
|
}
|
||||||
|
|
||||||
updateTopicShape(targetTopic: Topic) {
|
updateTopicShape(targetTopic: Topic) {
|
||||||
// Change figure based on the connected topic ...
|
|
||||||
const model = this.getModel();
|
|
||||||
let shapeType = model.getShapeType();
|
|
||||||
if (!targetTopic.isCentralTopic()) {
|
if (!targetTopic.isCentralTopic()) {
|
||||||
if (!$defined(shapeType)) {
|
|
||||||
// Get the real shape type ...
|
// Get the real shape type ...
|
||||||
shapeType = this.getShapeType();
|
this.redrawShapeType();
|
||||||
this._setShapeType(shapeType, false);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
disconnect(workspace: Workspace) {
|
disconnect(workspace: Workspace) {
|
||||||
super.disconnect(workspace);
|
super.disconnect(workspace);
|
||||||
const model = this.getModel();
|
this.redrawShapeType();
|
||||||
let shapeType = model.getShapeType();
|
|
||||||
if (!$defined(shapeType)) {
|
|
||||||
// Change figure ...
|
|
||||||
shapeType = this.getShapeType();
|
|
||||||
this._setShapeType('rounded rectangle', false);
|
|
||||||
}
|
|
||||||
const innerShape = this.getInnerShape();
|
const innerShape = this.getInnerShape();
|
||||||
innerShape.setVisibility(true);
|
innerShape.setVisibility(true);
|
||||||
}
|
}
|
||||||
|
@ -151,10 +151,10 @@ class EditorComponent extends Events {
|
|||||||
const topic = this._topic;
|
const topic = this._topic;
|
||||||
|
|
||||||
// Hide topic text ...
|
// Hide topic text ...
|
||||||
topic.getTextShape().setVisibility(false);
|
topic.getOrBuildTextShape().setVisibility(false);
|
||||||
|
|
||||||
// Set Editor Style
|
// Set Editor Style
|
||||||
const nodeText = topic.getTextShape();
|
const nodeText = topic.getOrBuildTextShape();
|
||||||
const fontStyle = nodeText.getFontStyle();
|
const fontStyle = nodeText.getFontStyle();
|
||||||
fontStyle.size = nodeText.getHtmlFontSize();
|
fontStyle.size = nodeText.getHtmlFontSize();
|
||||||
fontStyle.color = nodeText.getColor();
|
fontStyle.color = nodeText.getColor();
|
||||||
@ -162,7 +162,7 @@ class EditorComponent extends Events {
|
|||||||
|
|
||||||
// Set editor's initial size
|
// Set editor's initial size
|
||||||
// Position the editor and set the size...
|
// Position the editor and set the size...
|
||||||
const textShape = topic.getTextShape();
|
const textShape = topic.getOrBuildTextShape();
|
||||||
this._containerElem.css('display', 'block');
|
this._containerElem.css('display', 'block');
|
||||||
|
|
||||||
let { top, left } = textShape.getNativePosition();
|
let { top, left } = textShape.getNativePosition();
|
||||||
@ -250,7 +250,7 @@ class EditorComponent extends Events {
|
|||||||
this._containerElem.remove();
|
this._containerElem.remove();
|
||||||
|
|
||||||
// Restore topoc share visibility ...
|
// Restore topoc share visibility ...
|
||||||
this._topic.getTextShape().setVisibility(true);
|
this._topic.getOrBuildTextShape().setVisibility(true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -107,7 +107,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
|
|||||||
const commandFunc = (topic: Topic) => {
|
const commandFunc = (topic: Topic) => {
|
||||||
const result = topic.getFontStyle();
|
const result = topic.getFontStyle();
|
||||||
const style = result === 'italic' ? 'normal' : 'italic';
|
const style = result === 'italic' ? 'normal' : 'italic';
|
||||||
topic.setFontStyle(style, true);
|
topic.setFontStyle(style);
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
const command = new GenericFunctionCommand(commandFunc, topicsIds, undefined);
|
const command = new GenericFunctionCommand(commandFunc, topicsIds, undefined);
|
||||||
@ -135,7 +135,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
|
|||||||
|
|
||||||
const commandFunc = (topic: Topic, commandFontFamily: string) => {
|
const commandFunc = (topic: Topic, commandFontFamily: string) => {
|
||||||
const result = topic.getFontFamily();
|
const result = topic.getFontFamily();
|
||||||
topic.setFontFamily(commandFontFamily, true);
|
topic.setFontFamily(commandFontFamily);
|
||||||
|
|
||||||
topic.redraw();
|
topic.redraw();
|
||||||
return result;
|
return result;
|
||||||
@ -194,7 +194,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
|
|||||||
|
|
||||||
const commandFunc = (topic: Topic, commandSize: number) => {
|
const commandFunc = (topic: Topic, commandSize: number) => {
|
||||||
const result = topic.getFontSize();
|
const result = topic.getFontSize();
|
||||||
topic.setFontSize(commandSize, true);
|
topic.setFontSize(commandSize);
|
||||||
|
|
||||||
topic.redraw();
|
topic.redraw();
|
||||||
return result;
|
return result;
|
||||||
@ -246,7 +246,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
|
|||||||
const commandFunc = (topic: Topic) => {
|
const commandFunc = (topic: Topic) => {
|
||||||
const result = topic.getFontWeight();
|
const result = topic.getFontWeight();
|
||||||
const weight = result === 'bold' ? 'normal' : 'bold';
|
const weight = result === 'bold' ? 'normal' : 'bold';
|
||||||
topic.setFontWeight(weight, true);
|
topic.setFontWeight(weight);
|
||||||
topic.redraw();
|
topic.redraw();
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
@ -105,20 +105,18 @@ abstract class Topic extends NodeGraph {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setShapeType(type: TopicShapeType): void {
|
setShapeType(type: TopicShapeType): void {
|
||||||
this._setShapeType(type, true);
|
const model = this.getModel();
|
||||||
|
model.setShapeType(type);
|
||||||
|
|
||||||
|
this.redrawShapeType();
|
||||||
|
this.redraw();
|
||||||
}
|
}
|
||||||
|
|
||||||
getParent(): Topic | null {
|
getParent(): Topic | null {
|
||||||
return this._parent;
|
return this._parent;
|
||||||
}
|
}
|
||||||
|
|
||||||
protected _setShapeType(type: TopicShapeType, updateModel: boolean) {
|
protected redrawShapeType() {
|
||||||
// Remove inner shape figure ...
|
|
||||||
const model = this.getModel();
|
|
||||||
if (updateModel) {
|
|
||||||
model.setShapeType(type);
|
|
||||||
}
|
|
||||||
|
|
||||||
const oldInnerShape = this.getInnerShape();
|
const oldInnerShape = this.getInnerShape();
|
||||||
if (oldInnerShape != null) {
|
if (oldInnerShape != null) {
|
||||||
this._removeInnerShape();
|
this._removeInnerShape();
|
||||||
@ -134,7 +132,7 @@ abstract class Topic extends NodeGraph {
|
|||||||
group.append(innerShape);
|
group.append(innerShape);
|
||||||
|
|
||||||
// Move text to the front ...
|
// Move text to the front ...
|
||||||
const text = this.getTextShape();
|
const text = this.getOrBuildTextShape();
|
||||||
text.moveToFront();
|
text.moveToFront();
|
||||||
|
|
||||||
// Move iconGroup to front ...
|
// Move iconGroup to front ...
|
||||||
@ -255,12 +253,12 @@ abstract class Topic extends NodeGraph {
|
|||||||
const outerShape = this.getOuterShape();
|
const outerShape = this.getOuterShape();
|
||||||
outerShape.setCursor(type);
|
outerShape.setCursor(type);
|
||||||
|
|
||||||
const textShape = this.getTextShape();
|
const textShape = this.getOrBuildTextShape();
|
||||||
textShape.setCursor(type);
|
textShape.setCursor(type);
|
||||||
}
|
}
|
||||||
|
|
||||||
getOuterShape(): ElementClass {
|
getOuterShape(): ElementClass {
|
||||||
if (!$defined(this._outerShape)) {
|
if (!this._outerShape) {
|
||||||
const rect = this._buildShape(TopicConfig.OUTER_SHAPE_ATTRIBUTES, 'rounded rectangle');
|
const rect = this._buildShape(TopicConfig.OUTER_SHAPE_ATTRIBUTES, 'rounded rectangle');
|
||||||
rect.setPosition(-2, -3);
|
rect.setPosition(-2, -3);
|
||||||
rect.setOpacity(0);
|
rect.setOpacity(0);
|
||||||
@ -270,35 +268,35 @@ abstract class Topic extends NodeGraph {
|
|||||||
return this._outerShape;
|
return this._outerShape;
|
||||||
}
|
}
|
||||||
|
|
||||||
getTextShape(): Text {
|
getOrBuildTextShape(): Text {
|
||||||
if (!$defined(this._text)) {
|
if (!this._text) {
|
||||||
this._text = this._buildTextShape(false);
|
this._text = this._buildTextShape(false);
|
||||||
|
|
||||||
// Set Text ...
|
// @todo: Review this. Get should not modify the state ....
|
||||||
const text = this.getText();
|
const text = this.getText();
|
||||||
this._setText(text, false);
|
this._text.setText(text);
|
||||||
}
|
}
|
||||||
|
|
||||||
return this._text;
|
return this._text;
|
||||||
}
|
}
|
||||||
|
|
||||||
getOrBuildIconGroup(): Group {
|
private getOrBuildIconGroup(): Group {
|
||||||
if (!$defined(this._iconsGroup)) {
|
if (!$defined(this._iconsGroup)) {
|
||||||
this._iconsGroup = this._buildIconGroup();
|
this._iconsGroup = this._buildIconGroup();
|
||||||
const group = this.get2DElement();
|
const group = this.get2DElement();
|
||||||
|
|
||||||
group.append(this._iconsGroup.getNativeElement());
|
group.append(this._iconsGroup.getNativeElement());
|
||||||
this._iconsGroup.moveToFront();
|
this._iconsGroup.moveToFront();
|
||||||
}
|
}
|
||||||
return this._iconsGroup;
|
return this._iconsGroup;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** */
|
private getIconGroup(): IconGroup {
|
||||||
getIconGroup(): IconGroup {
|
|
||||||
return this._iconsGroup;
|
return this._iconsGroup;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _buildIconGroup(): Group {
|
private _buildIconGroup(): Group {
|
||||||
const textHeight = this.getTextShape().getFontHeight();
|
const textHeight = this.getOrBuildTextShape().getFontHeight();
|
||||||
const iconSize = textHeight * ICON_SCALING_FACTOR;
|
const iconSize = textHeight * ICON_SCALING_FACTOR;
|
||||||
const result = new IconGroup(this.getId(), iconSize);
|
const result = new IconGroup(this.getId(), iconSize);
|
||||||
const padding = TopicStyle.getInnerPadding(this);
|
const padding = TopicStyle.getInnerPadding(this);
|
||||||
@ -394,45 +392,31 @@ abstract class Topic extends NodeGraph {
|
|||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** */
|
setFontFamily(value: string) {
|
||||||
setFontFamily(value: string, updateModel?: boolean) {
|
|
||||||
const textShape = this.getTextShape();
|
|
||||||
textShape.setFontName(value);
|
|
||||||
if (updateModel) {
|
|
||||||
const model = this.getModel();
|
const model = this.getModel();
|
||||||
model.setFontFamily(value);
|
model.setFontFamily(value);
|
||||||
}
|
|
||||||
this.redraw();
|
this.redraw();
|
||||||
}
|
}
|
||||||
|
|
||||||
setFontSize(value: number, updateModel?: boolean) {
|
setFontSize(value: number) {
|
||||||
const textShape = this.getTextShape();
|
|
||||||
textShape.setSize(value);
|
|
||||||
|
|
||||||
if (updateModel) {
|
|
||||||
const model = this.getModel();
|
const model = this.getModel();
|
||||||
model.setFontSize(value);
|
model.setFontSize(value);
|
||||||
}
|
|
||||||
this.redraw();
|
this.redraw();
|
||||||
}
|
}
|
||||||
|
|
||||||
setFontStyle(value: string, updateModel?: boolean) {
|
setFontStyle(value: string) {
|
||||||
const textShape = this.getTextShape();
|
|
||||||
textShape.setStyle(value);
|
|
||||||
if (updateModel) {
|
|
||||||
const model = this.getModel();
|
const model = this.getModel();
|
||||||
model.setFontStyle(value);
|
model.setFontStyle(value);
|
||||||
}
|
|
||||||
this.redraw();
|
this.redraw();
|
||||||
}
|
}
|
||||||
|
|
||||||
setFontWeight(value: string, updateModel?: boolean) {
|
setFontWeight(value: string) {
|
||||||
const textShape = this.getTextShape();
|
|
||||||
textShape.setWeight(value);
|
|
||||||
if (updateModel) {
|
|
||||||
const model = this.getModel();
|
const model = this.getModel();
|
||||||
model.setFontWeight(value);
|
model.setFontWeight(value);
|
||||||
}
|
|
||||||
this.redraw();
|
this.redraw();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -449,7 +433,7 @@ abstract class Topic extends NodeGraph {
|
|||||||
getFontFamily(): string {
|
getFontFamily(): string {
|
||||||
const model = this.getModel();
|
const model = this.getModel();
|
||||||
let result = model.getFontFamily();
|
let result = model.getFontFamily();
|
||||||
if (!$defined(result)) {
|
if (!result) {
|
||||||
const font = TopicStyle.defaultFontStyle(this);
|
const font = TopicStyle.defaultFontStyle(this);
|
||||||
result = font.font;
|
result = font.font;
|
||||||
}
|
}
|
||||||
@ -493,23 +477,12 @@ abstract class Topic extends NodeGraph {
|
|||||||
this.redraw();
|
this.redraw();
|
||||||
}
|
}
|
||||||
|
|
||||||
private _setText(text: string | null, updateModel?: boolean) {
|
setText(text: string | undefined) {
|
||||||
const textShape = this.getTextShape();
|
|
||||||
textShape.setText(text == null ? TopicStyle.defaultText(this) : text);
|
|
||||||
|
|
||||||
if (updateModel) {
|
|
||||||
const model = this.getModel();
|
|
||||||
model.setText(text || undefined);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setText(text: string) {
|
|
||||||
// Avoid empty nodes ...
|
// Avoid empty nodes ...
|
||||||
if (!text || text.trim().length === 0) {
|
const modelText = !text || text.trim().length === 0 ? undefined : text;
|
||||||
this._setText(null, true);
|
|
||||||
} else {
|
const model = this.getModel();
|
||||||
this._setText(text, true);
|
model.setText(modelText);
|
||||||
}
|
|
||||||
|
|
||||||
this.redraw();
|
this.redraw();
|
||||||
}
|
}
|
||||||
@ -599,7 +572,7 @@ abstract class Topic extends NodeGraph {
|
|||||||
// Shape must be build based on the model width ...
|
// Shape must be build based on the model width ...
|
||||||
const outerShape = this.getOuterShape();
|
const outerShape = this.getOuterShape();
|
||||||
const innerShape = this.getInnerShape();
|
const innerShape = this.getInnerShape();
|
||||||
const textShape = this.getTextShape();
|
const textShape = this.getOrBuildTextShape();
|
||||||
|
|
||||||
// Add to the group ...
|
// Add to the group ...
|
||||||
group.append(outerShape);
|
group.append(outerShape);
|
||||||
@ -946,7 +919,7 @@ abstract class Topic extends NodeGraph {
|
|||||||
this.getInnerShape().setVisibility(value, fade);
|
this.getInnerShape().setVisibility(value, fade);
|
||||||
|
|
||||||
// Hide text shape ...
|
// Hide text shape ...
|
||||||
const textShape = this.getTextShape();
|
const textShape = this.getOrBuildTextShape();
|
||||||
textShape.setVisibility(this.getShapeType() !== 'image' ? value : false, fade);
|
textShape.setVisibility(this.getShapeType() !== 'image' ? value : false, fade);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -958,7 +931,7 @@ abstract class Topic extends NodeGraph {
|
|||||||
if (connector) {
|
if (connector) {
|
||||||
connector.setOpacity(opacity);
|
connector.setOpacity(opacity);
|
||||||
}
|
}
|
||||||
const textShape = this.getTextShape();
|
const textShape = this.getOrBuildTextShape();
|
||||||
textShape.setOpacity(opacity);
|
textShape.setOpacity(opacity);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -988,8 +961,6 @@ abstract class Topic extends NodeGraph {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setSize(size: SizeType, force?: boolean): void {
|
setSize(size: SizeType, force?: boolean): void {
|
||||||
$assert(size, 'size can not be null');
|
|
||||||
$assert($defined(size.width), 'size seem not to be a valid element');
|
|
||||||
const roundedSize = {
|
const roundedSize = {
|
||||||
width: Math.ceil(size.width),
|
width: Math.ceil(size.width),
|
||||||
height: Math.ceil(size.height),
|
height: Math.ceil(size.height),
|
||||||
@ -1035,26 +1006,11 @@ abstract class Topic extends NodeGraph {
|
|||||||
// Update model ...
|
// Update model ...
|
||||||
const childModel = this.getModel();
|
const childModel = this.getModel();
|
||||||
childModel.disconnect();
|
childModel.disconnect();
|
||||||
|
|
||||||
this._parent = null;
|
this._parent = null;
|
||||||
|
|
||||||
// Remove graphical element from the workspace...
|
// Remove graphical element from the workspace...
|
||||||
outgoingLine.removeFromWorkspace(workspace);
|
outgoingLine.removeFromWorkspace(workspace);
|
||||||
|
|
||||||
// Remove from workspace.
|
|
||||||
EventBus.instance.fireEvent('topicDisconect', this.getModel());
|
|
||||||
|
|
||||||
// Change text based on the current connection ...
|
|
||||||
const model = this.getModel();
|
|
||||||
if (!model.getText()) {
|
|
||||||
const text = this.getText();
|
|
||||||
this._setText(text, false);
|
|
||||||
}
|
|
||||||
if (!model.getFontSize()) {
|
|
||||||
const size = this.getFontSize();
|
|
||||||
this.setFontSize(size, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide connection line?.
|
// Hide connection line?.
|
||||||
if (targetTopic.getChildren().length === 0) {
|
if (targetTopic.getChildren().length === 0) {
|
||||||
const connector = targetTopic.getShrinkConnector();
|
const connector = targetTopic.getShrinkConnector();
|
||||||
@ -1063,6 +1019,12 @@ abstract class Topic extends NodeGraph {
|
|||||||
targetTopic.isCollapsed(false);
|
targetTopic.isCollapsed(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.redrawShapeType();
|
||||||
|
this.redraw(true);
|
||||||
|
|
||||||
|
// Remove from workspace.
|
||||||
|
EventBus.instance.fireEvent('topicDisconect', this.getModel());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1078,11 +1040,6 @@ abstract class Topic extends NodeGraph {
|
|||||||
}
|
}
|
||||||
|
|
||||||
connectTo(targetTopic: Topic, workspace: Workspace) {
|
connectTo(targetTopic: Topic, workspace: Workspace) {
|
||||||
$assert(!this._outgoingLine, 'Could not connect an already connected node');
|
|
||||||
$assert(targetTopic !== this, 'Circular connection are not allowed');
|
|
||||||
$assert(targetTopic, 'Parent Graph can not be null');
|
|
||||||
$assert(workspace, 'Workspace can not be null');
|
|
||||||
|
|
||||||
// Connect Graphical Nodes ...
|
// Connect Graphical Nodes ...
|
||||||
targetTopic.append(this);
|
targetTopic.append(this);
|
||||||
this._parent = targetTopic;
|
this._parent = targetTopic;
|
||||||
@ -1102,27 +1059,12 @@ abstract class Topic extends NodeGraph {
|
|||||||
// Update figure is necessary.
|
// Update figure is necessary.
|
||||||
this.updateTopicShape(targetTopic);
|
this.updateTopicShape(targetTopic);
|
||||||
|
|
||||||
// Change text based on the current connection ...
|
|
||||||
const model = this.getModel();
|
|
||||||
if (!model.getText()) {
|
|
||||||
const text = this.getText();
|
|
||||||
this._setText(text, false);
|
|
||||||
}
|
|
||||||
if (!model.getFontSize()) {
|
|
||||||
const size = this.getFontSize();
|
|
||||||
this.setFontSize(size, false);
|
|
||||||
}
|
|
||||||
this.getTextShape();
|
|
||||||
|
|
||||||
// Display connection node...
|
// Display connection node...
|
||||||
const connector = targetTopic.getShrinkConnector();
|
const connector = targetTopic.getShrinkConnector();
|
||||||
if (connector) {
|
if (connector) {
|
||||||
connector.setVisibility(true);
|
connector.setVisibility(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Redraw line ...
|
|
||||||
outgoingLine.redraw();
|
|
||||||
|
|
||||||
// Fire connection event ...
|
// Fire connection event ...
|
||||||
if (this.isInWorkspace()) {
|
if (this.isInWorkspace()) {
|
||||||
EventBus.instance.fireEvent('topicConnected', {
|
EventBus.instance.fireEvent('topicConnected', {
|
||||||
@ -1130,6 +1072,8 @@ abstract class Topic extends NodeGraph {
|
|||||||
childNode: this.getModel(),
|
childNode: this.getModel(),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.redraw(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
private createConnectionLine(targetTopic: Topic): ConnectionLine {
|
private createConnectionLine(targetTopic: Topic): ConnectionLine {
|
||||||
@ -1247,8 +1191,27 @@ abstract class Topic extends NodeGraph {
|
|||||||
|
|
||||||
redraw(redrawChildren = false): void {
|
redraw(redrawChildren = false): void {
|
||||||
if (this._isInWorkspace) {
|
if (this._isInWorkspace) {
|
||||||
const textShape = this.getTextShape();
|
const textShape = this.getOrBuildTextShape();
|
||||||
if (this.getShapeType() !== 'image') {
|
if (this.getShapeType() !== 'image') {
|
||||||
|
// Update font ...
|
||||||
|
const fontColor = this.getFontColor();
|
||||||
|
textShape.setColor(fontColor);
|
||||||
|
|
||||||
|
const fontSize = this.getFontSize();
|
||||||
|
textShape.setSize(fontSize);
|
||||||
|
|
||||||
|
const fontWeight = this.getFontWeight();
|
||||||
|
textShape.setWeight(fontWeight);
|
||||||
|
|
||||||
|
const fontStyle = this.getFontStyle();
|
||||||
|
textShape.setStyle(fontStyle);
|
||||||
|
|
||||||
|
const fontFamily = this.getFontFamily();
|
||||||
|
textShape.setFontName(fontFamily);
|
||||||
|
|
||||||
|
const text = this.getText();
|
||||||
|
textShape.setText(text);
|
||||||
|
|
||||||
// Calculate topic size and adjust elements ...
|
// Calculate topic size and adjust elements ...
|
||||||
const textWidth = textShape.getWidth();
|
const textWidth = textShape.getWidth();
|
||||||
const textHeight = textShape.getHeight();
|
const textHeight = textShape.getHeight();
|
||||||
@ -1256,7 +1219,7 @@ abstract class Topic extends NodeGraph {
|
|||||||
|
|
||||||
// Adjust icons group based on the font size ...
|
// Adjust icons group based on the font size ...
|
||||||
const iconGroup = this.getOrBuildIconGroup();
|
const iconGroup = this.getOrBuildIconGroup();
|
||||||
const fontHeight = this.getTextShape().getFontHeight();
|
const fontHeight = this.getOrBuildTextShape().getFontHeight();
|
||||||
const iconHeight = ICON_SCALING_FACTOR * fontHeight;
|
const iconHeight = ICON_SCALING_FACTOR * fontHeight;
|
||||||
iconGroup.seIconSize(iconHeight, iconHeight);
|
iconGroup.seIconSize(iconHeight, iconHeight);
|
||||||
|
|
||||||
@ -1272,7 +1235,7 @@ abstract class Topic extends NodeGraph {
|
|||||||
|
|
||||||
// Adjust all topic elements positions ...
|
// Adjust all topic elements positions ...
|
||||||
const yPosition = Math.round((topicHeight - textHeight) / 2);
|
const yPosition = Math.round((topicHeight - textHeight) / 2);
|
||||||
iconGroup.setPosition(padding, yPosition);
|
iconGroup.setPosition(padding, yPosition - yPosition / 10);
|
||||||
textShape.setPosition(padding + iconGroupWith + textIconSpacing, yPosition);
|
textShape.setPosition(padding + iconGroupWith + textIconSpacing, yPosition);
|
||||||
|
|
||||||
// Update topic color ...
|
// Update topic color ...
|
||||||
@ -1282,10 +1245,6 @@ abstract class Topic extends NodeGraph {
|
|||||||
const bgColor = this.getBackgroundColor();
|
const bgColor = this.getBackgroundColor();
|
||||||
this.getInnerShape().setFill(bgColor);
|
this.getInnerShape().setFill(bgColor);
|
||||||
|
|
||||||
// Update font ...
|
|
||||||
const fontColor = this.getFontColor();
|
|
||||||
textShape.setColor(fontColor);
|
|
||||||
|
|
||||||
// Force the repaint in case that the main topic color has changed.
|
// Force the repaint in case that the main topic color has changed.
|
||||||
if (this.getParent()) {
|
if (this.getParent()) {
|
||||||
this._connector.setColor(borderColor);
|
this._connector.setColor(borderColor);
|
||||||
|
@ -143,7 +143,7 @@ class TopicStyle {
|
|||||||
}
|
}
|
||||||
|
|
||||||
static getInnerPadding(topic: Topic): number {
|
static getInnerPadding(topic: Topic): number {
|
||||||
return Math.round(topic.getTextShape().getFontHeight() * 0.5);
|
return Math.round(topic.getOrBuildTextShape().getFontHeight() * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
static defaultShapeType(topic: Topic): TopicShapeType {
|
static defaultShapeType(topic: Topic): TopicShapeType {
|
||||||
|