Start adding SVG icons replacement

This commit is contained in:
Paulo Gustavo Veiga 2021-12-26 21:54:43 -08:00
parent c503c590d9
commit 5496d66a90
11 changed files with 311 additions and 183 deletions

View File

@ -0,0 +1,11 @@
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
<path fill="#FBC02D" d="M37,22c0-7.7-6.6-13.8-14.5-12.9c-6,0.7-10.8,5.5-11.4,11.5c-0.5,4.6,1.4,8.7,4.6,11.3 c1.4,1.2,2.3,2.9,2.3,4.8V37h12v-0.1c0-1.8,0.8-3.6,2.2-4.8C35.1,29.7,37,26.1,37,22z"/>
<path fill="#FFF59D" d="M30.6,20.2l-3-2c-0.3-0.2-0.8-0.2-1.1,0L24,19.8l-2.4-1.6c-0.3-0.2-0.8-0.2-1.1,0l-3,2 c-0.2,0.2-0.4,0.4-0.4,0.7s0,0.6,0.2,0.8l3.8,4.7V37h2V26c0-0.2-0.1-0.4-0.2-0.6l-3.3-4.1l1.5-1l2.4,1.6c0.3,0.2,0.8,0.2,1.1,0 l2.4-1.6l1.5,1l-3.3,4.1C25.1,25.6,25,25.8,25,26v11h2V26.4l3.8-4.7c0.2-0.2,0.3-0.5,0.2-0.8S30.8,20.3,30.6,20.2z"/>
<circle fill="#5C6BC0" cx="24" cy="44" r="3"/>
<path fill="#9FA8DA" d="M26,45h-4c-2.2,0-4-1.8-4-4v-5h12v5C30,43.2,28.2,45,26,45z"/>
<g fill="#5C6BC0">
<path d="M30,41l-11.6,1.6c0.3,0.7,0.9,1.4,1.6,1.8l9.4-1.3C29.8,42.5,30,41.8,30,41z"/>
<polygon points="18,38.7 18,40.7 30,39 30,37"/>
</g>
<rect x="22" y="-2.9" transform="matrix(.707 -.707 .707 .707 -9.941 24)" fill="#37474F" width="4" height="53.7"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,11 @@
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
<circle fill="#FFF59D" cx="24" cy="22" r="20"/>
<path fill="#FBC02D" d="M37,22c0-7.7-6.6-13.8-14.5-12.9c-6,0.7-10.8,5.5-11.4,11.5c-0.5,4.6,1.4,8.7,4.6,11.3 c1.4,1.2,2.3,2.9,2.3,4.8V37h12v-0.1c0-1.8,0.8-3.6,2.2-4.8C35.1,29.7,37,26.1,37,22z"/>
<path fill="#FFF59D" d="M30.6,20.2l-3-2c-0.3-0.2-0.8-0.2-1.1,0L24,19.8l-2.4-1.6c-0.3-0.2-0.8-0.2-1.1,0l-3,2 c-0.2,0.2-0.4,0.4-0.4,0.7s0,0.6,0.2,0.8l3.8,4.7V37h2V26c0-0.2-0.1-0.4-0.2-0.6l-3.3-4.1l1.5-1l2.4,1.6c0.3,0.2,0.8,0.2,1.1,0 l2.4-1.6l1.5,1l-3.3,4.1C25.1,25.6,25,25.8,25,26v11h2V26.4l3.8-4.7c0.2-0.2,0.3-0.5,0.2-0.8S30.8,20.3,30.6,20.2z"/>
<circle fill="#5C6BC0" cx="24" cy="44" r="3"/>
<path fill="#9FA8DA" d="M26,45h-4c-2.2,0-4-1.8-4-4v-5h12v5C30,43.2,28.2,45,26,45z"/>
<g fill="#5C6BC0">
<path d="M30,41l-11.6,1.6c0.3,0.7,0.9,1.4,1.6,1.8l9.4-1.3C29.8,42.5,30,41.8,30,41z"/>
<polygon points="18,38.7 18,40.7 30,39 30,37"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -0,0 +1,5 @@
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
<path fill="#424242" d="M24,4c-5.5,0-10,4.5-10,10v4h4v-4c0-3.3,2.7-6,6-6s6,2.7,6,6v4h4v-4C34,8.5,29.5,4,24,4z"/>
<path fill="#FB8C00" d="M36,44H12c-2.2,0-4-1.8-4-4V22c0-2.2,1.8-4,4-4h24c2.2,0,4,1.8,4,4v18C40,42.2,38.2,44,36,44z"/>
<circle fill="#C76E00" cx="24" cy="31" r="3"/>
</svg>

