如何为ui.Halo及自定义ui.Halo句柄添加ui.ColorPalette（Rappid）

Hey there! Let’s walk through how to add a ui.ColorPalette to both the default ui.Halo and custom Halo handles in Rappid, plus make sure the halo icon shows the first color from your palette. I’ve messed around with these components a bunch, so here’s what works:

The default Halo lets you inject tools directly via its tools configuration. We’ll add the color palette tool, then hook into its change event to update the Halo’s icon with the selected color (starting with the first one in your list).

// First, initialize your cell (e.g., a standard rectangle)
const cell = new joint.shapes.standard.Rectangle({
    position: { x: 100, y: 100 },
    size: { width: 150, height: 100 },
    attrs: { body: { fill: '#fff' } }
});
cell.addTo(graph);

// Initialize the Halo with the ColorPalette tool included
const halo = new joint.ui.Halo({
    cell: cell,
    tools: [
        // Keep default tools like move/rotate, or customize as needed
        'move', 'rotate',
        // Add the color palette tool with your desired colors
        {
            type: 'color-palette',
            options: {
                colors: ['#ff4444', '#00C851', '#33b5e5', '#ffbb33'], // Your color list
                selectedColor: '#ff4444' // Set initial color to the first in the list
            }
        }
    ]
});

// Sync the Halo's main icon to display the selected color
halo.on('color-palette:change', (color) => {
    // Target the Halo's icon element (adjust selector if your Rappid version uses different classes)
    const haloIcon = halo.el.querySelector('.joint-halo .joint-halo-icon');
    if (haloIcon) {
        haloIcon.style.fill = color;
    }
    // Optional: Apply the selected color directly to the cell's fill
    cell.attr('body/fill', color);
});

// Render the Halo to your page
halo.render().appendTo(document.body);

Pro tip: Use your browser’s dev tools to confirm the exact DOM selector for the Halo icon—Rappid’s class names might shift slightly between versions.

If you’ve built custom handles for your Halo, you’ll need to attach the ColorPalette directly to the handle’s event listeners. Here’s how to create a custom handle that opens a color picker, and sets its icon to the first color in your palette by default:

const customHalo = new joint.ui.Halo({
    cell: cell,
    handles: [
        {
            name: 'custom-color-handle',
            position: 'ne', // Place the handle at the top-right corner of the cell
            // Use an SVG path as your base icon (or link to an external icon file)
            icon: '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>',
            action: 'none', // Disable default handle behavior (we'll add our own)
            events: {
                // Open the ColorPalette when the handle is clicked/tapped
                'mousedown touchstart': function(evt) {
                    evt.stopPropagation(); // Prevent the Halo from triggering drag behavior

                    // Create the ColorPalette instance
                    const colorPalette = new joint.ui.ColorPalette({
                        colors: ['#ff4444', '#00C851', '#33b5e5', '#ffbb33'],
                        selectedColor: '#ff4444'
                    });

                    // Position the palette right next to the cursor
                    colorPalette.render().position(evt.clientX, evt.clientY);

                    // Handle color selection from the palette
                    colorPalette.on('color:select', (color) => {
                        // Update the custom handle's icon color
                        this.el.querySelector('.handle-icon').style.fill = color;
                        // Apply the selected color to the cell
                        cell.attr('body/fill', color);
                        // Remove the palette after selection is made
                        colorPalette.remove();
                    });
                }
            }
        }
    ]
});

// Set the custom handle's initial color to the first in the palette
const customHandleIcon = customHalo.el.querySelector('.custom-color-handle .handle-icon');
if (customHandleIcon) {
    customHandleIcon.style.fill = '#ff4444';
}

// Render the custom Halo
customHalo.render().appendTo(document.body);

Note: Rappid automatically adds the handle-icon class to custom handle icons, so that selector should work consistently across setups. If you’re using an external icon file, make sure the SVG is set to inherit fill styles.

That should cover both scenarios—default Halo tools and custom handles—plus ensuring your halo icon starts with the first color from your palette. Let me know if you run into any edge cases with your specific Rappid version!

内容的提问来源于stack exchange，提问作者Dieter