Add support for new theme

This commit is contained in:
Paulo Gustavo Veiga 2023-02-28 21:54:30 -03:00
parent 4fc015c6dc
commit dc1e9c6549
68 changed files with 255 additions and 69 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 129 KiB

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 205 KiB

After

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 KiB

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 153 KiB

After

Width:  |  Height:  |  Size: 154 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 105 KiB

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 107 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 144 KiB

After

Width:  |  Height:  |  Size: 145 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 103 KiB

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 185 KiB

After

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 112 KiB

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 KiB

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 KiB

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 KiB

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 105 KiB

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 KiB

After

Width:  |  Height:  |  Size: 108 KiB

View File

@ -40,6 +40,7 @@ const ThemeEditor = (props: {
<FormControlLabel value="classic" control={<Radio />} label="Classic" />
<FormControlLabel value="prism" control={<Radio />} label="Summer" />
<FormControlLabel value="dark-prism" control={<Radio />} label="Dark" />
<FormControlLabel value="robot" control={<Radio />} label="Robot" />
</RadioGroup>
</Box>
);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 24 KiB

View File

@ -26,9 +26,9 @@ import NodeModel from './model/NodeModel';
import RelationshipModel from './model/RelationshipModel';
import Topic from './Topic';
import PositionType from './PositionType';
import EventBusType from './EventBusType';
import LayoutEventBusType from './LayoutEventBusType';
abstract class ActionDispatcher extends EventDispispatcher<EventBusType> {
abstract class ActionDispatcher extends EventDispispatcher<LayoutEventBusType> {
private static _instance: ActionDispatcher;
private _commandContext: CommandContext;

View File

@ -17,7 +17,7 @@
*/
import { $assert, $defined } from '@wisemapping/core-js';
import { Designer } from '..';
import EventBus from './layout/EventBus';
import LayoutEventBus from './layout/LayoutEventBus';
import NodeModel from './model/NodeModel';
import RelationshipModel from './model/RelationshipModel';
import PositionType from './PositionType';
@ -105,7 +105,7 @@ class CommandContext {
moveTopic(topic: Topic, position: PositionType): void {
$assert(topic, 'topic cannot be null');
$assert(position, 'position cannot be null');
EventBus.instance.fireEvent('topicMoved', {
LayoutEventBus.fireEvent('topicMoved', {
node: topic.getModel(),
position,
});

View File

@ -40,7 +40,7 @@ import Relationship from './Relationship';
import TopicEventDispatcher from './TopicEventDispatcher';
import TopicFactory from './TopicFactory';
import EventBus from './layout/EventBus';
import LayoutEventBus from './layout/LayoutEventBus';
import EventBusDispatcher from './layout/EventBusDispatcher';
import LayoutManager from './layout/LayoutManager';
@ -654,7 +654,7 @@ class Designer extends EventDispispatcher<DesignerEventType> {
this._canvas.registerEvents();
// Finally, sort the map ...
EventBus.instance.fireEvent('forceLayout');
LayoutEventBus.fireEvent('forceLayout');
this.fireEvent('loadSuccess');
});
}

View File

@ -20,7 +20,7 @@ import ActionDispatcher from './ActionDispatcher';
import Command from './Command';
import CommandContext from './CommandContext';
import DesignerUndoManager from './DesignerUndoManager';
import EventBus from './layout/EventBus';
import LayoutEventBus from './layout/LayoutEventBus';
class DesignerActionRunner {
private _undoManager: DesignerUndoManager;
@ -42,19 +42,19 @@ class DesignerActionRunner {
command.execute(this._context);
this._undoManager.enqueue(command);
this.fireChangeEvent();
EventBus.instance.fireEvent('forceLayout');
LayoutEventBus.fireEvent('forceLayout');
}
undo(): void {
this._undoManager.execUndo(this._context);
this.fireChangeEvent();
EventBus.instance.fireEvent('forceLayout');
LayoutEventBus.fireEvent('forceLayout');
}
redo(): void {
this._undoManager.execRedo(this._context);
this.fireChangeEvent();
EventBus.instance.fireEvent('forceLayout');
LayoutEventBus.fireEvent('forceLayout');
}
fireChangeEvent(): void {

View File

@ -16,7 +16,7 @@
* limitations under the License.
*/
export type EventBusType =
export type LayoutEventBusType =
| 'topicResize'
| 'topicMoved'
| 'forceLayout'
@ -27,4 +27,4 @@ export type EventBusType =
| 'topicDisconect'
| 'modelUpdate';
export default EventBusType;
export default LayoutEventBusType;

View File

@ -21,7 +21,7 @@ import $ from 'jquery';
import ActionDispatcher from './ActionDispatcher';
import EventDispatcher from './EventDispatcher';
import EventBus from './layout/EventBus';
import LayoutEventBus from './layout/LayoutEventBus';
import Topic from './Topic';
type EditorEventType = 'input';
@ -126,7 +126,7 @@ class EditorComponent extends EventDispatcher<EditorEventType> {
private resize(text?: string): void {
// Force relayout ...
EventBus.instance.fireEvent('forceLayout');
LayoutEventBus.fireEvent('forceLayout');
// Adjust position ...
const textShape = this._topic.getOrBuildTextShape();

View File

@ -27,7 +27,7 @@ import DragTopicCommand from './commands/DragTopicCommand';
import GenericFunctionCommand from './commands/GenericFunctionCommand';
import MoveControlPointCommand from './commands/MoveControlPointCommand';
import ChangeFeatureToTopicCommand from './commands/ChangeFeatureToTopicCommand';
import EventBus from './layout/EventBus';
import LayoutEventBus from './layout/LayoutEventBus';
import CommandContext from './CommandContext';
import NodeModel from './model/NodeModel';
import RelationshipModel from './model/RelationshipModel';
@ -84,7 +84,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
const commandFunc = (topic: Topic, pos: PositionType) => {
const result = topic.getPosition();
EventBus.instance.fireEvent('topicMoved', {
LayoutEventBus.fireEvent('topicMoved', {
node: topic.getModel(),
position: pos,
});

View File

@ -23,7 +23,7 @@ import NodeGraph, { NodeOption } from './NodeGraph';
import TopicFeatureFactory from './TopicFeature';
import ConnectionLine, { LineType } from './ConnectionLine';
import IconGroup from './IconGroup';
import EventBus from './layout/EventBus';
import LayoutEventBus from './layout/LayoutEventBus';
import ShirinkConnector from './ShrinkConnector';
import ActionDispatcher from './ActionDispatcher';
@ -589,7 +589,7 @@ abstract class Topic extends NodeGraph {
elem.setVisibility(!value, 250);
});
EventBus.instance.fireEvent('childShrinked', model);
LayoutEventBus.fireEvent('childShrinked', model);
}
getShrinkConnector(): ShirinkConnector | null {
@ -618,10 +618,11 @@ abstract class Topic extends NodeGraph {
this._getTopicEventDispatcher().show(this, text);
}
getNoteValue(): string {
getNoteValue(): string | null {
const model = this.getModel();
const notes = model.findFeatureByType('note');
let result;
let result: string | null = null;
if (notes.length > 0) {
result = (notes[0] as NoteModel).getText();
}
@ -694,10 +695,6 @@ abstract class Topic extends NodeGraph {
*/
setPosition(point: PositionType): void {
// allowed param reassign to avoid risks of existing code relying in this side-effect
point.x = Math.ceil(point.x);
point.y = Math.ceil(point.y);
// Update model's position ...
const model = this.getModel();
model.setPosition(point.x, point.y);
@ -900,7 +897,7 @@ abstract class Topic extends NodeGraph {
this.updatePositionOnChangeSize(oldSize, size);
if (hasSizeChanged) {
EventBus.instance.fireEvent('topicResize', {
LayoutEventBus.fireEvent('topicResize', {
node: this.getModel(),
size,
});
@ -936,7 +933,7 @@ abstract class Topic extends NodeGraph {
}
// Remove from workspace.
EventBus.instance.fireEvent('topicDisconect', this.getModel());
LayoutEventBus.fireEvent('topicDisconect', this.getModel());
this.redraw(true);
}
@ -983,7 +980,7 @@ abstract class Topic extends NodeGraph {
// Fire connection event ...
if (this._isInWorkspace) {
EventBus.instance.fireEvent('topicConnected', {
LayoutEventBus.fireEvent('topicConnected', {
parentNode: targetTopic.getModel(),
childNode: this.getModel(),
});
@ -1024,7 +1021,7 @@ abstract class Topic extends NodeGraph {
workspace.removeChild(line);
}
this._isInWorkspace = false;
EventBus.instance.fireEvent('topicRemoved', this.getModel());
LayoutEventBus.fireEvent('topicRemoved', this.getModel());
}
addToWorkspace(workspace: Canvas): void {
@ -1032,12 +1029,12 @@ abstract class Topic extends NodeGraph {
workspace.append(elem);
if (!this._isInWorkspace) {
if (!this.isCentralTopic()) {
EventBus.instance.fireEvent('topicAdded', this.getModel());
LayoutEventBus.fireEvent('topicAdded', this.getModel());
}
const outgoingTopic = this.getOutgoingConnectedTopic();
if (this.getModel().isConnected() && outgoingTopic) {
EventBus.instance.fireEvent('topicConnected', {
LayoutEventBus.fireEvent('topicConnected', {
parentNode: outgoingTopic.getModel(),
childNode: this.getModel(),
});

View File

@ -18,7 +18,7 @@
import PositionType from '../PositionType';
import SizeType from '../SizeType';
import Topic from '../Topic';
import EventBus from './EventBus';
import LayoutEventBus from './LayoutEventBus';
import LayoutManager from './LayoutManager';
class EventBusDispatcher {
@ -34,14 +34,14 @@ class EventBusDispatcher {
}
registerBusEvents() {
EventBus.instance.addEvent('topicAdded', this._topicAdded.bind(this));
EventBus.instance.addEvent('topicRemoved', this._topicRemoved.bind(this));
EventBus.instance.addEvent('topicResize', this._topicResizeEvent.bind(this));
EventBus.instance.addEvent('topicMoved', this._topicMoved.bind(this));
EventBus.instance.addEvent('topicDisconect', this._topicDisconect.bind(this));
EventBus.instance.addEvent('topicConnected', this._topicConnected.bind(this));
EventBus.instance.addEvent('childShrinked', this._childShrinked.bind(this));
EventBus.instance.addEvent('forceLayout', this._forceLayout.bind(this));
LayoutEventBus.addEvent('topicAdded', this._topicAdded.bind(this));
LayoutEventBus.addEvent('topicRemoved', this._topicRemoved.bind(this));
LayoutEventBus.addEvent('topicResize', this._topicResizeEvent.bind(this));
LayoutEventBus.addEvent('topicMoved', this._topicMoved.bind(this));
LayoutEventBus.addEvent('topicDisconect', this._topicDisconect.bind(this));
LayoutEventBus.addEvent('topicConnected', this._topicConnected.bind(this));
LayoutEventBus.addEvent('childShrinked', this._childShrinked.bind(this));
LayoutEventBus.addEvent('forceLayout', this._forceLayout.bind(this));
}
private _topicResizeEvent(args: { node: Topic; size: SizeType }) {
@ -62,6 +62,9 @@ class EventBusDispatcher {
args.childNode.getId(),
args.childNode.getOrder()!, // @todo: This can be a issue ...
);
// Review this for of relayout, new node is not positioned properly with small gap. The problem seems to be related to some min
// this.getLayoutManager().layout(true);
}
getLayoutManager(): LayoutManager {

View File

@ -16,24 +16,20 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import EventDispispatcher from '../EventDispatcher';
import { EventBusType } from '../EventBusType';
import EventDispatcher from '../EventDispatcher';
import { LayoutEventBusType } from '../LayoutEventBusType';
class EventBus extends EventDispispatcher<EventBusType> {
// eslint-disable-next-line no-use-before-define
static _instance: EventBus = new EventBus();
class LayoutEventBus {
private static _instance: EventDispatcher<LayoutEventBusType> =
new EventDispatcher<LayoutEventBusType>();
static get instance(): EventBus {
return this._instance;
static fireEvent(type: LayoutEventBusType, arg?: any): void {
return LayoutEventBus._instance.fireEvent(type, arg);
}
fireEvent(type: EventBusType, arg?: any): void {
return super.fireEvent(type, arg);
}
addEvent(type: EventBusType, fn: (arg?: any) => void, internal?: boolean): void {
return super.addEvent(type, fn, internal);
static addEvent(type: LayoutEventBusType, fn: (arg?: any) => void, internal?: boolean): void {
return LayoutEventBus._instance.addEvent(type, fn, internal);
}
}
export default EventBus;
export default LayoutEventBus;

View File

@ -15,6 +15,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
type LayoutEventType = 'change' | 'forceLayout';
type LayoutEventType = 'change';
export default LayoutEventType;

View File

@ -83,10 +83,6 @@ class LayoutManager extends EventDispispatcher<LayoutEventType> {
}
connectNode(parentId: number, childId: number, order: number) {
$assert($defined(parentId), 'parentId cannot be null');
$assert($defined(childId), 'childId cannot be null');
$assert($defined(order), 'order cannot be null');
this._layout.connectNode(parentId, childId, order);
return this;

View File

@ -15,6 +15,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
type ThemeType = 'classic' | 'prism' | 'dark-prism';
type ThemeType = 'classic' | 'prism' | 'dark-prism' | 'robot';
export default ThemeType;

View File

@ -95,7 +95,7 @@ class XMLSerializerTango implements XMLMindmapSerializer {
parentTopic.setAttribute('central', 'true');
} else {
const pos = topic.getPosition();
parentTopic.setAttribute('position', `${pos.x},${pos.y}`);
parentTopic.setAttribute('position', `${Math.ceil(pos.x)},${Math.ceil(pos.y)}`);
const order = topic.getOrder();
if (typeof order === 'number' && Number.isFinite(order)) {

View File

@ -0,0 +1,164 @@
/*
* Copyright [2011] [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 { LineType } from '../ConnectionLine';
import { FontStyleType } from '../FontStyleType';
import { FontWeightType } from '../FontWeightType';
import { TopicShapeType } from '../model/INodeModel';
import Topic from '../Topic';
import DefaultTheme, { TopicStyleType } from './DefaultTheme';
import { TopicType } from './Theme';
const defaultStyles = new Map<TopicType, TopicStyleType>([
[
'CentralTopic',
{
msgKey: 'CENTRAL_TOPIC',
borderColor: '#363C56',
backgroundColor: '#363C56',
fontFamily: 'Brush Script MT',
fontSize: 10,
fontStyle: 'normal' as FontStyleType,
fontWeight: 'bold' as FontWeightType,
fontColor: '#ffffff',
connectionStyle: LineType.POLYLINE_MIDDLE,
connectionColor: '#345780',
shapeType: 'rectangle' as TopicShapeType,
outerBackgroundColor: '#F4B82D',
outerBorderColor: '#F4B82D',
},
],
[
'MainTopic',
{
msgKey: 'MAIN_TOPIC',
borderColor: ['#698396'],
backgroundColor: ['#698396'],
connectionColor: ['#698396'],
fontFamily: 'Brush Script MT',
fontSize: 9,
fontStyle: 'normal' as FontStyleType,
fontWeight: 'normal' as FontWeightType,
fontColor: '#FFFFFF',
connectionStyle: LineType.POLYLINE_MIDDLE,
shapeType: 'rectangle' as TopicShapeType,
outerBackgroundColor: '#F4B82D',
outerBorderColor: '#F4B82D',
},
],
[
'SubTopic',
{
msgKey: 'SUB_TOPIC',
borderColor: '#698396',
backgroundColor: '#698396',
fontFamily: 'Brush Script MT',
fontSize: 8,
fontStyle: 'normal' as FontStyleType,
fontWeight: 'normal' as FontWeightType,
fontColor: '#FFFFFF',
connectionStyle: LineType.POLYLINE_MIDDLE,
connectionColor: '#345780',
shapeType: 'rectangle' as TopicShapeType,
outerBackgroundColor: '#F4B82D',
outerBorderColor: '#F4B82D',
},
],
[
'IsolatedTopic',
{
msgKey: 'ISOLATED_TOPIC',
borderColor: '#023BB9',
backgroundColor: '#96e3ff',
fontFamily: 'Brush Script MT',
fontSize: 8,
fontStyle: 'normal' as FontStyleType,
fontWeight: 'normal' as FontWeightType,
fontColor: '#000000',
connectionStyle: LineType.POLYLINE_MIDDLE,
connectionColor: '#345780',
shapeType: 'line' as TopicShapeType,
outerBackgroundColor: '#F4B82D',
outerBorderColor: '#F4B82D',
},
],
]);
class DarkPrismTheme extends DefaultTheme {
constructor() {
super(defaultStyles);
}
getCanvasCssStyle(): string {
return `position: relative;
left: 0;
width: 100%;
height: 100%;
border: 0;
overflow: hidden;
opacity: 1;
background-color: #FFFFFF;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;`;
}
getConnectionColor(topic: Topic): string {
let result: string | null = null;
// Color of the node is the connection is the color of the parent ...
const parent = topic.getParent();
if (parent && !parent.isCentralTopic()) {
result = this.resolve('connectionColor', parent, false) as string;
}
if (!result) {
let colors: string[] = [];
colors = colors.concat(this.resolve('connectionColor', topic) as string[] | string);
// if the element is an array, use topic order to decide color ..
let order = topic.getOrder();
order = order || 0;
const index = order % colors.length;
result = colors[index];
}
return result!;
}
getBorderColor(topic: Topic): string {
const model = topic.getModel();
let result = model.getBorderColor();
// If border color has not been defined, use the connection color for the border ...
if (!result) {
let colors: string[] = [];
colors = colors.concat(this.resolve('borderColor', topic) as string[] | string);
// if the element is an array, use topic order to decide color ..
let order = topic.getOrder();
order = order || 0;
const index = order % colors.length;
result = colors[index];
}
return result;
}
}
export default DarkPrismTheme;

View File

@ -3,6 +3,7 @@ import ThemeType from '../model/ThemeType';
import ClassicTheme from './ClassicTheme';
import DarkPrismTheme from './DarkPrismTheme';
import PrismTheme from './PrismTheme';
import RobotTheme from './RobotTheme';
import Theme from './Theme';
class ThemeFactory {
@ -12,6 +13,8 @@ class ThemeFactory {
private static classicTheme = new ClassicTheme();
private static robotTheme = new RobotTheme();
static createById(id: ThemeType): Theme {
let result: Theme;
switch (id) {
@ -24,6 +27,9 @@ class ThemeFactory {
case 'prism':
result = ThemeFactory.prismTheme;
break;
case 'robot':
result = ThemeFactory.robotTheme;
break;
default: {
const exhaustiveCheck: never = id;
throw new Error(exhaustiveCheck);

View File

@ -28,3 +28,8 @@ export const DarkPrism = Template.bind({});
DarkPrism.args = {
theme: 'dark-prism',
};
export const robot = Template.bind({});
DarkPrism.args = {
theme: 'robot',
};

View File

@ -11,7 +11,8 @@ import MainTopic from '../../../src/components/MainTopic';
import EventBusDispatcher from '../../../src/components/layout/EventBusDispatcher';
import LayoutManager from '../../../src/components/layout/LayoutManager';
import ChangeEvent from '../../../src/components/layout/ChangeEvent';
import EventBus from '../../../src/components/layout/EventBus';
import LayoutEventBus from '../../../src/components/layout/LayoutEventBus';
import { $assert } from '@wisemapping/core-js';
const registerRefreshHook = (topics: Topic[]) => {
// Trigger a redraw after the node is added ...
@ -22,7 +23,7 @@ const registerRefreshHook = (topics: Topic[]) => {
globalThis.observer = new MutationObserver(() => {
// Relayout...
topics.forEach((t) => t.redraw());
EventBus.instance.fireEvent('forceLayout');
LayoutEventBus.fireEvent('forceLayout');
});
globalThis.observer.observe(document.getElementById('root')!, { childList: true });
};
@ -56,20 +57,23 @@ const createConnection = ({ theme = undefined, readOnly = true }: TopicArgs) =>
// Add Children ...
const child1 = new NodeModel('MainTopic', mindmap);
child1.setOrder(0);
child1.setText('This is child one !\nwith other line');
child1.setText('Child1: This is child one !\nwith other line');
child1.setPosition(100, 100);
const child2 = new NodeModel('MainTopic', mindmap);
child2.setOrder(1);
child2.setPosition(100, -100);
child2.setText('Child2');
const child3 = new NodeModel('MainTopic', mindmap);
child3.setOrder(0);
child3.setOrder(2);
child3.setPosition(-100, 100);
child3.setText('Child3');
const child4 = new NodeModel('MainTopic', mindmap);
child4.setOrder(1);
child4.setOrder(3);
child4.setPosition(-100, -100);
child3.setText('Child4');
const subchild1 = new NodeModel('MainTopic', mindmap);
subchild1.setOrder(0);
@ -93,6 +97,7 @@ const createConnection = ({ theme = undefined, readOnly = true }: TopicArgs) =>
const child4Topic = new MainTopic(child4, { readOnly });
const subchild1Topic = new MainTopic(subchild1, { readOnly });
const subchild2Topic = new MainTopic(subchild2, { readOnly });
const topics = [
child1Topic,
child2Topic,
@ -108,24 +113,37 @@ const createConnection = ({ theme = undefined, readOnly = true }: TopicArgs) =>
const size = { width: 25, height: 25 };
const layoutManager = new LayoutManager(mindmap.getCentralTopic().getId(), size);
dispatcher.setLayoutManager(layoutManager);
layoutManager.addEvent('change', (event: ChangeEvent) => {
const id = event.getId();
const topic = topics.filter((t) => t.getModel().getId() === id)[0];
const ids = topics.filter((t) => t.getModel().getId() === id);
$assert(ids.length === 1, `Unexpeted number of elements ${String(ids)} - ${id}`);
const topic = ids[0];
topic.setPosition(event.getPosition());
topic.setOrder(event.getOrder());
});
// Add to canvas ...
topics.forEach((t) => canvas.append(t));
// Connect nodes ...
canvas.append(centralTopic);
child1Topic.connectTo(centralTopic, canvas);
canvas.append(child1Topic);
child2Topic.connectTo(centralTopic, canvas);
canvas.append(child2Topic);
child3Topic.connectTo(centralTopic, canvas);
canvas.append(child3Topic);
child4Topic.connectTo(centralTopic, canvas);
canvas.append(child4Topic);
subchild1Topic.connectTo(child1Topic, canvas);
canvas.append(subchild1Topic);
subchild2Topic.connectTo(child1Topic, canvas);
canvas.append(subchild2Topic);
// Register refresh hook ..
registerRefreshHook(topics);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 122 KiB

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 48 KiB