After

Width:  |  Height:  |  Size: 404 B

View File

@ -0,0 +1,5 @@
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
<path fill="#424242" d="M24,4c-5.5,0-10,4.5-10,10v4h4v-4c0-3.3,2.7-6,6-6s6,2.7,6,6v4h4v-4C34,8.5,29.5,4,24,4z"/>
<path fill="#FB8C00" d="M36,44H12c-2.2,0-4-1.8-4-4V22c0-2.2,1.8-4,4-4h24c2.2,0,4,1.8,4,4v18C40,42.2,38.2,44,36,44z"/>
<circle fill="#C76E00" cx="24" cy="31" r="3"/>
</svg>

After

Width:  |  Height:  |  Size: 404 B

View File

@ -0,0 +1,5 @@
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
<circle fill="#2196F3" cx="24" cy="24" r="21"/>
<rect x="22" y="22" fill="#fff" width="4" height="11"/>
<circle fill="#fff" cx="24" cy="16.5" r="2.5"/>
</svg>

After

Width:  |  Height:  |  Size: 278 B

View File

@ -0,0 +1,7 @@
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
<g fill="#1976D2">
<path d="M38,13h-3c-5.5,0-10,4.5-10,10s4.5,10,10,10h3c5.5,0,10-4.5,10-10S43.5,13,38,13z M38,29h-3 c-3.3,0-6-2.7-6-6s2.7-6,6-6h3c3.3,0,6,2.7,6,6S41.3,29,38,29z"/>
<path d="M13,13h-3C4.5,13,0,17.5,0,23s4.5,10,10,10h3c5.5,0,10-4.5,10-10S18.5,13,13,13z M13,29h-3 c-3.3,0-6-2.7-6-6s2.7-6,6-6h3c3.3,0,6,2.7,6,6S16.3,29,13,29z"/>
</g>
<path fill="#42A5F5" d="M33,21H15c-1.1,0-2,0.9-2,2s0.9,2,2,2h18c1.1,0,2-0.9,2-2S34.1,21,33,21z"/>
</svg>

After

Width:  |  Height:  |  Size: 587 B

View File

