Add background outer image shade.

This commit is contained in:
Paulo Gustavo Veiga 2023-01-31 22:33:51 -08:00
parent 51c442d122
commit 83ca1da44c
59 changed files with 152 additions and 74 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 85 KiB

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 119 KiB

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 196 KiB

After

Width:  |  Height:  |  Size: 188 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 150 KiB

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 107 KiB

After

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 178 KiB

After

Width:  |  Height:  |  Size: 172 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 92 KiB

View File

@ -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;

View File

@ -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();

View File

@ -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,
}; };

View File

@ -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;
} }
} }

View File

@ -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;
} }

View File

@ -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,
};

View File

@ -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',
};

View File

@ -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 ..

Binary file not shown.

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 52 KiB