You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.7 KiB
113 lines
3.7 KiB
import Context from './context'; |
|
import imageUtils from './image'; |
|
|
|
function SVGCanvasElement(options) { |
|
|
|
this.ctx = new Context(options); |
|
this.svg = this.ctx.__root; |
|
|
|
// sync attributes to svg |
|
var svg = this.svg; |
|
var _this = this; |
|
|
|
var wrapper = document.createElement('div'); |
|
wrapper.style.display = 'inline-block'; |
|
wrapper.appendChild(svg); |
|
this.wrapper = wrapper; |
|
|
|
Object.defineProperty(this, 'className', { |
|
get: function() { |
|
return wrapper.getAttribute('class') || ''; |
|
}, |
|
set: function(val) { |
|
return wrapper.setAttribute('class', val); |
|
} |
|
}); |
|
|
|
Object.defineProperty(this, 'tagName', { |
|
get: function() { |
|
return "CANVAS"; |
|
}, |
|
set: function() {} // no-op |
|
}); |
|
|
|
["width", "height"].forEach(function(prop) { |
|
Object.defineProperty(_this, prop, { |
|
get: function() { |
|
return svg.getAttribute(prop) | 0; |
|
}, |
|
set: function(val) { |
|
if (isNaN(val) || (typeof val === "undefined")) { |
|
return; |
|
} |
|
_this.ctx[prop] = val; |
|
svg.setAttribute(prop, val); |
|
return wrapper[prop] = val; |
|
} |
|
}); |
|
}); |
|
|
|
["style", "id"].forEach(function(prop) { |
|
Object.defineProperty(_this, prop, { |
|
get: function() { |
|
return wrapper[prop]; |
|
}, |
|
set: function(val) { |
|
if (typeof val !== "undefined") { |
|
return wrapper[prop] = val; |
|
} |
|
} |
|
}); |
|
}); |
|
|
|
["getBoundingClientRect"].forEach(function(fn) { |
|
_this[fn] = function() { |
|
return svg[fn](); |
|
}; |
|
}); |
|
} |
|
|
|
SVGCanvasElement.prototype.getContext = function(type) { |
|
if (type !== '2d') { |
|
throw new Error('Unsupported type of context for SVGCanvas'); |
|
} |
|
|
|
return this.ctx; |
|
}; |
|
|
|
// you should always use URL.revokeObjectURL after your work done |
|
SVGCanvasElement.prototype.toObjectURL = function() { |
|
var data = new XMLSerializer().serializeToString(this.svg); |
|
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'}); |
|
return URL.createObjectURL(svg); |
|
}; |
|
|
|
/** |
|
* toDataURL returns a data URI containing a representation of the image in the format specified by the type parameter. |
|
* |
|
* @param {String} type A DOMString indicating the image format. The default type is image/svg+xml; this image format will be also used if the specified type is not supported. |
|
* @param {Number} encoderOptions A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range. |
|
* @param {Boolean} options.async Will return a Promise<String> if true, must be set to true if type is not image/svg+xml |
|
*/ |
|
SVGCanvasElement.prototype.toDataURL = function(type, encoderOptions, options) { |
|
return imageUtils.toDataURL(this.svg, this.width, this.height, type, encoderOptions, options) |
|
}; |
|
|
|
SVGCanvasElement.prototype.addEventListener = function() { |
|
return this.svg.addEventListener.apply(this.svg, arguments); |
|
}; |
|
|
|
// will return wrapper element: <div><svg></svg></div> |
|
SVGCanvasElement.prototype.getElement = function() { |
|
return this.wrapper; |
|
}; |
|
|
|
SVGCanvasElement.prototype.getAttribute = function(prop) { |
|
return this.wrapper.getAttribute(prop); |
|
}; |
|
|
|
SVGCanvasElement.prototype.setAttribute = function(prop, val) { |
|
this.wrapper.setAttribute(prop, val); |
|
}; |
|
|
|
export default SVGCanvasElement;
|
|
|