@ -15,17 +15,21 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { $assert } from '@wisemapping/core-js';
import {
$assert,
} from '@wisemapping/core-js';
import Icon from './Icon';
import ActionDispatcher from './ActionDispatcher';
function importAll(r) {
const images = {};
r.keys().forEach((item) => { images[item.replace('./', '')] = r(item); });
r.keys().forEach((item) => {
images[item.replace('./', '')] = r(item);
});
return images;
}
const images = importAll(require.context('../../assets/icons', false, /\.png$/));
const images = importAll(require.context('../../assets/icons', false, /\.(png|svg)$/));
class ImageIcon extends Icon {
constructor(topic, iconModel, readOnly) {
@ -56,7 +60,11 @@ class ImageIcon extends Icon {
}
static _getImageUrl(iconId) {
return images[`${iconId}.png`];
let result = images[`${iconId}.svg`];
if (!result) {
result = images[`${iconId}.png`];
}
return result;
}
getModel() {
@ -108,63 +116,108 @@ class ImageIcon extends Icon {
}
}
ImageIcon.prototype.ICON_FAMILIES = [
{ id: 'face', icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'] },
{ id: 'funy', icons: ['funy_angel', 'funy_devilish', 'funy_glasses', 'funy_grin', 'funy_kiss', 'funy_monkey'] },
{ id: 'conn', icons: ['conn_connect', 'conn_disconnect'] },
{
id: 'sport',
icons: ['sport_basketball', 'sport_football', 'sport_golf', 'sport_raquet', 'sport_shuttlecock', 'sport_soccer', 'sport_tennis'],
},
{ id: 'bulb', icons: ['bulb_light_on', 'bulb_light_off'] },
{ id: 'thumb', icons: ['thumb_thumb_up', 'thumb_thumb_down'] },
{ id: 'tick', icons: ['tick_tick', 'tick_cross'] },
{
id: 'onoff',
icons: ['onoff_clock', 'onoff_clock_red', 'onoff_add', 'onoff_delete', 'onoff_status_offline', 'onoff_status_online'],
},
{
id: 'money',
icons: ['money_money', 'money_dollar', 'money_euro', 'money_pound', 'money_yen', 'money_coins', 'money_ruby'],
},
{ id: 'time', icons: ['time_calendar', 'time_clock', 'time_hourglass'] },
{
id: 'number',
icons: ['number_1', 'number_2', 'number_3', 'number_4', 'number_5', 'number_6', 'number_7', 'number_8', 'number_9'],
},
{ id: 'chart', icons: ['chart_bar', 'chart_line', 'chart_curve', 'chart_pie', 'chart_organisation'] },
{ id: 'sign', icons: ['sign_warning', 'sign_info', 'sign_stop', 'sign_help', 'sign_cancel'] },
{
id: 'hard',
icons: ['hard_cd', 'hard_computer', 'hard_controller', 'hard_driver_disk', 'hard_ipod', 'hard_keyboard', 'hard_mouse', 'hard_printer'],
},
{
id: 'soft',
icons: ['soft_bug', 'soft_cursor', 'soft_database_table', 'soft_database', 'soft_feed', 'soft_folder_explore', 'soft_rss', 'soft_penguin'],
},
{ id: 'arrow', icons: ['arrow_up', 'arrow_down', 'arrow_left', 'arrow_right'] },
{
id: 'arrowc',
icons: ['arrowc_rotate_anticlockwise', 'arrowc_rotate_clockwise', 'arrowc_turn_left', 'arrowc_turn_right'],
},
{ id: 'people', icons: ['people_group', 'people_male1', 'people_male2', 'people_female1', 'people_female2'] },
{ id: 'mail', icons: ['mail_envelop', 'mail_mailbox', 'mail_edit', 'mail_list'] },
{ id: 'flag', icons: ['flag_blue', 'flag_green', 'flag_orange', 'flag_pink', 'flag_purple', 'flag_yellow'] },
{
id: 'bullet',
icons: ['bullet_black', 'bullet_blue', 'bullet_green', 'bullet_orange', 'bullet_red', 'bullet_pink', 'bullet_purple'],
},
{ id: 'tag', icons: ['tag_blue', 'tag_green', 'tag_orange', 'tag_red', 'tag_pink', 'tag_yellow'] },
{
id: 'object',
icons: ['object_bell', 'object_clanbomber', 'object_key', 'object_pencil', 'object_phone', 'object_magnifier', 'object_clip',
'object_music', 'object_star', 'object_wizard', 'object_house', 'object_cake', 'object_camera', 'object_palette', 'object_rainbow'],
},
{
id: 'weather',
icons: ['weather_clear-night', 'weather_clear', 'weather_few-clouds-night', 'weather_few-clouds', 'weather_overcast', 'weather_severe-alert', 'weather_showers-scattered', 'weather_showers', 'weather_snow', 'weather_storm'],
},
{ id: 'task', icons: ['task_0', 'task_25', 'task_50', 'task_75', 'task_100'] },
ImageIcon.prototype.ICON_FAMILIES = [{
id: 'face',
icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'],
},
{
id: 'funy',
icons: ['funy_angel', 'funy_devilish', 'funy_glasses', 'funy_grin', 'funy_kiss', 'funy_monkey'],
},
{
id: 'conn',
icons: ['conn_connect', 'conn_disconnect'],
},
{
id: 'sport',
icons: ['sport_basketball', 'sport_football', 'sport_golf', 'sport_raquet', 'sport_shuttlecock', 'sport_soccer', 'sport_tennis'],
},
{
id: 'bulb',
icons: ['bulb_light_on', 'bulb_light_off'],
},
{
id: 'thumb',
icons: ['thumb_thumb_up', 'thumb_thumb_down'],
},
{
id: 'tick',
icons: ['tick_tick', 'tick_cross'],
},
{
id: 'onoff',
icons: ['onoff_clock', 'onoff_clock_red', 'onoff_add', 'onoff_delete', 'onoff_status_offline', 'onoff_status_online'],
},
{
id: 'money',
icons: ['money_money', 'money_dollar', 'money_euro', 'money_pound', 'money_yen', 'money_coins', 'money_ruby'],
},
{
id: 'time',
icons: ['time_calendar', 'time_clock', 'time_hourglass'],
},
{
id: 'number',
icons: ['number_1', 'number_2', 'number_3', 'number_4', 'number_5', 'number_6', 'number_7', 'number_8', 'number_9'],
},
{
id: 'chart',
icons: ['chart_bar', 'chart_line', 'chart_curve', 'chart_pie', 'chart_organisation'],
},
{
id: 'sign',
icons: ['sign_warning', 'sign_info', 'sign_stop', 'sign_help', 'sign_cancel'],
},
{
id: 'hard',
icons: ['hard_cd', 'hard_computer', 'hard_controller', 'hard_driver_disk', 'hard_ipod', 'hard_keyboard', 'hard_mouse', 'hard_printer'],
},
{
id: 'soft',
icons: ['soft_bug', 'soft_cursor', 'soft_database_table', 'soft_database', 'soft_feed', 'soft_folder_explore', 'soft_rss', 'soft_penguin'],
},
{
id: 'arrow',
icons: ['arrow_up', 'arrow_down', 'arrow_left', 'arrow_right'],
},
{
id: 'arrowc',
icons: ['arrowc_rotate_anticlockwise', 'arrowc_rotate_clockwise', 'arrowc_turn_left', 'arrowc_turn_right'],
},
{
id: 'people',
icons: ['people_group', 'people_male1', 'people_male2', 'people_female1', 'people_female2'],
},
{
id: 'mail',
icons: ['mail_envelop', 'mail_mailbox', 'mail_edit', 'mail_list'],
},
{
id: 'flag',
icons: ['flag_blue', 'flag_green', 'flag_orange', 'flag_pink', 'flag_purple', 'flag_yellow'],
},
{
id: 'bullet',
icons: ['bullet_black', 'bullet_blue', 'bullet_green', 'bullet_orange', 'bullet_red', 'bullet_pink', 'bullet_purple'],
},
{
id: 'tag',
icons: ['tag_blue', 'tag_green', 'tag_orange', 'tag_red', 'tag_pink', 'tag_yellow'],
},
{
id: 'object',
icons: ['object_bell', 'object_clanbomber', 'object_key', 'object_pencil', 'object_phone', 'object_magnifier', 'object_clip',
'object_music', 'object_star', 'object_wizard', 'object_house', 'object_cake', 'object_camera', 'object_palette', 'object_rainbow',
],
},
{
id: 'weather',
icons: ['weather_clear-night', 'weather_clear', 'weather_few-clouds-night', 'weather_few-clouds', 'weather_overcast', 'weather_severe-alert', 'weather_showers-scattered', 'weather_showers', 'weather_snow', 'weather_storm'],
},
{
id: 'task',
icons: ['task_0', 'task_25', 'task_50', 'task_75', 'task_100'],
},
];
export default ImageIcon;

View File

@ -19,7 +19,7 @@ import { $assert } from '@wisemapping/core-js';
import $ from 'jquery';
import Icon from './Icon';
import LinkIconTooltip from './widget/LinkIconTooltip';
import LinksImage from '../../assets/images/links.png';
import LinksImage from '../../assets/images/links.svg';
class LinkIcon extends Icon {
constructor(topic, linkModel, readOnly) {

View File

@ -16,9 +16,16 @@
* limitations under the License.
*/
import $ from 'jquery';
import { $assert, $defined } from '@wisemapping/core-js';
import {
Rect, Image, Line, Text, Group,
$assert,
$defined,
} from '@wisemapping/core-js';
import {
Rect,
Image,
Line,
Text,
Group,
} from '@wisemapping/web2d';
import NodeGraph from './NodeGraph';
@ -34,16 +41,22 @@ import NoteEditor from './widget/NoteEditor';
import ActionDispatcher from './ActionDispatcher';
import LinkEditor from './widget/LinkEditor';
import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
import INodeModel, { TopicShape } from './model/INodeModel';
import TopicEventDispatcher, {
TopicEvent,
} from './TopicEventDispatcher';
import INodeModel, {
TopicShape,
} from './model/INodeModel';
const ICON_SCALING_FACTOR = 1;
class Topic extends NodeGraph {
/**
* @extends mindplot.NodeGraph
* @constructs
* @param model
* @param options
*/
* @extends mindplot.NodeGraph
* @constructs
* @param model
* @param options
*/
constructor(model, options) {
super(model, options);
this._children = [];
@ -79,9 +92,9 @@ class Topic extends NodeGraph {
}
/**
* @param {String} type the topic shape type
* @see {@link mindplot.model.INodeModel}
*/
* @param {String} type the topic shape type
* @see {@link mindplot.model.INodeModel}
*/
setShapeType(type) {
this._setShapeType(type, true);
}
@ -194,15 +207,21 @@ class Topic extends NodeGraph {
return model.getImageSize();
};
result.setPosition = function setPosition() { };
result.setPosition = function setPosition() {};
} else if (shapeType === TopicShape.ELLIPSE) {
result = new Rect(0.9, attributes);
} else if (shapeType === TopicShape.ROUNDED_RECT) {
result = new Rect(0.3, attributes);
} else if (shapeType === TopicShape.LINE) {
result = new Line({ strokeColor: '#495879', strokeWidth: 1 });
result = new Line({
strokeColor: '#495879',
strokeWidth: 1,
});
result.setSize = function setSize(width, height) {
this.size = { width, height };
this.size = {
width,
height,
};
result.setFrom(0, height);
result.setTo(width, height);
@ -215,9 +234,9 @@ class Topic extends NodeGraph {
return this.size;
};
result.setPosition = function setPosition() { };
result.setFill = function setFill() { };
result.setStroke = function setStroke() { };
result.setPosition = function setPosition() {};
result.setFill = function setFill() {};
result.setStroke = function setStroke() {};
} else {
$assert(false, `Unsupported figure shapeType:${shapeType}`);
}
@ -283,30 +302,27 @@ class Topic extends NodeGraph {
_buildIconGroup() {
const textHeight = this.getTextShape().getFontHeight();
const result = new IconGroup(this.getId(), textHeight);
const iconSize = textHeight * ICON_SCALING_FACTOR;
const result = new IconGroup(this.getId(), iconSize);
const padding = TopicStyle.getInnerPadding(this);
result.setPosition(padding, padding);
// Load topic features ...
const model = this.getModel();
const featuresModel = model.getFeatures();
for (let i = 0; i < featuresModel.length; i++) {
const featureModel = featuresModel[i];
const icon = TopicFeature.createIcon(this, featureModel, this.isReadOnly());
result.addIcon(
icon,
featureModel.getType() === TopicFeature.Icon.id && !this.isReadOnly(),
);
}
featuresModel.forEach((f) => {
const icon = TopicFeature.createIcon(this, f, this.isReadOnly());
result.addIcon(icon, f.getType() === TopicFeature.Icon.id && !this.isReadOnly());
});
return result;
}
/**
* assigns the new feature model to the topic's node model and adds the respective icon
* @param {mindplot.model.FeatureModel} featureModel
* @return {mindplot.Icon} the icon corresponding to the feature model
*/
* assigns the new feature model to the topic's node model and adds the respective icon
* @param {mindplot.model.FeatureModel} featureModel
* @return {mindplot.Icon} the icon corresponding to the feature model
*/
addFeature(featureModel) {
const iconGroup = this.getOrBuildIconGroup();
this.closeEditors();
@ -737,7 +753,9 @@ class Topic extends NodeGraph {
/** */
showTextEditor(text) {
this._getTopicEventDispatcher().show(this, { text });
this._getTopicEventDispatcher().show(this, {
text,
});
}
/** */
@ -822,8 +840,8 @@ class Topic extends NodeGraph {
}
/**
* Point: references the center of the rect shape.!!!
*/
* Point: references the center of the rect shape.!!!
*/
setPosition(point) {
$assert(point, 'position can not be null');
// allowed param reassign to avoid risks of existing code relying in this side-effect
@ -858,18 +876,10 @@ class Topic extends NodeGraph {
return this._outgoingLine;
}
/** */
getIncomingLines() {
const result = [];
const children = this.getChildren();
for (let i = 0; i < children.length; i++) {
const node = children[i];
const line = node.getOutgoingLine();
if ($defined(line)) {
result.push(line);
}
}
return result;
return children.filter((node) => $defined(node.getOutgoingLine()))
.map(((node) => node.getOutgoingLine()));
}
/** */
@ -891,14 +901,10 @@ class Topic extends NodeGraph {
// Update all the incoming lines ...
const incomingLines = this.getIncomingLines();
for (let i = 0; i < incomingLines.length; i++) {
incomingLines[i].redraw();
}
incomingLines.forEach((line) => line.redraw());
// Update relationship lines
for (let j = 0; j < this._relationships.length; j++) {
this._relationships[j].redraw();
}
this._relationships.forEach((r) => r.redraw());
}
/** */
@ -932,9 +938,8 @@ class Topic extends NodeGraph {
/** */
moveToBack() {
// Update relationship lines
for (let j = 0; j < this._relationships.length; j++) {
this._relationships[j].moveToBack();
}
this._relationships.forEach((r) => r.moveToBack());
const connector = this.getShrinkConnector();
if ($defined(connector)) {
connector.moveToBack();
@ -951,9 +956,7 @@ class Topic extends NodeGraph {
connector.moveToFront();
}
// Update relationship lines
for (let j = 0; j < this._relationships.length; j++) {
this._relationships[j].moveToFront();
}
this._relationships.forEach((r) => r.moveToFront());
}
/** */
@ -970,9 +973,9 @@ class Topic extends NodeGraph {
const targetParent = targetTopic.getModel().getParent();
const sourceParent = sourceTopic.getModel().getParent();
relationship.setVisibility(
value
&& (targetParent == null || !targetParent.areChildrenShrunken())
&& (sourceParent == null || !sourceParent.areChildrenShrunken()),
value &&
(targetParent == null || !targetParent.areChildrenShrunken()) &&
(sourceParent == null || !sourceParent.areChildrenShrunken()),
);
});
}
@ -1034,11 +1037,14 @@ class Topic extends NodeGraph {
setSize(size, force) {
$assert(size, 'size can not be null');
$assert($defined(size.width), 'size seem not to be a valid element');
const roundedSize = { width: Math.ceil(size.width), height: Math.ceil(size.height) };
const roundedSize = {
width: Math.ceil(size.width),
height: Math.ceil(size.height),
};
const oldSize = this.getSize();
const hasSizeChanged = oldSize.width !== roundedSize.width
|| oldSize.height !== roundedSize.height;
const hasSizeChanged = oldSize.width !== roundedSize.width ||
oldSize.height !== roundedSize.height;
if (hasSizeChanged || force) {
NodeGraph.prototype.setSize.call(this, roundedSize);
@ -1267,8 +1273,10 @@ class Topic extends NodeGraph {
// Adjust the icon size to the size of the text ...
const iconGroup = this.getOrBuildIconGroup();
const fontHeight = this.getTextShape().getFontHeight();
const iconSize = ICON_SCALING_FACTOR * fontHeight;
iconGroup.setPosition(topicPadding, topicPadding);
iconGroup.seIconSize(fontHeight, fontHeight);
iconGroup.seIconSize(iconSize, iconSize);
// Add a extra padding between the text and the icons
let iconsWidth = iconGroup.getSize().width;
@ -1279,12 +1287,15 @@ class Topic extends NodeGraph {
const height = textHeight + topicPadding * 2;
const width = textWidth + iconsWidth + topicPadding * 2;
this.setSize({ width, height });
this.setSize({
width,
height,
});
// Position node ...
textShape.setPosition(topicPadding + iconsWidth, topicPadding);
} else {
// In case of images, the size if fixed ...
// In case of images, the size is fixed ...
const size = this.getModel().getImageSize();
this.setSize(size);
}
@ -1311,9 +1322,9 @@ class Topic extends NodeGraph {
}
/**
* @param childTopic
* @return {Boolean} true if childtopic is a child topic of this topic or the topic itself
*/
* @param childTopic
* @return {Boolean} true if childtopic is a child topic of this topic or the topic itself
*/
isChildTopic(childTopic) {
let result = this.getId() === childTopic.getId();
if (!result) {
@ -1335,4 +1346,4 @@ class Topic extends NodeGraph {
}
}
export default Topic;
export default Topic;

View File

@ -30,5 +30,10 @@ global.jQuery = jquery;
require('@libraries/bootstrap/js/bootstrap');
export {
Mindmap, PersistenceManager, Designer, LocalStorageManager, Menu, DesignerBuilder,
};
Mindmap,
PersistenceManager,
Designer,
LocalStorageManager,
Menu,
DesignerBuilder,
};

View File

@ -24,10 +24,19 @@ class GroupPeer extends ElementPeer {
const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'g');
super(svgElement);
this._native.setAttribute('preserveAspectRatio', 'none');
this._coordSize = { width: 1, height: 1 };
this._coordSize = {
width: 1,
height: 1,
};
this._native.setAttribute('focusable', 'true');
this._position = { x: 0, y: 0 };
this._coordOrigin = { x: 0, y: 0 };
this._position = {
x: 0,
y: 0,
};
this._coordOrigin = {
x: 0,
y: 0,
};
}
setCoordSize(width, height) {
@ -42,56 +51,56 @@ class GroupPeer extends ElementPeer {
}
getCoordSize() {
return { width: this._coordSize.width, height: this._coordSize.height };
return {
width: this._coordSize.width,
height: this._coordSize.height
};
}
/**
* http://www.w3.org/TR/SVG/coords.html#TransformAttribute
* 7.6 The transform attribute
*
* The value of the transform attribute is a <transform-list>, which is defined
* as a list of transform definitions, which are applied in the order provided.
* The individual transform definitions are separated by whitespace and/or a comma.
* The available types of transform definitions include:
*
* * matrix(<a> <b> <c> <d> <e> <f>), which specifies a transformation in the form
* of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying
* the transformation matrix [a b c d e f].
*
* * translate(<tx> [<ty>]), which specifies a translation by tx and ty.
* If <ty> is not provided, it is assumed to be zero.
*
* * scale(<sx> [<sy>]), which specifies a scale operation by sx and sy.
* If <sy> is not provided, it is assumed to be equal to <sx>.
*
* * rotate(<rotate-angle> [<cx> <cy>]), which specifies a rotation
* by <rotate-angle> degrees about a given point.
* If optional parameters <cx> and <cy> are not supplied, the rotate
* is about the origin of the current user coordinate system. The operation corresponds
* to the matrix [cos(a) sin(a) -sin(a) cos(a) 0 0].
* If optional parameters <cx> and <cy> are supplied, the rotate is
* about the point (<cx>, <cy>). The operation represents the equivalent of the
*following specification: translate(<cx>, <cy>) rotate(<rotate-angle>) translate(-<cx>, -<cy>).
*
* * skewX(<skew-angle>), which specifies a skew transformation along the x-axis.
*
* * skewY(<skew-angle>), which specifies a skew transformation along the y-axis.
* */
* http://www.w3.org/TR/SVG/coords.html#TransformAttribute
* 7.6 The transform attribute
*
* The value of the transform attribute is a <transform-list>, which is defined
* as a list of transform definitions, which are applied in the order provided.
* The individual transform definitions are separated by whitespace and/or a comma.
* The available types of transform definitions include:
*
* * matrix(<a> <b> <c> <d> <e> <f>), which specifies a transformation in the form
* of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying
* the transformation matrix [a b c d e f].
*
* * translate(<tx> [<ty>]), which specifies a translation by tx and ty.
* If <ty> is not provided, it is assumed to be zero.
*
* * scale(<sx> [<sy>]), which specifies a scale operation by sx and sy.
* If <sy> is not provided, it is assumed to be equal to <sx>.
*
* * rotate(<rotate-angle> [<cx> <cy>]), which specifies a rotation
* by <rotate-angle> degrees about a given point.
* If optional parameters <cx> and <cy> are not supplied, the rotate
* is about the origin of the current user coordinate system. The operation corresponds
* to the matrix [cos(a) sin(a) -sin(a) cos(a) 0 0].
* If optional parameters <cx> and <cy> are supplied, the rotate is
* about the point (<cx>, <cy>). The operation represents the equivalent of the
*following specification: translate(<cx>, <cy>) rotate(<rotate-angle>) translate(-<cx>, -<cy>).
*
* * skewX(<skew-angle>), which specifies a skew transformation along the x-axis.
*
* * skewY(<skew-angle>), which specifies a skew transformation along the y-axis.
* */
updateTransform() {
let sx = this._size.width / this._coordSize.width;
let sy = this._size.height / this._coordSize.height;
if (this._coordSize.width > 0) {
const sx = (this._size.width / this._coordSize.width).toFixed(5);
const sy = (this._size.height / this._coordSize.height).toFixed(5);
let cx = this._position.x - this._coordOrigin.x * sx;
let cy = this._position.y - this._coordOrigin.y * sy;
// FIXME: are we sure of this values?
cx = Number.isNaN(cx) ? 0 : cx;
cy = Number.isNaN(cy) ? 0 : cy;
sx = Number.isNaN(sx) ? 0 : sx;
sy = Number.isNaN(sy) ? 0 : sy;
this._native.setAttribute('transform', `translate(${cx},${cy}) scale(${sx},${sy})`);
const cx = (this._position.x - this._coordOrigin.x * sx).toFixed(5);
const cy = (this._position.y - this._coordOrigin.y * sy).toFixed(5);
this._native.setAttribute('transform', `translate(${cx},${cy}) scale(${sx},${sy})`);
} else {
this._native.removeAttribute('transform');
}
}
setOpacity(value) {
@ -135,7 +144,10 @@ class GroupPeer extends ElementPeer {
}
getPosition() {
return { x: this._position.x, y: this._position.y };
return {
x: this._position.x,
y: this._position.y
};
}
append(child) {
@ -144,8 +156,11 @@ class GroupPeer extends ElementPeer {
}
getCoordOrigin() {
return { x: this._coordOrigin.x, y: this._coordOrigin.y };
return {
x: this._coordOrigin.x,
y: this._coordOrigin.y
};
}
}
export default GroupPeer;
export default GroupPeer;