Spaces:

namelessai
/

DrawTool

Running

App Files Files Community

namelessai commited on Apr 29, 2025

Commit

c317bf2

verified ·

1 Parent(s): 91bc898

Update index.html

Browse files

Files changed (1) hide show

index.html +145 -214

index.html CHANGED Viewed

@@ -1,231 +1,162 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Artisan Canvas - Advanced Drawing Tool</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
 </head>
-<body class="bg-slate-100 h-screen flex">
-    <!-- Tools Panel -->
-    <div class="w-64 bg-slate-800 p-4 flex flex-col gap-4">
-        <div class="text-white mb-4">
-            <h1 class="text-xl font-bold">Artisan Canvas</h1>
-            <p class="text-sm text-slate-400">Advanced Drawing Tool</p>
-        </div>
-        <!-- Brush Selection -->
-        <div class="space-y-2">
-            <label class="text-white text-sm">Brushes</label>
-            <div class="grid grid-cols-2 gap-2">
-                <button onclick="setBrush('pencil')" class="tool-btn">
-                    <i class="fas fa-pencil"></i>
-                </button>
-                <button onclick="setBrush('chalk')" class="tool-btn">
-                    <i class="fas fa-chalkboard"></i>
-                </button>
-                <button onclick="setBrush('paint')" class="tool-btn">
-                    <i class="fas fa-paint-brush"></i>
-                </button>
-                <button onclick="setBrush('splatter')" class="tool-btn">
-                    <i class="fas fa-spray-can"></i>
-                </button>
-            </div>
-        </div>
-        <!-- Color Picker -->
-        <div class="space-y-2">
-            <label class="text-white text-sm">Color</label>
-            <input type="color" id="colorPicker"
-                   class="w-full h-10 rounded cursor-pointer">
-        </div>
-        <!-- Brush Size -->
-        <div class="space-y-2">
-            <label class="text-white text-sm">Size</label>
-            <input type="range" id="brushSize" min="1" max="100" value="10"
-                   class="w-full range-sm">
-        </div>
-        <!-- Tools -->
-        <div class="space-y-2">
-            <label class="text-white text-sm">Tools</label>
-            <div class="grid grid-cols-2 gap-2">
-                <button onclick="toggleEraser()" class="tool-btn">
-                    <i class="fas fa-eraser"></i>
-                </button>
-                <button onclick="clearCanvas()" class="tool-btn">
-                    <i class="fas fa-trash"></i>
-                </button>
-            </div>
-        </div>
-    </div>
-    <!-- Main Canvas -->
-    <div class="flex-1 p-4 relative">
-        <canvas id="mainCanvas" class="bg-white rounded-lg shadow-xl"></canvas>
     </div>
