Merge branch 'main' into bug/share_link

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,49 @@
+name: Bug report
+description: Create a report to help us improve
+title: "[BUG]: <Context of the issue>"
+labels: bug
+assignees: AykutSarac
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Issue description
+      description: |
+        Describe the issue in as much detail as possible.
+
+        Tip: You can attach images or log files by clicking this area to highlight it and then dragging files into it.
+      placeholder: |
+        Steps to reproduce with below code sample:
+        1. do thing
+        2. click...
+        3. observe behavior
+        4. see error logs below
+    validations:
+      required: true
+  - type: textarea
+    id: media
+    attributes:
+      label: Media & Screenshots
+      description: Inlude screenshots or video of reproduction as much as possible
+      render: md
+  - type: textarea
+    id: os
+    attributes:
+      label: Operating system
+      description: Which OS does your application run on?
+      value: |
+       - OS: [e.g. iOS]:
+       - Browser [e.g. chrome, safari]:
+       
+       - Any other details...
+  - type: dropdown
+    id: priority
+    attributes:
+      label: Priority this issue should have
+      description: Please be realistic. If you need to elaborate on your reasoning, please use the Issue description field above.
+      options:
+        - Low (slightly annoying)
+        - Medium (should be fixed soon)
+        - High (immediate attention needed)
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,22 @@
+name: Feature request
+description: Request a new feature
+labels: [feature]
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Feature
+      description: A clear and concise description of what the problem is, or what feature you want to be implemented.
+      placeholder: I'm always frustrated when..., Discord has recently released..., A good addition would be...
+    validations:
+      required: true
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternative solutions or implementations
+      description: A clear and concise description of any alternative solutions or features you have considered.
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Other context
+      description: Any other context, screenshots, or file uploads that help us understand your feature request.

README.md

@@ -6,7 +6,9 @@
 
 <p>
     <p align="center">
+      <a href="https://app.travis-ci.com/github/AykutSarac/jsoncrack.com">
         <img alt="travis ci badge" src="https://img.shields.io/travis/com/AykutSarac/jsoncrack.com/main?style=flat-square" />
+      </a>
       <a href="https://github.com/AykutSarac/jsoncrack.com/blob/main/LICENSE">
         <img alt="license badge" src="https://img.shields.io/github/license/AykutSarac/jsoncrack.com?style=flat-square" />
       </a>
@@ -55,14 +57,12 @@ You can use the web version at [jsoncrack.com](https://jsoncrack.com) or also ru
 
 ## 🐳 Docker
 
-```
-A Docker file is provided in the root of the repository.
+A [`Dockerfile`](Dockerfile) is provided in the root of the repository.
 If you want to run JSON Crack locally:
 
-* Build Docker image with `docker build -t jsoncrack --build-arg jsoncrack_host=localhost:8888 .`
+* Build a Docker image with `docker build -t jsoncrack --build-arg jsoncrack_host=localhost:8888 .`
 * Run locally with `docker run -p 8888:8080 jsoncrack`
-* Go to [http://localhost:8888]
-```
+* Go to http://localhost:8888
 
 ## License
 

src/components/CustomNode/ObjectNode.tsx

@@ -24,30 +24,25 @@ const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
       x={0}
       y={0}
       ref={ref}
+      isObject
     >
-      {(!performanceMode || inViewport) && (
-        <Styled.StyledTextWrapper>
-          <Styled.StyledText width={width} height={height}>
-            {value.map((val, idx) => (
-              <Styled.StyledRow
-                data-key={JSON.stringify(val[1])}
-                data-x={x}
-                data-y={y}
-                key={idx}
-                width={`${width - 20}px`}
-                value={JSON.stringify(val[1])}
-              >
-                <Styled.StyledKey objectKey>
-                  {JSON.stringify(val[0]).replaceAll('"', "")}:{" "}
-                </Styled.StyledKey>
-                <Styled.StyledLinkItUrl>
-                  {JSON.stringify(val[1])}
-                </Styled.StyledLinkItUrl>
-              </Styled.StyledRow>
-            ))}
-          </Styled.StyledText>
-        </Styled.StyledTextWrapper>
-      )}
+      {(!performanceMode || inViewport) &&
+        value.map((val, idx) => (
+          <Styled.StyledRow
+            data-key={JSON.stringify(val[1])}
+            data-x={x}
+            data-y={y}
+            key={idx}
+            value={JSON.stringify(val[1])}
+          >
+            <Styled.StyledKey objectKey>
+              {JSON.stringify(val[0]).replaceAll('"', "")}:{" "}
+            </Styled.StyledKey>
+            <Styled.StyledLinkItUrl>
+              {JSON.stringify(val[1])}
+            </Styled.StyledLinkItUrl>
+          </Styled.StyledRow>
+        ))}
     </Styled.StyledForeignObject>
   );
 };

src/components/CustomNode/TextNode.tsx

@@ -65,27 +65,21 @@ const TextNode: React.FC<
       y={0}
       data-nodeid={node.id}
       ref={ref}
