diff --git a/packages/mindplot/assets/icons/bulb_light_off.svg b/packages/mindplot/assets/icons/bulb_light_off.svg new file mode 100644 index 00000000..7496b854 --- /dev/null +++ b/packages/mindplot/assets/icons/bulb_light_off.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/bulb_light_on.svg b/packages/mindplot/assets/icons/bulb_light_on.svg new file mode 100644 index 00000000..c88cb275 --- /dev/null +++ b/packages/mindplot/assets/icons/bulb_light_on.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/mindplot/assets/icons/lock_close.svg b/packages/mindplot/assets/icons/lock_close.svg new file mode 100644 index 00000000..8d0a9b88 --- /dev/null +++ b/packages/mindplot/assets/icons/lock_close.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/mindplot/assets/icons/lock_open.svg b/packages/mindplot/assets/icons/lock_open.svg new file mode 100644 index 00000000..8d0a9b88 --- /dev/null +++ b/packages/mindplot/assets/icons/lock_open.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/mindplot/assets/icons/sign_info.svg b/packages/mindplot/assets/icons/sign_info.svg new file mode 100644 index 00000000..0842a79c --- /dev/null +++ b/packages/mindplot/assets/icons/sign_info.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/mindplot/assets/images/links.svg b/packages/mindplot/assets/images/links.svg new file mode 100644 index 00000000..43c700f5 --- /dev/null +++ b/packages/mindplot/assets/images/links.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/mindplot/src/components/ImageIcon.js b/packages/mindplot/src/components/ImageIcon.js index d606cde9..0de0c5ae 100644 --- a/packages/mindplot/src/components/ImageIcon.js +++ b/packages/mindplot/src/components/ImageIcon.js @@ -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; diff --git a/packages/mindplot/src/components/LinkIcon.js b/packages/mindplot/src/components/LinkIcon.js index 0288e9ae..c9ba7fab 100644 --- a/packages/mindplot/src/components/LinkIcon.js +++ b/packages/mindplot/src/components/LinkIcon.js @@ -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) { diff --git a/packages/mindplot/src/components/Topic.js b/packages/mindplot/src/components/Topic.js index ae068505..e5edeb1a 100644 --- a/packages/mindplot/src/components/Topic.js +++ b/packages/mindplot/src/components/Topic.js @@ -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; \ No newline at end of file diff --git a/packages/mindplot/src/index.js b/packages/mindplot/src/index.js index 8d503168..d4cd1edd 100644 --- a/packages/mindplot/src/index.js +++ b/packages/mindplot/src/index.js @@ -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, +}; \ No newline at end of file diff --git a/packages/web2d/src/components/peer/svg/GroupPeer.js b/packages/web2d/src/components/peer/svg/GroupPeer.js index 005b6039..a799b9fa 100644 --- a/packages/web2d/src/components/peer/svg/GroupPeer.js +++ b/packages/web2d/src/components/peer/svg/GroupPeer.js @@ -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 , 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( ), 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( []), which specifies a translation by tx and ty. - * If is not provided, it is assumed to be zero. - * - * * scale( []), which specifies a scale operation by sx and sy. - * If is not provided, it is assumed to be equal to . - * - * * rotate( [ ]), which specifies a rotation - * by degrees about a given point. - * If optional parameters and 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 and are supplied, the rotate is - * about the point (, ). The operation represents the equivalent of the - *following specification: translate(, ) rotate() translate(-, -). - * - * * skewX(), which specifies a skew transformation along the x-axis. - * - * * skewY(), 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 , 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( ), 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( []), which specifies a translation by tx and ty. + * If is not provided, it is assumed to be zero. + * + * * scale( []), which specifies a scale operation by sx and sy. + * If is not provided, it is assumed to be equal to . + * + * * rotate( [ ]), which specifies a rotation + * by degrees about a given point. + * If optional parameters and 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 and are supplied, the rotate is + * about the point (, ). The operation represents the equivalent of the + *following specification: translate(, ) rotate() translate(-, -). + * + * * skewX(), which specifies a skew transformation along the x-axis. + * + * * skewY(), 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; \ No newline at end of file