fixed handle position

Author: bennobuilder

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

@@ -40,7 +40,6 @@ export default RectangleInner;
 const Container = styled.div<{ borderColor: string }>`
   display: flex;
   position: absolute;
-  padding: 3px;
   border: ${(props) => `1px solid ${props.borderColor}`};
   width: 100%;
   height: 100%;

examples/react/release/boxes/src/components/Rectangle/components/RectangleInner.tsx

@@ -25,9 +25,9 @@ const Handle: React.FC<HandlePropsInterface> = (props) => {
 
   // Calculate handle position
   if (handleAxis.startsWith('n')) position.top = 0;
-  if (handleAxis.startsWith('s')) position.bottom = -8;
+  if (handleAxis.startsWith('s')) position.bottom = 0;
   if (handleAxis.includes('w')) position.left = 0;
-  if (handleAxis.includes('e')) position.right = -8;
+  if (handleAxis.includes('e')) position.right = 0;
 
   if (handleAxis === 'n' || handleAxis === 's') position.left = '50%';
   if (handleAxis === 'e' || handleAxis === 'w') position.top = '50%';

examples/react/release/boxes/src/components/actionComponents/Resize/components/Handle.tsx

@@ -144,6 +144,28 @@ export const unselectSelectedElement = () => {
   SELECTED_ELEMENT.unselect();
 };
 
+export const deleteSelectedElement = () => {
+  const toRemoveElementKey = SELECTED_ELEMENT.itemKey;
+  if (toRemoveElementKey != null)
+    ELEMENTS.remove(toRemoveElementKey).everywhere();
+};
+
+export const assignDefaultElementStyle = (
+  windowWidth?: number,
+  windowHeight?: number
+) => {
+  if (windowWidth != null && windowHeight != null) {
+    core.ui.defaultElementStyle.position = {
+      left: Math.floor(
+        windowWidth / 2 - core.ui.defaultElementStyle.size.width / 2
+      ),
+      top: Math.floor(
+        windowHeight / 2 - core.ui.defaultElementStyle.size.height / 2
+      ),
+    };
+  }
+};
+
 export const getBorderColor = (visible: boolean) => {
   return visible ? '#000000' : 'rgba(0, 0, 0, 0)';
 };

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

@@ -1,11 +1,16 @@
 import { App } from '../../app';
-import { ElementInterface } from './ui.interfaces';
+import { CanvasInterface, ElementInterface } from './ui.interfaces';
 
 export const defaultElementStyle = {
   position: { top: 0, left: 0 },
   size: { width: 200, height: 200 },
 };
 
+export const CANVAS = App.createState<CanvasInterface>({
+  width: 5000,
+  height: 5000,
+});
+
 export const ELEMENTS = App.createCollection<ElementInterface>();
 
 export const SELECTED_ELEMENT = ELEMENTS.createSelector(

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

@@ -13,3 +13,8 @@ export interface ElementInterface {
   style: ElementStyleInterface;
   image?: ElementImageInterface;
 }
+
+export interface CanvasInterface {
+  width: number;
+  height: number;
+}

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useAgile } from '@agile-ts/react';
+import core from '../../../core';
+
+interface PageContainerProps {
+  onClick: () => void;
+}
+
+const CanvasContainer: React.FC<PageContainerProps> = (props) => {
+  const { onClick, children } = props;
+  const canvas = useAgile(core.ui.CANVAS);
+
+  return (
+    <Container width={canvas.width} height={canvas.height} onClick={onClick}>
+      {children}
+    </Container>
+  );
+};
+
+export default CanvasContainer;
+
+const Container = styled.div<{ width: number; height: number }>`
+  display: flex;
+  flex: 1;
+  width: ${(props) => props.width}px;
+  height: ${(props) => props.height}px;
+  background-color: #8a8a8e;
+`;

examples/react/release/boxes/src/screens/Canvas.tsx

@@ -8,7 +8,7 @@ const Card: React.FC = ({ children }) => (
 export default Card;
 
 const Container = styled.div`
-  position: absolute;
+  position: fixed;
   top: 20px;
   right: 20px;
   background: #ffffff;