+      hideCollapse={hideCollapse}
+      hasCollapse={isParent && hasCollapse}
     >
       {(!performanceMode || inViewport) && (
-        <Styled.StyledTextWrapper>
-          <Styled.StyledText
-            hideCollapse={hideCollapse}
-            hasCollapse={isParent && hasCollapse}
-            width={width}
-            height={height}
-          >
-            <Styled.StyledKey
-              data-x={x}
-              data-y={y}
-              data-key={JSON.stringify(value)}
-              parent={isParent}
-            >
-              <Styled.StyledLinkItUrl>
-                {JSON.stringify(value).replaceAll('"', "")}
-              </Styled.StyledLinkItUrl>
-            </Styled.StyledKey>
-          </Styled.StyledText>
-        </Styled.StyledTextWrapper>
+        <Styled.StyledKey
+          data-x={x}
+          data-y={y}
+          data-key={JSON.stringify(value)}
+          parent={isParent}
+          hasToggle={hasCollapse}
+        >
+          <Styled.StyledLinkItUrl>
+            {JSON.stringify(value).replaceAll('"', "")}
+          </Styled.StyledLinkItUrl>
+        </Styled.StyledKey>
       )}
 
       {inViewport && isParent && hasCollapse && !hideCollapse && (

src/components/CustomNode/index.tsx

@@ -24,7 +24,7 @@ export const CustomNode = (nodeProps: NodeProps) => {
   return (
     <Node {...nodeProps} label={<Label style={baseLabelStyle} />}>
       {({ width, height, x, y, node }) => {
-        if (properties.text instanceof Object) {
+        if (Array.isArray(properties.text)) {
           return (
             <ObjectNode
               value={properties.text}
@@ -38,7 +38,7 @@ export const CustomNode = (nodeProps: NodeProps) => {
 
         return (
           <TextNode
-            node={node}
+            node={node as NodeData}
             isParent={properties.data.isParent}
             value={properties.text}
             width={width}

src/components/CustomNode/styles.tsx

@@ -12,35 +12,21 @@ export const StyledLinkItUrl = styled(LinkItUrl)`
   pointer-events: all;
 `;
 
-export const StyledTextWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 12px;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  cursor: pointer;
-`;
-
-export const StyledText = styled.div<{
-  width: number;
-  height: number;
+export const StyledForeignObject = styled.foreignObject<{
   hasCollapse?: boolean;
   hideCollapse?: boolean;
+  isObject?: boolean;
 }>`
   display: flex;
+  text-align: ${({ isObject }) => !isObject && "center"};
+  align-items: center;
   justify-content: center;
+  font-size: 12px;
   flex-direction: column;
-  width: ${({ width }) => width};
-  height: ${({ height }) => height};
-  min-height: 50;
+  overflow: hidden;
+  padding: 10px;
   color: ${({ theme }) => theme.TEXT_NORMAL};
-  padding-right: ${({ hasCollapse, hideCollapse }) =>
-    hasCollapse && !hideCollapse && "20px"};
-`;
-
-export const StyledForeignObject = styled.foreignObject`
+  cursor: pointer;
   pointer-events: none;
 
   * {
@@ -72,6 +58,7 @@ export const StyledForeignObject = styled.foreignObject`
 export const StyledKey = styled.span<{
   objectKey?: boolean;
   parent?: boolean;
+  hasToggle?: boolean;
 }>`
   font-weight: 500;
   color: ${({ theme, objectKey, parent }) =>
@@ -81,18 +68,19 @@ export const StyledKey = styled.span<{
       ? theme.OBJECT_KEY
       : theme.TEXT_POSITIVE};
   font-size: ${({ parent }) => parent && "14px"};
+  padding-right: ${({ hasToggle }) => hasToggle && "30px"};
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 export const StyledRow = styled.span.attrs<{
-  width: string;
   value: string;
   theme: DefaultTheme;
 }>((props) => ({
   style: {
-    width: props.width,
     color: getTypeColor(props.value, props.theme),
   },
-}))<{ width: string; value: string; theme: DefaultTheme }>`
+}))<{ value: string; theme: DefaultTheme }>`
   height: 18px;
   overflow: hidden;
   text-overflow: ellipsis;

src/components/Graph/index.tsx

@@ -26,12 +26,16 @@ const StyledEditorWrapper = styled.div<{ isWidget: boolean }>`
   background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
   background-image: ${({ theme }) =>
     `radial-gradient(#505050 0.5px, ${theme.BACKGROUND_SECONDARY} 0.5px)`};
-  background-size: 10px 10px;
+  background-size: 15px 15px;
 
   :active {
     cursor: move;
   }
 
+  .dragging {
+    pointer-events: none;
+  }
+
   rect {
     fill: ${({ theme }) => theme.BACKGROUND_NODE};
   }
@@ -101,6 +105,12 @@ const MemoizedGraph = React.memo(function Layout({
         zoomAnimation={{ animationType: "linear" }}
         doubleClick={{ disabled: true }}
         onInit={onInit}
+        onPanning={(ref) =>
+          ref.instance.wrapperComponent?.classList.add("dragging")
+        }
+        onPanningStop={(ref) =>
+          ref.instance.wrapperComponent?.classList.remove("dragging")
+        }
       >
         <TransformComponent
           wrapperStyle={{

src/types.d.ts

@@ -1,4 +1,10 @@
-type CanvasDirection = "LEFT" | "RIGHT" | "DOWN" | "UP"
+type CanvasDirection = "LEFT" | "RIGHT" | "DOWN" | "UP";
+
+interface CustomNodeData {
+  isParent: true;
+  hasChild: !!children.length;
+  children;
+}
 
 interface NodeData<T = any> {
   id: string;