mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-10 17:33:24 +01:00
Start adding SVG icons replacement
This commit is contained in:
parent
c503c590d9
commit
5496d66a90
11
packages/mindplot/assets/icons/bulb_light_off.svg
Normal file
11
packages/mindplot/assets/icons/bulb_light_off.svg
Normal 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 |
11
packages/mindplot/assets/icons/bulb_light_on.svg
Normal file
11
packages/mindplot/assets/icons/bulb_light_on.svg
Normal 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 |
5
packages/mindplot/assets/icons/lock_close.svg
Normal file
5
packages/mindplot/assets/icons/lock_close.svg
Normal 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 |
5
packages/mindplot/assets/icons/lock_open.svg
Normal file
5
packages/mindplot/assets/icons/lock_open.svg
Normal 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 |
5
packages/mindplot/assets/icons/sign_info.svg
Normal file
5
packages/mindplot/assets/icons/sign_info.svg
Normal 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 |
7
packages/mindplot/assets/images/links.svg
Normal file
7
packages/mindplot/assets/images/links.svg
Normal 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 |
@ -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;
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
@ -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,
|
||||
};
|
@ -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;
|
Loading…
Reference in New Issue
Block a user