@mhmttosun/dnd 0.0.0-stage → 1.1.0

package/js/core/EditorCore.js

@@ -0,0 +1,220 @@
+/**
+ * EditorCore - Merkezi veri modeli, durum yönetimi ve olay yayınlama sistemi.
+ * DOM'u veri kaynağı olarak kullanmaz; tek doğru kaynak (Single Source of Truth) bu sınıftır.
+ */
+class EditorCore {
+  constructor() {
+    this.events = {};
+    this.mode = 'design'; // 'design' | 'answer-key' | 'preview'
+    this.data = this.createDefaultProject();
+    this.activeSubMode = null;
+    this.historyManager = null;
+  }
+
+  // Geçmiş Yönetimi Entegrasyonu (Merkezi API)
+  setHistoryManager(historyManager) {
+    this.historyManager = historyManager;
+  }
+
+  pushHistoryState(description = '') {
+    if (this.historyManager && typeof this.historyManager.pushState === 'function') {
+      this.historyManager.pushState(description);
+    } else {
+      this.emit('requestHistoryPush', { description });
+    }
+  }
+
+  undo() {
+    if (this.historyManager && typeof this.historyManager.undo === 'function') {
+      return this.historyManager.undo();
+    }
+  }
+
+  redo() {
+    if (this.historyManager && typeof this.historyManager.redo === 'function') {
+      return this.historyManager.redo();
+    }
+  }
+
+  canUndo() {
+    return this.historyManager ? this.historyManager.canUndo() : false;
+  }
+
+  canRedo() {
+    return this.historyManager ? this.historyManager.canRedo() : false;
+  }
+
+  createDefaultProject(activityType = 'image-labeling', name = 'Yeni Etkinlik') {
+    return {
+      schemaVersion: 1,
+      version: '1.0',
+      project: {
+        id: 'proj_' + Date.now().toString(36),
+        name: name,
+        activityType: activityType,
+        description: 'Öğretmen tarafından hazırlanan etkileşimli sürükle-bırak etkinliği'
+      },
+      stage: {
+        width: 1200,
+        height: 675,
+        backgroundColor: '#f8fafc',
+        backgroundImage: null
+      },
+      objects: [],
+      answerKey: {},
+      settings: {
+        evaluationMode: 'instant',        // 'instant' | 'submit'
+        wrongAnswerBehavior: 'return',    // 'return' | 'stay'
+        correctAnswerBehavior: 'lock',    // 'lock'
+        showFeedback: true,
+        showScore: true,
+        allowRetry: true,
+        shuffleDraggables: true,
+        soundEnabled: true,
+        showTargetsInGame: true,
+        completionMessage: 'Harika İş! Etkinliği başarıyla tamamladınız.'
+      }
+    };
+  }
+
+  // Olay Dinleme ve Tetikleme
+  on(event, handler) {
+    if (!this.events[event]) this.events[event] = [];
+    this.events[event].push(handler);
+    return () => this.off(event, handler);
+  }
+
+  off(event, handler) {
+    if (!this.events[event]) return;
+    this.events[event] = this.events[event].filter(h => h !== handler);
+  }
+
+  emit(event, payload) {
+    if (this.events[event]) {
+      this.events[event].forEach(handler => {
+        try {
+          handler(payload);
+        } catch (err) {
+          console.error(`Olay işleyici hatası [${event}]:`, err);
+        }
+      });
+    }
+  }
+
+  // Mod Değişimi: 'design', 'answer-key', 'preview'
+  setMode(newMode) {
+    if (this.mode === newMode) return;
+    const oldMode = this.mode;
+    this.mode = newMode;
+    this.emit('modeChanged', { oldMode, newMode });
+  }
+
+  getMode() {
+    return this.mode;
+  }
+
+  // Proje Veri Yönetimi
+  loadProject(projectData, saveToHistory = true) {
+    const valResult = window.DND.ValidationEngine.validateProject(projectData);
+    if (!valResult.valid) {
+      throw new Error('Proje yüklenemedi: ' + valResult.errors.join(', '));
+    }
+
+    // Güvenli kopyalama ve varsayılan alan tamamlama
+    const defaults = this.createDefaultProject(
+      projectData.project?.activityType || 'image-labeling',
+      projectData.project?.name || 'Etkinlik'
+    );
+
+    this.data = {
+      schemaVersion: projectData.schemaVersion || 1,
+      version: projectData.version || '1.0',
+      project: Object.assign({}, defaults.project, projectData.project),
+      stage: Object.assign({}, defaults.stage, projectData.stage),
+      objects: (projectData.objects || []).map(obj => Object.assign({}, obj)),
+      answerKey: Object.assign({}, projectData.answerKey || {}),
+      settings: Object.assign({}, defaults.settings, projectData.settings)
+    };
+
+    const isHistoryRestore = (saveToHistory === false) || (typeof saveToHistory === 'object' && saveToHistory.isHistoryRestore);
+    const shouldSaveHistory = typeof saveToHistory === 'object' ? (saveToHistory.saveToHistory ?? true) : !!saveToHistory;
+
+    this.emit('projectLoaded', { project: this.data, saveToHistory: shouldSaveHistory, isHistoryRestore });
+    this.emit('dataChanged', { source: 'loadProject' });
+    this.autoSave();
+  }
+
+  getProjectData() {
+    // Derin kopya döndür
+    return JSON.parse(JSON.stringify(this.data));
+  }
+
+  setActivityType(newType) {
+    if (!window.DND.ValidationEngine.VALID_ACTIVITY_TYPES.includes(newType)) return;
+    this.data.project.activityType = newType;
+    this.emit('activityTypeChanged', { activityType: newType });
+    this.emit('dataChanged', { source: 'setActivityType' });
+    this.autoSave();
+  }
+
+  setProjectName(name) {
+    this.data.project.name = String(name).trim() || 'Adsız Etkinlik';
+    this.emit('projectNameChanged', { name: this.data.project.name });
+    this.emit('dataChanged', { source: 'setProjectName' });
+    this.autoSave();
+  }
+
+  updateSettings(partialSettings) {
+    this.data.settings = Object.assign({}, this.data.settings, partialSettings);
+    this.emit('settingsChanged', { settings: this.data.settings });
+    this.emit('dataChanged', { source: 'updateSettings' });
+    this.autoSave();
+  }
+
+  updateStage(partialStage) {
+    this.data.stage = Object.assign({}, this.data.stage, partialStage);
+    this.emit('stageChanged', { stage: this.data.stage });
+    this.emit('dataChanged', { source: 'updateStage' });
+    this.autoSave();
+  }
+
+  // Yerel depolama (Autosave)
+  autoSave() {
+    try {
+      const serialized = JSON.stringify(this.data);
+      // localStorage boyut sınırı (~5MB) kontrolü
+      if (serialized.length < 4 * 1024 * 1024) {
+        localStorage.setItem('dnd_autosave_project', serialized);
+        localStorage.setItem('dnd_autosave_time', Date.now().toString());
+      }
+    } catch (e) {
+      console.warn('Otomatik kayıt localStorage kapasitesi aşıldı veya depolama devre dışı.');
+    }
+  }
+
+  hasAutoSavedProject() {
+    try {
+      return !!localStorage.getItem('dnd_autosave_project');
+    } catch (e) {
+      return false;
+    }
+  }
+
+  loadAutoSavedProject() {
+    try {
+      const raw = localStorage.getItem('dnd_autosave_project');
+      if (raw) {
+        const parsed = JSON.parse(raw);
+        this.loadProject(parsed, false);
+        return true;
+      }
+    } catch (e) {
+      console.error('Otomatik kayıt yükleme hatası:', e);
+    }
+    return false;
+  }
+}
+
+// Global namespace
+window.DND = window.DND || {};
+window.DND.EditorCore = EditorCore;

