Prevent dom clutter #168

Merged
merged 3 commits into from Dec 7, 2012
Jump to file or symbol
Failed to load files and symbols.
+48 −23
Diff settings

Always

Just for now

View
@@ -20,6 +20,22 @@ define([
// targets webkit based browsers from version 530.0 to 534.4
var isWebkitPatternBug = /AppleWebKit\/53([0-3]|4.([0-4]))/.test(navigator.appVersion);
+ /**
+ * Sets a style property on a style object. Avoids unnecessary creation of
+ * style attributes in the DOM, to ease debugging.
+ *
+ * @param {CSSStyleDeclaration} style The style object to set the property on
+ * @param {string} name The name of the property to set
+ * @param {string} value The value of the property to set.
+ */
+ function setStyle(style, name, value) {

This comment has been minimized.

Show comment Hide comment
@basecode

basecode Dec 7, 2012

Member

Is closured. How are you going to test that function?

@basecode

basecode Dec 7, 2012

Member

Is closured. How are you going to test that function?

This comment has been minimized.

Show comment Hide comment
@davidaurelio

davidaurelio Dec 7, 2012

Member

I’m not. It uses 3rd-Party API and is part of the implementation, not the public interface

@davidaurelio

davidaurelio Dec 7, 2012

Member

I’m not. It uses 3rd-Party API and is part of the implementation, not the public interface

This comment has been minimized.

Show comment Hide comment
@basecode

basecode Dec 7, 2012

Member

Yep, you're right!

@basecode

basecode Dec 7, 2012

Member

Yep, you're right!

+ if (value) {
+ style[name] = value;
+ } else if (style[name]) { // only remove if set to prevent empty style attributes in the DOM
+ style[name] = '';
+ }
+ }
+
// Math
var min = Math.min;
var max = Math.max;
@@ -41,19 +57,20 @@ define([
fontPrefix = AssetController.handlers.Font.prefix;
var basicAttributeMap = {
- cap: 'stroke-linecap',
- join: 'stroke-linejoin',
- miterLimit: 'stroke-miterlimit',
- opacity: 'opacity',
- fillOpacity: 'fill-opacity',
- strokeOpacity: 'stroke-opacity',
- fontSize: 'font-size',
- fontWeight: 'font-weight',
- fontStyle: 'font-style',
- textAnchor: 'text-anchor',
- text: 'text',
- cursor: 'cursor',
- fillRule: 'fill-rule'
+ // bonsai attribute: [svg attribute, default value]
+ cap: ['stroke-linecap', 'butt'],
+ join: ['stroke-linejoin', 'miter'],
+ miterLimit: ['stroke-miterlimit', '4'],
+ opacity: ['opacity', '1'],
+ fillOpacity: ['fill-opacity', '1'],
+ strokeOpacity: ['stroke-opacity', '1'],
+ fontSize: ['font-size'],
+ fontWeight: ['font-weight'],
+ fontStyle: ['font-style'],
+ textAnchor: ['text-anchor', 'start'],
+ text: ['text'],
+ cursor: ['cursor', 'inherit'],
+ fillRule: ['fill-rule', 'inherit']
};
var eventTypes = [
@@ -130,17 +147,21 @@ define([
value = attributes[i];
if (i in basicAttributeMap) {
- if (value != null) {
- el.setAttribute(basicAttributeMap[i], value);
- } else if (value === null) {
- el.removeAttribute(basicAttributeMap[i]);
+ var attributeInfo = basicAttributeMap[i];
+ var attributeName = attributeInfo[0], defaultValue = attributeInfo[1];
+
+ var isInitalValue = '' + value === defaultValue;
+ if (value !== null && !isInitalValue) {
+ el.setAttribute(attributeName, value);
+ } else if (value === null || isInitalValue) {
+ el.removeAttribute(attributeName);
}
continue;
}
switch (i) {
case 'interactive':
- el.style.pointerEvents = value ? 'inherit' : 'none';
+ setStyle(el.style, 'pointerEvents', value ? '' : 'none');
break;
case 'fontFamily':
value = fontIDs[value] || value;
@@ -179,10 +200,14 @@ define([
break;
case 'matrix':
if (value != null) {
- el.setAttribute(
- 'transform',
- matrixToString(value)
- );
+ // clear transform attribute for identity matrix
+ var strMatrix = matrixToString(value);
+ if (strMatrix == 'matrix(1,0,0,1,0,0)') {
+ // this is the default
+ el.removeAttribute('transform');
+ } else {
+ el.setAttribute('transform', strMatrix);
+ }
} else if (value === null) {
el.removeAttribute('transform');
}
@@ -502,7 +527,7 @@ define([
}
if (attr.visible != null) {
- element.style.visibility = attr.visible ? '' : 'hidden';
+ setStyle(element.style, 'visibility', attr.visible ? '' : 'hidden');
}
if (type === 'Path' || type === 'Text' || type === 'TextSpan') {