-    <!-- Layers Panel -->
-    <div class="w-64 bg-slate-800 p-4 flex flex-col gap-2">
-        <div class="text-white mb-2">
-            <h2 class="text-lg font-semibold">Layers</h2>
-        </div>
-        <div id="layerList" class="space-y-2 flex-1 overflow-y-auto">
-            <!-- Layers will be dynamically added here -->
-        </div>
-        <button onclick="addLayer()"
-                class="mt-4 bg-slate-700 text-white p-2 rounded hover:bg-slate-600">
-            <i class="fas fa-plus mr-2"></i>New Layer
-        </button>
-    </div>
-<script>
-let canvas;
-let currentBrush = 'pencil';
-let isErasing = false;
-let layers = [];
-let activeLayer = null;
-// Initialize canvas
-function initCanvas() {
-    canvas = new fabric.Canvas('mainCanvas', {
         isDrawingMode: true,
-        width: 800,
-        height: 600
-    });
-    setBrush('pencil');
-    addLayer(); // Create initial layer
-}
-// Brush configurations
-function setBrush(type) {
-    currentBrush = type;
-    canvas.freeDrawingBrush = new fabric[`${type.charAt(0).toUpperCase() + type.slice(1)}Brush`](canvas);
-    switch(type) {
-        case 'chalk':
-            canvas.freeDrawingBrush.width = 10;
-            canvas.freeDrawingBrush.color = document.getElementById('colorPicker').value;
-            canvas.freeDrawingBrush.shadow = new fabric.Shadow({
-                blur: 5,
-                offsetX: 2,
-                offsetY: 2,
-                color: 'rgba(0,0,0,0.3)'
-            });
-            break;
-        case 'paint':
-            canvas.freeDrawingBrush.width = 20;
-            canvas.freeDrawingBrush.color = document.getElementById('colorPicker').value;
-            canvas.freeDrawingBrush.strokeLineCap = 'round';
-            canvas.freeDrawingBrush.strokeLineJoin = 'round';
-            canvas.freeDrawingBrush.shadow = new fabric.Shadow({
-                blur: 10,
-                color: document.getElementById('colorPicker').value
-            });
-            break;
-        case 'splatter':
-            canvas.freeDrawingBrush.width = 15;
-            canvas.freeDrawingBrush.color = document.getElementById('colorPicker').value;
-            canvas.freeDrawingBrush.strokeLineCap = 'round';
-            canvas.freeDrawingBrush.strokeLineJoin = 'round';
-            canvas.freeDrawingBrush.shadow = new fabric.Shadow({
-                blur: 15,
-                color: document.getElementById('colorPicker').value
-            });
-            break;
-        default: // Pencil
-            canvas.freeDrawingBrush.width = 5;
-            canvas.freeDrawingBrush.color = document.getElementById('colorPicker').value;
-            canvas.freeDrawingBrush.strokeLineCap = 'round';
-            canvas.freeDrawingBrush.strokeLineJoin = 'round';
     }
-}
-// Layer management
-function addLayer() {
-    const layerId = Date.now();
-    const newLayer = {
-        id: layerId,
-        name: `Layer ${layers.length + 1}`,
-        visible: true,
-        canvas: new fabric.Canvas('mainCanvas') // In real implementation, manage multiple canvases
-    };
-    layers.push(newLayer);
-    activeLayer = layerId;
-    updateLayerList();
-}
-function toggleLayerVisibility(layerId) {
-    const layer = layers.find(l => l.id === layerId);
-    layer.visible = !layer.visible;
-    updateLayerList();
-}
-function updateLayerList() {
-    const layerList = document.getElementById('layerList');
-    layerList.innerHTML = layers.map(layer => `
-        <div class="flex items-center justify-between bg-slate-700 p-2 rounded ${activeLayer === layer.id ? 'ring-2 ring-blue-400' : ''}">
-            <span class="text-white text-sm">${layer.name}</span>
-            <div class="flex gap-2">
-                <button onclick="toggleLayerVisibility(${layer.id})" class="text-slate-300 hover:text-white">
-                    <i class="fas ${layer.visible ? 'fa-eye' : 'fa-eye-slash'}"></i>
-                </button>
-                <button class="text-red-400 hover:text-red-300">
-                    <i class="fas fa-trash"></i>
-                </button>
-            </div>
-        </div>
-    `).join('');
-}
-// Tools
-function toggleEraser() {
-    isErasing = !isErasing;
-    canvas.freeDrawingBrush.color = isErasing ? '#ffffff' : document.getElementById('colorPicker').value;
-}
-function clearCanvas() {
-    canvas.clear();
-}
-// Event Listeners
-document.getElementById('colorPicker').addEventListener('input', (e) => {
-    canvas.freeDrawingBrush.color = e.target.value;
-});
-document.getElementById('brushSize').addEventListener('input', (e) => {
-    canvas.freeDrawingBrush.width = parseInt(e.target.value);
-});
-// Initialize
-window.onload = initCanvas;
-</script>
-<style>
-.tool-btn {
-    @apply p-3 bg-slate-700 text-white rounded hover:bg-slate-600 transition-colors;
-}
-.range-sm::-webkit-slider-thumb {
-    @apply w-4 h-4 bg-blue-500 rounded-full cursor-pointer;
-}
-#mainCanvas {
-    border: 2px solid #e2e8f0;
-}
-.fabric-canvas {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-</style>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- Tailwind CSS (Play CDN) -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- FontAwesome -->
+  <link rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+  />
+  <!-- Fabric.js -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/6.6.4/fabric.min.js"></script>
+  <!-- fabric-brushes addon -->
+  <script src="https://cdn.jsdelivr.net/gh/av01d/fabric-brushes@1.0/dist/fabric.brushes.min.js"></script>
 </head>
+<body class="h-screen flex bg-gray-100">
+  <!-- Layers Panel -->
+  <aside class="w-64 bg-white border-r p-4 flex flex-col">
+    <h2 class="text-xl font-semibold mb-4">Layers</h2>
+    <div id="layers" class="flex-1 overflow-auto space-y-2"></div>
+    <button id="add-layer"
+      class="mt-4 flex items-center justify-center px-3 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+      <i class="fa fa-plus mr-2"></i>Add Layer
+    </button>
+  </aside>
+  <!-- Main Canvas Area -->
+  <main class="flex-1 flex flex-col">
+    <!-- Brush Toolbar -->
+    <div class="p-4 bg-white border-b flex space-x-4">
+      <button class="brush-btn" data-brush="pencil" title="Pencil">
+        <i class="fa fa-pencil-alt fa-lg"></i>
+      </button>
+      <button class="brush-btn" data-brush="chalk" title="Chalk">
+        <i class="fa fa-chalkboard fa-lg"></i>
+      </button>
+      <button class="brush-btn" data-brush="paint" title="Paint">
+        <i class="fa fa-paint-brush fa-lg"></i>
+      </button>
+      <button class="brush-btn" data-brush="splatter" title="Splatter">
+        <i class="fa fa-spray-can fa-lg"></i>
+      </button>
     </div>
+    <!-- Canvas Stack -->
+    <div id="canvas-wrapper" class="relative flex-1 bg-white"></div>
+  </main>
+  <!-- Script -->
+  <script>
+    const layersContainer = document.getElementById('layers');
+    const addLayerBtn   = document.getElementById('add-layer');
+    const canvasWrapper = document.getElementById('canvas-wrapper');
+    let layers = [], current = -1;
+    // Create a new layer
+    function addLayer(name='Layer') {
+      const id = Date.now().toString();
+      // Create <canvas>
+      const c = document.createElement('canvas');
+      c.id = 'canvas-' + id;
+      c.width  = canvasWrapper.clientWidth;
+      c.height = canvasWrapper.clientHeight;
+      c.classList.add('absolute','top-0','left-0');
+      canvasWrapper.appendChild(c);
+      // Init Fabric canvas
+      const fc = new fabric.Canvas(c.id, {
         isDrawingMode: true,
+        backgroundColor: 'transparent'
+      });
+      fc.freeDrawingBrush = new fabric.PencilBrush(fc); // default :contentReference[oaicite:5]{index=5}
+      layers.push({ id, name, el: c, fc });
+      selectLayer(layers.length - 1);
+      updateLayersUI();
     }
+    // Refresh the layers panel
+    function updateLayersUI() {
+      layersContainer.innerHTML = '';
+      layers.forEach((ly, i) => {
+        const div = document.createElement('div');
+        div.className = [
+          'flex items-center justify-between p-2 rounded',
+          i===current ? 'bg-blue-100' : 'hover:bg-gray-100 cursor-pointer'
+        ].join(' ');
+        div.innerHTML = `
+          <span>${ly.name}</span>
+          <div class="space-x-1">
+            <button onclick="moveLayer(${i},-1)"><i class="fa fa-arrow-up"></i></button>
+            <button onclick="moveLayer(${i},+1)"><i class="fa fa-arrow-down"></i></button>
+            <button onclick="removeLayer(${i})"><i class="fa fa-trash"></i></button>
+          </div>`;
+        div.addEventListener('click',()=>selectLayer(i));
+        layersContainer.appendChild(div);
+      });
+      // Stack canvases by index
+      layers.forEach((ly,i)=> {
+        ly.el.style.zIndex = i;
+      });
+      if(current>=0) layers[current].el.style.zIndex = layers.length;
+    }
+    // Select a layer
+    function selectLayer(i) {
+      current = i;
+      layers.forEach((ly,idx)=>{
+        ly.fc.selection = (idx===i);
+      });
+      updateLayersUI();
+    }
+    // Remove a layer
+    function removeLayer(i) {
+      canvasWrapper.removeChild(layers[i].el);
+      layers.splice(i,1);
+      if(current >= layers.length) current = layers.length -1;
+      updateLayersUI();
+    }
+    // Move layer up/down
+    function moveLayer(i, dir) {
+      const j = i + dir;
+      if(j<0||j>=layers.length) return;
+      [layers[i], layers[j]] = [layers[j], layers[i]];
+      if(current === i) current = j;
+      else if(current === j) current = i;
+      updateLayersUI();
+    }
+    // Change brush type
+    document.querySelectorAll('.brush-btn').forEach(btn=>{
+      btn.addEventListener('click',()=>{
+        if(current<0) return;
+        const f = layers[current].fc;
+        switch(btn.dataset.brush) {
+          case 'pencil':
+            f.freeDrawingBrush = new fabric.PencilBrush(f); break;
+          case 'chalk':
+            f.freeDrawingBrush = new fabric.SketchyBrush(f,{
+              width: 10, color:'#222', opacity:0.6
+            }); break;            // Sketchy for chalk :contentReference[oaicite:6]{index=6}
+          case 'paint':
+            f.freeDrawingBrush = new fabric.RibbonBrush(f,{
+              width: 20, color:'#c00', opacity:0.8
+            }); break;            // Ribbon for paint drips :contentReference[oaicite:7]{index=7}
+          case 'splatter':
+            f.freeDrawingBrush = new fabric.SpraypaintBrush(f,{
+              width: 30, color:'#008', opacity:0.7
+            }); break;            // Spraypaint for splatter :contentReference[oaicite:8]{index=8}
+        }
+      });
+    });
+    // Init with one layer
+    window.addEventListener('DOMContentLoaded',()=> addLayer('Layer 1'));
+    addLayerBtn.addEventListener('click',()=>addLayer(`Layer ${layers.length+1}`));
+  </script>
 </body>
 </html>