@lvce-editor/renderer-process 30.36.2 → 30.37.0

package/dist/rendererProcessMain.js

@@ -5416,6 +5416,62 @@ const take = (uid, transactionId) => {
 
 const rememberFocus = rememberFocus$1;
 
+const getColor = ($Parent, className) => {
+  const $Probe = document.createElement('span');
+  $Probe.className = className;
+  $Probe.hidden = true;
+  $Parent.append($Probe);
+  const color = getComputedStyle($Probe).color;
+  $Probe.remove();
+  return color;
+};
+const getColors = ($Parent, rectangles) => {
+  const colors = new Map();
+  for (const rectangle of rectangles) {
+    if (!colors.has(rectangle.className)) {
+      colors.set(rectangle.className, getColor($Parent, rectangle.className));
+    }
+  }
+  return colors;
+};
+const getOrCreateCanvas = ($Parent, className) => {
+  const existing = $Parent.querySelector(`:scope > canvas.${className}`);
+  if (existing) {
+    return existing;
+  }
+  const $Canvas = document.createElement('canvas');
+  $Canvas.className = className;
+  $Canvas.ariaHidden = 'true';
+  $Parent.append($Canvas);
+  return $Canvas;
+};
+const renderCanvas$1 = ($Viewlet, selector, canvasClassName, width, height, rectangles, revision) => {
+  const $Parent = $Viewlet.matches(selector) ? $Viewlet : $Viewlet.querySelector(selector);
+  if (!$Parent) {
+    return;
+  }
+  const $Canvas = getOrCreateCanvas($Parent, canvasClassName);
+  const devicePixelRatio = globalThis.devicePixelRatio || 1;
+  $Canvas.width = Math.round(width * devicePixelRatio);
+  $Canvas.height = Math.round(height * devicePixelRatio);
+  $Canvas.style.width = `${width}px`;
+  $Canvas.style.height = `${height}px`;
+  $Canvas.dataset.renderRevision = revision;
+  $Canvas.dataset.rectangleCount = String(rectangles.length);
+  const context = $Canvas.getContext('2d');
+  if (!context) {
+    return;
+  }
+  context.resetTransform();
+  context.clearRect(0, 0, $Canvas.width, $Canvas.height);
+  context.scale(devicePixelRatio, devicePixelRatio);
+  const colors = getColors($Parent, rectangles);
+  for (const rectangle of rectangles) {
+    context.fillStyle = colors.get(rectangle.className) || 'currentColor';
+    context.fillRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
+  }
+};
+
 const handleImageLoad = event => {
   const $ImagePreviewImage = event.target;
   const $ImagePreviewCaption = $ImagePreviewImage.nextSibling;
@@ -9487,6 +9543,13 @@ const setProperty = (id, selector, property, value) => {
   }
   $Element[property] = value;
 };
+const renderCanvas = (id, selector, canvasClassName, width, height, rectangles, revision) => {
+  const instance = get$9(id);
+  if (!instance) {
+    return;
+  }
+  renderCanvas$1(instance.state.$Viewlet, selector, canvasClassName, width, height, rectangles, revision);
+};
 const commandHandlers = {
   'Css.addCssStyleSheet': addCssStyleSheet,
   'Viewlet.addCss': addCssStyleSheet,
@@ -9510,6 +9573,7 @@ const commandHandlers = {
   'Viewlet.patchCss': patchCssStyleSheet,
   'Viewlet.registerEventListeners': registerEventListeners,
   'Viewlet.removeKeyBindings': removeKeyBindings,
+  'Viewlet.renderCanvas': renderCanvas,
   'Viewlet.replaceChildren': replaceChildren,
   'Viewlet.send': invoke,
   'Viewlet.setBounds': setBounds$1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/renderer-process",
-  "version": "30.36.2",
+  "version": "30.37.0",
   "keywords": [
     "lvce-editor",
     "renderer-process"