@lvce-editor/renderer-process 30.51.0 → 30.52.0

package/dist/rendererProcessMain.js

@@ -9655,7 +9655,101 @@ const setDragData = (viewletId, dragData) => {
 const getDragData = () => {
   return getCurrent();
 };
+
+// Keep the actual patch baseline intact while a component DOM preview is displayed.
+const restoreComponentDom = viewletId => {
+  const instance = get$a(viewletId);
+  const $Original = instance?.componentDomOriginal;
+  if (!$Original) {
+    return;
+  }
+  const references = instance.componentDomReferences || [];
+  for (const {
+    placeholder,
+    uid
+  } of references) {
+    const $Child = get$a(uid)?.state.$Viewlet;
+    if ($Child) {
+      placeholder.replaceWith($Child);
+    } else {
+      placeholder.remove();
+    }
+  }
+  instance.state.$Viewlet.replaceWith($Original);
+  set$a(viewletId, {
+    ...instance,
+    componentDom: undefined,
+    componentDomOriginal: undefined,
+    componentDomReferences: undefined,
+    state: {
+      ...instance.state,
+      $Viewlet: $Original
+    }
+  });
+};
+const setComponentDom = (viewletId, dom) => {
+  const instance = get$a(viewletId);
+  if (!instance) {
+    return;
+  }
+  const {
+    $Viewlet
+  } = instance.state;
+  const $Original = instance.componentDomOriginal || $Viewlet;
+  const references = [...(instance.componentDomReferences || [])];
+  const newReferences = [];
+  for (const node of dom) {
+    if (node.type !== Reference || references.some(reference => reference.uid === node.uid)) {
+      continue;
+    }
+    const $Child = get$a(node.uid)?.state.$Viewlet;
+    if (!$Child || $Child === $Original || !$Original.contains($Child)) {
+      throw new Error('Component DOM references must belong to the edited component');
+    }
+    newReferences.push({
+      child: $Child,
+      uid: node.uid
+    });
+  }
+  for (const {
+    child,
+    uid
+  } of newReferences) {
+    const placeholder = document.createComment('component-dom-reference');
+    child.before(placeholder);
+    references.push({
+      placeholder,
+      uid
+    });
+  }
+  set$a(viewletId, {
+    ...instance,
+    componentDomOriginal: $Original,
+    componentDomReferences: references
+  });
+  // Render against a detached copy so focus preservation cannot move nodes out of the baseline.
+  let $Preview;
+  try {
+    $Preview = rememberFocus($Viewlet.cloneNode(true), dom, instance.factory.Events, viewletId);
+  } catch (error) {
+    restoreComponentDom(viewletId);
+    throw error;
+  }
+  $Viewlet.replaceWith($Preview);
+  set$a(viewletId, {
+    ...instance,
+    componentDom: dom,
+    componentDomOriginal: $Original,
+    componentDomReferences: references,
+    state: {
+      ...instance.state,
+      $Viewlet: $Preview
+    }
+  });
+};
+const getComponentDom = viewletId => get$a(viewletId)?.componentDom;
 const setDom = (viewletId, dom) => {
+  restoreComponentDom(viewletId);
   const instance = get$a(viewletId);
   if (!instance) {
     return;
@@ -9669,6 +9763,7 @@ const setDom = (viewletId, dom) => {
   renderInto($Viewlet, dom, Events);
 };
 const setDom2 = (viewletId, dom) => {
+  restoreComponentDom(viewletId);
   const instance = get$a(viewletId);
   if (!instance) {
     return;
@@ -9700,6 +9795,10 @@ const setDom2 = (viewletId, dom) => {
   });
 };
 const setPatches = (uid, patches) => {
+  if (patches.length === 0) {
+    return;
+  }
+  restoreComponentDom(uid);
   const instance = get$a(uid);
   if (!instance) {
     return;
@@ -9771,6 +9870,7 @@ const commitPending = (uid, transactionId) => {
 const dispose$3 = id => {
   try {
     number(id);
+    restoreComponentDom(id);
     unregisterView(id);
     const instance = get$a(id);
     if (!instance) {
@@ -10053,6 +10153,7 @@ const commandHandlers = {
   'Viewlet.focusElementByName': focusElementByName,
   'Viewlet.focusSelector': focusSelector,
   'Viewlet.focusSelectorAfterRender': focusSelectorAfterRender,
+  'Viewlet.getComponentDom': getComponentDom,
   'Viewlet.handleError': handleError$1,
   'Viewlet.move': move,
   'Viewlet.patchCss': patchCssStyleSheet,
@@ -10065,6 +10166,7 @@ const commandHandlers = {
   'Viewlet.send': invoke,
   'Viewlet.setBounds': setBounds$1,
   'Viewlet.setCheckBoxValue': setCheckboxValue,
+  'Viewlet.setComponentDom': setComponentDom,
   'Viewlet.setCss': addCssStyleSheet,
   'Viewlet.setDom': setDom,
   'Viewlet.setDom2': setDom2,
@@ -10593,6 +10695,7 @@ const commandMap = {
   'Viewlet.focusElementByName': focusElementByName,
   'Viewlet.focusSelector': focusSelector,
   'Viewlet.focusSelectorAfterRender': focusSelectorAfterRender,
+  'Viewlet.getComponentDom': getComponentDom,
   'Viewlet.getDragData': getDragData,
   'Viewlet.handleError': handleError$1,
   'Viewlet.invoke': invoke,
@@ -10606,6 +10709,7 @@ const commandMap = {
   'Viewlet.send': invoke,
   'Viewlet.sendMultiple': sendMultiple,
   'Viewlet.setBounds': setBounds$1,
+  'Viewlet.setComponentDom': setComponentDom,
   'Viewlet.show': show,
   'WebRtc.readMicLevels': readMicLevels,
   'WebRtc.setRemoteDescription': setRemoteDescription,

package/package.json

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

package/dist/editorOnly.css

@@ -1,191 +0,0 @@
-:root {
-  --EditorCursorBackground: #aeafad;
-  --EditorFontFamily: monospace;
-  --EditorFontFeatureSettings: normal;
-  --EditorFontSize: 15px;
-  --EditorFontWeight: 400;
-  --EditorLetterSpacing: 0;
-  --EditorLineHeight: 20px;
-  --EditorSelectionBackground: #264f78;
-  --EditorTabSize: 2;
-  --MainBackground: #1e1e1e;
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  overflow: hidden;
-  background: var(--MainBackground);
-}
-
-.Viewlet {
-  contain: strict;
-}
-
-.Editor {
-  width: 100%;
-  height: 100%;
-  background: var(--MainBackground);
-  color: #d4d4d4;
-  outline: none;
-  border: none;
-  font-family: var(--EditorFontFamily);
-  white-space: pre;
-  font-size: var(--EditorFontSize);
-  letter-spacing: var(--EditorLetterSpacing);
-  font-feature-settings: var(--EditorFontFeatureSettings);
-  tab-size: var(--EditorTabSize);
-  cursor: text;
-  font-weight: var(--EditorFontWeight);
-  display: flex;
-}
-
-.EditorContent,
-.EditorLayers,
-.EditorRows {
-  contain: strict;
-  width: 100%;
-  height: 100%;
-}
-
-.EditorRows {
-  white-space: pre;
-}
-
-.EditorRow {
-  display: block;
-  height: var(--EditorLineHeight);
-  line-height: var(--EditorLineHeight);
-  contain: strict;
-}
-
-.Editors {
-  flex: 1;
-}
-
-.EditorCursor {
-  width: 2px;
-  height: var(--EditorLineHeight);
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: var(--EditorCursorBackground);
-  pointer-events: none;
-  contain: strict;
-}
-
-.EditorInput {
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  padding: 0;
-  border: 0;
-  font-size: 1px;
-  top: -9999px;
-  left: -9999px;
-}
-
-.EditorSelection {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  background: var(--EditorSelectionBackground);
-}
-
-.Token {
-  contain: content;
-}
-
-.TokenComment {
-  color: #6a9955;
-}
-
-.TokenString,
-.TokenStringValue {
-  color: #ce9178;
-}
-
-.TokenNumeric,
-.TokenNumber {
-  color: #b5cea8;
-}
-
-.TokenKeyword,
-.TokenTag,
-.TokenTagName {
-  color: #569cd6;
-}
-
-.TokenAttribute,
-.TokenAttributeName,
-.TokenProperty,
-.TokenPropertyName {
-  color: #9cdcfe;
-}
-
-.TokenPunctuation,
-.TokenPunctuationTag {
-  color: #808080;
-}
-
-.LayerCursor,
-.LayerDiagnostics {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-.Gutter {
-  contain: strict;
-  width: 30px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.Gutter:empty {
-  display: none;
-}
-
-.LineNumber {
-  color: rgba(155, 162, 160, 0.6);
-  contain: strict;
-  margin-right: 1px;
-  height: var(--EditorLineHeight);
-  text-align: right;
-}
-
-.ScrollBar {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 14px;
-  bottom: 0;
-  contain: strict;
-  cursor: default;
-}
-
-.ScrollBarHorizontal {
-  left: 0;
-  top: auto;
-  height: 14px;
-  width: auto;
-}
-
-.ScrollBarThumb {
-  width: 100%;
-  position: absolute;
-  contain: strict;
-  background: rgba(57, 71, 71, 0.6);
-  height: var(--ScrollBarThumbHeight);
-  top: var(--ScrollBarThumbTop);
-}
-
-.ScrollBarThumbHorizontal {
-  height: 100%;
-  width: auto;
-}