@mhmttosun/dnd 0.0.0-stage → 1.1.1

package/css/stage.css

@@ -0,0 +1,490 @@
+/* ==========================================================================
+   STAGE CSS - 1200x675 Mantıksal Tuval, Nesneler ve Dönüşüm Tutamaçları
+   ========================================================================== */
+
+.stage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1200px;
+  height: 675px;
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  overflow: visible;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  transform-origin: top left;
+}
+
+/* Izgara (Grid) Çizgileri */
+.stage.grid-visible::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background-size: 20px 20px;
+  background-image:
+    linear-gradient(to right, rgba(203, 213, 225, 0.4) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(203, 213, 225, 0.4) 1px, transparent 1px);
+  z-index: 0;
+}
+
+/* SVG Bağlantı ve Çizim Katmanı */
+.stage-svg-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 500;
+  overflow: visible;
+}
+
+/* Nesneler Katmanı */
+.stage-objects {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+/* ==========================================
+   SAHNE NESNELERİ (.stage-object)
+   ========================================== */
+.stage-object {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: auto;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: move;
+}
+
+.stage-object.is-locked {
+  cursor: pointer;
+}
+
+.stage-object.is-hidden {
+  display: none !important;
+}
+
+/* Metin Kutusu Nesnesi Stilleri (Tasarım Modunda Ayırt Edilebilirlik) */
+.stage-object[data-type="text"][data-role="decorative"] {
+  transition: outline 0.15s ease;
+}
+
+.stage-object[data-type="text"][data-role="decorative"]:hover {
+  outline: 1px dashed rgba(59, 130, 246, 0.45);
+  outline-offset: 2px;
+}
+
+/* Çizgi Nesnesi Stilleri */
+.stage-object[data-type="line"] {
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  overflow: visible !important;
+}
+
+.stage-object[data-type="line"] .object-inner-content {
+  width: 100%;
+  height: 100%;
+  padding: 0 !important;
+  overflow: visible !important;
+}
+
+.object-line-bar {
+  width: 100%;
+  height: 100%;
+  display: block;
+  pointer-events: none;
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+/* İçerik Kutusu */
+.object-inner-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+.object-inner-content span,
+.object-inner-content .object-text-span {
+  width: 100%;
+  display: block;
+  text-align: inherit;
+  box-sizing: border-box;
+}
+
+.object-text-span:empty::before {
+  content: 'Metin girin...';
+  color: #94a3b8;
+  font-style: italic;
+  pointer-events: none;
+}
+
+/* ==========================================
+   YERİNDE METİN DÜZENLEME (INLINE EDITING)
+   ========================================== */
+.stage-object.is-editing-text {
+  cursor: text !important;
+}
+
+.stage-object.is-editing-text .object-inner-content {
+  pointer-events: auto !important;
+  user-select: text !important;
+  -webkit-user-select: text !important;
+}
+
+.stage-object.is-editing-text [contenteditable="true"] {
+  pointer-events: auto !important;
+  user-select: text !important;
+  -webkit-user-select: text !important;
+  cursor: text !important;
+  outline: 2px dashed #0ea5e9 !important;
+  outline-offset: 4px !important;
+  border-radius: 4px !important;
+  min-height: 1.2em;
+}
+
+/* Seçim kutusunun düzenleme sırasında tıklamaları engellememesi */
+.selection-box.is-editing-text {
+  pointer-events: none !important;
+}
+
+.selection-box.is-editing-text .selection-border {
+  pointer-events: none !important;
+  border-color: rgba(14, 165, 233, 0.3) !important;
+  border-style: dotted !important;
+}
+
+.selection-box.is-editing-text .resize-handle,
+.selection-box.is-editing-text .rotate-handle,
+.selection-box.is-editing-text .rotate-stem {
+  display: none !important;
+}
+
+.object-inner-content img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  pointer-events: none;
+}
+
+.image-caption {
+  margin-top: 4px;
+  font-size: 0.82rem;
+  font-weight: 600;
+}
+
+/* Kategori Başlığı ve Alanı */
+.category-header {
+  font-size: 1.15rem;
+  font-weight: 800;
+  color: #065f46;
+  margin-bottom: 6px;
+}
+
+.category-drop-hint {
+  font-size: 0.8rem;
+  color: #10b981;
+  font-style: italic;
+}
+
+/* Sıralama Kutusu */
+.sequence-slot-number {
+  font-size: 1.6rem;
+  font-weight: 800;
+  color: #6d28d9;
+}
+
+.sequence-slot-label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #64748b;
+}
+
+/* Kilit İkonu (Tıklanabilir buton) */
+.lock-indicator {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  font-size: 0.85rem;
+  background: #ffffff;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  padding: 2px 5px;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+  transition: all 0.15s ease;
+  z-index: 101;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lock-indicator:hover {
+  background: #fef2f2;
+  border-color: #ef4444;
+  transform: scale(1.15);
+}
+
+/* ==========================================
+   SEÇİM VE DÖNÜŞÜM ÇERÇEVESİ (.selection-box)
+   ========================================== */
+.selection-box {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: auto;
+  z-index: 1000;
+  display: none;
+}
+
+.selection-border {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  width: calc(100% + 2px);
+  height: calc(100% + 2px);
+  border: 1.5px solid #0ea5e9;
+  pointer-events: auto;
+  cursor: move;
+}
+
+.selection-box.multi-select .selection-border {
+  border: 1.5px dashed #0ea5e9;
+}
+
+.selection-border.group-border {
+  border: 1.5px solid #6366f1 !important;
+}
+
+.multi-count-badge.is-group-badge {
+  background: #6366f1 !important;
+}
+
+/* Kilitli Nesne Seçim Stili */
+.selection-box.is-locked-selection .locked-border {
+  border: 1.5px dashed #f59e0b;
+  cursor: default;
+}
+
+.selection-lock-floating-pill {
+  position: absolute;
+  top: -38px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  white-space: nowrap;
+  z-index: 1020;
+}
+
+.lock-pill-unlock-btn {
+  background: #1e293b;
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 9999px;
+  padding: 5px 12px;
+  font-size: 0.76rem;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.15s ease;
+  user-select: none;
+}
+
+.lock-pill-unlock-btn:hover {
+  background: #0f172a;
+  transform: scale(1.05);
+  border-color: #f59e0b;
+  color: #fbbf24;
+}
+
+/* 8 Yönlü Boyutlandırma Tutamaçları */
+.resize-handle {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: #ffffff;
+  border: 1.5px solid #0ea5e9;
+  border-radius: 1px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  z-index: 1010;
+  pointer-events: auto;
+}
+
+.handle-nw { top: -5px; left: -5px; cursor: nwse-resize; }
+.handle-n  { top: -5px; left: calc(50% - 4px); cursor: ns-resize; }
+.handle-ne { top: -5px; right: -5px; cursor: nesw-resize; }
+.handle-e  { top: calc(50% - 4px); right: -5px; cursor: ew-resize; }
+.handle-se { bottom: -5px; right: -5px; cursor: nwse-resize; }
+.handle-s  { bottom: -5px; left: calc(50% - 4px); cursor: ns-resize; }
+.handle-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
+.handle-w  { top: calc(50% - 4px); left: -5px; cursor: ew-resize; }
+
+/* Döndürme Tutamacı */
+.rotate-stem {
+  position: absolute;
+  top: -22px;
+  left: 50%;
+  width: 1px;
+  height: 18px;
+  background-color: #0ea5e9;
+  pointer-events: none;
+}
+
+.rotate-handle {
+  position: absolute;
+  top: -30px;
+  left: calc(50% - 6px);
+  width: 12px;
+  height: 12px;
+  background-color: #ffffff;
+  border: 1.5px solid #0ea5e9;
+  border-radius: 50%;
+  cursor: grab;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  z-index: 1020;
+  pointer-events: auto;
+}
+
+.rotate-handle:active {
+  cursor: grabbing;
+}
+
+/* Çizgi Seçim Tutamaçları ve Çerçevesi */
+.selection-box.is-line-selection {
+  pointer-events: none;
+}
+
+.selection-box.is-line-selection .selection-border {
+  display: none !important;
+}
+
+.line-endpoint-handle {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border-radius: 50% !important;
+  background-color: #ffffff !important;
+  border: 3px solid #f97316 !important;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  z-index: 1010;
+  pointer-events: auto;
+  cursor: grab;
+  transition: transform 0.12s ease;
+  box-sizing: border-box;
+}
+
+.line-endpoint-handle:hover {
+  transform: scale(1.2);
+  border-color: #ea580c !important;
+}
+
+.line-endpoint-handle:active {
+  cursor: grabbing;
+}
+
+.line-endpoint-handle.handle-start {
+  left: -9px;
+  top: calc(50% - 9px);
+}
+
+.line-endpoint-handle.handle-end {
+  right: -9px;
+  top: calc(50% - 9px);
+}
+
+.line-rotate-stem {
+  top: -24px;
+  height: 20px;
+}
+
+.line-rotate-handle {
+  top: -32px;
+}
+
+/* Çoklu Seçim Sayacı */
+.multi-count-badge {
+  position: absolute;
+  top: -26px;
+  left: 0;
+  background: #0ea5e9;
+  color: #ffffff;
+  font-size: 0.72rem;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+/* ==========================================
+   MARQUEE (ALAN SEÇİMİ) KUTUSU
+   ========================================== */
+.stage-marquee-selection {
+  position: absolute;
+  border: 1px solid #0ea5e9;
+  background-color: rgba(14, 165, 233, 0.12);
+  pointer-events: none;
+  z-index: 999;
+  display: none;
+}
+
+/* ==========================================
+   AKILLI KILAVUZ ÇİZGİLERİ (GUIDELINES)
+   ========================================== */
+.stage-guidelines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 998;
+}
+
+.guideline {
+  position: absolute;
+  background-color: #06b6d4;
+  box-shadow: 0 0 4px #06b6d4;
+}
+
+.guideline-h {
+  left: 0;
+  width: 100%;
+  height: 1px;
+}
+
+.guideline-v {
+  top: 0;
+  height: 100%;
+  width: 1px;
+}