update

test/test.wysiwyg-dragdrop-visual.browser.ts

@@ -0,0 +1,133 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg drag visual feedback - block movement', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Block 1' },
+    { id: 'block2', type: 'paragraph', content: 'Block 2' },
+    { id: 'block3', type: 'paragraph', content: 'Block 3' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  const block1 = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
+  
+  // Manually start drag
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {},
+      setDragImage: (img: any, x: number, y: number) => {}
+    },
+    clientY: 50,
+    preventDefault: () => {},
+  } as any;
+  
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  // Wait for dragging class
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Check dragging state
+  console.log('Block 1 classes:', block1.className);
+  console.log('Editor content classes:', editorContent.className);
+  expect(block1.classList.contains('dragging')).toBeTrue();
+  expect(editorContent.classList.contains('dragging')).toBeTrue();
+  
+  // Check drop indicator exists
+  const dropIndicator = editorContent.querySelector('.drop-indicator') as HTMLElement;
+  console.log('Drop indicator:', dropIndicator);
+  expect(dropIndicator).toBeTruthy();
+  
+  // Test block movement calculation
+  console.log('Testing updateBlockPositions...');
+  
+  // Access private method for testing
+  const updateBlockPositions = element.dragDropHandler['updateBlockPositions'].bind(element.dragDropHandler);
+  
+  // Simulate dragging to different position
+  updateBlockPositions(150); // Move down
+  
+  // Check if blocks have move classes
+  const blocks = Array.from(editorContent.querySelectorAll('.block-wrapper'));
+  console.log('Block classes after move:');
+  blocks.forEach((block, i) => {
+    console.log(`Block ${i}:`, block.className, 'transform:', (block as HTMLElement).style.getPropertyValue('--drag-offset'));
+  });
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+tap.test('wysiwyg drop indicator positioning', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Paragraph 1' },
+    { id: 'block2', type: 'heading-2', content: 'Heading 2' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  
+  // Start dragging first block
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {},
+      setDragImage: (img: any, x: number, y: number) => {}
+    },
+    clientY: 50,
+    preventDefault: () => {},
+  } as any;
+  
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  // Wait for initialization
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Get drop indicator
+  const dropIndicator = editorContent.querySelector('.drop-indicator') as HTMLElement;
+  expect(dropIndicator).toBeTruthy();
+  
+  // Check initial display state
+  console.log('Drop indicator initial display:', dropIndicator.style.display);
+  
+  // Trigger updateBlockPositions to see drop indicator
+  const updateBlockPositions = element.dragDropHandler['updateBlockPositions'].bind(element.dragDropHandler);
+  updateBlockPositions(100);
+  
+  // Check drop indicator position
+  console.log('Drop indicator after update:');
+  console.log('- display:', dropIndicator.style.display);
+  console.log('- top:', dropIndicator.style.top);
+  console.log('- height:', dropIndicator.style.height);
+  
+  expect(dropIndicator.style.display).toEqual('block');
+  expect(dropIndicator.style.top).toBeTruthy();
+  expect(dropIndicator.style.height).toBeTruthy();
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+tap.start();