diff --git a/packages/web2d/src/components/Font.js b/packages/web2d/src/components/Font.js index 97324f55..b81812c9 100644 --- a/packages/web2d/src/components/Font.js +++ b/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) { - this.peer = Toolkit[`create${fontFamily}Font`](); - this._textPeer = textPeer; + constructor(fontName) { + this.peer = Toolkit.createFontByName(fontName); } 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; diff --git a/packages/web2d/src/components/Text.js b/packages/web2d/src/components/Text.js index 1df94ce6..8619baf8 100644 --- a/packages/web2d/src/components/Text.js +++ b/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() { - return this.peer.getHtmlFontSize(); + getHtmlFontSize(scale) { + return this.peer.getHtmlFontSize(scale); } getWidth() { diff --git a/packages/web2d/src/components/Toolkit.js b/packages/web2d/src/components/Toolkit.js index 22bdf3d4..acfdbf51 100644 --- a/packages/web2d/src/components/Toolkit.js +++ b/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) { - return new TextPeer(Font); + static createText(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; diff --git a/packages/web2d/src/components/peer/svg/ArialFont.js b/packages/web2d/src/components/peer/svg/ArialFont.js index 85ceb484..efe8bcba 100644 --- a/packages/web2d/src/components/peer/svg/ArialFont.js +++ b/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(); - this._fontFamily = 'Arial'; - } - - getFontFamily() { - return this._fontFamily; - } - - // eslint-disable-next-line class-methods-use-this - getFont() { - return Font.ARIAL; + super('Arial'); } } diff --git a/packages/web2d/src/components/peer/svg/BrushScriptFont.js b/packages/web2d/src/components/peer/svg/BrushScriptFont.js new file mode 100644 index 00000000..3aa94cdc --- /dev/null +++ b/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; diff --git a/packages/web2d/src/components/peer/svg/Font.js b/packages/web2d/src/components/peer/svg/FontPeer.js similarity index 91% rename from packages/web2d/src/components/peer/svg/Font.js rename to packages/web2d/src/components/peer/svg/FontPeer.js index 0d341805..8f8f1efb 100644 --- a/packages/web2d/src/components/peer/svg/Font.js +++ b/packages/web2d/src/components/peer/svg/FontPeer.js @@ -17,11 +17,12 @@ */ import { $assert, $defined } from '@wisemapping/core-js'; -class Font { - constructor() { +class FontPeer { + 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; diff --git a/packages/web2d/src/components/peer/svg/TahomaFont.js b/packages/web2d/src/components/peer/svg/TahomaFont.js index 640d5dd9..69bb8830 100644 --- a/packages/web2d/src/components/peer/svg/TahomaFont.js +++ b/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(); - this._fontFamily = 'Tahoma'; - } - - getFontFamily() { - return this._fontFamily; - } - - // eslint-disable-next-line class-methods-use-this - getFont() { - return Font.TAHOMA; + super('Verdana'); } } diff --git a/packages/web2d/src/components/peer/svg/TextPeer.js b/packages/web2d/src/components/peer/svg/TextPeer.js index e652df63..b427e25e 100644 --- a/packages/web2d/src/components/peer/svg/TextPeer.js +++ b/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) { - if ($defined(font)) { - this._font = new this.Font(font, this); + setFont(fontName, size, style, weight) { + if ($defined(fontName)) { + 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; - // 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 computedWidth = this._native.getBBox().width; + if (computedWidth === 0) { + const bbox = this._native.getBBox(); + computedWidth = bbox.width; } let width = parseInt(computedWidth, 10); @@ -181,19 +171,12 @@ class TextPeer extends ElementPeer { } getHeight() { - // 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; - } + const computedHeight = this._native.getBBox().height; return parseInt(computedHeight, 10); } - getHtmlFontSize() { - return this._font.getHtmlSize(); + getHtmlFontSize(scale) { + return this._font.getHtmlSize(scale); } } diff --git a/packages/web2d/src/components/peer/svg/TimesFont.js b/packages/web2d/src/components/peer/svg/TimesFont.js index 6c6b43d4..583b5c00 100644 --- a/packages/web2d/src/components/peer/svg/TimesFont.js +++ b/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(); - this._fontFamily = 'Times'; - } - - getFontFamily() { - return this._fontFamily; - } - - // eslint-disable-next-line class-methods-use-this - getFont() { - return Font.TIMES; + super('Times'); } } diff --git a/packages/web2d/src/components/peer/svg/VerdanaFont.js b/packages/web2d/src/components/peer/svg/VerdanaFont.js index dd5b1c4e..e527baeb 100644 --- a/packages/web2d/src/components/peer/svg/VerdanaFont.js +++ b/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(); - this._fontFamily = 'Verdana'; - } - - getFontFamily() { - return this._fontFamily; - } - - // eslint-disable-next-line class-methods-use-this - getFont() { - return Font.VERDANA; + super('Verdana'); } } diff --git a/packages/web2d/test/playground/font.html b/packages/web2d/test/playground/font.html index 754086c2..b3bee85f 100644 --- a/packages/web2d/test/playground/font.html +++ b/packages/web2d/test/playground/font.html @@ -13,6 +13,7 @@ Tahoma Verdana Times + Brush Script MT @@ -32,6 +33,9 @@
+ +
+ @@ -49,6 +53,9 @@
+ +
+ diff --git a/packages/web2d/test/playground/font.js b/packages/web2d/test/playground/font.js index 442acb00..16ac656a 100644 --- a/packages/web2d/test/playground/font.js +++ b/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) => { - multiline('This multine text.\nLine 1 :)\nLine2', family, `multi${i}`); +['Arial', 'Tahoma', 'Verdana', 'Times', 'Brush Script MT'].forEach((fontName, i) => { + multiline('This multine text.\nLine 1 :)\nLine2', fontName, `multi${i}`); }); // Multine tests and alingments .. ... -['Arial', 'Tahoma', 'Verdana', 'Times'].forEach((family, i) => { - alignments('This multine text.\nThis is the long line just because :)\nShort line', family, `amulti${i}`); +['Arial', 'Tahoma', 'Verdana', 'Times', 'Brush Script MT'].forEach((fontName, i) => { + alignments('This multine text.\nThis is the long line just because :)\nShort line', fontName, `amulti${i}`); }); diff --git a/packages/web2d/test/playground/text.js b/packages/web2d/test/playground/text.js index 4f249b2f..1283b59f 100644 --- a/packages/web2d/test/playground/text.js +++ b/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;`);