public/traque
1
0
Fork 0
mirror of https://git.rezel.net/LudoTech/traque.git synced 2026-02-09 10:20:16 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added placement zones

Browse Source
This commit is contained in:
Sebastien Riviere
2025-09-07 17:24:29 +02:00
parent 93f9a05b1a
commit 75f8b10ecd
17 changed files with 436 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
traque-front/components/layer.jsx
View File

@@ -9,7 +9,7 @@ export function Node({pos, nodeSize = 5, color = 'black'}) {
);
}
export function LabeledPolygon({polygon, number, color = 'black', opacity = '0.5', border = 3, iconSize = 24, iconColor = 'white'}) {
export function LabeledPolygon({polygon, label, color = 'black', opacity = '0.5', border = 3, iconSize = 24, iconColor = 'white'}) {
const length = polygon.length;
if (length < 3) return null;
@@ -26,7 +26,7 @@ export function LabeledPolygon({polygon, number, color = 'black', opacity = '0.5
// Idea : take the mean point of the largest connected subpolygon
const meanPoint = {lat: sum.lat / length, lng: sum.lng / length}
const numberIcon = L.divIcon({
const labelIcon = L.divIcon({
html: `<div style="
display: flex;
align-items: center;
@@ -34,15 +34,15 @@ export function LabeledPolygon({polygon, number, color = 'black', opacity = '0.5
color: ${iconColor};
font-weight: bold;
font-size: ${iconSize}px;
">${number}</div>`,
className: 'custom-number-icon',
">${label}</div>`,
className: 'custom-label-icon',
iconSize: [iconSize, iconSize],
iconAnchor: [iconSize / 2, iconSize / 2]
});
return (<>
<Polygon positions={polygon} pathOptions={{ color: color, fillColor: color, fillOpacity: opacity, weight: border }} />
<Marker position={meanPoint} icon={numberIcon} />
<Marker position={meanPoint} icon={labelIcon} />
</>);
}

12
traque-front/components/list.jsx
View File

@@ -1,13 +1,19 @@
import { useEffect, useState } from 'react';
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
export function List({array, children}) {
export function List({array, selectedId, onSelected, children}) {
const canSelect = selectedId !== undefined
const cursor = () => canSelect ? " cursor-pointer" : "";
const outline = (id) => canSelect && id === selectedId ? " outline outline-4 outline-black" : "";
return (
<div className='w-full h-full bg-gray-300 overflow-y-scroll'>
<ul className="w-full p-1 pb-0">
{array.map((elem, i) => (
<li className="w-full" key={elem.id}>
{children(elem, i)}
<div className={"w-full" + cursor() + outline(elem.id)} onClick={() => canSelect && onSelected(elem.id)}>
{children(elem, i)}
</div>
<div className="w-full h-1"/>
</li>
))}
@@ -48,7 +54,7 @@ export function ReorderList({droppableId, array, setArray, children}) {
<li className='w-full' key={elem.id}>
<Draggable draggableId={elem.id.toString()} index={i}>
{provided => (
<div className='w-full' {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
<div className='w-full cursor-grab' {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
{children(elem, i)}
<div className="w-full h-1"/>
</div>