package/js/core/HistoryManager.js

@@ -0,0 +1,194 @@
+/**
+ * HistoryManager - Geri Al (Undo) ve İleri Al (Redo) geçmiş yönetim sistemi.
+ * Nesne taşıma, boyutlandırma, silme, ekleme ve eşleştirme durumlarını kaydeder.
+ */
+class HistoryManager {
+  constructor(core, maxHistory = 40, options = {}) {
+    this.core = core;
+    if (this.core) {
+      this.core.historyManager = this;
+      if (typeof this.core.setHistoryManager === 'function') {
+        this.core.setHistoryManager(this);
+      }
+    }
+    this.maxHistory = maxHistory;
+    this.undoStack = [];
+    this.redoStack = [];
+    this.isApplying = false;
+    this.signal = options.signal;
+
+    this.init();
+
+    // Çekirdekte mevcut bir proje verisi varsa başlangıç taban durumunu kaydet
+    if (this.core && this.core.data) {
+      this.pushState('Başlangıç');
+    }
+  }
+
+  init() {
+    // Dışarıdan yeni bir proje yüklendiğinde geçmiş sıfırlanır ve yeni başlangıç durumu kaydedilir;
+    // ancak iç geri yüklemelerde (undo/redo sırasında isApplying veya saveToHistory === false) geçmiş korunur!
+    this.core.on('projectLoaded', (payload) => {
+      if (this.isApplying) return;
+      if (payload && (payload.saveToHistory === false || payload.isHistoryRestore)) return;
+      this.clear();
+      this.pushState('Proje Yüklendi');
+    });
+
+    // Çekirdekten veya bileşenlerden gelen açık geçmiş kaydetme isteği
+    this.core.on('requestHistoryPush', (payload) => {
+      if (this.isApplying) return;
+      this.pushState(payload?.description || '');
+    });
+
+    // Nesne ekleme işlemi
+    this.core.on('objectAdded', (payload) => {
+      if (this.isApplying) return;
+      if (payload && payload.saveHistory === false) return;
+      this.pushState('Nesne Eklendi');
+    });
+
+    // Nesne silme işlemi
+    this.core.on('objectDeleted', (payload) => {
+      if (this.isApplying) return;
+      if (payload && payload.saveHistory === false) return;
+      this.pushState('Nesne Silindi');
+    });
+
+    // Nesne özelliği güncelleme (renk, rol, metin, boyut vb.)
+    this.core.on('objectUpdated', (payload) => {
+      if (this.isApplying) return;
+      if (payload && payload.saveHistory === false) return;
+      this.pushState('Nesne Güncellendi');
+    });
+
+    // Katman sırası değişimi
+    this.core.on('layerChanged', (payload) => {
+      if (this.isApplying) return;
+      if (payload && payload.saveHistory === false) return;
+      this.pushState('Katman Değiştirildi');
+    });
+
+    // Cevap anahtarı eşleşme değişimi
+    this.core.on('answerKeyChanged', (payload) => {
+      if (this.isApplying) return;
+      if (payload && payload.saveHistory === false) return;
+      this.pushState('Cevap Anahtarı Güncellendi');
+    });
+
+    // Klavye kısayolları: Ctrl+Z / Ctrl+Y
+    window.addEventListener('keydown', (e) => {
+      if (['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement?.tagName) ||
+          document.activeElement?.isContentEditable) {
+        return;
+      }
+
+      if (this.core.getMode() !== 'design') return;
+
+      const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+      const cmdOrCtrl = isMac ? e.metaKey : e.ctrlKey;
+
+      if (cmdOrCtrl && e.key.toLowerCase() === 'z') {
+        if (e.shiftKey) {
+          // Redo
+          e.preventDefault();
+          this.redo();
+        } else {
+          // Undo
+          e.preventDefault();
+          this.undo();
+        }
+      } else if (cmdOrCtrl && e.key.toLowerCase() === 'y') {
+        // Redo
+        e.preventDefault();
+        this.redo();
+      }
+    }, this.signal ? { signal: this.signal } : undefined);
+  }
+
+  push(description = '') {
+    return this.pushState(description);
+  }
+
+  pushState(description = '') {
+    if (this.isApplying) return;
+
+    const snapshot = JSON.stringify(this.core.data);
+
+    // En son kaydedilen durumla aynıysa mükerrer kayıt yapma
+    if (this.undoStack.length > 0 && this.undoStack[this.undoStack.length - 1] === snapshot) {
+      return;
+    }
+
+    this.undoStack.push(snapshot);
+    if (this.undoStack.length > this.maxHistory) {
+      this.undoStack.shift();
+    }
+
+    // Yeni işlem yapıldığında Redo yığını sıfırlanır
+    this.redoStack = [];
+
+    this.notifyState(description);
+  }
+
+  undo() {
+    if (this.undoStack.length <= 1) return; // En az 1 başlangıç durumu kalmalı
+
+    this.isApplying = true;
+    try {
+      const currentState = this.undoStack.pop();
+      this.redoStack.push(currentState);
+
+      const prevState = this.undoStack[this.undoStack.length - 1];
+      const parsed = JSON.parse(prevState);
+      this.core.loadProject(parsed, { saveToHistory: false, isHistoryRestore: true });
+    } finally {
+      this.isApplying = false;
+      this.notifyState('Geri Alındı');
+    }
+  }
+
+  redo() {
+    if (this.redoStack.length === 0) return;
+
+    this.isApplying = true;
+    try {
+      const nextState = this.redoStack.pop();
+      this.undoStack.push(nextState);
+
+      const parsed = JSON.parse(nextState);
+      this.core.loadProject(parsed, { saveToHistory: false, isHistoryRestore: true });
+    } finally {
+      this.isApplying = false;
+      this.notifyState('İleri Alındı');
+    }
+  }
+
+  canUndo() {
+    return this.undoStack.length > 1;
+  }
+
+  canRedo() {
+    return this.redoStack.length > 0;
+  }
+
+  clear() {
+    this.undoStack = [];
+    this.redoStack = [];
+    this.notifyState('Geçmiş Sıfırlandı');
+  }
+
+  notifyState(action = '') {
+    this.core.emit('historyChanged', {
+      canUndo: this.canUndo(),
+      canRedo: this.canRedo(),
+      undoCount: Math.max(0, this.undoStack.length - 1),
+      redoCount: this.redoStack.length,
+      action
+    });
+  }
+}
+
+// Global namespace
+window.DND = window.DND || {};
+window.DND.HistoryManager = HistoryManager;

package/js/core/LayerManager.js

@@ -0,0 +1,86 @@
+/**
+ * LayerManager - Sahnedeki nesnelerin katman sırasını (z-index) ve
+ * öne/arkaya getirme işlemlerini yönetir.
+ */
+class LayerManager {
+  constructor(core, objectManager) {
+    this.core = core;
+    this.objectManager = objectManager;
+  }
+
+  getSortedObjects() {
+    return [...this.core.data.objects].sort((a, b) => (a.zIndex || 1) - (b.zIndex || 1));
+  }
+
+  normalizeLayers() {
+    const sorted = this.getSortedObjects();
+    sorted.forEach((obj, idx) => {
+      obj.zIndex = idx + 1;
+      this.objectManager.updateObjectDOM(obj);
+    });
+  }
+
+  bringToFront(id, saveHistory = true) {
+    const obj = this.objectManager.getObject(id);
+    if (!obj) return;
+
+    this.normalizeLayers();
+    const sorted = this.getSortedObjects();
+    const maxZ = sorted[sorted.length - 1]?.zIndex || 1;
+    obj.zIndex = maxZ + 1;
+
+    this.normalizeLayers();
+    this.core.emit('layerChanged', { object: obj, saveHistory });
+    this.core.emit('dataChanged', { source: 'layer' });
+  }
+
+  sendToBack(id, saveHistory = true) {
+    const obj = this.objectManager.getObject(id);
+    if (!obj) return;
+
+    this.normalizeLayers();
+    obj.zIndex = 0;
+
+    this.normalizeLayers();
+    this.core.emit('layerChanged', { object: obj, saveHistory });
+    this.core.emit('dataChanged', { source: 'layer' });
+  }
+
+  bringForward(id, saveHistory = true) {
+    this.normalizeLayers();
+    const sorted = this.getSortedObjects();
+    const idx = sorted.findIndex(o => o.id === id);
+    if (idx === -1 || idx === sorted.length - 1) return;
+
+    // Bir üsttekiyle yer değiştir
+    const nextObj = sorted[idx + 1];
+    const tempZ = sorted[idx].zIndex;
+    sorted[idx].zIndex = nextObj.zIndex;
+    nextObj.zIndex = tempZ;
+
+    this.normalizeLayers();
+    this.core.emit('layerChanged', { object: sorted[idx], saveHistory });
+    this.core.emit('dataChanged', { source: 'layer' });
+  }
+
+  sendBackward(id, saveHistory = true) {
+    this.normalizeLayers();
+    const sorted = this.getSortedObjects();
+    const idx = sorted.findIndex(o => o.id === id);
+    if (idx <= 0) return;
+
+    // Bir alttakiyle yer değiştir
+    const prevObj = sorted[idx - 1];
+    const tempZ = sorted[idx].zIndex;
+    sorted[idx].zIndex = prevObj.zIndex;
+    prevObj.zIndex = tempZ;
+
+    this.normalizeLayers();
+    this.core.emit('layerChanged', { object: sorted[idx], saveHistory });
+    this.core.emit('dataChanged', { source: 'layer' });
+  }
+}
+
+// Global namespace
+window.DND = window.DND || {};
+window.DND.LayerManager = LayerManager;