function drawSource() {
                    syncActiveConfig();
                    if (state.imageMode === 'whole') {
                        renderConfig(state.globalConfig);
                        state.sourcePixels = state.globalConfig.pixels;
                    } else {
                        state.bladeConfigs.forEach( (config) => {
                            if (config.image || config.editDirty)
                                renderConfig(config);
                            else
                                config.pixels = null;
                        }
                        );
                    }
                    drawMaskPreview();
                }

                function modelToCanvas(x, y, canvas) {
                    var bounds = modelBounds();
                    return [(y - bounds.yMin) / (bounds.yMax - bounds.yMin) * canvas.width, (x - bounds.xMin) / (bounds.xMax - bounds.xMin) * canvas.height];
                }

                function appendBladePath(ctx, angle, canvas) {
                    FAN.outline.forEach( (point, index) => {
                        var world = rotatePoint(point[0], point[1], angle);
                        var p = modelToCanvas(world[0], world[1], canvas);
                        if (index === 0)
                            ctx.moveTo(p[0], p[1]);
                        else
                            ctx.lineTo(p[0], p[1]);
                    }
                    );
                    ctx.closePath();
                }

                function currentReliefMargin() {
                    return ui.reliefMargin ? Number(ui.reliefMargin.value) : FAN.margin;
                }

                function reliefHalfAt(radius, margin=currentReliefMargin()) {
                    return Math.max(.25, widthAt(radius) + (FAN.edgeOverlap || 0) - margin);
                }

                function reliefRadiusAt(index, count) {
                    if (!FAN.headArc || count < 4) {
                        return FAN.rMin + (FAN.rMax - FAN.rMin) * index / (count - 1);
                    }
                    var arc = FAN.headArc;
                    var startAngle = Math.acos(clamp((arc.startRadius - arc.centerRadius) / arc.radius, -1, 1));
                    var endAngle = Math.acos(clamp((FAN.rMax - arc.centerRadius) / arc.radius, -1, 1));
                    var headSegments = clamp(Math.max(24, Math.round((count - 1) * .15)), 2, count - 3);
                    var bodySegments = count - 1 - headSegments;
                    if (index <= bodySegments) {
                        return FAN.rMin + (arc.startRadius - FAN.rMin) * index / bodySegments;
                    }
                    var headProgress = (index - bodySegments) / (count - 1 - bodySegments);
                    var angle = startAngle + (endAngle - startAngle) * headProgress;
                    return arc.centerRadius + arc.radius * Math.cos(angle);
                }

                function rootCapTriangleCount() {
                    return FAN.rootInnerUpper.length * 8 + 4;
                }

                function outerReliefTipRadius() {
                    return FAN.profile[FAN.profile.length - 1][0] + (FAN.tipOverlap || 0);
                }

                function rootReliefPolygon(margin=currentReliefMargin()) {
                    var insetUpper = FAN.rootInnerUpper.map( ([radius,half]) => [radius, Math.max(.25, half - margin)]);
                    var joinHalf = reliefHalfAt(FAN.rMin, margin);
                    return [[FAN.rMin, -joinHalf], ...insetUpper.slice().reverse().map( ([radius,half]) => [radius, -half]), [FAN.rootTipRadius, 0], ...insetUpper, [FAN.rMin, joinHalf]];
                }

                function pointInPolygon2D(x, y, polygon) {
                    var inside = false;
                    for (let index = 0, previous = polygon.length - 1; index < polygon.length; previous = index++) {
                        const [xi,yi] = polygon[index];
                        const [xj,yj] = polygon[previous];
                        var crosses = (yi > y) !== (yj > y) && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
                        if (crosses)
                            inside = !inside;
                    }
                    return inside;
                }

                function appendReliefPath(ctx, angle, canvas) {
                    var steps = 96;
                    var margin = currentReliefMargin();
                    var pointIndex = 0;
                    for (let index = 0; index < steps; index++) {
                        var radius = reliefRadiusAt(index, steps);
                        var half = reliefHalfAt(radius, margin);
                        var world = rotatePoint(-radius, half, angle);
                        var point = modelToCanvas(world[0], world[1], canvas);
                        if (pointIndex++ === 0)
                            ctx.moveTo(point[0], point[1]);
                        else
                            ctx.lineTo(point[0], point[1]);
                    }
                    for (let index = steps - 1; index >= 0; index--) {
                        var radius = reliefRadiusAt(index, steps);
                        var half = reliefHalfAt(radius, margin);
                        var world = rotatePoint(-radius, -half, angle);
                        var point = modelToCanvas(world[0], world[1], canvas);
                        ctx.lineTo(point[0], point[1]);
                    }
                    var rootPolygon = rootReliefPolygon(margin);
                    for (let index = 1; index < rootPolygon.length; index++) {
                        const [radius,localY] = rootPolygon[index];
                        var world = rotatePoint(-radius, localY, angle);
                        var point = modelToCanvas(world[0], world[1], canvas);
                        ctx.lineTo(point[0], point[1]);
                    }
                    ctx.closePath();
                }

                function drawBladePath(ctx, angle, canvas) {
                    ctx.beginPath();
                    appendBladePath(ctx, angle, canvas);
                }

                function ensureMaskLookup(canvas) {
                    var margin = currentReliefMargin();
                    if (state.maskLookup && state.maskLookup.width === canvas.width && state.maskLookup.height === canvas.height && state.maskLookup.margin === margin) {
                        return state.maskLookup;
                    }
                    var length = canvas.width * canvas.height;
                    var blade = new Int8Array(length);
                    blade.fill(-1);
                    var u = new Float32Array(length);
                    var v = new Float32Array(length);
                    var bounds = modelBounds();
                    var modelW = bounds.xMax - bounds.xMin;
                    var modelH = bounds.yMax - bounds.yMin;
                    var rootPolygon = rootReliefPolygon(margin);
                    for (let py = 0; py < canvas.height; py++) {
                        var worldX = bounds.xMin + (py + .5) / canvas.height * modelW;
                        for (let px = 0; px < canvas.width; px++) {
                            var worldY = bounds.yMin + (px + .5) / canvas.width * modelH;
                            var out = py * canvas.width + px;
                            for (let bladeIndex = 0; bladeIndex < FAN.angles.length; bladeIndex++) {
                                var local = rotatePoint(worldX, worldY, -FAN.angles[bladeIndex]);
                                var radius = -local[0];
                                if (radius < FAN.rootMinRadius || radius > FAN.rMax)
                                    continue;
                                var half = reliefHalfAt(radius, margin);
                                var inMainPanel = radius >= FAN.rMin && Math.abs(local[1]) <= half;
                                var inRootCap = radius < FAN.rMin && pointInPolygon2D(radius, local[1], rootPolygon);
                                if (!inMainPanel && !inRootCap)
                                    continue;
                                blade[out] = bladeIndex;
                                u[out] = clamp((radius - FAN.rMin) / (FAN.rMax - FAN.rMin), 0, 1);
                                v[out] = clamp((half - local[1]) / (2 * half), 0, 1);
                                break;
                            }
                        }
                    }
                    state.maskLookup = {
                        width: canvas.width,
                        height: canvas.height,
                        margin,
                        blade,
                        u,
                        v
                    };
                    return state.maskLookup;
                }

                function drawWholeMask(ctx, canvas) {
                    var pattern = document.createElement('canvas');
                    pattern.width = canvas.width;
                    pattern.height = canvas.height;
                    pattern.getContext('2d').drawImage(ui.sourceCanvas, 0, 0, pattern.width, pattern.height);

                    ctx.save();
                    ctx.beginPath();
                    FAN.angles.forEach( (angle) => appendReliefPath(ctx, angle, canvas));
                    ctx.clip('nonzero');
                    ctx.drawImage(pattern, 0, 0);
                    ctx.restore();
                }

                function drawIndividualMask(ctx, canvas) {
                    var lookup = ensureMaskLookup(canvas);
                    var output = ctx.createImageData(canvas.width, canvas.height);
                    var data = output.data;
                    for (let i = 0; i < lookup.blade.length; i++) {
                        var out = i * 4;
                        var bladeIndex = lookup.blade[i];
                        if (bladeIndex < 0) {
                            data[out] = 213;
                            data[out + 1] = 226;
                            data[out + 2] = 224;
                            data[out + 3] = 255;
                            continue;
                        }
                        var pixels = state.bladeConfigs[bladeIndex].pixels;
                        if (!pixels) {
                            data[out] = 244;
                            data[out + 1] = 244;
                            data[out + 2] = 238;
                            data[out + 3] = 255;
                            continue;
                        }
                        var sx = clamp(Math.round(lookup.u[i] * (pixels.width - 1)), 0, pixels.width - 1);
                        var sy = clamp(Math.round(lookup.v[i] * (pixels.height - 1)), 0, pixels.height - 1);
                        var source = (sy * pixels.width + sx) * 4;
                        data[out] = pixels.data[source];
                        data[out + 1] = pixels.data[source + 1];
                        data[out + 2] = pixels.data[source + 2];
                        data[out + 3] = 255;
                    }
                    ctx.putImageData(output, 0, 0);
                }

                function drawMaskPreview() {
                    var canvas = ui.maskCanvas;
                    var ctx = canvas.getContext('2d');
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.fillStyle = '#d5e2e0';
                    ctx.fillRect(0, 0, canvas.width, canvas.height);

                    if (state.imageMode === 'whole')
                        drawWholeMask(ctx, canvas);
                    else
                        drawIndividualMask(ctx, canvas);

                    ctx.save();
                    ctx.lineJoin = 'round';
                    FAN.angles.forEach( (angle, bladeIndex) => {
                        drawBladePath(ctx, angle, canvas);
                        var selected = state.imageMode === 'blade' && bladeIndex === state.selectedBlade;
                        ctx.strokeStyle = selected ? '#c64c3f' : 'rgba(16,38,50,.68)';
                        ctx.lineWidth = selected ? 3 : 1.25;
                        ctx.stroke();
                    }
                    );
                    var pivot = modelToCanvas(0, 0, canvas);
                    ctx.beginPath();
                    ctx.arc(pivot[0], pivot[1], canvas.width * .035, 0, Math.PI * 2);
                    ctx.fillStyle = '#244f59';
                    ctx.fill();
                    ctx.beginPath();
                    ctx.arc(pivot[0], pivot[1], canvas.width * .022, 0, Math.PI * 2);
                    ctx.fillStyle = '#b3c9c5';
                    ctx.fill();
                    ctx.restore();
                    drawEditorObjectOverlay(ctx, canvas);
                }

                function pointerOnActiveEditCanvas(event) {
                    var rect = ui.maskCanvas.getBoundingClientRect();
                    var px = clamp((event.clientX - rect.left) / rect.width * ui.maskCanvas.width, 0, ui.maskCanvas.width - .001);
                    var py = clamp((event.clientY - rect.top) / rect.height * ui.maskCanvas.height, 0, ui.maskCanvas.height - .001);
                    var config = activeConfig();
                    var lookup = ensureMaskLookup(ui.maskCanvas);
                    var index = Math.floor(py) * ui.maskCanvas.width + Math.floor(px);
                    if (lookup.blade[index] < 0)
                        return null;
                    if (state.imageMode === 'whole') {
                        return [px / ui.maskCanvas.width * config.editCanvas.width, py / ui.maskCanvas.height * config.editCanvas.height];
                    }
                    if (lookup.blade[index] !== state.selectedBlade)
                        return null;
                    return [lookup.u[index] * (config.editCanvas.width - 1), lookup.v[index] * (config.editCanvas.height - 1)];
                }

                function pointerOnTextEditCanvas(event) {
                    var rect = ui.maskCanvas.getBoundingClientRect();
                    var screenX = event.clientX - rect.left;
                    var screenY = event.clientY - rect.top;
                    if (screenX < 0 || screenY < 0 || screenX > rect.width || screenY > rect.height)
                        return null;
                    var px = screenX / rect.width * ui.maskCanvas.width;
                    var py = screenY / rect.height * ui.maskCanvas.height;
                    var config = activeConfig();
                    if (state.imageMode === 'whole') {
                        return [px / ui.maskCanvas.width * config.editCanvas.width, py / ui.maskCanvas.height * config.editCanvas.height];
                    }
                    var bounds = modelBounds();
                    var worldX = bounds.xMin + py / ui.maskCanvas.height * (bounds.xMax - bounds.xMin);
                    var worldY = bounds.yMin + px / ui.maskCanvas.width * (bounds.yMax - bounds.yMin);
                    var local = rotatePoint(worldX, worldY, -FAN.angles[state.selectedBlade]);
                    var radius = -local[0];
                    var half = reliefHalfAt(clamp(radius, FAN.rMin, FAN.rMax));
                    var u = (radius - FAN.rMin) / (FAN.rMax - FAN.rMin);
                    var v = (half - local[1]) / Math.max(.5, 2 * half);
                    return [u * (config.editCanvas.width - 1), v * (config.editCanvas.height - 1)];
                }

                function editPointToMask(config, point, canvas=ui.maskCanvas) {
                    if (state.imageMode === 'whole') {
                        return [point[0] / config.editCanvas.width * canvas.width, point[1] / config.editCanvas.height * canvas.height];
                    }
                    var u = point[0] / Math.max(1, config.editCanvas.width - 1);
                    var v = point[1] / Math.max(1, config.editCanvas.height - 1);
                    var radius = FAN.rMin + u * (FAN.rMax - FAN.rMin);
                    var half = reliefHalfAt(clamp(radius, FAN.rMin, FAN.rMax));
                    var localY = half - v * 2 * half;
                    var world = rotatePoint(-radius, localY, FAN.angles[state.selectedBlade]);
                    return modelToCanvas(world[0], world[1], canvas);
                }

                function vectorObjectBounds(config, object) {
                    var minX, minY, maxX, maxY;
                    if (object.type === 'text') {
                        var ctx = config.editCanvas.getContext('2d');
                        var metrics = textLayoutMetrics(ctx, object);
                        var vertical = object.fontSize * .72 + Math.abs(metrics.sagitta);
                        minX = object.x - metrics.total / 2 - object.fontSize * .2;
                        maxX = object.x + metrics.total / 2 + object.fontSize * .2;
                        minY = object.y - vertical - object.fontSize * .2;
                        maxY = object.y + object.fontSize * .65 + Math.abs(metrics.sagitta) * .12;
                    } else if (object.type === 'spline') {
                        var points = object.points || [];
                        if (!points.length)
                            return null;
                        minX = Math.min(...points.map( (point) => point[0]));
                        minY = Math.min(...points.map( (point) => point[1]));
                        maxX = Math.max(...points.map( (point) => point[0]));
                        maxY = Math.max(...points.map( (point) => point[1]));
                    } else {
                        minX = Math.min(object.x1, object.x2);
                        minY = Math.min(object.y1, object.y2);
                        maxX = Math.max(object.x1, object.x2);
                        maxY = Math.max(object.y1, object.y2);
                    }
                    var pad = Math.max(5, object.lineWidth || object.fontSize * .08 || 5);
                    return {
                        minX: minX - pad,
                        minY: minY - pad,
                        maxX: maxX + pad,
                        maxY: maxY + pad
                    };
                }

                function objectControlPoints(object, bounds) {
                    if (object.type === 'spline')
                        return object.points || [];
                    if (object.type === 'text')
                        return [[object.x, object.y]];
                    if (['triangle', 'polygon', 'star', 'diamond'].includes(object.type)) {
                        var count = object.type === 'triangle' ? 3 : object.type === 'polygon' ? (object.sides || 6) : object.type === 'star' ? 5 : 4;
                        return regularShapePoints(object, count);
                    }
                    return [[bounds.minX, bounds.minY], [bounds.maxX, bounds.minY], [bounds.maxX, bounds.maxY], [bounds.minX, bounds.maxY]];
                }

                function drawEditorObjectOverlay(ctx, canvas) {
                    var config = activeConfig();
                    var object = state.editorTool === 'select' ? selectedVectorObject(config) : null;
                    if (object) {
                        var bounds = vectorObjectBounds(config, object);
                        if (bounds) {
                            var corners = [[bounds.minX, bounds.minY], [bounds.maxX, bounds.minY], [bounds.maxX, bounds.maxY], [bounds.minX, bounds.maxY]].map( (point) => editPointToMask(config, point, canvas));
                            ctx.save();
                            ctx.strokeStyle = 'rgba(198,76,63,.96)';
                            ctx.fillStyle = '#fff';
                            ctx.lineWidth = 1.5;
                            ctx.setLineDash([6, 4]);
                            ctx.beginPath();
                            tracePoints(ctx, corners);
                            ctx.stroke();
                            ctx.setLineDash([]);
                            objectControlPoints(object, bounds).forEach( (point) => {
                                var screen = editPointToMask(config, point, canvas);
                                ctx.beginPath();
                                ctx.arc(screen[0], screen[1], 3.5, 0, Math.PI * 2);
                                ctx.fill();
                                ctx.stroke();
                            }
                            );
                            ctx.restore();
                        }
                    }
                    var preview = state.editorPreview;
                    if (preview && preview.config === config && preview.object) {
                        var point = preview.object.type === 'text' ? [preview.object.x, preview.object.y] : preview.object.type === 'spline' ? preview.object.points[preview.object.points.length - 1] : [preview.object.x2, preview.object.y2];
                        if (point) {
                            var screen = editPointToMask(config, point, canvas);
                            ctx.save();
                            ctx.strokeStyle = 'rgba(198,76,63,.96)';
                            ctx.fillStyle = 'rgba(255,255,255,.84)';
                            ctx.lineWidth = 1.25;
                            ctx.beginPath();
                            ctx.arc(screen[0], screen[1], 5, 0, Math.PI * 2);
                            ctx.fill();
                            ctx.stroke();
                            ctx.beginPath();
                            ctx.moveTo(screen[0] - 9, screen[1]);
                            ctx.lineTo(screen[0] + 9, screen[1]);
                            ctx.moveTo(screen[0], screen[1] - 9);
                            ctx.lineTo(screen[0], screen[1] + 9);
                            ctx.stroke();
                            ctx.restore();
                        }
                    }
                }

                function hitTestVectorObject(config, point) {
                    var scale = config.editCanvas.width / ui.maskCanvas.width;
                    var tolerance = 10 * scale;
                    for (let index = config.vectorObjects.length - 1; index >= 0; index--) {
                        var object = config.vectorObjects[index];
                        var bounds = vectorObjectBounds(config, object);
                        if (!bounds)
                            continue;
                        if (point[0] >= bounds.minX - tolerance && point[0] <= bounds.maxX + tolerance && point[1] >= bounds.minY - tolerance && point[1] <= bounds.maxY + tolerance)
                            return object;
                    }
                    return null;
                }

                function translateVectorObject(object, dx, dy) {
                    if (object.type === 'text') {
                        object.x += dx;
                        object.y += dy;
                    } else if (object.type === 'spline') {
                        object.points = object.points.map( (point) => [point[0] + dx, point[1] + dy]);
                    } else {
                        object.x1 += dx;
                        object.y1 += dy;
                        object.x2 += dx;
                        object.y2 += dy;
                    }
                }

                function cloneVectorObjects(objects) {
                    return objects.map( (object) => JSON.parse(JSON.stringify(object)));
                }

                function updateConfigEditDirty(config) {
                    config.editDirty = Boolean(config.paintDirty || config.vectorObjects.length);
                }

                function currentTextFont(key=state.textFont) {
                    return TEXT_FONTS[key] || TEXT_FONTS.xingkai;
                }

                function textLayoutMetrics(ctx, object) {
                    var font = currentTextFont(object.fontKey);
                    ctx.font = `${font.weight} ${object.fontSize}px ${font.family}`;
                    var characters = Array.from(object.value || '');
                    var spacing = object.fontSize * .045;
                    var widths = characters.map( (character) => Math.max(1, ctx.measureText(character).width));
                    var total = widths.reduce( (sum, width) => sum + width, 0) + Math.max(0, characters.length - 1) * spacing;
                    var sagitta = object.arc / 100 * Math.max(object.fontSize * 1.7, total * .22);
                    return {
                        characters,
                        widths,
                        spacing,
                        total: Math.max(1, total),
                        sagitta
                    };
                }

                function drawCurvedText(ctx, object) {
                    var font = currentTextFont(object.fontKey);
                    var metrics = textLayoutMetrics(ctx, object);
                    var cursor = -metrics.total / 2;
                    ctx.save();
                    ctx.fillStyle = object.color;
                    ctx.strokeStyle = object.color;
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.lineJoin = 'round';
                    ctx.lineWidth = Math.max(1, object.fontSize * .085);
                    ctx.font = `${font.weight} ${object.fontSize}px ${font.family}`;
                    metrics.characters.forEach( (character, index) => {
                        var center = cursor + metrics.widths[index] / 2;
                        var normalized = center / metrics.total;
                        var yOffset = -metrics.sagitta * (1 - 4 * normalized * normalized);
                        var tangent = 8 * metrics.sagitta * normalized / metrics.total;
                        ctx.save();
                        ctx.translate(object.x + center, object.y + yOffset);
                        ctx.rotate(Math.atan(tangent));
                        if (object.textStyle === 'outline')
                            ctx.strokeText(character, 0, 0);
                        else
                            ctx.fillText(character, 0, 0);
                        ctx.restore();
                        cursor += metrics.widths[index] + metrics.spacing;
                    }
                    );
                    ctx.restore();
                }

                function regularShapePoints(object, count, innerRatio=1) {
                    var cx = (object.x1 + object.x2) / 2;
                    var cy = (object.y1 + object.y2) / 2;
                    var rx = Math.max(1, Math.abs(object.x2 - object.x1) / 2);
                    var ry = Math.max(1, Math.abs(object.y2 - object.y1) / 2);
                    var points = [];
                    var total = innerRatio < 1 ? count * 2 : count;
                    for (let index = 0; index < total; index++) {
                        var angle = -Math.PI / 2 + index / total * Math.PI * 2;
                        var ratio = innerRatio < 1 && index % 2 ? innerRatio : 1;
                        points.push([cx + Math.cos(angle) * rx * ratio, cy + Math.sin(angle) * ry * ratio]);
                    }
                    return points;
                }

                function tracePoints(ctx, points, close=true) {
                    if (!points.length)
                        return;
                    ctx.moveTo(points[0][0], points[0][1]);
                    for (let index = 1; index < points.length; index++)
                        ctx.lineTo(points[index][0], points[index][1]);
                    if (close)
                        ctx.closePath();
                }

                function traceSpline(ctx, points, tension=.55) {
                    if (!points.length)
                        return;
                    ctx.moveTo(points[0][0], points[0][1]);
                    if (points.length === 1)
                        return;
                    if (points.length === 2) {
                        ctx.lineTo(points[1][0], points[1][1]);
                        return;
                    }
                    var factor = clamp(tension, 0, 1) / 6;
                    for (let index = 0; index < points.length - 1; index++) {
                        var p0 = points[Math.max(0, index - 1)];
                        var p1 = points[index];
                        var p2 = points[index + 1];
                        var p3 = points[Math.min(points.length - 1, index + 2)];
                        var cp1 = [p1[0] + (p2[0] - p0[0]) * factor, p1[1] + (p2[1] - p0[1]) * factor];
                        var cp2 = [p2[0] - (p3[0] - p1[0]) * factor, p2[1] - (p3[1] - p1[1]) * factor];
                        ctx.bezierCurveTo(cp1[0], cp1[1], cp2[0], cp2[1], p2[0], p2[1]);
                    }
                }

                function drawVectorObject(ctx, object) {
                    if (!object)
                        return;
                    if (object.type === 'text') {
                        drawCurvedText(ctx, object);
                        return;
                    }
                    ctx.save();
                    ctx.strokeStyle = object.color;
                    ctx.fillStyle = object.color;
                    ctx.lineWidth = Math.max(1, object.lineWidth);
                    ctx.lineCap = 'round';
                    ctx.lineJoin = 'round';
                    ctx.beginPath();
                    if (object.type === 'line') {
                        ctx.moveTo(object.x1, object.y1);
                        ctx.lineTo(object.x2, object.y2);
                    } else if (object.type === 'ellipse') {
                        var cx = (object.x1 + object.x2) / 2
                          , cy = (object.y1 + object.y2) / 2;
                        ctx.ellipse(cx, cy, Math.max(1, Math.abs(object.x2 - object.x1) / 2), Math.max(1, Math.abs(object.y2 - object.y1) / 2), 0, 0, Math.PI * 2);
                    } else if (object.type === 'rect') {
                        ctx.rect(Math.min(object.x1, object.x2), Math.min(object.y1, object.y2), Math.abs(object.x2 - object.x1), Math.abs(object.y2 - object.y1));
                    } else if (object.type === 'triangle') {
                        tracePoints(ctx, regularShapePoints(object, 3));
                    } else if (object.type === 'polygon') {
                        tracePoints(ctx, regularShapePoints(object, object.sides || 6));
                    } else if (object.type === 'star') {
                        tracePoints(ctx, regularShapePoints(object, 5, .43));
                    } else if (object.type === 'diamond') {
                        tracePoints(ctx, regularShapePoints(object, 4));
                    } else if (object.type === 'arrow') {
                        var dx = object.x2 - object.x1
                          , dy = object.y2 - object.y1;
                        var length = Math.max(1, Math.hypot(dx, dy));
                        var ux = dx / length
                          , uy = dy / length;
                        var head = Math.min(length * .42, Math.max(object.lineWidth * 5, 14));
                        var wing = head * .55;
                        ctx.moveTo(object.x1, object.y1);
                        ctx.lineTo(object.x2, object.y2);
                        ctx.moveTo(object.x2, object.y2);
                        ctx.lineTo(object.x2 - ux * head - uy * wing, object.y2 - uy * head + ux * wing);
                        ctx.moveTo(object.x2, object.y2);
                        ctx.lineTo(object.x2 - ux * head + uy * wing, object.y2 - uy * head - ux * wing);
                    } else if (object.type === 'spline') {
                        traceSpline(ctx, object.points || [], object.tension);
                    }
                    ctx.stroke();
                    ctx.restore();
                }

                function renderEditorComposite(config, previewObject=null) {
                    var ctx = config.editCanvas.getContext('2d');
                    ctx.clearRect(0, 0, config.editCanvas.width, config.editCanvas.height);
                    if (config.paintDirty)
                        ctx.drawImage(config.paintCanvas, 0, 0);
                    config.vectorObjects.forEach( (object) => drawVectorObject(ctx, object));
                    if (previewObject)
                        drawVectorObject(ctx, previewObject);
                }

                function refreshCommittedEditor(config, redrawMask=true) {
                    renderEditorComposite(config);
                    updateConfigEditDirty(config);
                    renderConfig(config);
                    if (state.imageMode === 'whole')
                        state.sourcePixels = config.pixels;
                    if (redrawMask)
                        drawMaskPreview();
                }

                function renderEditorPreview(config, previewObject) {
                    state.editorPreview = previewObject ? {
                        config,
                        object: previewObject
                    } : null;
                    renderEditorComposite(config, previewObject);
                    renderConfig(config, Boolean(previewObject));
                    if (state.imageMode === 'whole')
                        state.sourcePixels = config.pixels;
                    drawMaskPreview();
                    renderEditorComposite(config);
                    renderConfig(config);
                    if (state.imageMode === 'whole')
                        state.sourcePixels = config.pixels;
                }

                function clearEditorPreview(redrawMask=true) {
                    var preview = state.editorPreview;
                    state.editorPreview = null;
                    if (!preview)
                        return;
                    refreshCommittedEditor(preview.config, redrawMask);
                }

                function pushEditHistory(config) {
                    var ctx = config.paintCanvas.getContext('2d', {
                        willReadFrequently: true
                    });
                    config.editHistory.push({
                        paintPixels: ctx.getImageData(0, 0, config.paintCanvas.width, config.paintCanvas.height),
                        paintDirty: config.paintDirty,
                        vectorObjects: cloneVectorObjects(config.vectorObjects),
                        nextVectorId: config.nextVectorId,
                        selectedObjectId: config.selectedObjectId
                    });
                    if (config.editHistory.length > 20)
                        config.editHistory.shift();
                }

                function previewEditorChange(config) {
                    refreshCommittedEditor(config, true);
                }

                function paintEditorSegment(config, from, to, erasing=false) {
                    if (!from || !to)
                        return;
                    var canvas = config.paintCanvas;
                    var ctx = canvas.getContext('2d');
                    var scale = canvas.width / ui.maskCanvas.width;
                    ctx.save();
                    ctx.globalCompositeOperation = erasing ? 'destination-out' : 'source-over';
                    ctx.strokeStyle = ui.editorColor.value;
                    ctx.lineWidth = Math.max(1, Number(ui.brushSize.value) * scale);
                    ctx.lineCap = 'round';
                    ctx.lineJoin = 'round';
                    var distance = Math.hypot(to[0] - from[0], to[1] - from[1]);
                    if (distance < .01) {
                        ctx.fillStyle = erasing ? '#000' : ui.editorColor.value;
                        ctx.beginPath();
                        ctx.arc(to[0], to[1], ctx.lineWidth / 2, 0, Math.PI * 2);
                        ctx.fill();
                    } else {
                        ctx.beginPath();
                        ctx.moveTo(from[0], from[1]);
                        ctx.lineTo(to[0], to[1]);
                        ctx.stroke();
                    }
                    ctx.restore();
                    config.paintDirty = true;
                    previewEditorChange(config);
                }

                function createTextObject(config, point) {
                    var value = ui.textValue.value.trim();
                    if (!value)
                        return null;
                    var scale = config.editCanvas.width / ui.maskCanvas.width;
                    return {
                        id: null,
                        type: 'text',
                        x: point[0],
                        y: point[1],
                        value,
                        fontKey: state.textFont,
                        textStyle: state.textStyle,
                        fontSize: Math.max(8, Number(ui.textSize.value) * scale),
                        arc: Number(ui.textArc.value),
                        color: ui.editorColor.value
                    };
                }

                function createShapeObject(config, type, start, end, points=null) {
                    var scale = config.editCanvas.width / ui.maskCanvas.width;
                    var shapeEnd = end;
                    var ratioMode = RATIO_SHAPE_TOOLS.includes(type) ? state.shapeRatioMode : 'free';
                    if (ratioMode === 'regular') {
                        var dx = end[0] - start[0]
                          , dy = end[1] - start[1];
                        var side = Math.max(Math.abs(dx), Math.abs(dy), 1);
                        shapeEnd = [start[0] + (dx < 0 ? -side : side), start[1] + (dy < 0 ? -side : side)];
                    }
                    var object = {
                        id: null,
                        type,
                        color: ui.editorColor.value,
                        lineWidth: Math.max(1, Number(ui.brushSize.value) * scale),
                        ratioMode,
                        x1: start[0],
                        y1: start[1],
                        x2: shapeEnd[0],
                        y2: shapeEnd[1]
                    };
                    if (type === 'polygon')
                        object.sides = Number(ui.polygonSides.value);
                    if (type === 'spline') {
                        object.points = (points || [start, end]).map( (point) => [point[0], point[1]]);
                        object.tension = Number(ui.splineTension.value) / 100;
                    }
                    return object;
                }

                function commitVectorObject(config, object) {
                    if (!object)
                        return false;
                    object.id = config.nextVectorId++;
                    config.vectorObjects.push(object);
                    config.selectedObjectId = object.id;
                    state.editorPreview = null;
                    refreshCommittedEditor(config, true);
                    updateSelectionUi();
                    scheduleRebuild();
                    return true;
                }

                function placeEditorText(config, point) {
                    var object = createTextObject(config, point);
                    if (!object) {
                        ui.status.textContent = '请先输入要添加的文字。';
                        return false;
                    }
                    return commitVectorObject(config, object);
                }

                function finishEditorStroke() {
                    if (!state.editorDrawing)
                        return;
                    state.editorDrawing = false;
                    state.editorLastPoint = null;
                    state.editorPointerId = null;
                    scheduleRebuild();
                }

                function selectedVectorObject(config=activeConfig()) {
                    return config.vectorObjects.find( (object) => object.id === config.selectedObjectId) || null;
                }

                function updateSelectionUi() {
                    var object = selectedVectorObject();
                    var selected = Boolean(object);
                    ui.selectionInfo.hidden = !selected;
                    ui.deleteSelected.disabled = !selected;
                    ui.floatDeleteSelected.disabled = !selected;
                    if (selected)
                        ui.selectionLabel.textContent = `已选中${vectorObjectDisplayName(object)}，可在扇面中拖动位置`;
                }

                function vectorObjectDisplayName(object) {
                    if (!object || !RATIO_SHAPE_TOOLS.includes(object.type))
                        return VECTOR_TOOL_LABELS[object?.type] || '对象';
                    var regular = object.ratioMode === 'regular';
                    var names = {
                        ellipse: regular ? '正圆' : '椭圆',
                        rect: regular ? '正方形' : '矩形',
                        triangle: regular ? '正三角形' : '自由三角形',
                        polygon: regular ? `正${object.sides || 6}边形` : `自由比例${object.sides || 6}边形`,
                        star: regular ? '正星形' : '自由比例星形',
                        diamond: regular ? '正菱形' : '自由比例菱形'
                    };
                    return names[object.type];
                }

                function deleteSelectedObject() {
                    var config = activeConfig();
                    var index = config.vectorObjects.findIndex( (object) => object.id === config.selectedObjectId);
                    if (index < 0)
                        return;
                    pushEditHistory(config);
                    config.vectorObjects.splice(index, 1);
                    config.selectedObjectId = null;
                    refreshCommittedEditor(config, true);
                    updateSelectionUi();
                    scheduleRebuild();
                }

                function undoEditorChange() {
                    var config = activeConfig();
                    var previous = config.editHistory.pop();
                    if (!previous) {
                        ui.status.textContent = '当前图片没有可撤销的编辑。';
                        return;
                    }
                    var ctx = config.paintCanvas.getContext('2d');
                    ctx.clearRect(0, 0, config.paintCanvas.width, config.paintCanvas.height);
                    ctx.putImageData(previous.paintPixels, 0, 0);
                    config.paintDirty = previous.paintDirty;
                    config.vectorObjects = cloneVectorObjects(previous.vectorObjects);
                    config.nextVectorId = previous.nextVectorId;
                    config.selectedObjectId = previous.selectedObjectId;
                    refreshCommittedEditor(config, true);
                    updateSelectionUi();
                    scheduleRebuild();
                }

                function clearEditorChanges() {
                    var config = activeConfig();
                    if (!config.editDirty)
                        return;
                    pushEditHistory(config);
                    config.paintCanvas.getContext('2d').clearRect(0, 0, config.paintCanvas.width, config.paintCanvas.height);
                    config.paintDirty = false;
                    config.vectorObjects = [];
                    config.selectedObjectId = null;
                    refreshCommittedEditor(config, true);
                    updateSelectionUi();
                    scheduleRebuild();
                }

                function shapeRatioDisplayName(tool=state.editorTool, mode=state.shapeRatioMode) {
                    var regular = mode === 'regular';
                    var names = {
                        ellipse: regular ? '正圆' : '椭圆',
                        rect: regular ? '正方形' : '矩形',
                        triangle: regular ? '正三角形' : '自由比例三角形',
                        polygon: regular ? '正多边形' : '自由比例多边形',
                        star: regular ? '正星形' : '自由比例星形',
                        diamond: regular ? '正菱形' : '自由比例菱形'
                    };
                    return names[tool] || VECTOR_TOOL_LABELS[tool] || '几何图形';
                }

                function setShapeRatioMode(mode) {
                    state.shapeRatioMode = mode === 'free' ? 'free' : 'regular';
                    document.querySelectorAll('[data-shape-ratio]').forEach( (button) => {
                        var active = button.dataset.shapeRatio === state.shapeRatioMode;
                        button.classList.toggle('active', active);
                        button.setAttribute('aria-pressed', String(active));
                    }
                    );
                    ui.floatShapeRatio.value = state.shapeRatioMode;
                    ui.shapeRatioHint.textContent = `${shapeRatioDisplayName()} · ${state.shapeRatioMode === 'regular' ? '等比例' : '可拉伸'}`;
                    if (RATIO_SHAPE_TOOLS.includes(state.editorTool)) {
                        ui.editorHint.textContent = `${shapeRatioDisplayName()}：按住拖动绘制；可随时切换“正图形”与“自由比例”。`;
                        ui.adjustHint.textContent = `${shapeRatioDisplayName()} · 按住拖动`;
                    }
                }

                function setEditorTool(tool) {
                    clearEditorPreview(false);
                    state.editorTool = tool;
                    document.querySelectorAll('[data-editor-tool]').forEach( (button) => {
                        var active = button.dataset.editorTool === tool;
                        button.classList.toggle('active', active);
                        button.setAttribute('aria-pressed', String(active));
                    }
                    );
                    var messages = {
                        move: '移动模式：直接拖动图片，滚轮缩放；上方滑杆或按钮可旋转。',
                        select: '选择模式：单击文字或几何，再拖动到新位置；选中文字后可继续修改内容、字体和弧度。',
                        brush: '画笔模式：圆圈就是实际笔画大小；按住拖动绘制，单击可落一个圆点。',
                        eraser: '橡皮模式：虚线圆圈就是擦除范围；擦除画笔内容，文字和几何请用“选择”后删除。',
                        text: '文字模式：扇面中显示的就是最终排版；锚点可移到叶片外侧，预览会保留，单击确认放置。',
                        line: '直线：在扇面内按住拖动，松开完成；之后可用“选择”移动。',
                        ellipse: '圆形：选择“正圆”或“自由比例椭圆”，再按住拖动绘制。',
                        rect: '方形：选择“正方形”或“自由比例矩形”，再按住拖动绘制。',
                        triangle: '三角：选择“正三角形”或“自由比例三角形”，再按住拖动绘制。',
                        polygon: '多边形：设置边数，并选择“正多边形”或“自由比例多边形”。',
                        star: '星形：选择“正星形”或“自由比例星形”，再按住拖动绘制。',
                        diamond: '菱形：选择“正菱形”或“自由比例菱形”，再按住拖动绘制。',
                        arrow: '箭头：从起点拖向箭头方向，松开完成。',
                        spline: '样条：按住自由绘制，系统自动拟合平滑曲线。'
                    };
                    ui.editorHint.textContent = messages[tool];
                    ui.adjustHint.textContent = tool === 'move' ? '拖动图片 · 滚轮缩放' : tool === 'select' ? '单击选择 · 拖动位置' : tool === 'text' ? '最终效果预览 · 单击放置' : VECTOR_SHAPE_TOOLS.includes(tool) ? `${VECTOR_TOOL_LABELS[tool]} · 按住拖动` : `${tool === 'brush' ? '画笔' : '橡皮'}圆圈 · 按住拖动`;
                    ui.maskWrap.classList.toggle('is-editing', tool !== 'move');
                    ui.maskWrap.classList.toggle('is-selecting', tool === 'select');
                    var shapeTool = VECTOR_SHAPE_TOOLS.includes(tool);
                    var ratioShapeTool = RATIO_SHAPE_TOOLS.includes(tool);
                    var selectedText = tool === 'select' && selectedVectorObject()?.type === 'text';
                    ui.brushEditorOptions.hidden = !(tool === 'brush' || tool === 'eraser' || shapeTool);
                    ui.shapeEditorOptions.hidden = !(ratioShapeTool || tool === 'spline');
                    ui.shapeRatioControl.hidden = !ratioShapeTool;
                    ui.polygonSidesControl.hidden = tool !== 'polygon';
                    ui.splineTensionControl.hidden = tool !== 'spline';
                    ui.textEditorOptions.hidden = !(tool === 'text' || selectedText);
                    ui.editorColorControl.hidden = !(tool === 'brush' || tool === 'text' || shapeTool || selectedText);
                    updateFloatingToolContext();
                    syncBrushCursorMode();
                    setShapeRatioMode(state.shapeRatioMode);
                    updateSelectionUi();
                    drawMaskPreview();
                    refreshEditorPointerPreview();
                }

                function hideBrushCursor() {
                    ui.brushCursor.hidden = true;
                }

                function hideTextPlacementPreview() {
                    ui.textPlacementPreview.hidden = true;
                    if (state.editorPreview?.object?.type === 'text')
                        clearEditorPreview(true);
                }

                function hideEditorPointerPreviews() {
                    hideBrushCursor();
                    hideTextPlacementPreview();
                    if (state.editorPreview)
                        clearEditorPreview(true);
                    state.editorHoverX = null;
                    state.editorHoverY = null;
                }

                function refreshBrushCursorSize() {
                    var rect = ui.maskCanvas.getBoundingClientRect();
                    if (!rect.width)
                        return;
                    var diameter = clamp(Number(ui.brushSize.value) * rect.width / ui.maskCanvas.width, 4, 180);
                    ui.brushCursor.style.width = `${diameter}px`;
                    ui.brushCursor.style.height = `${diameter}px`;
                    ui.brushCursor.style.setProperty('--cursor-color', state.editorTool === 'eraser' ? '#c64c3f' : ui.editorColor.value);
                    ui.brushCursor.dataset.label = `${state.editorTool === 'eraser' ? '橡皮' : '画笔'} ${ui.brushSize.value}px`;
                }

                function syncBrushCursorMode() {
                    var active = state.editorTool === 'brush' || state.editorTool === 'eraser';
                    ui.maskWrap.classList.toggle('has-brush-cursor', active);
                    ui.maskWrap.classList.toggle('has-text-preview', state.editorTool === 'text');
                    ui.brushCursor.classList.toggle('is-eraser', state.editorTool === 'eraser');
                    refreshBrushCursorSize();
                    if (!active)
                        hideBrushCursor();
                    if (state.editorTool !== 'text')
                        hideTextPlacementPreview();
                }

                function updateBrushCursor(event) {
                    if (state.editorTool !== 'brush' && state.editorTool !== 'eraser') {
                        hideBrushCursor();
                        return;
                    }
                    var rect = ui.maskCanvas.getBoundingClientRect();
                    var x = event.clientX - rect.left;
                    var y = event.clientY - rect.top;
                    if (x < 0 || y < 0 || x > rect.width || y > rect.height || !pointerOnActiveEditCanvas(event)) {
                        hideBrushCursor();
                        return;
                    }
                    refreshBrushCursorSize();
                    ui.brushCursor.style.left = `${x}px`;
                    ui.brushCursor.style.top = `${y}px`;
                    ui.brushCursor.hidden = false;
                }

                function textPreviewAngle() {
                    if (state.imageMode !== 'blade')
                        return 0;
                    var angle = FAN.angles[state.selectedBlade];
                    var root = rotatePoint(-FAN.rMin, 0, angle);
                    var tip = rotatePoint(-FAN.rMax, 0, angle);
                    var rootCanvas = modelToCanvas(root[0], root[1], ui.maskCanvas);
                    var tipCanvas = modelToCanvas(tip[0], tip[1], ui.maskCanvas);
                    return Math.atan2(tipCanvas[1] - rootCanvas[1], tipCanvas[0] - rootCanvas[0]) * 180 / Math.PI;
                }

                function updateTextPlacementPreview(event) {
                    if (state.editorTool !== 'text') {
                        hideTextPlacementPreview();
                        return;
                    }
                    var value = ui.textValue.value.trim();
                    var point = value ? pointerOnTextEditCanvas(event) : null;
                    if (!point) {
                        hideTextPlacementPreview();
                        return;
                    }
                    ui.textPlacementPreview.hidden = true;
                    renderEditorPreview(activeConfig(), createTextObject(activeConfig(), point));
                }

                function updateEditorPointerPreview(event) {
                    state.editorHoverX = event.clientX;
                    state.editorHoverY = event.clientY;
                    updateBrushCursor(event);
                    updateTextPlacementPreview(event);
                }

                function refreshEditorPointerPreview() {
                    if (state.editorDrawing || state.editorObjectDragging)
                        return;
                    if (state.editorHoverX === null || state.editorHoverY === null)
                        return;
                    updateEditorPointerPreview({
                        clientX: state.editorHoverX,
                        clientY: state.editorHoverY
                    });
                }

                function setTextFont(key) {
                    if (!TEXT_FONTS[key])
                        return;
                    state.textFont = key;
                    ui.textFontChips.querySelectorAll('[data-text-font]').forEach( (button) => {
                        var active = button.dataset.textFont === key;
                        button.classList.toggle('active', active);
                        button.setAttribute('aria-pressed', String(active));
                    }
                    );
                    ui.floatTextFont.value = key;
                    var font = currentTextFont();
                    if (document.fonts?.load)
                        document.fonts.load(`${font.weight} 24px ${font.family}`).then(refreshEditorPointerPreview).catch( () => {}
                        );
                    applyTextControlsToSelected();
                    refreshEditorPointerPreview();
                }

                function setTextStyle(style) {
                    state.textStyle = style === 'outline' ? 'outline' : 'fill';
                    ui.textStyle.value = state.textStyle;
                    ui.floatTextStyle.value = state.textStyle;
                    applyTextControlsToSelected();
                    refreshEditorPointerPreview();
                }

                function setTextArc(value) {
                    state.textArc = clamp(Number(value), -100, 100);
                    ui.textArc.value = state.textArc;
                    ui.floatTextArc.value = state.textArc;
                    ui.floatTextArcValue.textContent = `${state.textArc}%`;
                    updateOutput(ui.textArc, '%');
                    applyTextControlsToSelected();
                    refreshEditorPointerPreview();
                }

                function applyTextControlsToSelected() {
                    if (state.editorTool !== 'select')
                        return;
                    var config = activeConfig();
                    var object = selectedVectorObject(config);
                    if (!object || object.type !== 'text')
                        return;
                    var scale = config.editCanvas.width / ui.maskCanvas.width;
                    object.value = ui.textValue.value.trim() || object.value;
                    object.fontKey = state.textFont;
                    object.textStyle = state.textStyle;
                    object.fontSize = Math.max(8, Number(ui.textSize.value) * scale);
                    object.arc = Number(ui.textArc.value);
                    object.color = ui.editorColor.value;
                    refreshCommittedEditor(config, true);
                    scheduleRebuild();
                }

                function syncTextControlsFromSelected(object) {
                    if (!object || object.type !== 'text')
                        return;
                    var config = activeConfig();
                    var scale = config.editCanvas.width / ui.maskCanvas.width;
                    ui.textValue.value = object.value;
                    ui.floatTextValue.value = object.value;
                    ui.textSize.value = Math.round(object.fontSize / scale);
                    ui.floatTextSize.value = ui.textSize.value;
                    ui.floatTextSizeValue.textContent = ui.textSize.value;
                    updateOutput(ui.textSize, ' px');
                    ui.editorColor.value = object.color;
                    ui.floatEditorColor.value = object.color;
                    state.textFont = object.fontKey;
                    state.textStyle = object.textStyle;
                    setTextArc(object.arc);
                    ui.textFontChips.querySelectorAll('[data-text-font]').forEach( (button) => {
                        var active = button.dataset.textFont === state.textFont;
                        button.classList.toggle('active', active);
                        button.setAttribute('aria-pressed', String(active));
                    }
                    );
                    ui.floatTextFont.value = state.textFont;
                    ui.textStyle.value = state.textStyle;
                    ui.floatTextStyle.value = state.textStyle;
                }

                function updateFloatingTransformStatus() {
                    ui.floatTransformValue.textContent = `${ui.imageScale.value}% · ${ui.imageRotation.value}°`;
                    ui.floatImageRotation.value = ui.imageRotation.value;
                    ui.floatImageRotationValue.textContent = `${ui.imageRotation.value}°`;
                }

                function syncFloatingEditorControls() {
                    ui.floatBrushSize.value = ui.brushSize.value;
                    ui.floatBrushSizeValue.textContent = ui.brushSize.value;
                    ui.floatTextValue.value = ui.textValue.value;
                    ui.floatTextFont.value = state.textFont;
                    ui.floatTextStyle.value = state.textStyle;
                    ui.floatTextSize.value = ui.textSize.value;
                    ui.floatTextSizeValue.textContent = ui.textSize.value;
                    ui.floatTextArc.value = ui.textArc.value;
                    ui.floatTextArcValue.textContent = `${ui.textArc.value}%`;
                    ui.floatPolygonSides.value = ui.polygonSides.value;
                    ui.floatPolygonSidesValue.textContent = ui.polygonSides.value;
                    ui.floatSplineTension.value = ui.splineTension.value;
                    ui.floatSplineTensionValue.textContent = `${ui.splineTension.value}%`;
                    ui.floatShapeRatio.value = state.shapeRatioMode;
                    ui.floatEditorColor.value = ui.editorColor.value;
                    updateFloatingTransformStatus();
                    updateFloatingToolContext();
                }

                function updateFloatingToolContext() {
                    var isBrush = state.editorTool === 'brush';
                    var isEraser = state.editorTool === 'eraser';
                    var isText = state.editorTool === 'text';
                    var isShape = VECTOR_SHAPE_TOOLS.includes(state.editorTool);
                    var selectedText = state.editorTool === 'select' && selectedVectorObject()?.type === 'text';
                    ui.floatToolContext.hidden = !(isBrush || isEraser || isText || isShape || selectedText);
                    ui.floatBrushControl.hidden = !(isBrush || isEraser || isShape);
                    ui.floatTextControl.hidden = !(isText || selectedText);
                    ui.floatTextFontControl.hidden = !(isText || selectedText);
                    ui.floatTextStyleControl.hidden = !(isText || selectedText);
                    ui.floatTextSizeControl.hidden = !(isText || selectedText);
                    ui.floatTextArcControl.hidden = !(isText || selectedText);
                    ui.floatPolygonSidesControl.hidden = state.editorTool !== 'polygon';
                    ui.floatSplineTensionControl.hidden = state.editorTool !== 'spline';
                    ui.floatShapeRatioControl.hidden = !RATIO_SHAPE_TOOLS.includes(state.editorTool);
                    ui.floatColorControl.hidden = !(isBrush || isText || isShape || selectedText);
                }

                function fitExpandedMask() {
                    if (!state.maskExpanded) {
                        ui.maskWrap.style.removeProperty('width');
                        refreshBrushCursorSize();
                        return;
                    }
                    var aspect = ui.maskCanvas.width / ui.maskCanvas.height;
                    var width = Math.max(300, Math.min(1000, window.innerWidth - 36, (window.innerHeight - 116) * aspect));
                    ui.maskWrap.style.width = `${width}px`;
                    refreshBrushCursorSize();
                }

                function setMaskExpanded(expanded) {
                    hideEditorPointerPreviews();
                    state.maskExpanded = Boolean(expanded);
                    ui.maskWrap.classList.toggle('is-expanded', state.maskExpanded);
                    ui.maskBackdrop.hidden = !state.maskExpanded;
                    ui.maskFloatingToolbar.hidden = !state.maskExpanded;
                    ui.expandMask.setAttribute('aria-expanded', String(state.maskExpanded));
                    ui.expandMask.textContent = state.maskExpanded ? '× 退出放大' : '⛶ 放大编辑';
                    ui.expandMask.title = state.maskExpanded ? '退出放大编辑（Esc）' : '放大扇面编辑区';
                    document.body.classList.toggle('mask-expanded', state.maskExpanded);
                    syncFloatingEditorControls();
                    fitExpandedMask();
                    if (state.maskExpanded)
                        requestAnimationFrame( () => ui.maskFloatingToolbar.querySelector('[data-editor-tool].active')?.focus({
                            preventScroll: true
                        }));
                }