updated boxes example

Author: bennobuilder

examples/react/release/boxes/src/components/Spacer.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export type Props = { height: number };
+
+const Spacer: React.FC<Props> = (props) => {
+  const height = props.height ?? 100; // '??' because props.height can also be 0 and 0 is false
+
+  return <div style={{ height: height }} />;
+};
+
+export default Spacer;

examples/react/release/boxes/src/core/app.ts

@@ -2,5 +2,5 @@ import { Agile, assignSharedAgileInstance } from '@agile-ts/core';
 import { assignSharedAgileLoggerConfig, Logger } from '@agile-ts/logger';
 
 assignSharedAgileLoggerConfig({ level: Logger.level.WARN });
-export const App = new Agile();
+export const App = new Agile({ key: 'boxes', bucket: true });
 assignSharedAgileInstance(App);

examples/react/release/boxes/src/core/entities/ui/ui.actions.ts

@@ -7,13 +7,14 @@ import {
   ELEMENTS,
 } from './ui.controller';
 import core from '../../index';
+import { copy } from '@agile-ts/utils';
 
 export const addDefaultElement = (image: boolean = false) => {
   if (image) addElement(defaultElementStyle, getRandomImage());
   else addElement(defaultElementStyle);
 };
 
-export const addElement = (
+export const addElement = async (
   style: ElementStyleInterface,
   image?: ElementImageInterface,
   select = true
@@ -24,7 +25,13 @@ export const addElement = (
     style,
     image,
   });
-  if (select) selectElement(id);
+
+  if (select) {
+    // TODO figure out why this timeout is needed
+    //  (otherwise it won't select the Element initially)
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    selectElement(id);
+  }
 };
 
 export const selectElement = (id: string | number) => {
@@ -133,9 +140,10 @@ export const updateElementY = (id: string | number, y: number) => {
 export const applyImageDimensions = async (id: string | number) => {
   const element = ELEMENTS.getItem(id);
   if (element && element.value.image?.src) {
-    element.nextStateValue.style.size = await core.ui.getImageDimensions(
+    const newDimensions = await core.ui.getImageDimensions(
       element.value.image.src
     );
+    element.nextStateValue.style.size = newDimensions;
     element.ingest();
   }
 };

examples/react/release/boxes/src/screens/Canvas/components/EditProperties/components/ImageInfo/components/Info.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const Info = ({ label, value }: { label: string; value?: string }) => {
+type InfoProps = {
+  label: string;
+  value?: string;
+};
+
+const Info: React.FC<InfoProps> = (props) => {
+  const { label, value } = props;
+
   return (
     <Container>
       <Title>{label}</Title>
@@ -14,6 +21,7 @@ export default Info;
 
 const Container = styled.div`
   max-width: 175px;
+  overflow-wrap: break-word;
 `;
 
 const Title = styled.div`

examples/react/release/boxes/src/screens/Canvas/components/EditProperties/components/ImageInfo/index.tsx

@@ -4,6 +4,7 @@ import { useProxy } from '@agile-ts/react';
 import core from '../../../../../../core';
 import Info from './components/Info';
 import styled from 'styled-components';
+import Spacer from '../../../../../../components/Spacer';
 
 type ImageInfoProps = {
   fallback?: boolean;
@@ -29,8 +30,19 @@ const ImageInfo: React.FC<ImageInfoProps> = (props) => {
 
   return (
     <Container>
-      <Info label="Author" value={imageInfo?.author} />
-      <Info label="Image URL" value={imageInfo?.url} />
+      {!fallback ? (
+        <>
+          <Info label="Author" value={imageInfo?.author} />
+          <Spacer height={10} />
+          <Info label="Image URL" value={imageInfo?.url} />
+        </>
+      ) : (
+        <>
+          <Info label="Author" value={'Failed to load'} />
+          <Spacer height={10} />
+          <Info label="Image URL" value={'Failed to load'} />
+        </>
+      )}
     </Container>
   );
 };