Feature/dom manipulation

.gitignore

@@ -49,7 +49,7 @@ coverage/
 
 # Generated types (if using vite-plugin-dts or tsc emit to dist)
 dist/**/*.d.ts
-types/
+/types/
 typings/
 
 # Lockfiles (if you prefer to ignore some; typically keep one)

README.md

@@ -1 +1,38 @@
-# Node Shapes
+# Node Shapes
+Node shapes is an npm package (node-shapes) which allow to create nodes and render them as shapes in a canvas that can be dragged (moved).
+
+[![0.0.1](https://static-production.npmjs.com/da3ab40fb0861d15c83854c29f5f2962.png) npm package](https://www.npmjs.com/package/node-shapes)
+
+### Shapes
+You can add more custom shapes. This package have default shapes which include:
+- rectangle
+- circle (being developed)
+
+## How to Install
+To install npm package make sure you have npm installed and access to the internet.
+
+Open your terminal and under your project run the following command:
+```
+npm install node-shapes
+```
+**Note:** Make sure to run through the setup to setup shapes.
+
+## How to Setup
+To set up the shapes run the following command:
+```
+npx node-shapes init
+```
+This will create a new folder as `default-shapes` within your project's `public` folder. This folder is where all the shapes will exist. You can add custom shapes within this folder as well. To keep custom shapes organized from the default shapes, it is recommended that you keep custom shapes in there own dedicated folder created inside `public/default-shapes`.
+
+---
+## Simple Example of Usage
+The JavaScript code bellow creates a simple block that is draggable and the canvas with 20 px on all sides.
+```
+const nodeShapes = new NodeShapes("node-shapes-graph"); // declare by passing the id or the element.
+nodeShapes.canvasPadding = {inline: 20, block: 20}; // set the padding inside the canvas.
+
+const node = nodeShapes.node("Sample Text", {size: {width: "400", height: "100"}, draggable: true}); // creates the node.
+
+node.add(); // Add the node to the canvas (visual).
+```
+![Node Shapes Representation](.github/assets/node-shapes-simple.png)

bin/init.js

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+function initPackage() {
+  // 1. Locate the user's current project working directory
+  const userProjectRoot = process.cwd();
+  const targetPublicFolder = path.join(userProjectRoot, 'public', 'my-svg-package');
+
+  // 2. Locate your package's asset folder inside node_modules
+  const packageAssetFolder = path.join(__dirname, '../dist/svgs');
+
+  try {
+    // Create the target folder in their public directory if it doesn't exist
+    if (!fs.existsSync(targetPublicFolder)) {
+      fs.mkdirSync(targetPublicFolder, { recursive: true });
+    }
+
+    // 3. Copy the files over
+    const files = fs.readdirSync(packageAssetFolder);
+    for (const file of files) {
+      fs.copyFileSync(
+        path.join(packageAssetFolder, file),
+        path.join(targetPublicFolder, file)
+      );
+    }
+
+    console.log('✅ Successfully copied 100+ SVGs to your public/my-svg-package/ directory!');
+  } catch (error) {
+    console.error('❌ Failed to copy assets automatically:', error.message);
+  }
+}
+
+initPackage();

index.html

@@ -9,17 +9,35 @@
 <body>
     <h1>Node Shapes</h1>
     <div id="node-shapes-graph">
-        <svg xmlns="http://www.w3.org/2000/svg">
-            <g transform="translate(20,20)">
+        <!-- <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+            <g>
                 <rect x="0" y="0" rx="8" ry="8" width="100" height="40" fill="rgba(220,220,220,1)"></rect>
+                <circle r="100" cx="100" cy="100" fill="rgba(220,220,220,1)"></circle>
                 <text x="8" y="24" font-family="Arial" font-size="16" fill="black" style="text-overflow: ellipsis; width: 50px; background-color: red;">Hello, some long text</text>
             </g>
-        </svg>
+        </svg> -->
+
+        <!-- <div style="background-color: rgba(220,220,220,1); width: 100px; height: 100px; border-radius: 100px;">
+            <p id="node-shapes-text" style="
+                            width:100%;
+                            line-height:1.2em;
+                            font-size:16px;
+                            display:-webkit-box;
+                            -webkit-box-orient:vertical;
+                            overflow:hidden;
+                            text-overflow:ellipsis;
+                            word-break:break-word;
+                            text-align:center;
+                            color: rgba(0,0,0,1);
+                        ">
+                        Very long text that should wrap into multiple lines inside the rectangle. If it overflows vertically, it must be truncated with an ellipsis after the last visible line.
+                        </p>
+        </div> -->
 
-        <svg id="svg" xmlns="http://www.w3.org/2000/svg">
+        <!-- <svg id="svg" xmlns="http://www.w3.org/2000/svg">
             <g transform="translate(20,20)">
-                <rect id="node-shapes-text-shape" x="0" y="0" rx="8" ry="8" width="200" height="40" fill="rgba(220,220,220,1)"/>
-                <foreignObject id="node-shapes-text-foreign-object" x="0" y="0" width="200" height="40">
+                <rect id="node-shapes-text-shape" x="0" y="0" rx="8" ry="8" width="200" height="100" fill="rgba(220,220,220,1)"/>
+                <foreignObject id="node-shapes-text-foreign-object" x="0" y="0" width="200" height="100">
                     <div xmlns="http://www.w3.org/1999/xhtml" style="height:100%;box-sizing:border-box;padding:8px;display:flex;align-items:center;justify-content:center;">
                         <p id="node-shapes-text" style="
                             width:100%;
@@ -38,10 +56,10 @@ <h1>Node Shapes</h1>
                     </div>
                 </foreignObject>
             </g>
-        </svg>
-
+        </svg> -->
 
     </div>
 </body>
 <script type="module" src="/src/index.ts"></script>
+<script type="module" src="/public/script.js"></script>
 </html>

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "license": "MIT",
   "private": false,
-  "type": "commonjs",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -32,5 +32,8 @@
   "devDependencies": {
     "typescript": "^6.0.3",
     "vite": "^8.0.16"
+  },
+  "dependencies": {
+    "uuid": "^14.0.2"
   }
 }

public/script.js

@@ -0,0 +1,9 @@
+import NodeShapes from '../src/index';
+
+const text = "Sample Text";
+
+const nodeShapes = new NodeShapes("node-shapes-graph");
+nodeShapes.canvasPadding = {inline: 20, block: 20};
+console.log(nodeShapes);
+const node = nodeShapes.node(text, {size: {width: "400", height: "100"}, draggable: true});
+node.add();