Croquis cocina | Armarios y Cocinas Mallorca

Vista en planta (prueba CE x1)

Valores no válidos.

Escala: 1 mm = 1 unidad SVG. CE x1 real: 80×80 mm.
Durante el arrastre verás flechas de referencia y cotas editables (doble clic).

Doble clic para insertar. Arrastra para mover. Doble clic en una cota para editar.

CE x1

(function(){
  «use strict»;

const REAL_SIZE_MM = 80;
  const PREVIEW_MM   = 24;
  const DELAY_MS     = 3000; // <-- cambia aquí el retardo (ms)

const svg = document.getElementById('plano');
  const poly = document.getElementById('poly');
  const handles = [document.getElementById('hP1'),document.getElementById('hP2'),document.getElementById('hP3'),document.getElementById('hP4')];
  const ang = [document.getElementById('angP1'),document.getElementById('angP2'),document.getElementById('angP3'),document.getElementById('angP4')];
  const lenA = document.getElementById('lenA'), lenB = document.getElementById('lenB'), lenC = document.getElementById('lenC'), lenD = document.getElementById('lenD');
  const gPlItems = document.getElementById('plItems');
  const palettePlanta = document.getElementById('palette-planta');
  const cursorRing = document.getElementById('cursorRing');

let state={A:4800,B:3800,C:4800,D:3800,margin:100};
  let pts=[{x:100,y:100},{x:4900,y:100},{x:4900,y:3900},{x:100,y:3900}];
  let draggingPoly=null, rectFreeze=null, vbFreeze=null;

let items=[];

function nearestSidesFor(cx,cy){
    const b = wallsBox();
    const dxL = Math.abs(cx - b.minX), dxR = Math.abs(b.maxX - cx);
    const dyT = Math.abs(cy - b.minY), dyB = Math.abs(b.maxY - cy);
    return { xSide: dxL <= dxR ? 'left' : 'right', ySide: dyT <= dyB ? 'top'  : 'bottom' };
  }

function drawItem(it){
    var g = gPlItems.querySelector('[data-id="'+it.id+'"]');
    if (g) g.remove();
    g = svgMake('g'); g.setAttribute('data-id', it.id); g.style.cursor='none';
    gPlItems.appendChild(g);

var S = it.size;
    var x0 = it.x - S/2, y0 = it.y - S/2;

var rect = svgMake('rect');
    rect.setAttribute('x',x0); rect.setAttribute('y',y0);
    rect.setAttribute('width',S); rect.setAttribute('height',S);
    rect.setAttribute('rx',2); rect.setAttribute('fill','#000');
    g.appendChild(rect);

var xTxt = svgMake('text');
    xTxt.setAttribute('x', x0 + S + 8);
    xTxt.setAttribute('y', y0 + 14);
    xTxt.setAttribute('class','dimtxt');
    xTxt.setAttribute('fill', '#dc2626');
    xTxt.textContent = '×';
    xTxt.style.cursor = 'pointer';
    g.appendChild(xTxt);

var realHalf = REAL_SIZE_MM/2;
    var realLeft   = it.x - realHalf;
    var realRight  = it.x + realHalf;
    var realTop    = it.y - realHalf;
    var realBottom = it.y + realHalf;

var b = wallsBox();
    var sides = nearestSidesFor(it.x,it.y);

var xFrom, xTo, yForX;
    if (sides.xSide==='left'){ xFrom = realLeft; xTo = b.minX; yForX = it.y; }
    else { xFrom = realRight; xTo = b.maxX; yForX = it.y; }

var yFrom, yTo, xForY;
    if (sides.ySide==='top'){ yFrom = realTop; yTo = b.minY; xForY = it.x; }
    else { yFrom = realBottom; yTo = b.maxY; xForY = it.x; }

var SHORT = 30;
    if (it.compact){
      if (sides.xSide==='left') xTo = xFrom - SHORT; else xTo = xFrom + SHORT;
      if (sides.ySide==='top')  yTo = yFrom - SHORT; else yTo = yFrom + SHORT;
    }

var lh = svgMake('line');
    lh.setAttribute('x1', xFrom); lh.setAttribute('y1', yForX);
    lh.setAttribute('x2', xTo);   lh.setAttribute('y2', yForX);
    lh.setAttribute('stroke','#555'); lh.setAttribute('stroke-width','2'); lh.setAttribute('marker-end','url(#arr)');
    g.appendChild(lh);

var lv = svgMake('line');
    lv.setAttribute('x1', xForY); lv.setAttribute('y1', yFrom);
    lv.setAttribute('x2', xForY); lv.setAttribute('y2', yTo);
    lv.setAttribute('stroke','#555'); lv.setAttribute('stroke-width','2'); lv.setAttribute('marker-end','url(#arr)');
    g.appendChild(lv);

xTxt.addEventListener('click', function(){
      clearTimeout(it.arrowTimer);
      var existed = gPlItems.querySelector('[data-id="'+it.id+'"]');
      if (existed) existed.remove();
      items = items.filter(function(k){ return k.id!==it.id; });
    });
  }

if (palettePlanta){
    var btn = palettePlanta.querySelector('[data-type="caja1"]');
    if (btn) btn.addEventListener('dblclick', addItemAtCenter);
  }

handles.forEach(function(h,idx){
    h.addEventListener('dragstart',function(e){e.preventDefault();});
    h.addEventListener('mousedown',function(e){
      e.preventDefault();
      var cur0=screenToSvg(e.clientX,e.clientY);
      draggingPoly={idx:idx,dx:pts[idx].x-cur0.x,dy:pts[idx].y-cur0.y};
      document.body.style.userSelect='none';
      var r=svg.getBoundingClientRect(); rectFreeze={left:r.left,top:r.top,width:r.width,height:r.height};
      var vb=svg.viewBox.baseVal; vbFreeze={x:vb.x,y:vb.y,width:vb.width,height:vb.height};
    });
  });
  document.addEventListener('mousemove',function(e){
    if(!draggingPoly) return;
    var i=draggingPoly.idx;
    var c=screenToSvg(e.clientX,e.clientY);
    pts[i].x=c.x+draggingPoly.dx; pts[i].y=c.y+draggingPoly.dy;
    redrawPoly(); items.slice().forEach(drawItem);
  });
  document.addEventListener('mouseup',function(){
    if(!draggingPoly) return;
    state.A=dist(pts[0],pts[1]); state.B=dist(pts[1],pts[2]); state.C=dist(pts[2],pts[3]); state.D=dist(pts[3],pts[0]);
    lenA.value=Math.round(state.A); lenB.value=Math.round(state.B); lenC.value=Math.round(state.C); lenD.value=Math.round(state.D);
    draggingPoly=null; document.body.style.userSelect='';
    rectFreeze=null; vbFreeze=null;
  });

svg.setAttribute('viewBox','0 0 4000 3200');
  redrawPoly();
})();