vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-22 14:47:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Start adding SVG icons replacement

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/mindplot/assets/icons/bulb_light_off.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

11
packages/mindplot/assets/icons/bulb_light_on.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

5
packages/mindplot/assets/icons/lock_close.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 404 B

5
packages/mindplot/assets/icons/lock_open.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 404 B

5
packages/mindplot/assets/icons/sign_info.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 278 B

7
packages/mindplot/assets/images/links.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 587 B

175
packages/mindplot/src/components/ImageIcon.js
View File

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

2
packages/mindplot/src/components/LinkIcon.js
View File

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

149
packages/mindplot/src/components/Topic.js
View File

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

9
packages/mindplot/src/index.js
View File

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

115
packages/web2d/src/components/peer/svg/GroupPeer.js
View File

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