From c9018c7b861c964ec894448d74c018ef0efd9d70 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Mon, 27 Dec 2021 09:01:01 -0800 Subject: [PATCH] FORder icons based type --- packages/mindplot/src/components/IconGroup.js | 58 ++++++++++++------- packages/mindplot/src/components/Topic.js | 40 ++++++------- .../mindplot/src/components/TopicStyle.js | 23 +++++--- 3 files changed, 69 insertions(+), 52 deletions(-) diff --git a/packages/mindplot/src/components/IconGroup.js b/packages/mindplot/src/components/IconGroup.js index 652c19e3..e66f4f02 100644 --- a/packages/mindplot/src/components/IconGroup.js +++ b/packages/mindplot/src/components/IconGroup.js @@ -16,12 +16,25 @@ * limitations under the License. */ // eslint-disable-next-line max-classes-per-file -import { $assert, $defined } from '@wisemapping/core-js'; -import { Group } from '@wisemapping/web2d'; +import { + $assert, + $defined +} from '@wisemapping/core-js'; +import { + Group +} from '@wisemapping/web2d'; import IconGroupRemoveTip from './IconGroupRemoveTip'; +import NoteModel from './model/NoteModel'; +import LinkModel from './model/LinkModel'; +import IconModel from './model/IconModel'; import Icon from './Icon'; +const ORDER_BY_TYPE = new Map(); +ORDER_BY_TYPE.set(IconModel.FEATURE_TYPE, 0); +ORDER_BY_TYPE.set(NoteModel.FEATURE_TYPE, 1); +ORDER_BY_TYPE.set(LinkModel.FEATURE_TYPE, 2); + class IconGroup { constructor(topicId, iconSize) { $assert($defined(topicId), 'topicId can not be null'); @@ -64,27 +77,38 @@ class IconGroup { /** */ seIconSize(width, height) { - this._iconSize = { width, height }; + this._iconSize = { + width, + height, + }; this._resize(this._icons.length); } /** - * @param icon the icon to be added to the icon group - * @param {Boolean} remove - * @throws will throw an error if icon is not defined - */ + * @param icon the icon to be added to the icon group + * @param {Boolean} remove + * @throws will throw an error if icon is not defined + */ addIcon(icon, remove) { $defined(icon, 'icon is not defined'); + // Order could have change, need to re-add all. + const icons = this._icons.slice(); + this._icons.forEach((i) => { + this._removeIcon(i); + }); + icon.setGroup(this); - this._icons.push(icon); + icons.push(icon); + this._icons = icons.sort((a, b) => ORDER_BY_TYPE.get(a.getModel().getType()) - ORDER_BY_TYPE.get(b.getModel().getType())); - // Adjust group and position ... + // Add all the nodes back ... this._resize(this._icons.length); - this._positionIcon(icon, this._icons.length - 1); - - const imageShape = icon.getImage(); - this._group.append(imageShape); + this._icons.forEach((i, index) => { + this._positionIcon(i, index); + const imageShape = i.getImage(); + this._group.append(imageShape); + }); // Register event for the group .. if (remove) { @@ -166,11 +190,5 @@ class IconGroup { } } -/** - * @constant - * @type {Number} - * @default - */ IconGroup.ICON_PADDING = 5; - -export default IconGroup; +export default IconGroup; \ No newline at end of file diff --git a/packages/mindplot/src/components/Topic.js b/packages/mindplot/src/components/Topic.js index e5edeb1a..3b67dffc 100644 --- a/packages/mindplot/src/components/Topic.js +++ b/packages/mindplot/src/components/Topic.js @@ -48,7 +48,7 @@ import INodeModel, { TopicShape, } from './model/INodeModel'; -const ICON_SCALING_FACTOR = 1; +const ICON_SCALING_FACTOR = 1.8; class Topic extends NodeGraph { /** @@ -1263,37 +1263,31 @@ class Topic extends NodeGraph { if (this._isInWorkspace) { const textShape = this.getTextShape(); if (this.getShapeType() !== TopicShape.IMAGE) { + // Calculate topic size and adjust elements ... const textWidth = textShape.getWidth(); + const textHeight = textShape.getHeight(); + const padding = TopicStyle.getInnerPadding(this); - let textHeight = textShape.getHeight(); - textHeight = textHeight !== 0 ? textHeight : 20; - - const topicPadding = TopicStyle.getInnerPadding(this); - - // Adjust the icon size to the size of the text ... + // Adjust icons group based on the font size ... const iconGroup = this.getOrBuildIconGroup(); const fontHeight = this.getTextShape().getFontHeight(); + const iconHeight = ICON_SCALING_FACTOR * fontHeight; + iconGroup.seIconSize(iconHeight, iconHeight); - const iconSize = ICON_SCALING_FACTOR * fontHeight; - iconGroup.setPosition(topicPadding, topicPadding); - iconGroup.seIconSize(iconSize, iconSize); - - // Add a extra padding between the text and the icons - let iconsWidth = iconGroup.getSize().width; - if (iconsWidth !== 0) { - iconsWidth += textHeight / 4; - } - - const height = textHeight + topicPadding * 2; - const width = textWidth + iconsWidth + topicPadding * 2; + // Calculate size and adjust ... + const topicHeight = Math.max(iconHeight, textHeight) + padding * 2; + const textIconSpacing = Math.round(fontHeight / 4); + const iconGroupWith = iconGroup.getSize().width; + const topicWith = iconGroupWith + textIconSpacing + textWidth + padding * 2; this.setSize({ - width, - height, + width: topicWith, + height: topicHeight, }); - // Position node ... - textShape.setPosition(topicPadding + iconsWidth, topicPadding); + // Adjust all topic elements positions ... + iconGroup.setPosition(padding, (topicHeight - iconHeight) / 2); + textShape.setPosition(padding + iconGroupWith + textIconSpacing, (topicHeight - textHeight) / 2); } else { // In case of images, the size is fixed ... const size = this.getModel().getImageSize(); diff --git a/packages/mindplot/src/components/TopicStyle.js b/packages/mindplot/src/components/TopicStyle.js index 9e378a31..22bb7d5f 100644 --- a/packages/mindplot/src/components/TopicStyle.js +++ b/packages/mindplot/src/components/TopicStyle.js @@ -15,9 +15,16 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { $assert, $defined } from '@wisemapping/core-js'; -import { $msg } from './Messages'; -import { TopicShape } from './model/INodeModel'; +import { + $assert, + $defined, +} from '@wisemapping/core-js'; +import { + $msg, +} from './Messages'; +import { + TopicShape, +} from './model/INodeModel'; class TopicStyle { static _getStyles(topic) { @@ -42,7 +49,9 @@ class TopicStyle { } static defaultText(topic) { - const { msgKey } = this._getStyles(topic); + const { + msgKey, + } = this._getStyles(topic); return $msg(msgKey); } @@ -59,7 +68,7 @@ class TopicStyle { } static getInnerPadding(topic) { - return this._getStyles(topic).innerPadding; + return Math.round(topic.getTextShape().getFontHeight() * 0.5); } static defaultShapeType(topic) { @@ -79,7 +88,6 @@ TopicStyle.STYLES = { color: '#ffffff', }, msgKey: 'CENTRAL_TOPIC', - innerPadding: 11, shapeType: TopicShape.ROUNDED_RECT, }, @@ -94,7 +102,6 @@ TopicStyle.STYLES = { color: 'rgb(82,92,97)', }, msgKey: 'MAIN_TOPIC', - innerPadding: 3, shapeType: TopicShape.LINE, }, @@ -109,7 +116,6 @@ TopicStyle.STYLES = { color: 'rgb(82,92,97)', }, msgKey: 'SUB_TOPIC', - innerPadding: 3, shapeType: TopicShape.LINE, }, @@ -124,7 +130,6 @@ TopicStyle.STYLES = { color: 'rgb(82,92,97)', }, msgKey: 'ISOLATED_TOPIC', - innerPadding: 4, shapeType: TopicShape.LINE, }, };