Add background outer image shade.
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 88 KiB |
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 96 KiB |
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 93 KiB |
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 80 KiB |
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 52 KiB |
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 63 KiB |
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 39 KiB |
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 113 KiB |
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 188 KiB |
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 56 KiB |
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 59 KiB |
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 27 KiB |
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 95 KiB |
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 142 KiB |
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 101 KiB |
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 66 KiB |
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 44 KiB |
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 78 KiB |
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 87 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 88 KiB |
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 87 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 88 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 96 KiB |
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 90 KiB |
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 87 KiB |
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 87 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 90 KiB |
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 90 KiB |
Before Width: | Height: | Size: 178 KiB After Width: | Height: | Size: 172 KiB |
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 88 KiB |
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 92 KiB |
@ -17,7 +17,6 @@
|
|||||||
*/
|
*/
|
||||||
import { $assert } from '@wisemapping/core-js';
|
import { $assert } from '@wisemapping/core-js';
|
||||||
import { ElementClass, Point } from '@wisemapping/web2d';
|
import { ElementClass, Point } from '@wisemapping/web2d';
|
||||||
import TopicConfig from './TopicConfig';
|
|
||||||
import NodeModel from './model/NodeModel';
|
import NodeModel from './model/NodeModel';
|
||||||
import Workspace from './Workspace';
|
import Workspace from './Workspace';
|
||||||
import DragTopic from './DragTopic';
|
import DragTopic from './DragTopic';
|
||||||
@ -33,7 +32,7 @@ abstract class NodeGraph {
|
|||||||
|
|
||||||
private _options: NodeOption;
|
private _options: NodeOption;
|
||||||
|
|
||||||
private _onFocus: boolean;
|
protected _onFocus: boolean;
|
||||||
|
|
||||||
private _size: SizeType;
|
private _size: SizeType;
|
||||||
|
|
||||||
@ -126,26 +125,7 @@ abstract class NodeGraph {
|
|||||||
return this._model.getId();
|
return this._model.getId();
|
||||||
}
|
}
|
||||||
|
|
||||||
setOnFocus(focus: boolean) {
|
abstract setOnFocus(focus: boolean): void;
|
||||||
if (this._onFocus !== focus) {
|
|
||||||
this._onFocus = focus;
|
|
||||||
const outerShape = this.getOuterShape();
|
|
||||||
if (focus) {
|
|
||||||
outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
|
|
||||||
outerShape.setOpacity(1);
|
|
||||||
} else {
|
|
||||||
outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES.fillColor);
|
|
||||||
outerShape.setOpacity(0);
|
|
||||||
}
|
|
||||||
this.setCursor('move');
|
|
||||||
|
|
||||||
// In any case, always try to hide the editor ...
|
|
||||||
this.closeEditors();
|
|
||||||
|
|
||||||
// Fire event ...
|
|
||||||
this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
abstract closeEditors(): void;
|
abstract closeEditors(): void;
|
||||||
|
|
||||||
|
@ -262,8 +262,9 @@ abstract class Topic extends NodeGraph {
|
|||||||
|
|
||||||
getOuterShape(): ElementClass {
|
getOuterShape(): ElementClass {
|
||||||
if (!this._outerShape) {
|
if (!this._outerShape) {
|
||||||
const rect = this._buildShape(TopicConfig.OUTER_SHAPE_ATTRIBUTES, 'rounded rectangle');
|
const rect = this._buildShape({}, 'rounded rectangle');
|
||||||
rect.setPosition(-2, -3);
|
|
||||||
|
rect.setPosition(-3, -3);
|
||||||
rect.setOpacity(0);
|
rect.setOpacity(0);
|
||||||
this._outerShape = rect;
|
this._outerShape = rect;
|
||||||
}
|
}
|
||||||
@ -520,8 +521,8 @@ abstract class Topic extends NodeGraph {
|
|||||||
let result = model.getBackgroundColor();
|
let result = model.getBackgroundColor();
|
||||||
|
|
||||||
if (!result && !this.isCentralTopic()) {
|
if (!result && !this.isCentralTopic()) {
|
||||||
const bolderColor = this.getBorderColor();
|
const borderColor = this.getBorderColor();
|
||||||
result = ColorUtil.lightenColor(bolderColor, 140);
|
result = ColorUtil.lightenColor(borderColor, 40);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!result) {
|
if (!result) {
|
||||||
@ -634,6 +635,28 @@ abstract class Topic extends NodeGraph {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setOnFocus(focus: boolean) {
|
||||||
|
if (this.isOnFocus() !== focus) {
|
||||||
|
this._onFocus = focus;
|
||||||
|
const outerShape = this.getOuterShape();
|
||||||
|
|
||||||
|
const fillColor = TopicStyle.defaultOuterBackgroundColor(this, focus);
|
||||||
|
const borderColor = TopicStyle.defaultOuterBorderColor(this);
|
||||||
|
|
||||||
|
outerShape.setFill(fillColor);
|
||||||
|
outerShape.setStroke(1, 'solid', borderColor);
|
||||||
|
outerShape.setOpacity(focus ? 1 : 0);
|
||||||
|
|
||||||
|
this.setCursor('move');
|
||||||
|
|
||||||
|
// In any case, always try to hide the editor ...
|
||||||
|
this.closeEditors();
|
||||||
|
|
||||||
|
// Fire event ...
|
||||||
|
this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
areChildrenShrunken(): boolean {
|
areChildrenShrunken(): boolean {
|
||||||
const model = this.getModel();
|
const model = this.getModel();
|
||||||
return model.areChildrenShrunken() && !this.isCentralTopic();
|
return model.areChildrenShrunken() && !this.isCentralTopic();
|
||||||
@ -975,7 +998,7 @@ abstract class Topic extends NodeGraph {
|
|||||||
const outerShape = this.getOuterShape();
|
const outerShape = this.getOuterShape();
|
||||||
const innerShape = this.getInnerShape();
|
const innerShape = this.getInnerShape();
|
||||||
|
|
||||||
outerShape.setSize(roundedSize.width + 4, roundedSize.height + 6);
|
outerShape.setSize(roundedSize.width + 6, roundedSize.height + 6);
|
||||||
innerShape.setSize(roundedSize.width, roundedSize.height);
|
innerShape.setSize(roundedSize.width, roundedSize.height);
|
||||||
|
|
||||||
// Update the figure position(ej: central topic must be centered) and children position.
|
// Update the figure position(ej: central topic must be centered) and children position.
|
||||||
@ -1208,6 +1231,14 @@ abstract class Topic extends NodeGraph {
|
|||||||
const text = this.getText();
|
const text = this.getText();
|
||||||
textShape.setText(text.trim());
|
textShape.setText(text.trim());
|
||||||
|
|
||||||
|
// Update other shape style ...
|
||||||
|
const outerShape = this.getOuterShape();
|
||||||
|
const outerFillColor = TopicStyle.defaultOuterBackgroundColor(this, this.isOnFocus());
|
||||||
|
const outerBorderColor = TopicStyle.defaultOuterBorderColor(this);
|
||||||
|
|
||||||
|
outerShape.setFill(outerFillColor);
|
||||||
|
outerShape.setStroke(1, 'solid', outerBorderColor);
|
||||||
|
|
||||||
// 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();
|
||||||
|
@ -17,21 +17,9 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
const CONNECTOR_WIDTH = 6;
|
const CONNECTOR_WIDTH = 6;
|
||||||
|
|
||||||
const OUTER_SHAPE_ATTRIBUTES = {
|
|
||||||
fillColor: 'rgb(252,235,192)',
|
|
||||||
stroke: '1 solid rgb(241,163,39)',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
};
|
|
||||||
|
|
||||||
const OUTER_SHAPE_ATTRIBUTES_FOCUS = { fillColor: 'rgb(244,184,45)', x: 0, y: 0 };
|
|
||||||
|
|
||||||
const INNER_RECT_ATTRIBUTES = { stroke: '2 solid' };
|
const INNER_RECT_ATTRIBUTES = { stroke: '2 solid' };
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
CONNECTOR_WIDTH,
|
CONNECTOR_WIDTH,
|
||||||
OUTER_SHAPE_ATTRIBUTES,
|
|
||||||
OUTER_SHAPE_ATTRIBUTES_FOCUS,
|
|
||||||
INNER_RECT_ATTRIBUTES,
|
INNER_RECT_ATTRIBUTES,
|
||||||
};
|
};
|
||||||
|
@ -55,7 +55,7 @@ class TopicEventDispatcher extends Events {
|
|||||||
|
|
||||||
// Open the new editor ...
|
// Open the new editor ...
|
||||||
const model = topic.getModel();
|
const model = topic.getModel();
|
||||||
if (model.getShapeType() !== 'image' && !this._readOnly && eventType === TopicEvent.EDIT) {
|
if (!this._readOnly && eventType === TopicEvent.EDIT) {
|
||||||
editor.show(topic, textOverwrite);
|
editor.show(topic, textOverwrite);
|
||||||
} else {
|
} else {
|
||||||
this.fireEvent(eventType, { model, readOnly: this._readOnly });
|
this.fireEvent(eventType, { model, readOnly: this._readOnly });
|
||||||
@ -71,6 +71,9 @@ class TopicEventDispatcher extends Events {
|
|||||||
}
|
}
|
||||||
|
|
||||||
static getInstance(): TopicEventDispatcher {
|
static getInstance(): TopicEventDispatcher {
|
||||||
|
if (!this._instance) {
|
||||||
|
throw new Error('Event dispatched has not been initialized');
|
||||||
|
}
|
||||||
return this._instance;
|
return this._instance;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -21,6 +21,7 @@ import { FontStyleType } from './FontStyleType';
|
|||||||
import { FontWeightType } from './FontWeightType';
|
import { FontWeightType } from './FontWeightType';
|
||||||
import { $msg } from './Messages';
|
import { $msg } from './Messages';
|
||||||
import { TopicShapeType } from './model/INodeModel';
|
import { TopicShapeType } from './model/INodeModel';
|
||||||
|
import ColorUtil from './render/ColorUtil';
|
||||||
import Topic from './Topic';
|
import Topic from './Topic';
|
||||||
|
|
||||||
type FontStyle = {
|
type FontStyle = {
|
||||||
@ -43,8 +44,8 @@ type TopicStyleType = {
|
|||||||
|
|
||||||
const TopicDefaultStyles = {
|
const TopicDefaultStyles = {
|
||||||
CENTRAL_TOPIC: {
|
CENTRAL_TOPIC: {
|
||||||
borderColor: 'rgb(57,113,177)',
|
borderColor: '#3971B1',
|
||||||
backgroundColor: 'rgb(80,157,192)',
|
backgroundColor: '#509DC0',
|
||||||
fontStyle: {
|
fontStyle: {
|
||||||
font: 'Verdana',
|
font: 'Verdana',
|
||||||
size: 10,
|
size: 10,
|
||||||
@ -58,14 +59,14 @@ const TopicDefaultStyles = {
|
|||||||
shapeType: 'rounded rectangle' as TopicShapeType,
|
shapeType: 'rounded rectangle' as TopicShapeType,
|
||||||
},
|
},
|
||||||
MAIN_TOPIC: {
|
MAIN_TOPIC: {
|
||||||
borderColor: 'rgb(2,59,185)',
|
borderColor: '#023BB9',
|
||||||
backgroundColor: 'rgb(224,229,239)',
|
backgroundColor: '#E0E5EF',
|
||||||
fontStyle: {
|
fontStyle: {
|
||||||
font: 'Arial',
|
font: 'Arial',
|
||||||
size: 8,
|
size: 8,
|
||||||
style: 'normal' as FontStyleType,
|
style: 'normal' as FontStyleType,
|
||||||
weight: 'normal' as FontWeightType,
|
weight: 'normal' as FontWeightType,
|
||||||
color: 'rgb(82,92,97)',
|
color: '#525C61',
|
||||||
},
|
},
|
||||||
connectionStyle: LineType.THICK_CURVED,
|
connectionStyle: LineType.THICK_CURVED,
|
||||||
connectionColor: '#495879',
|
connectionColor: '#495879',
|
||||||
@ -73,14 +74,14 @@ const TopicDefaultStyles = {
|
|||||||
shapeType: 'line' as TopicShapeType,
|
shapeType: 'line' as TopicShapeType,
|
||||||
},
|
},
|
||||||
SUB_TOPIC: {
|
SUB_TOPIC: {
|
||||||
borderColor: 'rgb(2,59,185)',
|
borderColor: '#96e3ff',
|
||||||
backgroundColor: 'rgb(224,229,239)',
|
backgroundColor: '#96e3ff',
|
||||||
fontStyle: {
|
fontStyle: {
|
||||||
font: 'Arial',
|
font: 'Arial',
|
||||||
size: 6,
|
size: 6,
|
||||||
style: 'normal' as FontStyleType,
|
style: 'normal' as FontStyleType,
|
||||||
weight: 'normal' as FontWeightType,
|
weight: 'normal' as FontWeightType,
|
||||||
color: 'rgb(82,92,97)',
|
color: '#525C61',
|
||||||
},
|
},
|
||||||
connectionStyle: LineType.THICK_CURVED,
|
connectionStyle: LineType.THICK_CURVED,
|
||||||
connectionColor: '#495879',
|
connectionColor: '#495879',
|
||||||
@ -89,14 +90,14 @@ const TopicDefaultStyles = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
ISOLATED_TOPIC: {
|
ISOLATED_TOPIC: {
|
||||||
borderColor: 'rgb(2,59,185)',
|
borderColor: '#023BB9',
|
||||||
backgroundColor: 'rgb(224,229,239)',
|
backgroundColor: '#96e3ff',
|
||||||
fontStyle: {
|
fontStyle: {
|
||||||
font: 'Verdana',
|
font: 'Verdana',
|
||||||
size: 8,
|
size: 8,
|
||||||
style: 'normal' as FontStyleType,
|
style: 'normal' as FontStyleType,
|
||||||
weight: 'normal' as FontWeightType,
|
weight: 'normal' as FontWeightType,
|
||||||
color: 'rgb(82,92,97)',
|
color: '#525C61',
|
||||||
},
|
},
|
||||||
msgKey: 'ISOLATED_TOPIC',
|
msgKey: 'ISOLATED_TOPIC',
|
||||||
connectionStyle: LineType.THIN_CURVED,
|
connectionStyle: LineType.THIN_CURVED,
|
||||||
@ -136,6 +137,28 @@ class TopicStyle {
|
|||||||
return this._getStyles(topic).fontStyle;
|
return this._getStyles(topic).fontStyle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static defaultOuterBorderColor(topic: Topic): string {
|
||||||
|
let result: string;
|
||||||
|
if (topic.getShapeType() === 'line') {
|
||||||
|
result = '#F4B82D';
|
||||||
|
} else {
|
||||||
|
const innerBorderColor = topic.getBorderColor();
|
||||||
|
result = ColorUtil.lightenColor(innerBorderColor, 70);
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
static defaultOuterBackgroundColor(topic: Topic, onFocus: boolean): string {
|
||||||
|
let result: string;
|
||||||
|
if (topic.getShapeType() === 'line') {
|
||||||
|
result = onFocus ? '#F4B82D' : '#FCEBC0';
|
||||||
|
} else {
|
||||||
|
const innerBgColor = topic.getBackgroundColor();
|
||||||
|
result = ColorUtil.lightenColor(innerBgColor, 70);
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
static defaultBackgroundColor(topic: Topic): string {
|
static defaultBackgroundColor(topic: Topic): string {
|
||||||
return this._getStyles(topic).backgroundColor;
|
return this._getStyles(topic).backgroundColor;
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,34 @@
|
|||||||
|
import { Story, Meta } from '@storybook/html';
|
||||||
|
import createTopic, { TopicArgs } from './Topic';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Mindplot/TextEditor',
|
||||||
|
// More on argTypes: https://storybook.js.org/docs/html/api/argtypes
|
||||||
|
argTypes: {
|
||||||
|
backgroundColor: { control: 'color' },
|
||||||
|
borderColor: { control: 'color' },
|
||||||
|
fontFamily: {
|
||||||
|
options: ['Arial', 'Verdana'],
|
||||||
|
control: { type: 'select' },
|
||||||
|
},
|
||||||
|
fontSize: { control: { type: 'number', min: 0, max: 20, step: 2 } },
|
||||||
|
fontColor: { control: 'color' },
|
||||||
|
shapeType: {
|
||||||
|
options: ['rectangle', 'rounded rectangle', 'elipse', 'line'],
|
||||||
|
control: { type: 'select' },
|
||||||
|
},
|
||||||
|
text: { control: 'text' },
|
||||||
|
noteText: { control: 'text' },
|
||||||
|
linkText: { control: 'text' },
|
||||||
|
eicon: { control: 'multi-select', options: ['❤️', '🌈', '🖇️'] },
|
||||||
|
},
|
||||||
|
} as Meta;
|
||||||
|
|
||||||
|
const Template: Story<TopicArgs> = (args: TopicArgs) => createTopic(args);
|
||||||
|
|
||||||
|
export const MultilineEditor = Template.bind({});
|
||||||
|
MultilineEditor.args = {
|
||||||
|
text: 'Border Style',
|
||||||
|
borderColor: '#52E661',
|
||||||
|
readOnly: false,
|
||||||
|
};
|
@ -1,6 +1,6 @@
|
|||||||
import createTopic from './Topic';
|
import { Story, Meta } from '@storybook/html';
|
||||||
|
import createTopic, { TopicArgs } from './Topic';
|
||||||
|
|
||||||
// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
|
|
||||||
export default {
|
export default {
|
||||||
title: 'Mindplot/Topic',
|
title: 'Mindplot/Topic',
|
||||||
// More on argTypes: https://storybook.js.org/docs/html/api/argtypes
|
// More on argTypes: https://storybook.js.org/docs/html/api/argtypes
|
||||||
@ -22,22 +22,17 @@ export default {
|
|||||||
linkText: { control: 'text' },
|
linkText: { control: 'text' },
|
||||||
eicon: { control: 'multi-select', options: ['❤️', '🌈', '🖇️'] },
|
eicon: { control: 'multi-select', options: ['❤️', '🌈', '🖇️'] },
|
||||||
},
|
},
|
||||||
};
|
} as Meta;
|
||||||
|
|
||||||
// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
|
const Template: Story<TopicArgs> = (args: TopicArgs) => createTopic(args);
|
||||||
const Template = ({ ...args }) => createTopic({ ...args });
|
|
||||||
|
|
||||||
export const BoderderStyle = Template.bind({});
|
export const BoderderStyle = Template.bind({});
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
BoderderStyle.args = {
|
BoderderStyle.args = {
|
||||||
text: 'Border Style',
|
text: 'Border Style',
|
||||||
borderColor: 'red',
|
borderColor: '#52E661',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const FontStyle = Template.bind({});
|
export const FontStyle = Template.bind({});
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
FontStyle.args = {
|
FontStyle.args = {
|
||||||
text: 'Font Style',
|
text: 'Font Style',
|
||||||
fontColor: 'red',
|
fontColor: 'red',
|
||||||
@ -46,33 +41,39 @@ FontStyle.args = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const BackgroundColor = Template.bind({});
|
export const BackgroundColor = Template.bind({});
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
BackgroundColor.args = {
|
BackgroundColor.args = {
|
||||||
text: 'Background Color Style',
|
text: 'Back Color Style',
|
||||||
backgroundColor: 'red',
|
backgroundColor: '#52E661',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const NoteFeature = Template.bind({});
|
export const NoteFeature = Template.bind({});
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
NoteFeature.args = {
|
NoteFeature.args = {
|
||||||
text: 'Note Feature',
|
text: 'Note Feature',
|
||||||
noteText: 'This is great note\nwith two lines',
|
noteText: 'This is great note\nwith two lines',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const LinkFeature = Template.bind({});
|
export const LinkFeature = Template.bind({});
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
LinkFeature.args = {
|
LinkFeature.args = {
|
||||||
text: 'Link Feature',
|
text: 'Link Feature',
|
||||||
linkText: 'https://www.google.com/',
|
linkText: 'https://www.google.com/',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const IconFeature = Template.bind({});
|
export const IconFeature = Template.bind({});
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
IconFeature.args = {
|
IconFeature.args = {
|
||||||
text: 'EIcon Feature\n with multi-line',
|
text: 'EIcon Feature\n with multi-line',
|
||||||
eicon: ['❤️', '🌈', '🖇️'],
|
eicon: ['❤️', '🌈', '🖇️'],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const ShapeLine = Template.bind({});
|
||||||
|
ShapeLine.args = {
|
||||||
|
text: 'Shape Line',
|
||||||
|
shapeType: 'line',
|
||||||
|
eicon: ['🖇️'],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ShapeEllipse = Template.bind({});
|
||||||
|
ShapeEllipse.args = {
|
||||||
|
text: 'Shape Ellipse',
|
||||||
|
eicon: ['🌈'],
|
||||||
|
shapeType: 'elipse',
|
||||||
|
};
|
||||||
|
@ -6,6 +6,7 @@ import CentralTopic from '../../../src/components/CentralTopic';
|
|||||||
import Workspace from '../../../src/components/Workspace';
|
import Workspace from '../../../src/components/Workspace';
|
||||||
import ScreenManager from '../../../src/components/ScreenManager';
|
import ScreenManager from '../../../src/components/ScreenManager';
|
||||||
import EmojiIconModel from '../../../src/components/model/EmojiIconModel';
|
import EmojiIconModel from '../../../src/components/model/EmojiIconModel';
|
||||||
|
import TopicEventDispatcher from '../../../src/components/TopicEventDispatcher';
|
||||||
|
|
||||||
const registerRefreshHook = (topic: Topic) => {
|
const registerRefreshHook = (topic: Topic) => {
|
||||||
// Trigger a redraw after the node is added ...
|
// Trigger a redraw after the node is added ...
|
||||||
@ -20,6 +21,20 @@ const registerRefreshHook = (topic: Topic) => {
|
|||||||
globalThis.observer.observe(document.getElementById('root')!, { childList: true });
|
globalThis.observer.observe(document.getElementById('root')!, { childList: true });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type TopicArgs = {
|
||||||
|
readOnly?: boolean;
|
||||||
|
backgroundColor?: string;
|
||||||
|
fontFamily?: string;
|
||||||
|
borderColor?: string;
|
||||||
|
fontSize?: number;
|
||||||
|
fontColor?: string;
|
||||||
|
shapeType?: 'rectangle' | 'rounded rectangle' | 'elipse' | 'line';
|
||||||
|
text?: string;
|
||||||
|
noteText?: string;
|
||||||
|
linkText?: string;
|
||||||
|
eicon?: string[];
|
||||||
|
};
|
||||||
|
|
||||||
const createTopic = ({
|
const createTopic = ({
|
||||||
backgroundColor = undefined,
|
backgroundColor = undefined,
|
||||||
text = undefined,
|
text = undefined,
|
||||||
@ -31,7 +46,8 @@ const createTopic = ({
|
|||||||
noteText = undefined,
|
noteText = undefined,
|
||||||
linkText = undefined,
|
linkText = undefined,
|
||||||
eicon = undefined,
|
eicon = undefined,
|
||||||
}) => {
|
readOnly = true,
|
||||||
|
}: TopicArgs) => {
|
||||||
// Build basic container ...
|
// Build basic container ...
|
||||||
const divElem = document.createElement('div');
|
const divElem = document.createElement('div');
|
||||||
const jqueryDiv = $(divElem);
|
const jqueryDiv = $(divElem);
|
||||||
@ -43,7 +59,8 @@ const createTopic = ({
|
|||||||
|
|
||||||
// Initialize designer helpers ...
|
// Initialize designer helpers ...
|
||||||
const screenManager = new ScreenManager(divElem);
|
const screenManager = new ScreenManager(divElem);
|
||||||
const workspace = new Workspace(screenManager, 0.3, true);
|
const workspace = new Workspace(screenManager, 0.3, readOnly);
|
||||||
|
TopicEventDispatcher.configure(readOnly);
|
||||||
|
|
||||||
// Update model ...
|
// Update model ...
|
||||||
const mindmap = new Mindmap();
|
const mindmap = new Mindmap();
|
||||||
@ -55,6 +72,7 @@ const createTopic = ({
|
|||||||
model.setFontColor(fontColor);
|
model.setFontColor(fontColor);
|
||||||
model.setFontFamily(fontFamily);
|
model.setFontFamily(fontFamily);
|
||||||
model.setFontSize(fontSize);
|
model.setFontSize(fontSize);
|
||||||
|
model.setShapeType(shapeType);
|
||||||
|
|
||||||
if (noteText) {
|
if (noteText) {
|
||||||
const note = new NoteModel({ text: noteText });
|
const note = new NoteModel({ text: noteText });
|
||||||
@ -75,7 +93,7 @@ const createTopic = ({
|
|||||||
|
|
||||||
// Create topic UI element ...
|
// Create topic UI element ...
|
||||||
mindmap.addBranch(model);
|
mindmap.addBranch(model);
|
||||||
const centralTopic = new CentralTopic(model, { readOnly: true });
|
const centralTopic = new CentralTopic(model, { readOnly });
|
||||||
workspace.append(centralTopic);
|
workspace.append(centralTopic);
|
||||||
|
|
||||||
// Register refresh hook ..
|
// Register refresh hook ..
|
||||||
|
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 110 KiB |
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 52 KiB |