diff --git a/src/dom_components/index.js b/src/dom_components/index.js index 5259166c1..42ee9af6d 100644 --- a/src/dom_components/index.js +++ b/src/dom_components/index.js @@ -59,6 +59,7 @@ import ComponentImageView from './view/ComponentImageView'; import ComponentScript from './model/ComponentScript'; import ComponentScriptView from './view/ComponentScriptView'; import ComponentSvg from './model/ComponentSvg'; +import ComponentSvgIn from './model/ComponentSvgIn'; import ComponentSvgView from './view/ComponentSvgView'; import ComponentComment from './model/ComponentComment'; import ComponentCommentView from './view/ComponentCommentView'; @@ -135,6 +136,11 @@ export default () => { model: ComponentScript, view: ComponentScriptView }, + { + id: 'svg-in', + model: ComponentSvgIn, + view: ComponentSvgView + }, { id: 'svg', model: ComponentSvg, diff --git a/src/dom_components/model/ComponentSvg.js b/src/dom_components/model/ComponentSvg.js index 348d9e4d1..6f1bdd988 100644 --- a/src/dom_components/model/ComponentSvg.js +++ b/src/dom_components/model/ComponentSvg.js @@ -4,6 +4,7 @@ export default Component.extend( { defaults: { ...Component.prototype.defaults, + resizable: { ratioDefault: 1 }, highlightable: 0 }, @@ -17,15 +18,9 @@ export default Component.extend( { isComponent(el) { if (SVGElement && el instanceof SVGElement) { - // Some SVG elements require uppercase letters (eg. ) - const tagName = el.tagName; - // Make the root resizable - const resizable = tagName == 'svg' ? true : false; - return { - tagName, - type: 'svg', - resizable + tagName: el.tagName, + type: 'svg' }; } } diff --git a/src/dom_components/model/ComponentSvgIn.js b/src/dom_components/model/ComponentSvgIn.js new file mode 100644 index 000000000..dbf05f195 --- /dev/null +++ b/src/dom_components/model/ComponentSvgIn.js @@ -0,0 +1,26 @@ +import Component from './ComponentSvg'; + +/** + * Component for inner SVG elements + */ +export default Component.extend( + { + defaults: { + ...Component.prototype.defaults, + selectable: false, + hoverable: false, + layerable: false + } + }, + { + isComponent(el) { + if (Component.isComponent(el) && el.tagName.toLowerCase() !== 'svg') { + console.log('SVG in', el); + return { + tagName: el.tagName, + type: 'svg-in' + }; + } + } + } +);