Increase line width.

packages/mindplot/src/components/ConnectionLine.ts

@@ -104,21 +104,21 @@ class ConnectionLine {
     this._color = color;
     switch (this._type) {
       case LineType.POLYLINE_MIDDLE:
-        this._line.setStroke(1, 'solid', color, 1);
+        this._line.setStroke(2, 'solid', color, 1);
         break;
       case LineType.POLYLINE_CURVED:
-        this._line.setStroke(1, 'solid', color, 1);
+        this._line.setStroke(2, 'solid', color, 1);
         break;
       case LineType.THIN_CURVED:
-        this._line.setStroke(1, 'solid', color, 1);
+        this._line.setStroke(2, 'solid', color, 1);
         this._line.setFill(color, 1);
         break;
       case LineType.THICK_CURVED:
-        this._line.setStroke(1, 'solid', color, 1);
+        this._line.setStroke(2, 'solid', color, 1);
         this._line.setFill(color, 1);
         break;
       case LineType.ARC:
-        this._line.setStroke(1, 'solid', color, 1);
+        this._line.setStroke(2, 'solid', color, 1);
         break;
       default: {
         const exhaustiveCheck: never = this._type;

packages/mindplot/src/components/MainTopic.ts

@@ -20,22 +20,13 @@ import { Group, ElementClass, ElementPeer } from '@wisemapping/web2d';
 
 import Topic from './Topic';
 import Shape from './util/Shape';
-import NodeModel from './model/NodeModel';
 import Canvas from './Canvas';
 import SizeType from './SizeType';
 import PositionType from './PositionType';
-import { NodeOption } from './NodeGraph';
 
 class MainTopic extends Topic {
-  private INNER_RECT_ATTRIBUTES: { stroke: string };
-
-  constructor(model: NodeModel, options: NodeOption) {
-    super(model, options);
-    this.INNER_RECT_ATTRIBUTES = { stroke: '0.5 solid #009900' };
-  }
-
   buildDragShape(): ElementClass<ElementPeer> {
-    const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
+    const innerShape = this._buildShape(this.getShapeType());
     const size = this.getSize();
     innerShape.setSize(size.width, size.height);
     innerShape.setPosition(0, 0);

packages/mindplot/src/components/RelationshipControlPoints.ts

@@ -16,7 +16,7 @@
  *   limitations under the License.
  */
 // eslint-disable-next-line max-classes-per-file
-import { Elipse, StraightLine } from '@wisemapping/web2d';
+import { Ellipse, StraightLine } from '@wisemapping/web2d';
 import Shape from './util/Shape';
 import ActionDispatcher from './ActionDispatcher';
 import Canvas from './Canvas';
@@ -30,7 +30,7 @@ export enum PivotType {
 }
 
 class ControlPivotLine {
-  private _dot: Elipse;
+  private _dot: Ellipse;
 
   private _line: StraightLine;
 
@@ -64,7 +64,7 @@ class ControlPivotLine {
     this._relationship = relationship;
 
     // Build dot controller ...
-    this._dot = new Elipse({
+    this._dot = new Ellipse({
       width: 6,
       height: 6,
       stroke: '1 solid #6589de',

packages/mindplot/src/components/ShrinkConnector.ts

@@ -16,7 +16,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import { Elipse, Group } from '@wisemapping/web2d';
+import { Ellipse, Group } from '@wisemapping/web2d';
 
 import TopicConfig from './TopicConfig';
 import ActionDispatcher from './ActionDispatcher';
@@ -26,14 +26,16 @@ import ColorUtil from './render/ColorUtil';
 class ShirinkConnector {
   private _isShrink: boolean;
 
-  private _ellipse: Elipse;
+  private _ellipse: Ellipse;
 
   constructor(topic: Topic) {
     this._isShrink = false;
-    const ellipse = new Elipse(TopicConfig.INNER_RECT_ATTRIBUTES);
+    const ellipse = new Ellipse({
+      width: TopicConfig.CONNECTOR_WIDTH,
+      height: TopicConfig.CONNECTOR_WIDTH,
+    });
     this._ellipse = ellipse;
 
-    ellipse.setSize(TopicConfig.CONNECTOR_WIDTH, TopicConfig.CONNECTOR_WIDTH);
     ellipse.addEvent('click', (event: Event) => {
       const model = topic.getModel();
       const collapse = !model.areChildrenShrunken();
@@ -56,11 +58,11 @@ class ShirinkConnector {
     });
 
     ellipse.addEvent('mouseover', () => {
-      ellipse.setStroke(this._isShrink ? 1 : 2, 'solid');
+      ellipse.setStroke(this._isShrink ? 2 : 3, 'solid');
     });
 
     ellipse.addEvent('mouseout', () => {
-      ellipse.setStroke(this._isShrink ? 2 : 1, 'solid');
+      ellipse.setStroke(this._isShrink ? 3 : 2, 'solid');
     });
 
     ellipse.setCursor('default');
@@ -71,15 +73,15 @@ class ShirinkConnector {
   changeRender(isShrink: boolean) {
     const elipse = this._ellipse;
     if (isShrink) {
-      elipse.setStroke(2, 'solid');
+      elipse.setStroke(4, 'solid');
     } else {
-      elipse.setStroke(1, 'solid');
+      elipse.setStroke(3, 'solid');
     }
     this._isShrink = isShrink;
   }
 
   setColor(color: string) {
-    this._ellipse.setStroke(1, 'solid', color);
+    this._ellipse.setStroke(2, 'solid', color);
     this._ellipse.setFill(ColorUtil.lightenColor(color, 100));
   }
 
@@ -91,10 +93,6 @@ class ShirinkConnector {
     this._ellipse.setOpacity(opacity);
   }
 
-  setAttribute(name: string, value: string) {
-    this._ellipse.setAttribute(name, value);
-  }
-
   addToWorkspace(group: Group): void {
     group.append(this._ellipse);
   }

packages/mindplot/src/components/Topic.ts

@@ -17,10 +17,9 @@
  */
 import { $assert, $defined } from '@wisemapping/core-js';
 
-import { Rect, Text, Group, ElementClass, ElementPeer, StyleAttributes } from '@wisemapping/web2d';
+import { Rect, Text, Group, ElementClass, ElementPeer } from '@wisemapping/web2d';
 
 import NodeGraph, { NodeOption } from './NodeGraph';
-import TopicConfig from './TopicConfig';
 import TopicStyle from './TopicStyle';
 import TopicFeatureFactory from './TopicFeature';
 import ConnectionLine, { LineType } from './ConnectionLine';
@@ -211,7 +210,7 @@ abstract class Topic extends NodeGraph {
   getInnerShape(): LineTopicShape | Rect | LineTopicShape {
     if (!this._innerShape) {
       // Create inner box.
-      this._innerShape = this._buildShape(TopicConfig.INNER_RECT_ATTRIBUTES, this.getShapeType());
+      this._innerShape = this._buildShape(this.getShapeType());
 
       // Define the pointer ...
       if (!this.isCentralTopic() && !this.isReadOnly()) {
@@ -223,23 +222,20 @@ abstract class Topic extends NodeGraph {
     return this._innerShape;
   }
 
-  protected _buildShape(
-    attributes: StyleAttributes,
-    shapeType: TopicShapeType,
-  ): LineTopicShape | Rect | LineTopicShape {
+  protected _buildShape(shapeType: TopicShapeType): LineTopicShape | Rect | LineTopicShape {
     let result: LineTopicShape | Rect | LineTopicShape;
     switch (shapeType) {
       case 'rectangle':
-        result = new Rect(0, attributes);
+        result = new Rect(0, { strokeWidth: 2 });
         break;
       case 'elipse':
-        result = new Rect(0.9, attributes);
+        result = new Rect(0.9, { strokeWidth: 2 });
         break;
       case 'rounded rectangle':
-        result = new Rect(0.3, attributes);
+        result = new Rect(0.3, { strokeWidth: 2 });
         break;
       case 'line':
-        result = new LineTopicShape(this);
+        result = new LineTopicShape(this, { strokeWidth: 2 });
         break;
       case 'image':
         result = new LineTopicShape(this);
@@ -266,7 +262,7 @@ abstract class Topic extends NodeGraph {
 
   getOuterShape(): ElementClass<ElementPeer> {
     if (!this._outerShape) {
-      const rect = this._buildShape({}, 'rounded rectangle');
+      const rect = this._buildShape('rounded rectangle');
 
       rect.setPosition(-3, -3);
       rect.setOpacity(0);
@@ -1271,7 +1267,7 @@ abstract class Topic extends NodeGraph {
 
       // Update topic color ...
       const borderColor = this.getBorderColor();
-      this.getInnerShape().setStroke(1, 'solid', borderColor);
+      this.getInnerShape().setStroke(null, 'solid', borderColor);
 
       const bgColor = this.getBackgroundColor();
       this.getInnerShape().setFill(bgColor);

packages/mindplot/src/components/TopicConfig.ts

@@ -17,9 +17,7 @@
  */
 
 const CONNECTOR_WIDTH = 6;
-const INNER_RECT_ATTRIBUTES = { stroke: '2 solid' };
 
 export default {
   CONNECTOR_WIDTH,
-  INNER_RECT_ATTRIBUTES,
 };

packages/mindplot/src/components/TopicStyle.ts

@@ -54,7 +54,7 @@ const TopicDefaultStyles = {
       color: '#ffffff',
     },
     connectionStyle: LineType.THICK_CURVED,
-    connectionColor: '#495879',
+    connectionColor: '#345780',
     msgKey: 'CENTRAL_TOPIC',
     shapeType: 'rounded rectangle' as TopicShapeType,
   },
@@ -62,14 +62,14 @@ const TopicDefaultStyles = {
     borderColor: '#023BB9',
     backgroundColor: '#E0E5EF',
     fontStyle: {
-      font: 'Arial',
+      font: 'Verdana',
       size: 8,
       style: 'normal' as FontStyleType,
       weight: 'normal' as FontWeightType,
       color: '#525C61',
     },
-    connectionStyle: LineType.THICK_CURVED,
-    connectionColor: '#495879',
+    connectionStyle: LineType.ARC,
+    connectionColor: '#345780',
     msgKey: 'MAIN_TOPIC',
     shapeType: 'line' as TopicShapeType,
   },
@@ -77,14 +77,14 @@ const TopicDefaultStyles = {
     borderColor: '#96e3ff',
     backgroundColor: '#96e3ff',
     fontStyle: {
-      font: 'Arial',
-      size: 6,
+      font: 'Verdana',
+      size: 8,
       style: 'normal' as FontStyleType,
       weight: 'normal' as FontWeightType,
       color: '#525C61',
     },
-    connectionStyle: LineType.THICK_CURVED,
-    connectionColor: '#495879',
+    connectionStyle: LineType.ARC,
+    connectionColor: '#345780',
     msgKey: 'SUB_TOPIC',
     shapeType: 'line' as TopicShapeType,
   },
@@ -101,7 +101,7 @@ const TopicDefaultStyles = {
     },
     msgKey: 'ISOLATED_TOPIC',
     connectionStyle: LineType.THICK_CURVED,
-    connectionColor: '#495879',
+    connectionColor: '#345780',
     shapeType: 'line' as TopicShapeType,
   },
 };

packages/mindplot/src/components/widget/ArcLine.ts

@@ -25,7 +25,7 @@ class ArcLine extends ArcLine2d {
   private _sourceTopic: Topic;
 
   constructor(sourceTopic: Topic, targetTopic: Topic) {
-    super();
+    super({ strokeWidth: 2 });
     this._targetTopic = targetTopic;
     this._sourceTopic = sourceTopic;
   }

packages/mindplot/src/components/widget/LineTopicShape.ts

@@ -15,19 +15,16 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import { StraightLine } from '@wisemapping/web2d';
+import { StraightLine, StyleAttributes } from '@wisemapping/web2d';
 import SizeType from '../SizeType';
 import Topic from '../Topic';
 
 class LineTopicShape extends StraightLine {
   private _size: SizeType | null;
 
-  constructor(topic: Topic) {
+  constructor(topic: Topic, attributes?: StyleAttributes) {
     const stokeColor = topic.getConnectionColor();
-    super({
-      strokeColor: stokeColor,
-      strokeWidth: 1,
-    });
+    super({ ...attributes, strokeColor: stokeColor });
     this._size = null;
   }
 

packages/web2d/src/components/WorkspaceElement.ts

@@ -143,7 +143,7 @@ abstract class WorkspaceElement<T extends ElementPeer> {
    *  color: stroke color
    *  opacity: stroke visibility
    */
-  setStroke(width: number, style: string, color?: string, opacity?: number) {
+  setStroke(width: number | null, style?: string, color?: string, opacity?: number) {
     if (
       style != null &&
       style !== undefined &&

packages/web2d/src/components/peer/svg/ElementPeer.ts

@@ -159,7 +159,7 @@ class ElementPeer {
 
   setStroke(width: number | null, style?: string | null, color?: string | null, opacity?: number) {
     if ($defined(width)) {
-      this._native.setAttribute('stroke-width', `${width}px`);
+      this._native.setAttribute('stroke-width', `${width}`);
     }
 
     if (color) {

packages/web2d/src/components/peer/svg/StraightPeer.ts

@@ -37,15 +37,15 @@ class StraightLinePeer extends ElementPeer {
   setFrom(x1: number, y1: number) {
     this._x1 = x1;
     this._y1 = y1;
-    this._native.setAttribute('x1', String(x1));
-    this._native.setAttribute('y1', String(y1));
+    this._native.setAttribute('x1', x1.toFixed(2));
+    this._native.setAttribute('y1', y1.toFixed(2));
   }
 
   setTo(x2: number, y2: number) {
     this._x2 = x2;
     this._y2 = y2;
-    this._native.setAttribute('x2', String(x2));
-    this._native.setAttribute('y2', String(y2));
+    this._native.setAttribute('x2', x2.toFixed(2));
+    this._native.setAttribute('y2', y2.toFixed(2));
   }
 
   getFrom() {

packages/web2d/src/components/peer/svg/TextPeer.ts

@@ -96,12 +96,12 @@ class TextPeer extends ElementPeer {
 
   setPosition(x: number, y: number) {
     this._position = { x, y };
-    this._native.setAttribute('y', String(y));
-    this._native.setAttribute('x', String(x));
+    this._native.setAttribute('y', y.toFixed(2));
+    this._native.setAttribute('x', x.toFixed(2));
 
     // tspan must be positioned manually.
     Array.from(this._native.querySelectorAll('tspan')).forEach((element) => {
-      (element as Element).setAttribute('x', String(x));
+      (element as Element).setAttribute('x', x.toFixed(2));
     });
   }
 

packages/web2d/src/index.ts

@@ -37,7 +37,7 @@ export {
   Arrow,
   CurvedLine,
   WorkspaceElement as ElementClass,
-  Ellipse as Elipse,
+  Ellipse,
   Group,
   Image,
   StraightLine,