@2112-lab/central-plant 0.1.4 → 0.1.5

package/dist/esm/src/rendering/rendering2D.js

@@ -1 +1,627 @@
-import{createClass as t,classCallCheck as i,defineProperty as n}from"../../_virtual/_rollupPluginBabelHelpers.js";var r=function(){return t(function t(r){var e=this;i(this,t),n(this,"draw",{line:function(t,i,n,r){var s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};e.ctx&&(e.save(),e.setStyles(s),e.ctx.beginPath(),e.ctx.moveTo(t,i),e.ctx.lineTo(n,r),e.ctx.stroke(),e.restore())},rect:function(t,i,n,r){var s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};e.ctx&&(e.save(),e.setStyles(s),s.fillStyle&&e.ctx.fillRect(t,i,n,r),s.strokeStyle&&e.ctx.strokeRect(t,i,n,r),e.restore())},circle:function(t,i,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};e.ctx&&(e.save(),e.setStyles(r),e.ctx.beginPath(),e.ctx.arc(t,i,n,0,2*Math.PI),r.fillStyle&&e.ctx.fill(),r.strokeStyle&&e.ctx.stroke(),e.restore())},ellipse:function(t,i,n,r){var s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{};e.ctx&&(e.save(),e.setStyles(o),e.ctx.beginPath(),e.ctx.ellipse(t,i,n,r,s,0,2*Math.PI),o.fillStyle&&e.ctx.fill(),o.strokeStyle&&e.ctx.stroke(),e.restore())},polygon:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(e.ctx&&!(t.length<3)){e.save(),e.setStyles(i),e.ctx.beginPath(),e.ctx.moveTo(t[0][0],t[0][1]);for(var n=1;n<t.length;n++)e.ctx.lineTo(t[n][0],t[n][1]);e.ctx.closePath(),i.fillStyle&&e.ctx.fill(),i.strokeStyle&&e.ctx.stroke(),e.restore()}},bezierCurve:function(t,i,n,r,s,o,u,a){var l=arguments.length>8&&void 0!==arguments[8]?arguments[8]:{};e.ctx&&(e.save(),e.setStyles(l),e.ctx.beginPath(),e.ctx.moveTo(t,i),e.ctx.bezierCurveTo(n,r,s,o,u,a),e.ctx.stroke(),e.restore())},text:function(t,i,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};e.ctx&&(e.save(),e.setStyles(r),r.fillStyle&&e.ctx.fillText(t,i,n),r.strokeStyle&&e.ctx.strokeText(t,i,n),e.restore())},image:function(t,i,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:null;e.ctx&&t&&(r&&s?e.ctx.drawImage(t,i,n,r,s):e.ctx.drawImage(t,i,n))}}),n(this,"transform",{translate:function(t,i){e.ctx&&e.ctx.translate(t,i)},rotate:function(t){e.ctx&&e.ctx.rotate(t)},scale:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t;e.ctx&&e.ctx.scale(t,i)},transform:function(t,i,n,r,s,o){e.ctx&&e.ctx.transform(t,i,n,r,s,o)},setTransform:function(t,i,n,r,s,o){e.ctx&&e.ctx.setTransform(t,i,n,r,s,o)},resetTransform:function(){e.ctx&&e.ctx.resetTransform()}}),n(this,"gradient",{linear:function(t,i,n,r,s){if(!e.ctx)return null;var o=e.ctx.createLinearGradient(t,i,n,r);return s.forEach(function(t){o.addColorStop(t.offset,t.color)}),o},radial:function(t,i,n,r,s,o,u){if(!e.ctx)return null;var a=e.ctx.createRadialGradient(t,i,n,r,s,o);return u.forEach(function(t){a.addColorStop(t.offset,t.color)}),a}}),n(this,"pattern",{fromImage:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"repeat";return e.ctx&&t?e.ctx.createPattern(t,i):null},fromCanvas:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"repeat";return e.ctx&&t?e.ctx.createPattern(t,i):null}}),n(this,"path",{begin:function(){e.ctx&&e.ctx.beginPath()},close:function(){e.ctx&&e.ctx.closePath()},moveTo:function(t,i){e.ctx&&e.ctx.moveTo(t,i)},lineTo:function(t,i){e.ctx&&e.ctx.lineTo(t,i)},arc:function(t,i,n,r,s){var o=arguments.length>5&&void 0!==arguments[5]&&arguments[5];e.ctx&&e.ctx.arc(t,i,n,r,s,o)},quadraticCurveTo:function(t,i,n,r){e.ctx&&e.ctx.quadraticCurveTo(t,i,n,r)},bezierCurveTo:function(t,i,n,r,s,o){e.ctx&&e.ctx.bezierCurveTo(t,i,n,r,s,o)},fill:function(){e.ctx&&e.ctx.fill()},stroke:function(){e.ctx&&e.ctx.stroke()},clip:function(){e.ctx&&e.ctx.clip()}}),n(this,"measure",{textWidth:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(!e.ctx)return 0;if(i){var n=e.ctx.font;e.ctx.font=i;var r=e.ctx.measureText(t).width;return e.ctx.font=n,r}return e.ctx.measureText(t).width},textMetrics:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(!e.ctx)return null;if(i){var n=e.ctx.font;e.ctx.font=i;var r=e.ctx.measureText(t);return e.ctx.font=n,r}return e.ctx.measureText(t)}}),n(this,"export",{toDataURL:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"image/png",i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:.92;return e.canvas?e.canvas.toDataURL(t,i):""},toBlob:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"image/png",i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:.92;return e.canvas?new Promise(function(n){e.canvas.toBlob(n,t,i)}):Promise.resolve(null)}}),this.canvas=r,this.ctx=null==r?void 0:r.getContext("2d"),this.width=(null==r?void 0:r.width)||800,this.height=(null==r?void 0:r.height)||600,this.pixelRatio=window.devicePixelRatio||1,this.state={transforms:[],styles:[]},this.setupCanvas()},[{key:"setupCanvas",value:function(){this.canvas&&this.ctx&&(this.canvas.width=this.width*this.pixelRatio,this.canvas.height=this.height*this.pixelRatio,this.ctx.scale(this.pixelRatio,this.pixelRatio),this.canvas.style.width=this.width+"px",this.canvas.style.height=this.height+"px")}},{key:"clear",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;this.ctx&&(t?(this.ctx.fillStyle=t,this.ctx.fillRect(0,0,this.width,this.height)):this.ctx.clearRect(0,0,this.width,this.height))}},{key:"save",value:function(){this.ctx&&(this.ctx.save(),this.state.transforms.push(this.ctx.getTransform()),this.state.styles.push({fillStyle:this.ctx.fillStyle,strokeStyle:this.ctx.strokeStyle,lineWidth:this.ctx.lineWidth,font:this.ctx.font,textAlign:this.ctx.textAlign,textBaseline:this.ctx.textBaseline}))}},{key:"restore",value:function(){this.ctx&&(this.ctx.restore(),this.state.transforms.pop(),this.state.styles.pop())}},{key:"setStyles",value:function(t){var i=this;this.ctx&&Object.keys(t).forEach(function(n){void 0!==i.ctx[n]&&(i.ctx[n]=t[n])})}},{key:"resize",value:function(t,i){this.width=t,this.height=i,this.setupCanvas()}},{key:"getDimensions",value:function(){return{width:this.width,height:this.height,pixelRatio:this.pixelRatio}}},{key:"dispose",value:function(){this.state.transforms=[],this.state.styles=[],this.canvas=null,this.ctx=null}}])}();export{r as Rendering2D};
+import { createClass as _createClass, classCallCheck as _classCallCheck, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+
+/**
+ * Rendering2D
+ * Handles 2D rendering operations, canvas drawing, and 2D graphics utilities
+ */
+
+var Rendering2D = /*#__PURE__*/function () {
+  function Rendering2D(_canvas) {
+    var _this = this;
+    _classCallCheck(this, Rendering2D);
+    /**
+     * Drawing primitives
+     */
+    _defineProperty(this, "draw", {
+      /**
+       * Draw a line
+       * @param {number} x1 - Start X
+       * @param {number} y1 - Start Y
+       * @param {number} x2 - End X
+       * @param {number} y2 - End Y
+       * @param {Object} style - Line style
+       */
+      line: function line(x1, y1, x2, y2) {
+        var style = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+        if (!_this.ctx) return;
+        _this.save();
+        _this.setStyles(style);
+        _this.ctx.beginPath();
+        _this.ctx.moveTo(x1, y1);
+        _this.ctx.lineTo(x2, y2);
+        _this.ctx.stroke();
+        _this.restore();
+      },
+      /**
+       * Draw a rectangle
+       * @param {number} x - X position
+       * @param {number} y - Y position
+       * @param {number} width - Width
+       * @param {number} height - Height
+       * @param {Object} style - Rectangle style
+       */
+      rect: function rect(x, y, width, height) {
+        var style = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+        if (!_this.ctx) return;
+        _this.save();
+        _this.setStyles(style);
+        if (style.fillStyle) {
+          _this.ctx.fillRect(x, y, width, height);
+        }
+        if (style.strokeStyle) {
+          _this.ctx.strokeRect(x, y, width, height);
+        }
+        _this.restore();
+      },
+      /**
+       * Draw a circle
+       * @param {number} x - Center X
+       * @param {number} y - Center Y
+       * @param {number} radius - Radius
+       * @param {Object} style - Circle style
+       */
+      circle: function circle(x, y, radius) {
+        var style = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+        if (!_this.ctx) return;
+        _this.save();
+        _this.setStyles(style);
+        _this.ctx.beginPath();
+        _this.ctx.arc(x, y, radius, 0, 2 * Math.PI);
+        if (style.fillStyle) {
+          _this.ctx.fill();
+        }
+        if (style.strokeStyle) {
+          _this.ctx.stroke();
+        }
+        _this.restore();
+      },
+      /**
+       * Draw an ellipse
+       * @param {number} x - Center X
+       * @param {number} y - Center Y
+       * @param {number} radiusX - X radius
+       * @param {number} radiusY - Y radius
+       * @param {number} rotation - Rotation in radians
+       * @param {Object} style - Ellipse style
+       */
+      ellipse: function ellipse(x, y, radiusX, radiusY) {
+        var rotation = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+        var style = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
+        if (!_this.ctx) return;
+        _this.save();
+        _this.setStyles(style);
+        _this.ctx.beginPath();
+        _this.ctx.ellipse(x, y, radiusX, radiusY, rotation, 0, 2 * Math.PI);
+        if (style.fillStyle) {
+          _this.ctx.fill();
+        }
+        if (style.strokeStyle) {
+          _this.ctx.stroke();
+        }
+        _this.restore();
+      },
+      /**
+       * Draw a polygon
+       * @param {Array} points - Array of [x, y] points
+       * @param {Object} style - Polygon style
+       */
+      polygon: function polygon(points) {
+        var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        if (!_this.ctx || points.length < 3) return;
+        _this.save();
+        _this.setStyles(style);
+        _this.ctx.beginPath();
+        _this.ctx.moveTo(points[0][0], points[0][1]);
+        for (var i = 1; i < points.length; i++) {
+          _this.ctx.lineTo(points[i][0], points[i][1]);
+        }
+        _this.ctx.closePath();
+        if (style.fillStyle) {
+          _this.ctx.fill();
+        }
+        if (style.strokeStyle) {
+          _this.ctx.stroke();
+        }
+        _this.restore();
+      },
+      /**
+       * Draw a bezier curve
+       * @param {number} x1 - Start X
+       * @param {number} y1 - Start Y
+       * @param {number} cp1x - Control point 1 X
+       * @param {number} cp1y - Control point 1 Y
+       * @param {number} cp2x - Control point 2 X
+       * @param {number} cp2y - Control point 2 Y
+       * @param {number} x2 - End X
+       * @param {number} y2 - End Y
+       * @param {Object} style - Curve style
+       */
+      bezierCurve: function bezierCurve(x1, y1, cp1x, cp1y, cp2x, cp2y, x2, y2) {
+        var style = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : {};
+        if (!_this.ctx) return;
+        _this.save();
+        _this.setStyles(style);
+        _this.ctx.beginPath();
+        _this.ctx.moveTo(x1, y1);
+        _this.ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2);
+        _this.ctx.stroke();
+        _this.restore();
+      },
+      /**
+       * Draw text
+       * @param {string} text - Text to draw
+       * @param {number} x - X position
+       * @param {number} y - Y position
+       * @param {Object} style - Text style
+       */
+      text: function text(_text, x, y) {
+        var style = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+        if (!_this.ctx) return;
+        _this.save();
+        _this.setStyles(style);
+        if (style.fillStyle) {
+          _this.ctx.fillText(_text, x, y);
+        }
+        if (style.strokeStyle) {
+          _this.ctx.strokeText(_text, x, y);
+        }
+        _this.restore();
+      },
+      /**
+       * Draw an image
+       * @param {HTMLImageElement} image - Image to draw
+       * @param {number} x - X position
+       * @param {number} y - Y position
+       * @param {number} width - Width (optional)
+       * @param {number} height - Height (optional)
+       */
+      image: function image(_image, x, y) {
+        var width = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+        var height = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+        if (!_this.ctx || !_image) return;
+        if (width && height) {
+          _this.ctx.drawImage(_image, x, y, width, height);
+        } else {
+          _this.ctx.drawImage(_image, x, y);
+        }
+      }
+    });
+    /**
+     * Transform operations
+     */
+    _defineProperty(this, "transform", {
+      /**
+       * Translate coordinate system
+       * @param {number} x - X offset
+       * @param {number} y - Y offset
+       */
+      translate: function translate(x, y) {
+        if (!_this.ctx) return;
+        _this.ctx.translate(x, y);
+      },
+      /**
+       * Rotate coordinate system
+       * @param {number} angle - Rotation angle in radians
+       */
+      rotate: function rotate(angle) {
+        if (!_this.ctx) return;
+        _this.ctx.rotate(angle);
+      },
+      /**
+       * Scale coordinate system
+       * @param {number} x - X scale factor
+       * @param {number} y - Y scale factor
+       */
+      scale: function scale(x) {
+        var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;
+        if (!_this.ctx) return;
+        _this.ctx.scale(x, y);
+      },
+      /**
+       * Apply transformation matrix
+       * @param {number} a - Horizontal scaling
+       * @param {number} b - Horizontal skewing
+       * @param {number} c - Vertical skewing
+       * @param {number} d - Vertical scaling
+       * @param {number} e - Horizontal translation
+       * @param {number} f - Vertical translation
+       */
+      transform: function transform(a, b, c, d, e, f) {
+        if (!_this.ctx) return;
+        _this.ctx.transform(a, b, c, d, e, f);
+      },
+      /**
+       * Set transformation matrix
+       * @param {number} a - Horizontal scaling
+       * @param {number} b - Horizontal skewing
+       * @param {number} c - Vertical skewing
+       * @param {number} d - Vertical scaling
+       * @param {number} e - Horizontal translation
+       * @param {number} f - Vertical translation
+       */
+      setTransform: function setTransform(a, b, c, d, e, f) {
+        if (!_this.ctx) return;
+        _this.ctx.setTransform(a, b, c, d, e, f);
+      },
+      /**
+       * Reset transformation matrix to identity
+       */
+      resetTransform: function resetTransform() {
+        if (!_this.ctx) return;
+        _this.ctx.resetTransform();
+      }
+    });
+    /**
+     * Gradient utilities
+     */
+    _defineProperty(this, "gradient", {
+      /**
+       * Create linear gradient
+       * @param {number} x1 - Start X
+       * @param {number} y1 - Start Y
+       * @param {number} x2 - End X
+       * @param {number} y2 - End Y
+       * @param {Array} colorStops - Array of {offset, color} objects
+       * @returns {CanvasGradient} Linear gradient
+       */
+      linear: function linear(x1, y1, x2, y2, colorStops) {
+        if (!_this.ctx) return null;
+        var gradient = _this.ctx.createLinearGradient(x1, y1, x2, y2);
+        colorStops.forEach(function (stop) {
+          gradient.addColorStop(stop.offset, stop.color);
+        });
+        return gradient;
+      },
+      /**
+       * Create radial gradient
+       * @param {number} x1 - Inner circle center X
+       * @param {number} y1 - Inner circle center Y
+       * @param {number} r1 - Inner circle radius
+       * @param {number} x2 - Outer circle center X
+       * @param {number} y2 - Outer circle center Y
+       * @param {number} r2 - Outer circle radius
+       * @param {Array} colorStops - Array of {offset, color} objects
+       * @returns {CanvasGradient} Radial gradient
+       */
+      radial: function radial(x1, y1, r1, x2, y2, r2, colorStops) {
+        if (!_this.ctx) return null;
+        var gradient = _this.ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
+        colorStops.forEach(function (stop) {
+          gradient.addColorStop(stop.offset, stop.color);
+        });
+        return gradient;
+      }
+    });
+    /**
+     * Pattern utilities
+     */
+    _defineProperty(this, "pattern", {
+      /**
+       * Create pattern from image
+       * @param {HTMLImageElement} image - Source image
+       * @param {string} repetition - 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'
+       * @returns {CanvasPattern} Pattern
+       */
+      fromImage: function fromImage(image) {
+        var repetition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'repeat';
+        if (!_this.ctx || !image) return null;
+        return _this.ctx.createPattern(image, repetition);
+      },
+      /**
+       * Create pattern from canvas
+       * @param {HTMLCanvasElement} canvas - Source canvas
+       * @param {string} repetition - 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'
+       * @returns {CanvasPattern} Pattern
+       */
+      fromCanvas: function fromCanvas(canvas) {
+        var repetition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'repeat';
+        if (!_this.ctx || !canvas) return null;
+        return _this.ctx.createPattern(canvas, repetition);
+      }
+    });
+    /**
+     * Path utilities
+     */
+    _defineProperty(this, "path", {
+      /**
+       * Begin new path
+       */
+      begin: function begin() {
+        if (!_this.ctx) return;
+        _this.ctx.beginPath();
+      },
+      /**
+       * Close current path
+       */
+      close: function close() {
+        if (!_this.ctx) return;
+        _this.ctx.closePath();
+      },
+      /**
+       * Move to point
+       * @param {number} x - X coordinate
+       * @param {number} y - Y coordinate
+       */
+      moveTo: function moveTo(x, y) {
+        if (!_this.ctx) return;
+        _this.ctx.moveTo(x, y);
+      },
+      /**
+       * Line to point
+       * @param {number} x - X coordinate
+       * @param {number} y - Y coordinate
+       */
+      lineTo: function lineTo(x, y) {
+        if (!_this.ctx) return;
+        _this.ctx.lineTo(x, y);
+      },
+      /**
+       * Arc to point
+       * @param {number} x - Center X
+       * @param {number} y - Center Y
+       * @param {number} radius - Arc radius
+       * @param {number} startAngle - Start angle in radians
+       * @param {number} endAngle - End angle in radians
+       * @param {boolean} counterclockwise - Arc direction
+       */
+      arc: function arc(x, y, radius, startAngle, endAngle) {
+        var counterclockwise = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+        if (!_this.ctx) return;
+        _this.ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);
+      },
+      /**
+       * Quadratic curve to point
+       * @param {number} cpx - Control point X
+       * @param {number} cpy - Control point Y
+       * @param {number} x - End X
+       * @param {number} y - End Y
+       */
+      quadraticCurveTo: function quadraticCurveTo(cpx, cpy, x, y) {
+        if (!_this.ctx) return;
+        _this.ctx.quadraticCurveTo(cpx, cpy, x, y);
+      },
+      /**
+       * Bezier curve to point
+       * @param {number} cp1x - Control point 1 X
+       * @param {number} cp1y - Control point 1 Y
+       * @param {number} cp2x - Control point 2 X
+       * @param {number} cp2y - Control point 2 Y
+       * @param {number} x - End X
+       * @param {number} y - End Y
+       */
+      bezierCurveTo: function bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+        if (!_this.ctx) return;
+        _this.ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+      },
+      /**
+       * Fill current path
+       */
+      fill: function fill() {
+        if (!_this.ctx) return;
+        _this.ctx.fill();
+      },
+      /**
+       * Stroke current path
+       */
+      stroke: function stroke() {
+        if (!_this.ctx) return;
+        _this.ctx.stroke();
+      },
+      /**
+       * Clip to current path
+       */
+      clip: function clip() {
+        if (!_this.ctx) return;
+        _this.ctx.clip();
+      }
+    });
+    /**
+     * Measurement utilities
+     */
+    _defineProperty(this, "measure", {
+      /**
+       * Measure text width
+       * @param {string} text - Text to measure
+       * @param {string} font - Font specification
+       * @returns {number} Text width in pixels
+       */
+      textWidth: function textWidth(text) {
+        var font = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+        if (!_this.ctx) return 0;
+        if (font) {
+          var oldFont = _this.ctx.font;
+          _this.ctx.font = font;
+          var width = _this.ctx.measureText(text).width;
+          _this.ctx.font = oldFont;
+          return width;
+        }
+        return _this.ctx.measureText(text).width;
+      },
+      /**
+       * Get text metrics
+       * @param {string} text - Text to measure
+       * @param {string} font - Font specification
+       * @returns {TextMetrics} Text metrics object
+       */
+      textMetrics: function textMetrics(text) {
+        var font = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+        if (!_this.ctx) return null;
+        if (font) {
+          var oldFont = _this.ctx.font;
+          _this.ctx.font = font;
+          var metrics = _this.ctx.measureText(text);
+          _this.ctx.font = oldFont;
+          return metrics;
+        }
+        return _this.ctx.measureText(text);
+      }
+    });
+    /**
+     * Export utilities
+     */
+    _defineProperty(this, "export", {
+      /**
+       * Get canvas as data URL
+       * @param {string} type - Image type ('image/png', 'image/jpeg', etc.)
+       * @param {number} quality - Quality for lossy formats (0-1)
+       * @returns {string} Data URL
+       */
+      toDataURL: function toDataURL() {
+        var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'image/png';
+        var quality = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.92;
+        if (!_this.canvas) return '';
+        return _this.canvas.toDataURL(type, quality);
+      },
+      /**
+       * Get canvas as blob
+       * @param {string} type - Image type
+       * @param {number} quality - Quality for lossy formats
+       * @returns {Promise<Blob>} Canvas blob
+       */
+      toBlob: function toBlob() {
+        var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'image/png';
+        var quality = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.92;
+        if (!_this.canvas) return Promise.resolve(null);
+        return new Promise(function (resolve) {
+          _this.canvas.toBlob(resolve, type, quality);
+        });
+      }
+    });
+    this.canvas = _canvas;
+    this.ctx = _canvas === null || _canvas === void 0 ? void 0 : _canvas.getContext('2d');
+    this.width = (_canvas === null || _canvas === void 0 ? void 0 : _canvas.width) || 800;
+    this.height = (_canvas === null || _canvas === void 0 ? void 0 : _canvas.height) || 600;
+    this.pixelRatio = window.devicePixelRatio || 1;
+    this.state = {
+      transforms: [],
+      styles: []
+    };
+    this.setupCanvas();
+  }
+
+  /**
+   * Setup canvas for high DPI displays
+   */
+  return _createClass(Rendering2D, [{
+    key: "setupCanvas",
+    value: function setupCanvas() {
+      if (!this.canvas || !this.ctx) return;
+
+      // Set actual size in memory (scaled for DPI)
+      this.canvas.width = this.width * this.pixelRatio;
+      this.canvas.height = this.height * this.pixelRatio;
+
+      // Scale the drawing context back to logical size
+      this.ctx.scale(this.pixelRatio, this.pixelRatio);
+
+      // Set display size (CSS pixels)
+      this.canvas.style.width = this.width + 'px';
+      this.canvas.style.height = this.height + 'px';
+    }
+
+    /**
+     * Clear the entire canvas
+     * @param {string} color - Optional background color
+     */
+  }, {
+    key: "clear",
+    value: function clear() {
+      var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      if (!this.ctx) return;
+      if (color) {
+        this.ctx.fillStyle = color;
+        this.ctx.fillRect(0, 0, this.width, this.height);
+      } else {
+        this.ctx.clearRect(0, 0, this.width, this.height);
+      }
+    }
+
+    /**
+     * Save current drawing state
+     */
+  }, {
+    key: "save",
+    value: function save() {
+      if (!this.ctx) return;
+      this.ctx.save();
+      this.state.transforms.push(this.ctx.getTransform());
+      this.state.styles.push({
+        fillStyle: this.ctx.fillStyle,
+        strokeStyle: this.ctx.strokeStyle,
+        lineWidth: this.ctx.lineWidth,
+        font: this.ctx.font,
+        textAlign: this.ctx.textAlign,
+        textBaseline: this.ctx.textBaseline
+      });
+    }
+
+    /**
+     * Restore previous drawing state
+     */
+  }, {
+    key: "restore",
+    value: function restore() {
+      if (!this.ctx) return;
+      this.ctx.restore();
+      this.state.transforms.pop();
+      this.state.styles.pop();
+    }
+
+    /**
+     * Set drawing styles
+     * @param {Object} styles - Style properties
+     */
+  }, {
+    key: "setStyles",
+    value: function setStyles(styles) {
+      var _this2 = this;
+      if (!this.ctx) return;
+      Object.keys(styles).forEach(function (key) {
+        if (_this2.ctx[key] !== undefined) {
+          _this2.ctx[key] = styles[key];
+        }
+      });
+    }
+  }, {
+    key: "resize",
+    value:
+    /**
+     * Resize canvas
+     * @param {number} width - New width
+     * @param {number} height - New height
+     */
+    function resize(width, height) {
+      this.width = width;
+      this.height = height;
+      this.setupCanvas();
+    }
+
+    /**
+     * Get canvas dimensions
+     * @returns {Object} Canvas dimensions
+     */
+  }, {
+    key: "getDimensions",
+    value: function getDimensions() {
+      return {
+        width: this.width,
+        height: this.height,
+        pixelRatio: this.pixelRatio
+      };
+    }
+
+    /**
+     * Dispose of rendering manager
+     */
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      this.state.transforms = [];
+      this.state.styles = [];
+      this.canvas = null;
+      this.ctx = null;
+    }
+  }]);
+}();
+
+export { Rendering2D };