merging changes

merge

Co-authored-by: Tolga Mizrakci <tolgamizrakci@gmail.com>
Co-authored-by: Adam Singer <spincycle01@yahoo.com>
Co-authored-by: Shlomo Porges <porges.s@gmail.com>

Author: 4 people

src/components/BottomPanel.jsx

@@ -3,7 +3,7 @@ import { format } from 'prettier';
 import componentRender from '../utils/componentRender.util.ts';
 import { ComponentInt, ComponentsInt } from '../utils/Interfaces.ts';
 /** **   SortCHildren will be fixed , dont XXX the file  *** */
-import SortChildren from './SortChildren.jsx';
+// import SortChildren from './SortChildren.jsx';
 
 type Props = {
   focusComponent: ComponentInt;

src/components/BottomTabs.jsx renamed to src/components/BottomTabs.tsx

@@ -233,7 +233,7 @@ class HTMLComponentPanel extends Component<PropsInt, StateInt> {
             />
           </Grid>
         </Grid>
-      </Paper>
+      </div>
     );
   }
 }

src/components/CodePreview.tsx

@@ -36,7 +36,7 @@ class KonvaStage extends Component<PropsInt, StateInt> {
     super(props);
     this.state = {
       stageWidth: 1800,
-      stageHeight: 1500,
+      stageHeight: 1300,
       blockSnapSize: 10,
       grid: [],
       gridStroke: 1,
@@ -190,6 +190,7 @@ class KonvaStage extends Component<PropsInt, StateInt> {
             {this.getDirectChildrenCopy(focusComponent)
               .map((child: ChildInt, i: number) => (
                 <Rectangle
+                  childType={child.childType}
                   key={`${i}${child.componentName}`}
                   components={components}
                   componentId={focusComponent.id}
@@ -207,7 +208,7 @@ class KonvaStage extends Component<PropsInt, StateInt> {
                   handleTransform={handleTransform}
                   draggable={true}
                   blockSnapSize={this.state.blockSnapSize}
-                  imageSource={child.htmlElement === 'Image' && child.HTMLInfo.Src ? child.HTMLInfo.Src : null}
+                  imageSource={child.htmlElement === 'Image' && child.HTMLInfo.Src}
                 />
               ))
               .sort((rectA, rectB) => {

src/components/GrandchildRectangle.jsx renamed to src/components/GrandchildRectangle.tsx

@@ -25,23 +25,14 @@ const LeftColExpansionPanel = (props: any) => {
   } = props;
   const { title, id, color } = component;
 
-  // show a string of all direct parents. SO the user can gaze at it.
-  const directParents = components
-    .filter((comp: ComponentInt) => comp.childrenArray.some((child: ChildInt) => child.childComponentId === id))
-    .map((comp: ComponentInt) => comp.title)
-    .join(',');
-
   function isFocused() {
     return focusComponent.id === id ? 'focused' : '';
   }
 
   return (
     <Grid container spacing={16} direction="row" justify="flex-start" alignItems="center">
       <Grid item xs={9}>
-        <div
-          className={classes.root}
-          style={!isFocused() ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.25)' }}
-        >
+        <div className={classes.root} style={!isFocused() ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.25)' }}>
           <Grid item xs={12} style={{ color: 'red' }}>
             <List style={{ color: 'red' }}>
               <ListItem
@@ -75,10 +66,11 @@ const LeftColExpansionPanel = (props: any) => {
                 color="default"
                 aria-label="Delete"
                 className={classes.margin}
-                onClick={() => deleteComponent({
-                  componentId: id,
-                  stateComponents: components,
-                })
+                onClick={() =>
+                  deleteComponent({
+                    componentId: id,
+                    stateComponents: components,
+                  })
                 }
                 style={{
                   color: '#D3D3D3',
@@ -112,7 +104,7 @@ const LeftColExpansionPanel = (props: any) => {
           </Tooltip>
         )}
       </Grid>
-    </div>
+    </Grid>
   );
 };