Add support for new theme
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 104 KiB |
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 110 KiB |
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 113 KiB |
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 109 KiB |
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 93 KiB |
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 68 KiB |
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
Before Width: | Height: | Size: 129 KiB After Width: | Height: | Size: 128 KiB |
Before Width: | Height: | Size: 205 KiB After Width: | Height: | Size: 204 KiB |
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 71 KiB |
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 76 KiB |
Before Width: | Height: | Size: 109 KiB After Width: | Height: | Size: 109 KiB |
Before Width: | Height: | Size: 153 KiB After Width: | Height: | Size: 154 KiB |
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 118 KiB |
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 86 KiB |
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 49 KiB |
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 105 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 105 KiB |
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 105 KiB |
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 105 KiB |
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 105 KiB |
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 105 KiB |
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 108 KiB |
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
Before Width: | Height: | Size: 144 KiB After Width: | Height: | Size: 145 KiB |
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 117 KiB |
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 103 KiB |
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 86 KiB |
Before Width: | Height: | Size: 103 KiB After Width: | Height: | Size: 104 KiB |
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
Before Width: | Height: | Size: 185 KiB After Width: | Height: | Size: 185 KiB |
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 112 KiB |
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 105 KiB |
Before Width: | Height: | Size: 109 KiB After Width: | Height: | Size: 110 KiB |
Before Width: | Height: | Size: 109 KiB After Width: | Height: | Size: 110 KiB |
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
Before Width: | Height: | Size: 109 KiB After Width: | Height: | Size: 110 KiB |
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 105 KiB |
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 104 KiB |
Before Width: | Height: | Size: 109 KiB After Width: | Height: | Size: 108 KiB |
@ -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>
|
||||
);
|
||||
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 24 KiB |
@ -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;
|
||||
|
@ -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,
|
||||
});
|
||||
|
@ -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');
|
||||
});
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
@ -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();
|
||||
|
@ -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,
|
||||
});
|
||||
|
@ -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(),
|
||||
});
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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)) {
|
||||
|
164
packages/mindplot/src/components/theme/RobotTheme.ts
Normal 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;
|
@ -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);
|
||||
|
@ -28,3 +28,8 @@ export const DarkPrism = Template.bind({});
|
||||
DarkPrism.args = {
|
||||
theme: 'dark-prism',
|
||||
};
|
||||
|
||||
export const robot = Template.bind({});
|
||||
DarkPrism.args = {
|
||||
theme: 'robot',
|
||||
};
|
||||
|
@ -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);
|
||||
|
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 123 KiB |
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 48 KiB |