Revert "Work IP"

This reverts commit 129f6693216e08d9f6641f3f5804817d25978f4c.

packages/web2d/src/components/Font.js

@@ -16,12 +16,13 @@
  *   limitations under the License.
  */
 
-import TransformUtil from './peer/utils/TransformUtils';
 import Toolkit from './Toolkit';
+import TransformUtil from './peer/utils/TransformUtils';
 
 class Font {
-  constructor(fontName) {
+  constructor(fontFamily, textPeer) {
-    this.peer = Toolkit.createFontByName(fontName);
+    this.peer = Toolkit[`create${fontFamily}Font`]();
+    this._textPeer = textPeer;
   }
 
   getHtmlSize() {
@@ -50,6 +51,10 @@ class Font {
     return this.peer.getWeight();
   }
 
+  getFontFamily() {
+    return this.peer.getFontFamily();
+  }
+
   setSize(size) {
     return this.peer.setSize(size);
   }
@@ -62,20 +67,18 @@ class Font {
     return this.peer.setWeight(weight);
   }
 
-  setFontName(fontName) {
+  getFont() {
-    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,14 +17,13 @@
  */
 
 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 defaultFont = new Font('Arial');
+    const peer = Toolkit.createText(Font);
-    const peer = Toolkit.createText(defaultFont);
     super(peer, attributes);
   }
 
@@ -54,10 +53,6 @@ class Text extends ElementClass {
     this.peer.setFont(font, size, style, weight);
   }
 
-  setFontName(fontName) {
-    this.peer.setFontName(fontName);
-  }
-
   setColor(color) {
     this.peer.setColor(color);
   }
@@ -74,6 +69,10 @@ class Text extends ElementClass {
     this.peer.setWeight(weight);
   }
 
+  setFontFamily(family) {
+    this.peer.setFontFamily(family);
+  }
+
   getFont() {
     return this.peer.getFont();
   }
@@ -82,8 +81,8 @@ class Text extends ElementClass {
     this.peer.setSize(size);
   }
 
-  getHtmlFontSize(scale) {
+  getHtmlFontSize() {
-    return this.peer.getHtmlFontSize(scale);
+    return this.peer.getHtmlFontSize();
   }
 
   getWidth() {

packages/web2d/src/components/Toolkit.js

@@ -29,14 +29,8 @@ 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);
   }
@@ -65,8 +59,8 @@ class Toolkit {
     return new ArrowPeer();
   }
 
-  static createText(font) {
+  static createText(Font) {
-    return new TextPeer(font.getFontPeer());
+    return new TextPeer(Font);
   }
 
   static createImage() {
@@ -92,10 +86,6 @@ class Toolkit {
   static createTahomaFont() {
     return new TahomaFont();
   }
-
-  static createBrushScriptMTFont() {
-    return new BrushScriptMTFont();
-  }
 }
 
 export default Toolkit;

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

@@ -15,11 +15,21 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import FontPeer from './FontPeer';
+import Font from './Font';
 
-class ArialFont extends FontPeer {
+class ArialFont extends Font {
   constructor() {
-    super('Arial');
+    super();
+    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

@@ -1,27 +0,0 @@
-/*
- *    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/Font.js

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

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

@@ -15,11 +15,21 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import FontPeer from './FontPeer';
+import Font from './Font';
 
-class TahomaFont extends FontPeer {
+class TahomaFont extends Font {
   constructor() {
-    super('Verdana');
+    super();
+    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(fontPeer) {
+  constructor(Font) {
     const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'text');
     super(svgElement);
+    this.Font = Font;
     this._position = { x: 0, y: 0 };
-    this._font = fontPeer;
+    this._font = new Font('Arial', this);
   }
 
   append(element) {
@@ -84,11 +84,10 @@ class TextPeer extends ElementPeer {
     return getPosition(this._native);
   }
 
-  setFont(fontName, size, style, weight) {
+  setFont(font, size, style, weight) {
-    if ($defined(fontName)) {
+    if ($defined(font)) {
-      this._font = Toolkit.createFontByName(fontName);
+      this._font = new this.Font(font, this);
     }
-
     if ($defined(style)) {
       this._font.setStyle(style);
     }
@@ -102,7 +101,7 @@ class TextPeer extends ElementPeer {
   }
 
   _updateFontStyle() {
-    this._native.setAttribute('font-family', this._font.getFontName());
+    this._native.setAttribute('font-family', this._font.getFontFamily());
     this._native.setAttribute('font-size', this._font.getGraphSize());
     this._native.setAttribute('font-style', this._font.getStyle());
     this._native.setAttribute('font-weight', this._font.getWeight());
@@ -135,9 +134,9 @@ class TextPeer extends ElementPeer {
     this._updateFontStyle();
   }
 
-  setFontName(fontName) {
+  setFontFamily(family) {
     const oldFont = this._font;
-    this._font = Toolkit.createFontByName(fontName);
+    this._font = new this.Font(family, this);
     this._font.setSize(oldFont.getSize());
     this._font.setStyle(oldFont.getStyle());
     this._font.setWeight(oldFont.getWeight());
@@ -146,7 +145,7 @@ class TextPeer extends ElementPeer {
 
   getFont() {
     return {
-      font: this._font.getFontName(),
+      font: this._font.getFont(),
       size: parseInt(this._font.getSize(), 10),
       style: this._font.getStyle(),
       weight: this._font.getWeight(),
@@ -159,11 +158,22 @@ class TextPeer extends ElementPeer {
   }
 
   getWidth() {
-    let computedWidth = this._native.getBBox().width;
+    let computedWidth;
+    // Firefox hack for this issue:http://stackoverflow.com/questions/6390065/doing-ajax-updates-in-svg-breaks-getbbox-is-there-a-workaround
+    try {
+      computedWidth = this._native.getBBox().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);
     width += this._font.getWidthMargin();
@@ -171,12 +181,19 @@ class TextPeer extends ElementPeer {
   }
 
   getHeight() {
-    const computedHeight = this._native.getBBox().height;
+    // Firefox hack for this
+    // 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(scale) {
+  getHtmlFontSize() {
-    return this._font.getHtmlSize(scale);
+    return this._font.getHtmlSize();
   }
 }
 

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

@@ -15,11 +15,21 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import FontPeer from './FontPeer';
+import Font from './Font';
 
-class TimesFont extends FontPeer {
+class TimesFont extends Font {
   constructor() {
-    super('Times');
+    super();
+    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,11 +15,21 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import FontPeer from './FontPeer';
+import Font from './Font';
 
-class VerdanaFont extends FontPeer {
+class VerdanaFont extends Font {
   constructor() {
-    super('Verdana');
+    super();
+    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,7 +13,6 @@
                 <td>Tahoma</td>
                 <td>Verdana</td>
                 <td>Times</td>
-                <td>Brush Script MT</td>
             </tr>
         </thead>
         <tbody>
@@ -33,9 +32,6 @@
             <td>
                 <div id="multi3"></div>
             </td>
-            <td>
-                <div id="multi4"></div>
-            </td>
         </tr>
         <tr>
             <td>
@@ -53,9 +49,6 @@
             <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 {
-  Workspace, Text,
+  Toolkit, Workspace, Text,
 } from '../../src';
 
 global.$ = $;
 
-function multiline(text, fontName, elemId) {
+function multiline(text, family, elemId) {
   const workspace = new Workspace();
   workspace.setSize('200px', '240px');
   workspace.setCoordSize('200', '240');
@@ -16,7 +16,7 @@ function multiline(text, fontName, elemId) {
     workspace.append(wText);
 
     wText.setText(text);
-    wText.setFont(fontName, size, 'bold');
+    wText.setFont(family, 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', 'Brush Script MT'].forEach((fontName, i) => {
+['Arial', 'Tahoma', 'Verdana', 'Times'].forEach((family, i) => {
-  multiline('This multine text.\nLine 1 :)\nLine2', fontName, `multi${i}`);
+  multiline('This multine text.\nLine 1 :)\nLine2', family, `multi${i}`);
 });
 
 // Multine tests and alingments .. ...
-['Arial', 'Tahoma', 'Verdana', 'Times', 'Brush Script MT'].forEach((fontName, i) => {
+['Arial', 'Tahoma', 'Verdana', 'Times'].forEach((family, i) => {
-  alignments('This multine text.\nThis is the long line just because :)\nShort line', fontName, `amulti${i}`);
+  alignments('This multine text.\nThis is the long line just because :)\nShort line', family, `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(textsize);
+  const fontSize = text.getHtmlFontSize();
   span.append(textHtml);
   span.setAttribute('style', `font-weight:${modifier};font-style: ${style}; font-size:${fontSize}pt; font-family: ${font};width:30;height:30;`);