Added duplicate functionality to RenderNode.

examples/landing/components/editor/RenderNode.tsx

@@ -6,13 +6,26 @@ import styled from 'styled-components';
 
 import ArrowUp from '../../public/icons/arrow-up.svg';
 import Delete from '../../public/icons/delete.svg';
+import Duplicate from '../../public/icons/duplicate.svg';
 import Move from '../../public/icons/move.svg';
 
 const IndicatorDiv = styled.div`
   height: 30px;
   margin-top: -29px;
   font-size: 12px;
   line-height: 12px;
+`;
+
+const Btn = styled.a`
+  padding: 0 0px;
+  opacity: 0.9;
+  display: flex;
+  align-items: center;
+  > div {
+    position: relative;
+    top: -50%;
+    left: -50%;
+  }
 
   svg {
     fill: #fff;
@@ -21,7 +34,7 @@ const IndicatorDiv = styled.div`
   }
 `;
 
-const Btn = styled.a`
+const DuplicateBtn = styled.a`
   padding: 0 0px;
   opacity: 0.9;
   display: flex;
@@ -31,6 +44,11 @@ const Btn = styled.a`
     top: -50%;
     left: -50%;
   }
+
+  svg {
+    width: 15px;
+    height: 15px;
+  }
 `;
 
 export const RenderNode = ({ render }) => {
@@ -47,6 +65,7 @@ export const RenderNode = ({ render }) => {
     deletable,
     connectors: { drag },
     parent,
+    isCanvas,
   } = useNode((node) => ({
     isHover: node.events.hovered,
     dom: node.dom,
@@ -55,6 +74,7 @@ export const RenderNode = ({ render }) => {
     deletable: query.node(node.id).isDeletable(),
     parent: node.data.parent,
     props: node.data.props,
+    isCanvas: query.node(node.id).isCanvas(),
   }));
 
   const currentRef = useRef<HTMLDivElement>();
@@ -128,7 +148,7 @@ export const RenderNode = ({ render }) => {
               )}
               {deletable ? (
                 <Btn
-                  className="cursor-pointer"
+                  className="mr-2 cursor-pointer"
                   onMouseDown={(e: React.MouseEvent) => {
                     e.stopPropagation();
                     actions.delete(id);
@@ -137,6 +157,22 @@ export const RenderNode = ({ render }) => {
                   <Delete />
                 </Btn>
               ) : null}
+              {!isCanvas ? (
+                <DuplicateBtn
+                  className="cursor-pointer"
+                  onMouseDown={() => {
+                    const {
+                      data: { type, props },
+                    } = query.node(id).get();
+                    actions.add(
+                      query.createNode(React.createElement(type, props)),
+                      parent
+                    );
+                  }}
+                >
+                  <Duplicate />
+                </DuplicateBtn>
+              ) : null}
             </IndicatorDiv>,
             document.querySelector('.page-container')
           )