fbd-editor/src/App.css

.App {
  text-align: center;
  font-family: Arial, sans-serif;
  background-color: #edeef0;
  position: relative;
  user-select: none;
}


.controlPanel {
  width: calc(100% - 20px);
  height: 10px;
}



.toolbar {
  float: left;
  width: 204px;
  margin: 4.5px 4px 0px 4px;
  min-height: calc(100vh - 55px);
  padding: 5px;
  border: 2px solid #e3e8e6;
  background-color: white;
  position: sticky;
}

.toolbarElements {
  width: 204px;
  min-height: calc(100vh - 93px);
  border: 1px solid #ccc;
}

.toolbarBlocksNewSpiszeno {
  width: 70px;
  height: 94px;
  border: 2px solid #ccc;
  backgroundColor: lightgray;
  margin: 5px 0;
  display: flex;
  alignItems: center;
  justifyContent: center;
  flexDirection: column;
  cursor: grab;
  fontSize: 12px;
  fontWeight: bold;
  borderRadius: 4px;
  boxShadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tabButtons {
  display: flex;
  flex-wrap: wrap; /* перенос строк */
}

.tabButtons [data-row='1'] { width: 51px; }
.tabButtons [data-row="2"] { width: 68px; border-bottom: 1px solid #ccc; }

.tabButtons button {
  font-size: 12px;
  padding: 2px 0px 2px 1px;
  border: 1px solid #eee;
  background-color: white;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis; /* троеточие */

}

.tabButtons button.activeTab {
  background-color: #e0e0e0;
  font-weight: bold;
}

.toolbarBlocks {
  width: calc(100% - 21px);
  height: calc(100% - 58px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  position: sticky;
  overflow-y: auto;
}



.canvas {
  left: 224px;
  top: 35px;
  border: 2px solid #e3e8e6;
  width: calc(100% - 233px);
  height: calc(100% - 45px);
  position: fixed;
  overflow: hidden;
}

.dragging {
  opacity: 0.7;
}




/* Убедитесь, что блоки стоят выше сетки по событиям */
.block-container {
  pointer-events: all !important;
  cursor: grab !important;
}

/* Сетка НЕ должна перехватывать мышь */
.grid-line, #background-layer {
  pointer-events: none !important;
}

/* Весь SVG должен пропускать клики до фона, если нет попадания в блок */
.canvas svg {
  pointer-events: none;
}

/* Но элементы внутри (блоки и соединения) — должны ловить */
.canvas svg > g {
  pointer-events: all;
}


/* ✅ Фикс pointer-events */
.canvas {
  position: fixed !important;
  /*pointer-events: none !important; /* Контейнер НЕ перехватывает события */
}

.canvas svg {
  pointer-events: all !important; /* SVG получает ВСЕ события */
}

.canvas svg * {
  pointer-events: auto; /* Все элементы внутри SVG */
}

/* Блоки */
.block-container {
  cursor: grab !important;
}

.block-container:active {
  cursor: grabbing !important;
}

/* Сетка и фон - НЕ перехватывают drag */
.grid-line {
  pointer-events: none;
}

/* Фон canvas */
#background-layer {
  pointer-events: none;
}

.canvas svg g.block-container {
  cursor: grab !important;
}

.canvas svg g.block-container:hover {
  filter: drop-shadow(0 0 3px rgba(0,0,255,0.3));
}




.canvas svg g.block-container,
.canvas svg .block-container {
  pointer-events: all !important;
  cursor: grab !important;
  z-index: 1000 !important; /* Блоки поверх всего */
}

.canvas svg line,
.canvas svg #background-layer * {
  pointer-events: none !important;
}


/* SVG блоки ловят события! */
.canvas svg g.block-container {
  pointer-events: all !important;
}

.canvas svg g.block-container * {
  pointer-events: auto !important;
}

/* Фон/линии НЕ ловят */
.canvas svg line,
.canvas svg .grid-line {
  pointer-events: none !important;
}






/*ДЛя блоков:
<div 
      style={{
        width: '70px',
        height: '94px',
        border: '2px solid #ccc',
        backgroundColor: 'lightgray',
        margin: '5px 0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column',
        cursor: 'grab',
        fontSize: '12px',
        fontWeight: 'bold',
        borderRadius: '4px',
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
        ...getBlockStyle()
      }}
    >
      <div style={{ marginBottom: '5px' }}>{label}</div>
      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
        <div style={{ width: '8px', height: '8px', backgroundColor: '#1A1ADB', borderRadius: '50%' }}></div>
        <div style={{ width: '8px', height: '8px', backgroundColor: '#E00010', borderRadius: '50%' }}></div>
      </div>
    </div>*/


    .canvas svg {
  /* Чтобы клики по пустому месту пролетали сквозь SVG к div (для пана), 
     но ловились блоками */
  pointer-events: none; 
}

.canvas svg g.block-container {
  pointer-events: all !important;
}

.canvas svg {
  pointer-events: all !important; /* SVG должен быть интерактивным */
  overflow: visible;
}

.block-container {
  pointer-events: all !important;
  cursor: move !important;
}

/* Линии сетки не должны мешать */
.grid-line {
  pointer-events: none !important;
}

/* Отключаем выделение текста, которое мешает драгу */
.canvas {
  user-select: none;
  -webkit-user-select: none;
}

/* Убеждаемся, что слои под блоками не мешают */
#background-layer, #connection-layer {
  pointer-events: none !important;
}

.block-container:hover {
  outline: 2px solid red !important;
}

@keyframes pulse {
  from { r: 4; stroke: rgba(255, 215, 0, 0.4); stroke-width: 0; }
  to { r: 7; stroke: rgba(255, 215, 0, 1); stroke-width: 3; }
}