Improve layout editor preview states and default styles

package.json

@@ -36,7 +36,7 @@
     "jszip": "^3.10.1",
     "nanoid": "^5.1.5",
     "route-engine-js": "1.0.0",
-    "route-graphics": "1.7.1",
+    "route-graphics": "1.7.2",
     "rxjs": "^7.8.2",
     "snabbdom": "^3.6.2",
     "snabbdom-to-html": "^7.1.0",

src/components/commandLineRuntimeAction/commandLineRuntimeAction.schema.yaml

@@ -1,7 +1,9 @@
 componentName: rvn-command-line-runtime-action
 
 propsSchema:
-  mode:
-    type: string
-  action:
-    type: object
+  type: object
+  properties:
+    mode:
+      type: string
+    action:
+      type: object

src/components/layoutEditorCanvas/layoutEditorCanvas.handlers.js

@@ -322,6 +322,7 @@ const renderLayoutEditorCanvas = async (
         layoutState,
         repositoryState,
         previewData: props.previewData,
+        resolution: props.resolution,
         selectedItemId: props.selectedItemId,
         disableMoveDrag: props.disableMoveDrag === true,
         graphicsService: deps.graphicsService,

src/components/layoutEditorCanvas/support/layoutEditorCanvasRender.js

@@ -93,6 +93,11 @@ const normalizeLayoutEditorPreviewData = (previewData = {}) => {
 
   return {
     ...nextPreviewData,
+    backgroundImageId:
+      typeof nextPreviewData.backgroundImageId === "string" &&
+      nextPreviewData.backgroundImageId.length > 0
+        ? nextPreviewData.backgroundImageId
+        : undefined,
     variables: toPlainObject(nextPreviewData.variables),
     runtime: {
       ...nextRuntime,
@@ -154,6 +159,51 @@ const normalizeLayoutEditorPreviewData = (previewData = {}) => {
   };
 };
 
+const toPositiveNumber = (value, fallback) => {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+};
+
+const createLayoutEditorPreviewBackgroundElement = ({
+  previewData,
+  repositoryState,
+  resolution,
+} = {}) => {
+  const backgroundImageId = previewData?.backgroundImageId;
+  if (!backgroundImageId) {
+    return undefined;
+  }
+
+  const imageItem = repositoryState?.images?.items?.[backgroundImageId];
+  if (imageItem?.type && imageItem.type !== "image") {
+    return undefined;
+  }
+
+  const fileId = imageItem?.fileId;
+  if (typeof fileId !== "string" || fileId.length === 0) {
+    return undefined;
+  }
+
+  const resolutionWidth = toPositiveNumber(resolution?.width, undefined);
+  const resolutionHeight = toPositiveNumber(resolution?.height, undefined);
+  if (resolutionWidth === undefined || resolutionHeight === undefined) {
+    return undefined;
+  }
+
+  return {
+    id: "layout-editor-preview-background",
+    type: "sprite",
+    src: fileId,
+    fileType: imageItem?.fileType ?? "image/png",
+    x: Math.round(resolutionWidth / 2),
+    y: Math.round(resolutionHeight / 2),
+    width: toPositiveNumber(imageItem?.width, resolutionWidth),
+    height: toPositiveNumber(imageItem?.height, resolutionHeight),
+    anchorX: 0.5,
+    anchorY: 0.5,
+  };
+};
+
 const isSelectableMatch = (elementId, selectedItemId) => {
   if (typeof elementId !== "string" || typeof selectedItemId !== "string") {
     return false;
@@ -579,6 +629,7 @@ export const createLayoutEditorRenderedElements = ({
   layoutState,
   repositoryState,
   previewData,
+  resolution,
   selectedItemId,
   disableMoveDrag,
   graphicsService,
@@ -587,15 +638,24 @@ export const createLayoutEditorRenderedElements = ({
     layoutState,
     repositoryState,
   });
+  const normalizedPreviewData = normalizeLayoutEditorPreviewData(previewData);
   const finalElements = resolveLayoutPreviewElements({
     elements: renderStateElements,
-    previewData,
+    previewData: normalizedPreviewData,
   });
   const resolvedFinalElements = resolveLayoutReferences(finalElements, {
     resources,
   });
+  const previewBackgroundElement = createLayoutEditorPreviewBackgroundElement({
+    previewData: normalizedPreviewData,
+    repositoryState,
+    resolution,
+  });
+  const renderedElements = previewBackgroundElement
+    ? [previewBackgroundElement, ...resolvedFinalElements]
+    : resolvedFinalElements;
   const parsedState = graphicsService.parse({
-    elements: resolvedFinalElements,
+    elements: renderedElements,
   });
   const overlayElements = createLayoutEditorSelectionOverlay({
     parsedElements: parsedState.elements,
@@ -608,8 +668,8 @@ export const createLayoutEditorRenderedElements = ({
   );
 
   return {
-    elements: [...resolvedFinalElements, ...overlayElements],
-    fileReferences: extractFileIdsFromRenderState(resolvedFinalElements),
+    elements: [...renderedElements, ...overlayElements],
+    fileReferences: extractFileIdsFromRenderState(renderedElements),
     selectedElementMetrics,
   };
 };

src/components/layoutEditorPreview/layoutEditorPreview.handlers.js

@@ -132,6 +132,106 @@ export const handlePreviewRevealingSpeedInput = (deps, payload) => {
   renderAndEmitPreviewDataChange(deps);
 };
 
+export const handlePreviewBackgroundFieldClick = async (deps) => {
+  await syncRepositoryState(deps);
+  deps.store.hideDropdownMenu();
+  deps.store.openImageSelectorDialog();
+  deps.render();
+};
+
+export const handlePreviewBackgroundFieldContextMenu = (deps, payload) => {
+  const imageId = deps.store.selectPreviewData()?.backgroundImageId;
+  if (!imageId) {
+    return;
+  }
+
+  const event = payload._event;
+  event.preventDefault();
+  deps.store.showDropdownMenu({
+    x: event.clientX,
+    y: event.clientY,
+  });
+  deps.render();
+};
+
+export const handleImageSelected = (deps, payload) => {
+  deps.store.setImageSelectorSelectedImageId({
+    imageId: payload._event.detail?.imageId,
+  });
+  deps.render();
+};
+
+export const handleImageSelectorCancel = (deps) => {
+  deps.store.closeImageSelectorDialog();
+  deps.render();
+};
+
+export const handleImageSelectorSubmit = (deps) => {
+  const state = deps.store.getState
+    ? deps.store.getState()
+    : deps.store._state || deps.store.state;
+  const imageSelectorDialog = state?.imageSelectorDialog;
+
+  deps.store.setPreviewBackgroundImageId({
+    imageId: imageSelectorDialog?.selectedImageId,
+  });
+  deps.store.closeImageSelectorDialog();
+  deps.store.hideDropdownMenu();
+  renderAndEmitPreviewDataChange(deps);
+};
+
+export const handleImageDoubleClick = (deps, payload) => {
+  const imageId = payload?._event?.detail?.imageId;
+  if (!imageId) {
+    return;
+  }
+
+  deps.store.showFullImagePreview({ imageId });
+  deps.render();
+};
+
+export const handleFileExplorerClickItem = (deps, payload) => {
+  const itemId = payload?._event?.detail?.itemId;
+  if (!itemId) {
+    return;
+  }
+
+  deps.refs.imageSelector?.transformedHandlers?.handleScrollToItem?.({
+    itemId,
+  });
+};
+
+export const handleClearPreviewBackground = (deps) => {
+  deps.store.setPreviewBackgroundImageId({
+    imageId: undefined,
+  });
+  deps.store.hideDropdownMenu();
+  renderAndEmitPreviewDataChange(deps);
+};
+
+export const handleDropdownMenuClickItem = (deps, payload) => {
+  const item = payload._event.detail?.item || payload._event.detail;
+
+  deps.store.hideDropdownMenu();
+
+  if (item?.value === "remove-background") {
+    handleClearPreviewBackground(deps);
+    return;
+  }
+
+  deps.render();
+};
+
+export const handleDropdownMenuClose = (deps) => {
+  deps.store.hideDropdownMenu();
+  deps.render();
+};
+
+export const handlePreviewOverlayClick = (deps) => {
+  deps.store.hideFullImagePreview();
+  deps.render();
+};
+
 export const handlePlayPreviewClick = (deps) => {
   emitPlay(deps);
 };