[text] BoardCode

Viewer

copydownloadembedprintName: BoardCode
  1. let canvasInstance;
  2. function registerCanvasInstance(dotnetHelper) {
  3.     canvasInstance = dotnetHelper;
  4. }
  5. async function updateItemPosition(id, x, y) {
  6.     await canvasInstance.invokeMethodAsync('UpdateItemPosition', id, x, y)
  7. }
  8. document.addEventListener('DOMContentLoaded', function () {
  9.     let currentMode = 'move';
  10.     const colors = ['red', 'blue', 'green', 'yellow'];
  11.     let colorIndex = 0;
  12.  
  13.  
  14.     window.addNote = (noteId, position) => {
  15.         const canvas = document.getElementById('canvas');
  16.         const note = document.createElement('div');
  17.         note.id = noteId;
  18.         note.classList.add('note', 'draggable');
  19.         note.textContent = noteId;
  20.         note.style.top = `${position.y}px`;
  21.         note.style.left = `${position.x}px`;
  22.         canvas.appendChild(note);
  23.  
  24.         interact(note).draggable({
  25.             modifiers: [
  26.                 interact.modifiers.restrictRect({
  27.                     restriction: 'parent',
  28.                     endOnly: true
  29.                 })
  30.             ],
  31.             listeners: {
  32.                 start(event) {
  33.                     if (currentMode === 'move') {
  34.                         event.target.classList.add('dragging');
  35.                     }
  36.                 },
  37.                 move(event) {
  38.                     if (currentMode === 'move') {
  39.                         const target = event.target;
  40.                         const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
  41.                         const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
  42.                         target.style.transform = `translate(${x}px, ${y}px)`;
  43.                         target.setAttribute('data-x', x);
  44.                         target.setAttribute('data-y', y);
  45.                         canvasInstance.invokeMethodAsync("UpdateItemPosition", target.id, x, y);
  46.                     }
  47.                 },
  48.                 end(event) {
  49.                     if (currentMode === 'move') {
  50.                         event.target.classList.remove('dragging');
  51.                         checkOverlap(event.target);
  52.                     }
  53.                 }
  54.             }
  55.         });
  56.  
  57.         note.addEventListener('click', () => {
  58.             if (currentMode === 'color') {
  59.                 note.style.backgroundColor = colors[colorIndex];
  60.                 colorIndex = (colorIndex + 1) % colors.length;
  61.             } else if (currentMode === 'delete') {
  62.                 note.remove();
  63.             }
  64.         });
  65.     };
  66.  
  67.     window.setMode = (mode) => {
  68.         currentMode = mode;
  69.     };
  70.     function checkOverlap(note) {
  71.         const notes = document.querySelectorAll('.note');
  72.         notes.forEach(otherNote => {
  73.             if (note !== otherNote && isOverlapping(note, otherNote)) {
  74.                 resolveOverlap(note, otherNote);
  75.             }
  76.         });
  77.     }
  78.  
  79.     function isOverlapping(note1, note2) {
  80.         const rect1 = note1.getBoundingClientRect();
  81.         const rect2 = note2.getBoundingClientRect();
  82.  
  83.         return (Math.abs(rect1.right - rect2.right) < 20 &&
  84.             Math.abs(rect1.top - rect2.top) < 20);
  85.     }
  86.  
  87.     function resolveOverlap(note, otherNote) {
  88.         const rect1 = note.getBoundingClientRect();
  89.         const rect2 = otherNote.getBoundingClientRect();
  90.         const deltaX = rect1.left - rect2.left;
  91.         const deltaY = rect1.top - rect2.top;
  92.  
  93.         if (Math.abs(deltaX) < Math.abs(deltaY)) {
  94.             // Przesuń w poziomie
  95.             if (deltaX > 0) {
  96.                 note.style.transform = `translate(${parseFloat(note.getAttribute('data-x')) + 10}px, ${parseFloat(note.getAttribute('data-y'))}px)`;
  97.             } else {
  98.                 note.style.transform = `translate(${parseFloat(note.getAttribute('data-x')) - 10}px, ${parseFloat(note.getAttribute('data-y'))}px)`;
  99.             }
  100.         } else {
  101.             // Przesuń w pionie
  102.             if (deltaY > 0) {
  103.                 note.style.transform = `translate(${parseFloat(note.getAttribute('data-x'))}px, ${parseFloat(note.getAttribute('data-y')) + 10}px)`;
  104.             } else {
  105.                 note.style.transform = `translate(${parseFloat(note.getAttribute('data-x'))}px, ${parseFloat(note.getAttribute('data-y')) - 10}px)`;
  106.             }
  107.         }
  108.  
  109.         note.setAttribute('data-x', parseFloat(note.getAttribute('data-x')) + (deltaX > 0 ? 10 : -10));
  110.         note.setAttribute('data-y', parseFloat(note.getAttribute('data-y')) + (deltaY > 0 ? 10 : -10));
  111.     }
  112. });
  113.  
  114.  
  115.  
  116.  
  117.  
  118.  
  119.  
  120.  
  121. @page "/dashboard"
  122. @using System.Diagnostics
  123. @using Microsoft.JSInterop;
  124. @inject IJSRuntime JS
  125. @rendermode InteractiveServer
  126.  
  127. <PageTitle>Dashboard</PageTitle>
  128. <h3>Dashboard</h3>
  129.  
  130. <div>
  131.     <button class="btn btn-primary" @onclick="AddNote">Dodaj kartkę</button>
  132.     <button class="btn btn-primary" @onclick="@( () => SetMode("move") )">Tryb przesuwania</button>
  133.     <button class="btn btn-primary" @onclick="@( () => SetMode("color") )">Tryb zmiany koloru</button>
  134.     <button class="btn btn-primary" @onclick="@( () => SetMode("delete") )">Tryb usuwania</button>
  135. </div>
  136.  
  137. <div id="canvas" class="canvas"></div>
  138.  
  139. @code {
  140.     private int _noteCounter = 0;
  141.     private int _offsetX = 0;
  142.     private int _offsetY = 0;
  143.     private List<Card> Cards = new List<Card>();
  144.  
  145.     private async Task AddNote()
  146.     {
  147.         _noteCounter++;
  148.         var noteId = $"note-{_noteCounter}";
  149.         var position = new { X = _offsetX, Y = _offsetY };
  150.  
  151.         _offsetX += 20;
  152.         _offsetY += 20;
  153.         Cards.Add(new Card(){Id = noteId, X = _offsetX, Y = _offsetY});
  154.         await JS.InvokeVoidAsync("addNote", noteId, position);
  155.     }
  156.  
  157.     private async Task SetMode(string mode)
  158.     {
  159.         await JS.InvokeVoidAsync("setMode", mode);
  160.     }
  161.  
  162.     [JSInvokableAttribute("UpdateItemPosition")]
  163.     public void UpdateItemPosition(string id, int x, int y)
  164.     {
  165.         Debug.Print($"id: {id}, x: {x}, y: {y}");
  166.         var item = Cards.FirstOrDefault(i => i.Id == id);
  167.         item.X = x;
  168.         item.Y = y;
  169.         StateHasChanged();
  170.     }
  171.  
  172.     public class Card
  173.     {
  174.         public string Id { get; set; }
  175.         public int X { get; set; }
  176.         public int Y { get; set; }
  177.         public bool IsMoved { get; set; }
  178.     }
  179.  
  180. }

Editor

You can edit this paste and save as new:


File Description
  • BoardCode
  • Paste Code
  • 07 Jul-2024
  • 6.19 Kb
You can Share it: