{ const dragData = { ...column, designerId, }; sourceDragColumn$.set(dragData); e.dataTransfer.setData('designer_column_drag_data', JSON.stringify(dragData)); }} on:dragend={e => { sourceDragColumn$.set(null); targetDragColumn$.set(null); }} on:dragover={e => { if ($sourceDragColumn$) { e.preventDefault(); targetDragColumn$.set({ ...column, designerId, }); } }} on:drop={e => { var data = e.dataTransfer.getData('designer_column_drag_data'); e.preventDefault(); if (!data) return; onCreateReference($sourceDragColumn$, $targetDragColumn$); sourceDragColumn$.set(null); targetDragColumn$.set(null); }} class:isDragSource={$sourceDragColumn$ && $sourceDragColumn$.designerId == designerId && $sourceDragColumn$.columnName == column.columnName} class:isDragTarget={$targetDragColumn$ && $targetDragColumn$.designerId == designerId && $targetDragColumn$.columnName == column.columnName} on:mousedown={e => onSelectColumn({ ...column, designerId, })} use:contextMenu={createMenu} > x.designerId == designerId && x.columnName == column.columnName && x.isOutput )} on:change={e => { if (e.target.checked) { onChangeColumn( { ...column, designerId, }, col => ({ ...col, isOutput: true }) ); } else { onChangeColumn( { ...column, designerId, }, col => ({ ...col, isOutput: false }) ); } }} /> {#if designerColumn?.filter} {/if} {#if designerColumn?.sortOrder > 0} {/if} {#if designerColumn?.sortOrder < 0} {/if} {#if designerColumn?.isGrouped} {/if}