Work IP

packages/web2d/src/components/Font.js

@@ -16,13 +16,12 @@
  *   limitations under the License.
  */
 
-import Toolkit from './Toolkit';
 import TransformUtil from './peer/utils/TransformUtils';
+import Toolkit from './Toolkit';
 
 class Font {
-  constructor(fontFamily, textPeer) {
+  constructor(fontName) {
-    this.peer = Toolkit[`create${fontFamily}Font`]();
+    this.peer = Toolkit.createFontByName(fontName);
-    this._textPeer = textPeer;
   }
 
   getHtmlSize() {
@@ -51,10 +50,6 @@ class Font {
     return this.peer.getWeight();
   }
 
-  getFontFamily() {
-    return this.peer.getFontFamily();
-  }
-
   setSize(size) {
     return this.peer.setSize(size);
   }
@@ -67,18 +62,20 @@ class Font {
     return this.peer.setWeight(weight);
   }
 
-  getFont() {
+  setFontName(fontName) {
+    return this.peer.setFontName(fontName);
+  }
+
+  getFontName() {
     return this.peer.getFont();
   }
 
+  getFontPeer() {
+    return this.peer;
+  }
+
   getWidthMargin() {
     return this.peer.getWidthMargin();
   }
 }
-
-Font.ARIAL = 'Arial';
-Font.TIMES = 'Times';
-Font.TAHOMA = 'Tahoma';
-Font.VERDANA = 'Verdana';
-
 export default Font;

packages/web2d/src/components/Text.js

@@ -17,13 +17,14 @@
  */
 
 import { $assert } from '@wisemapping/core-js';
+import Font from './Font';
 import ElementClass from './ElementClass';
 import Toolkit from './Toolkit';
-import Font from './Font';
 
 class Text extends ElementClass {
   constructor(attributes) {
-    const peer = Toolkit.createText(Font);
+    const defaultFont = new Font('Arial');
+    const peer = Toolkit.createText(defaultFont);
     super(peer, attributes);
   }
 
@@ -53,6 +54,10 @@ class Text extends ElementClass {
     this.peer.setFont(font, size, style, weight);
   }
 
+  setFontName(fontName) {
+    this.peer.setFontName(fontName);
+  }
+
   setColor(color) {
     this.peer.setColor(color);
   }
@@ -69,10 +74,6 @@ class Text extends ElementClass {
     this.peer.setWeight(weight);
   }
 
-  setFontFamily(family) {
-    this.peer.setFontFamily(family);
-  }
-
   getFont() {
     return this.peer.getFont();
   }
@@ -81,8 +82,8 @@ class Text extends ElementClass {
     this.peer.setSize(size);
   }
 
-  getHtmlFontSize() {
+  getHtmlFontSize(scale) {
-    return this.peer.getHtmlFontSize();
+    return this.peer.getHtmlFontSize(scale);
   }
 
   getWidth() {

packages/web2d/src/components/Toolkit.js

@@ -29,8 +29,14 @@ import ArialFont from './peer/svg/ArialFont';
 import TimesFont from './peer/svg/TimesFont';
 import VerdanaFont from './peer/svg/VerdanaFont';
 import TahomaFont from './peer/svg/TahomaFont';
+import BrushScriptMTFont from './peer/svg/BrushScriptFont';
 
 class Toolkit {
+  static createFontByName(fontName) {
+    const font = fontName.replaceAll(' ', '');
+    return Toolkit[`create${font}Font`]();
+  }
+
   static createWorkspace(element) {
     return new WorkspacePeer(element);
   }
@@ -59,8 +65,8 @@ class Toolkit {
     return new ArrowPeer();
   }
 
-  static createText(Font) {
+  static createText(font) {
-    return new TextPeer(Font);
+    return new TextPeer(font.getFontPeer());
   }
 
   static createImage() {
@@ -86,6 +92,10 @@ class Toolkit {
   static createTahomaFont() {
     return new TahomaFont();
   }
+
+  static createBrushScriptMTFont() {
+    return new BrushScriptMTFont();
+  }
 }
 
 export default Toolkit;

packages/web2d/src/components/peer/svg/ArialFont.js

@@ -15,21 +15,11 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import Font from './Font';
+import FontPeer from './FontPeer';
 
-class ArialFont extends Font {
+class ArialFont extends FontPeer {
   constructor() {
-    super();
+    super('Arial');
-    this._fontFamily = 'Arial';
-  }
-
-  getFontFamily() {
-    return this._fontFamily;
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  getFont() {
-    return Font.ARIAL;
   }
 }
 

packages/web2d/src/components/peer/svg/BrushScriptFont.js

@@ -0,0 +1,27 @@
+/*
+ *    Copyright [2021] [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 FontPeer from './FontPeer';
+
+class BrushScriptMTFont extends FontPeer {
+  // eslint-disable-next-line class-methods-use-this
+  constructor() {
+    super('Brush Script MT');
+  }
+}
+
+export default BrushScriptMTFont;

packages/web2d/src/components/peer/svg/FontPeer.js

@@ -17,11 +17,12 @@
  */
 import { $assert, $defined } from '@wisemapping/core-js';
 
-class Font {
+class FontPeer {
-  constructor() {
+  constructor(fontName) {
     this._size = 10;
     this._style = 'normal';
     this._weight = 'normal';
+    this._fontName = fontName;
   }
 
   init(args) {
@@ -89,6 +90,11 @@ class Font {
     }
     return result;
   }
+
+  // eslint-disable-next-line class-methods-use-this
+  getFontName() {
+    return this._fontName;
+  }
 }
 
-export default Font;
+export default FontPeer;

packages/web2d/src/components/peer/svg/TahomaFont.js

@@ -15,21 +15,11 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import Font from './Font';
+import FontPeer from './FontPeer';
 
-class TahomaFont extends Font {
+class TahomaFont extends FontPeer {
   constructor() {
-    super();
+    super('Verdana');
-    this._fontFamily = 'Tahoma';
-  }
-
-  getFontFamily() {
-    return this._fontFamily;
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  getFont() {
-    return Font.TAHOMA;
   }
 }
 

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

@@ -18,14 +18,14 @@
 import { $defined } from '@wisemapping/core-js';
 import ElementPeer from './ElementPeer';
 import { getPosition } from '../utils/DomUtils';
+import Toolkit from '../../Toolkit';
 
 class TextPeer extends ElementPeer {
-  constructor(Font) {
+  constructor(fontPeer) {
     const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'text');
     super(svgElement);
-    this.Font = Font;
     this._position = { x: 0, y: 0 };
-    this._font = new Font('Arial', this);
+    this._font = fontPeer;
   }
 
   append(element) {
@@ -84,10 +84,11 @@ class TextPeer extends ElementPeer {
     return getPosition(this._native);
   }
 
-  setFont(font, size, style, weight) {
+  setFont(fontName, size, style, weight) {
-    if ($defined(font)) {
+    if ($defined(fontName)) {
-      this._font = new this.Font(font, this);
+      this._font = Toolkit.createFontByName(fontName);
     }
+
     if ($defined(style)) {
       this._font.setStyle(style);
     }
@@ -101,7 +102,7 @@ class TextPeer extends ElementPeer {
   }
 
   _updateFontStyle() {
-    this._native.setAttribute('font-family', this._font.getFontFamily());
+    this._native.setAttribute('font-family', this._font.getFontName());
     this._native.setAttribute('font-size', this._font.getGraphSize());
     this._native.setAttribute('font-style', this._font.getStyle());
     this._native.setAttribute('font-weight', this._font.getWeight());
@@ -134,9 +135,9 @@ class TextPeer extends ElementPeer {
     this._updateFontStyle();
   }
 
-  setFontFamily(family) {
+  setFontName(fontName) {
     const oldFont = this._font;
-    this._font = new this.Font(family, this);
+    this._font = Toolkit.createFontByName(fontName);
     this._font.setSize(oldFont.getSize());
     this._font.setStyle(oldFont.getStyle());
     this._font.setWeight(oldFont.getWeight());
@@ -145,7 +146,7 @@ class TextPeer extends ElementPeer {
 
   getFont() {
     return {
-      font: this._font.getFont(),
+      font: this._font.getFontName(),
       size: parseInt(this._font.getSize(), 10),
       style: this._font.getStyle(),
       weight: this._font.getWeight(),
@@ -158,21 +159,10 @@ class TextPeer extends ElementPeer {
   }
 
   getWidth() {
-    let computedWidth;
+    let computedWidth = this._native.getBBox().width;
-    // Firefox hack for this issue:http://stackoverflow.com/questions/6390065/doing-ajax-updates-in-svg-breaks-getbbox-is-there-a-workaround
+    if (computedWidth === 0) {
-    try {
+      const bbox = this._native.getBBox();
-      computedWidth = this._native.getBBox().width;
+      computedWidth = bbox.width;
-      // Chrome bug is producing this error, oly during page loading.
-      // Remove the hack if it works. The issue seems to be
-      // caused when the element is hidden. I don't know why, but it works ...
-      if (computedWidth === 0) {
-        const bbox = this._native.getBBox();
-        computedWidth = bbox.width;
-      }
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e);
-      computedWidth = 10;
     }
 
     let width = parseInt(computedWidth, 10);
@@ -181,19 +171,12 @@ class TextPeer extends ElementPeer {
   }
 
   getHeight() {
-    // Firefox hack for this
+    const computedHeight = this._native.getBBox().height;
-    // issue:http://stackoverflow.com/questions/6390065/doing-ajax-updates-in-svg-breaks-getbbox-is-there-a-workaround
-    let computedHeight;
-    try {
-      computedHeight = this._native.getBBox().height;
-    } catch (e) {
-      computedHeight = 10;
-    }
     return parseInt(computedHeight, 10);
   }
 
-  getHtmlFontSize() {
+  getHtmlFontSize(scale) {
-    return this._font.getHtmlSize();
+    return this._font.getHtmlSize(scale);
   }
 }
 

packages/web2d/src/components/peer/svg/TimesFont.js

@@ -15,21 +15,11 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import Font from './Font';
+import FontPeer from './FontPeer';
 
-class TimesFont extends Font {
+class TimesFont extends FontPeer {
   constructor() {
-    super();
+    super('Times');
-    this._fontFamily = 'Times';
-  }
-
-  getFontFamily() {
-    return this._fontFamily;
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  getFont() {
-    return Font.TIMES;
   }
 }
 

packages/web2d/src/components/peer/svg/VerdanaFont.js

@@ -15,21 +15,11 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import Font from './Font';
+import FontPeer from './FontPeer';
 
-class VerdanaFont extends Font {
+class VerdanaFont extends FontPeer {
   constructor() {
-    super();
+    super('Verdana');
-    this._fontFamily = 'Verdana';
-  }
-
-  getFontFamily() {
-    return this._fontFamily;
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  getFont() {
-    return Font.VERDANA;
   }
 }
 

packages/web2d/test/playground/font.html

@@ -13,6 +13,7 @@
                 <td>Tahoma</td>
                 <td>Verdana</td>
                 <td>Times</td>
+                <td>Brush Script MT</td>
             </tr>
         </thead>
         <tbody>
@@ -32,6 +33,9 @@
             <td>
                 <div id="multi3"></div>
             </td>
+            <td>
+                <div id="multi4"></div>
+            </td>
         </tr>
         <tr>
             <td>
@@ -49,6 +53,9 @@
             <td>
                 <div id="amulti3"></div>
             </td>
+            <td>
+                <div id="amulti4"></div>
+            </td>
         </tr>
         <!--**************************************************************************-->
     </tbody>

packages/web2d/test/playground/font.js

@@ -1,11 +1,11 @@
 import $ from 'jquery';
 import {
-  Toolkit, Workspace, Text,
+  Workspace, Text,
 } from '../../src';
 
 global.$ = $;
 
-function multiline(text, family, elemId) {
+function multiline(text, fontName, elemId) {
   const workspace = new Workspace();
   workspace.setSize('200px', '240px');
   workspace.setCoordSize('200', '240');
@@ -16,7 +16,7 @@ function multiline(text, family, elemId) {
     workspace.append(wText);
 
     wText.setText(text);
-    wText.setFont(family, size, 'bold');
+    wText.setFont(fontName, size, 'bold');
     wText.setPosition(30, 50 * i);
     wText.setColor('blue');
   });
@@ -45,11 +45,11 @@ function alignments(text, family, elemId) {
 }
 
 // Multine tests ...
-['Arial', 'Tahoma', 'Verdana', 'Times'].forEach((family, i) => {
+['Arial', 'Tahoma', 'Verdana', 'Times', 'Brush Script MT'].forEach((fontName, i) => {
-  multiline('This multine text.\nLine 1 :)\nLine2', family, `multi${i}`);
+  multiline('This multine text.\nLine 1 :)\nLine2', fontName, `multi${i}`);
 });
 
 // Multine tests and alingments .. ...
-['Arial', 'Tahoma', 'Verdana', 'Times'].forEach((family, i) => {
+['Arial', 'Tahoma', 'Verdana', 'Times', 'Brush Script MT'].forEach((fontName, i) => {
-  alignments('This multine text.\nThis is the long line just because :)\nShort line', family, `amulti${i}`);
+  alignments('This multine text.\nThis is the long line just because :)\nShort line', fontName, `amulti${i}`);
 });

packages/web2d/test/playground/text.js

@@ -18,7 +18,7 @@ const textTestHelper = function textTestHelper(coordSize, textval, font, fontSiz
   const workspace = new Workspace();
 
   workspace.setSize('300px', '100px');
-  workspace.setCoordSize('coordSize', coordSize);
+  workspace.setCoordSize(coordSize, coordSize);
   workspace.setCoordOrigin(0, 0);
   workspace.addItAsChildTo($(`#${htmlElemId}`));
 
@@ -36,7 +36,7 @@ const textTestHelper = function textTestHelper(coordSize, textval, font, fontSiz
   span.setAttribute('id', `textoHTML${iesimo}`);
   const textsize = `${textval} - Scale: ${scale.height}`;
   const textHtml = document.createTextNode(textsize);
-  const fontSize = text.getHtmlFontSize();
+  const fontSize = text.getHtmlFontSize(textsize);
   span.append(textHtml);
   span.setAttribute('style', `font-weight:${modifier};font-style: ${style}; font-size:${fontSize}pt; font-family: ${font};width:30;height:30;`);