@qfo/qfchart 0.6.8 → 0.7.2

package/src/components/renderers/PolylineRenderer.ts

@@ -0,0 +1,197 @@
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { ColorUtils } from '../../utils/ColorUtils';
+
+/**
+ * Renderer for Pine Script polyline.* drawing objects.
+ * Each polyline is defined by an array of chart.point objects, connected
+ * sequentially with straight or curved segments, optionally closed and filled.
+ *
+ * Style name: 'drawing_polyline'
+ */
+export class PolylineRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset } = context;
+        const offset = dataIndexOffset || 0;
+
+        // Collect all non-deleted polyline objects from the sparse dataArray.
+        // Same aggregation pattern as DrawingLineRenderer — objects are stored
+        // as an array in a single data entry.
+        const polyObjects: any[] = [];
+
+        for (let i = 0; i < dataArray.length; i++) {
+            const val = dataArray[i];
+            if (!val) continue;
+
+            const items = Array.isArray(val) ? val : [val];
+            for (const pl of items) {
+                if (pl && typeof pl === 'object' && !pl._deleted && pl.points && pl.points.length >= 2) {
+                    polyObjects.push(pl);
+                }
+            }
+        }
+
+        if (polyObjects.length === 0) {
+            return { name: seriesName, type: 'custom', xAxisIndex, yAxisIndex, data: [], silent: true };
+        }
+
+        // Compute y-range across all polylines for axis scaling
+        let yMin = Infinity, yMax = -Infinity;
+        for (const pl of polyObjects) {
+            for (const pt of pl.points) {
+                const p = pt.price ?? 0;
+                if (p < yMin) yMin = p;
+                if (p > yMax) yMax = p;
+            }
+        }
+
+        // Use a SINGLE data entry spanning the full x-range so renderItem is always called.
+        // ECharts filters a data item only when ALL its x-dimensions are on the same side
+        // of the visible window.  With dims 0=0 and 1=lastBar the item always straddles
+        // the viewport, so renderItem fires exactly once regardless of scroll position.
+        // Dims 2/3 are yMin/yMax for axis scaling.
+        const totalBars = (context.candlestickData?.length || 0) + offset;
+        const lastBarIndex = Math.max(0, totalBars - 1);
+
+        return {
+            name: seriesName,
+            type: 'custom',
+            xAxisIndex,
+            yAxisIndex,
+            renderItem: (params: any, api: any) => {
+                const children: any[] = [];
+
+                for (const pl of polyObjects) {
+                    if (pl._deleted) continue;
+                    const points = pl.points;
+                    if (!points || points.length < 2) continue;
+
+                    const useBi = pl.xloc === 'bi' || pl.xloc === 'bar_index';
+                    const xOff = useBi ? offset : 0;
+
+                    // Convert chart.point objects to pixel coordinates
+                    const pixelPoints: number[][] = [];
+                    for (const pt of points) {
+                        const x = useBi ? (pt.index ?? 0) + xOff : (pt.time ?? 0);
+                        const y = pt.price ?? 0;
+                        pixelPoints.push(api.coord([x, y]));
+                    }
+
+                    if (pixelPoints.length < 2) continue;
+
+                    const lineColor = pl.line_color || '#2962ff';
+                    const lineWidth = pl.line_width || 1;
+                    const dashPattern = this.getDashPattern(pl.line_style);
+
+                    // Fill shape (rendered behind stroke)
+                    if (pl.fill_color && pl.fill_color !== '' && pl.fill_color !== 'na') {
+                        const { color: fillColor, opacity: fillOpacity } = ColorUtils.parseColor(pl.fill_color);
+
+                        if (pl.curved) {
+                            const pathData = this.buildCurvedPath(pixelPoints, pl.closed);
+                            children.push({
+                                type: 'path',
+                                shape: { pathData: pathData + ' Z' },
+                                style: { fill: fillColor, opacity: fillOpacity, stroke: 'none' },
+                                silent: true,
+                            });
+                        } else {
+                            children.push({
+                                type: 'polygon',
+                                shape: { points: pixelPoints },
+                                style: { fill: fillColor, opacity: fillOpacity, stroke: 'none' },
+                                silent: true,
+                            });
+                        }
+                    }
+
+                    // Stroke (line segments)
+                    if (pl.curved) {
+                        const pathData = this.buildCurvedPath(pixelPoints, pl.closed);
+                        children.push({
+                            type: 'path',
+                            shape: { pathData },
+                            style: { fill: 'none', stroke: lineColor, lineWidth, lineDash: dashPattern },
+                            silent: true,
+                        });
+                    } else {
+                        const allPoints = pl.closed ? [...pixelPoints, pixelPoints[0]] : pixelPoints;
+                        children.push({
+                            type: 'polyline',
+                            shape: { points: allPoints },
+                            style: { fill: 'none', stroke: lineColor, lineWidth, lineDash: dashPattern },
+                            silent: true,
+                        });
+                    }
+                }
+
+                return { type: 'group', children };
+            },
+            data: [[0, lastBarIndex, yMin, yMax]],
+            clip: true,
+            encode: { x: [0, 1], y: [2, 3] },
+            z: 12,
+            silent: true,
+            emphasis: { disabled: true },
+        };
+    }
+
+    /**
+     * Build an SVG path string for a smooth curve through all points
+     * using Catmull-Rom → cubic bezier conversion.
+     */
+    private buildCurvedPath(points: number[][], closed: boolean): string {
+        const n = points.length;
+        if (n < 2) return '';
+        if (n === 2) {
+            return `M ${points[0][0]} ${points[0][1]} L ${points[1][0]} ${points[1][1]}`;
+        }
+
+        // Catmull-Rom tension (0.5 = centripetal)
+        const tension = 0.5;
+        let path = `M ${points[0][0]} ${points[0][1]}`;
+
+        // For closed curves, wrap around; for open, duplicate first/last
+        const getPoint = (i: number): number[] => {
+            if (closed) {
+                return points[((i % n) + n) % n];
+            }
+            if (i < 0) return points[0];
+            if (i >= n) return points[n - 1];
+            return points[i];
+        };
+
+        const segmentCount = closed ? n : n - 1;
+
+        for (let i = 0; i < segmentCount; i++) {
+            const p0 = getPoint(i - 1);
+            const p1 = getPoint(i);
+            const p2 = getPoint(i + 1);
+            const p3 = getPoint(i + 2);
+
+            // Convert Catmull-Rom to cubic bezier control points
+            const cp1x = p1[0] + (p2[0] - p0[0]) * tension / 3;
+            const cp1y = p1[1] + (p2[1] - p0[1]) * tension / 3;
+            const cp2x = p2[0] - (p3[0] - p1[0]) * tension / 3;
+            const cp2y = p2[1] - (p3[1] - p1[1]) * tension / 3;
+
+            path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2[0]} ${p2[1]}`;
+        }
+
+        if (closed) {
+            path += ' Z';
+        }
+
+        return path;
+    }
+
+    private getDashPattern(style: string): number[] | undefined {
+        switch (style) {
+            case 'style_dotted':
+                return [2, 2];
+            case 'style_dashed':
+                return [6, 4];
+            default:
+                return undefined;
+        }
+    }
+}

package/src/components/renderers/ShapeRenderer.ts

@@ -1,121 +1,121 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
-import { ShapeUtils } from '../../utils/ShapeUtils';
-
-export class ShapeRenderer implements SeriesRenderer {
-    render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray, optionsArray, plotOptions, candlestickData } = context;
-        const defaultColor = '#2962ff';
-
-        const shapeData = dataArray
-            .map((val, i) => {
-                // Merge global options with per-point options to get location first
-                const pointOpts = optionsArray[i] || {};
-                const globalOpts = plotOptions;
-                const location = pointOpts.location || globalOpts.location || 'absolute';
-
-                // For location="absolute", always draw the shape (ignore value)
-                // For other locations, only draw if value is truthy (TradingView behavior)
-                if (location !== 'absolute' && !val) {
-                    return null;
-                }
-
-                // If we get here and val is null/undefined, it means location is absolute
-                // In that case, we still need a valid value for positioning
-                // Use the value if it exists, otherwise we'd need a fallback
-                // But in TradingView, absolute location still expects a value for Y position
-                if (val === null || val === undefined) {
-                    return null; // Can't plot without a Y coordinate
-                }
-
-                const color = pointOpts.color || globalOpts.color || defaultColor;
-                const shape = pointOpts.shape || globalOpts.shape || 'circle';
-                const size = pointOpts.size || globalOpts.size || 'normal';
-                const text = pointOpts.text || globalOpts.text;
-                const textColor = pointOpts.textcolor || globalOpts.textcolor || 'white';
-
-                // NEW: Get width and height
-                const width = pointOpts.width || globalOpts.width;
-                const height = pointOpts.height || globalOpts.height;
-
-                // Positioning based on location
-                let yValue = val; // Default to absolute value
-                let symbolOffset: (string | number)[] = [0, 0];
-
-                if (location === 'abovebar') {
-                    // Shape above the candle
-                    if (candlestickData && candlestickData[i]) {
-                        yValue = candlestickData[i].high;
-                    }
-                    symbolOffset = [0, '-150%']; // Shift up
-                } else if (location === 'belowbar') {
-                    // Shape below the candle
-                    if (candlestickData && candlestickData[i]) {
-                        yValue = candlestickData[i].low;
-                    }
-                    symbolOffset = [0, '150%']; // Shift down
-                } else if (location === 'top') {
-                    // Shape at top of chart - we need to use a very high value
-                    // This would require knowing the y-axis max, which we don't have here easily
-                    // For now, use a placeholder approach - might need to calculate from data
-                    // Or we can use a percentage of the viewport? ECharts doesn't support that directly in scatter.
-                    // Best approach: use a large multiplier of current value or track max
-                    // Simplified: use coordinate system max (will need enhancement)
-                    yValue = val; // For now, keep absolute - would need axis max
-                    symbolOffset = [0, 0];
-                } else if (location === 'bottom') {
-                    // Shape at bottom of chart
-                    yValue = val; // For now, keep absolute - would need axis min
-                    symbolOffset = [0, 0];
-                }
-
-                const symbol = ShapeUtils.getShapeSymbol(shape);
-                const symbolSize = ShapeUtils.getShapeSize(size, width, height);
-                const rotate = ShapeUtils.getShapeRotation(shape);
-
-                // Special handling for labelup/down sizing - they contain text so they should be larger
-                let finalSize: number | number[] = symbolSize;
-                if (shape.includes('label')) {
-                    // If custom size, scale it up for labels
-                    if (Array.isArray(symbolSize)) {
-                        finalSize = [symbolSize[0] * 2.5, symbolSize[1] * 2.5];
-                    } else {
-                        finalSize = symbolSize * 2.5;
-                    }
-                }
-
-                // Get label configuration based on location
-                const labelConfig = ShapeUtils.getLabelConfig(shape, location);
-
-                const item: any = {
-                    value: [i, yValue],
-                    symbol: symbol,
-                    symbolSize: finalSize,
-                    symbolRotate: rotate,
-                    symbolOffset: symbolOffset,
-                    itemStyle: {
-                        color: color,
-                    },
-                    label: {
-                        show: !!text,
-                        position: labelConfig.position,
-                        distance: labelConfig.distance,
-                        formatter: text,
-                        color: textColor,
-                        fontSize: 10,
-                        fontWeight: 'bold',
-                    },
-                };
-
-                return item;
-            })
-            .filter((item) => item !== null);
-
-        return {
-            name: seriesName,
-            type: 'scatter',
-            xAxisIndex: xAxisIndex,
-            yAxisIndex: yAxisIndex,
-            data: shapeData,
-        };
-    }
-}
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { ShapeUtils } from '../../utils/ShapeUtils';
+
+export class ShapeRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray, optionsArray, plotOptions, candlestickData } = context;
+        const defaultColor = '#2962ff';
+
+        const shapeData = dataArray
+            .map((val, i) => {
+                // Merge global options with per-point options to get location first
+                const pointOpts = optionsArray[i] || {};
+                const globalOpts = plotOptions;
+                const location = pointOpts.location || globalOpts.location || 'absolute';
+
+                // For location="absolute", always draw the shape (ignore value)
+                // For other locations, only draw if value is truthy (TradingView behavior)
+                if (location !== 'absolute' && location !== 'Absolute' && !val) {
+                    return null;
+                }
+
+                // If we get here and val is null/undefined, it means location is absolute
+                // In that case, we still need a valid value for positioning
+                // Use the value if it exists, otherwise we'd need a fallback
+                // But in TradingView, absolute location still expects a value for Y position
+                if (val === null || val === undefined) {
+                    return null; // Can't plot without a Y coordinate
+                }
+
+                const color = pointOpts.color || globalOpts.color || defaultColor;
+                const shape = pointOpts.shape || globalOpts.shape || 'circle';
+                const size = pointOpts.size || globalOpts.size || 'normal';
+                const text = pointOpts.text || globalOpts.text;
+                const textColor = pointOpts.textcolor || globalOpts.textcolor || 'white';
+
+                // NEW: Get width and height
+                const width = pointOpts.width || globalOpts.width;
+                const height = pointOpts.height || globalOpts.height;
+
+                // Positioning based on location
+                let yValue = val; // Default to absolute value
+                let symbolOffset: (string | number)[] = [0, 0];
+
+                if (location === 'abovebar' || location === 'AboveBar' || location === 'ab') {
+                    // Shape above the candle
+                    if (candlestickData && candlestickData[i]) {
+                        yValue = candlestickData[i].high;
+                    }
+                    symbolOffset = [0, '-150%']; // Shift up
+                } else if (location === 'belowbar' || location === 'BelowBar' || location === 'bl') {
+                    // Shape below the candle
+                    if (candlestickData && candlestickData[i]) {
+                        yValue = candlestickData[i].low;
+                    }
+                    symbolOffset = [0, '150%']; // Shift down
+                } else if (location === 'top' || location === 'Top') {
+                    // Shape at top of chart - we need to use a very high value
+                    // This would require knowing the y-axis max, which we don't have here easily
+                    // For now, use a placeholder approach - might need to calculate from data
+                    // Or we can use a percentage of the viewport? ECharts doesn't support that directly in scatter.
+                    // Best approach: use a large multiplier of current value or track max
+                    // Simplified: use coordinate system max (will need enhancement)
+                    yValue = val; // For now, keep absolute - would need axis max
+                    symbolOffset = [0, 0];
+                } else if (location === 'bottom' || location === 'Bottom') {
+                    // Shape at bottom of chart
+                    yValue = val; // For now, keep absolute - would need axis min
+                    symbolOffset = [0, 0];
+                }
+
+                const symbol = ShapeUtils.getShapeSymbol(shape);
+                const symbolSize = ShapeUtils.getShapeSize(size, width, height);
+                const rotate = ShapeUtils.getShapeRotation(shape);
+
+                // Special handling for labelup/down sizing - they contain text so they should be larger
+                let finalSize: number | number[] = symbolSize;
+                if (shape.includes('label')) {
+                    // If custom size, scale it up for labels
+                    if (Array.isArray(symbolSize)) {
+                        finalSize = [symbolSize[0] * 2.5, symbolSize[1] * 2.5];
+                    } else {
+                        finalSize = symbolSize * 2.5;
+                    }
+                }
+
+                // Get label configuration based on location
+                const labelConfig = ShapeUtils.getLabelConfig(shape, location);
+
+                const item: any = {
+                    value: [i, yValue],
+                    symbol: symbol,
+                    symbolSize: finalSize,
+                    symbolRotate: rotate,
+                    symbolOffset: symbolOffset,
+                    itemStyle: {
+                        color: color,
+                    },
+                    label: {
+                        show: !!text,
+                        position: labelConfig.position,
+                        distance: labelConfig.distance,
+                        formatter: text,
+                        color: textColor,
+                        fontSize: 10,
+                        fontWeight: 'bold',
+                    },
+                };
+
+                return item;
+            })
+            .filter((item) => item !== null);
+
+        return {
+            name: seriesName,
+            type: 'scatter',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            data: shapeData,
+        };
+    }
+}

package/src/utils/ColorUtils.ts

@@ -1,32 +1,77 @@
-export class ColorUtils {
-    /**
-     * Parse color string and extract opacity
-     * Supports: hex (#RRGGBB), named colors (green, red), rgba(r,g,b,a), rgb(r,g,b)
-     */
-    public static parseColor(colorStr: string): { color: string; opacity: number } {
-        if (!colorStr) {
-            return { color: '#888888', opacity: 0.2 };
-        }
-
-        // Check for rgba format
-        const rgbaMatch = colorStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
-        if (rgbaMatch) {
-            const r = rgbaMatch[1];
-            const g = rgbaMatch[2];
-            const b = rgbaMatch[3];
-            const a = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1;
-
-            // Return rgb color and separate opacity
-            return {
-                color: `rgb(${r},${g},${b})`,
-                opacity: a,
-            };
-        }
-
-        // For hex or named colors, default opacity to 0.3 for fill areas
-        return {
-            color: colorStr,
-            opacity: 0.3,
-        };
-    }
-}
+export class ColorUtils {
+    /**
+     * Parse color string and extract opacity
+     * Supports: hex (#RRGGBB, #RRGGBBAA), named colors (green, red), rgba(r,g,b,a), rgb(r,g,b)
+     */
+    public static parseColor(colorStr: string): { color: string; opacity: number } {
+        if (!colorStr) {
+            return { color: '#888888', opacity: 0.2 };
+        }
+
+        // Check for rgba format
+        const rgbaMatch = colorStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+        if (rgbaMatch) {
+            const r = rgbaMatch[1];
+            const g = rgbaMatch[2];
+            const b = rgbaMatch[3];
+            const a = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1;
+
+            // Return rgb color and separate opacity
+            return {
+                color: `rgb(${r},${g},${b})`,
+                opacity: a,
+            };
+        }
+
+        // Check for 8-digit hex with alpha (#RRGGBBAA)
+        const hex8Match = colorStr.match(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/);
+        if (hex8Match) {
+            const r = parseInt(hex8Match[1], 16);
+            const g = parseInt(hex8Match[2], 16);
+            const b = parseInt(hex8Match[3], 16);
+            const a = parseInt(hex8Match[4], 16) / 255;
+            return {
+                color: `rgb(${r},${g},${b})`,
+                opacity: a,
+            };
+        }
+
+        // For 6-digit hex or named colors, default opacity to 0.3 for fill areas
+        return {
+            color: colorStr,
+            opacity: 0.3,
+        };
+    }
+
+    /**
+     * Convert a parsed color + opacity to an rgba string.
+     */
+    public static toRgba(color: string, opacity: number): string {
+        // If already rgba/rgb format
+        const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+        if (rgbMatch) {
+            return `rgba(${rgbMatch[1]},${rgbMatch[2]},${rgbMatch[3]},${opacity})`;
+        }
+
+        // Handle 6-digit hex colors
+        const hexMatch = color.match(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/);
+        if (hexMatch) {
+            const r = parseInt(hexMatch[1], 16);
+            const g = parseInt(hexMatch[2], 16);
+            const b = parseInt(hexMatch[3], 16);
+            return `rgba(${r},${g},${b},${opacity})`;
+        }
+
+        // Handle 8-digit hex colors (#RRGGBBAA) — use alpha from hex, override with opacity
+        const hex8Match = color.match(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/);
+        if (hex8Match) {
+            const r = parseInt(hex8Match[1], 16);
+            const g = parseInt(hex8Match[2], 16);
+            const b = parseInt(hex8Match[3], 16);
+            return `rgba(${r},${g},${b},${opacity})`;
+        }
+
+        // Fallback: return color as-is
+        return color;
+    }
+}

package/src/utils/ShapeUtils.ts

@@ -8,56 +8,59 @@ export class ShapeUtils {
 
         switch (shape) {
             case 'arrowdown':
-                // Blocky arrow down
+            case 'shape_arrow_down':
                 return 'path://M12 24l-12-12h8v-12h8v12h8z';
 
             case 'arrowup':
-                // Blocky arrow up
+            case 'shape_arrow_up':
                 return 'path://M12 0l12 12h-8v12h-8v-12h-8z';
 
             case 'circle':
+            case 'shape_circle':
                 return 'circle';
 
             case 'cross':
-                // Plus sign (+)
+            case 'shape_cross':
                 return 'path://M11 2h2v9h9v2h-9v9h-2v-9h-9v-2h9z';
 
             case 'diamond':
-                return 'diamond'; // Built-in
+            case 'shape_diamond':
+                return 'diamond';
 
             case 'flag':
-                // Flag on a pole
+            case 'shape_flag':
                 return 'path://M6 2v20h2v-8h12l-2-6 2-6h-12z';
 
             case 'labeldown':
-                // Bubble pointing down: rect with small triangle at bottom center
+            case 'shape_label_down':
                 return 'path://M2 1h20a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-8l-2 3-2-3h-8a1 1 0 0 1-1-1v-14a1 1 0 0 1 1-1z';
 
             case 'labelleft':
-                // Bubble with small pointer on the left side (pointing left)
+            case 'shape_label_left':
                 return 'path://M0 10l3-3v-5a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-18a1 1 0 0 1-1-1v-5z';
 
             case 'labelright':
-                // Bubble with small pointer on the right side (pointing right)
+            case 'shape_label_right':
                 return 'path://M24 10l-3-3v-5a1 1 0 0 0-1-1h-18a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-5z';
 
             case 'labelup':
-                // Bubble pointing up: small triangle at top, rect below
+            case 'shape_label_up':
                 return 'path://M12 1l2 3h8a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-20a1 1 0 0 1-1-1v-14a1 1 0 0 1 1-1h8z';
 
             case 'square':
+            case 'shape_square':
                 return 'rect';
 
             case 'triangledown':
-                // Pointing down
+            case 'shape_triangle_down':
                 return 'path://M12 21l-10-18h20z';
 
             case 'triangleup':
-                // Pointing up
-                return 'triangle'; // Built-in is pointing up
+            case 'shape_triangle_up':
+                return 'triangle';
 
             case 'xcross':
-                // 'X' shape
+            case 'shape_xcross':
                 return 'path://M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
 
             default:
@@ -120,25 +123,30 @@ export class ShapeUtils {
 
         switch (location) {
             case 'abovebar':
+            case 'AboveBar':
                 // Shape is above the candle, text should be above the shape
                 return { position: 'top', distance: 5 };
 
             case 'belowbar':
+            case 'BelowBar':
                 // Shape is below the candle, text should be below the shape
                 return { position: 'bottom', distance: 5 };
 
             case 'top':
+            case 'Top':
                 // Shape at top of chart, text below it
                 return { position: 'bottom', distance: 5 };
 
             case 'bottom':
+            case 'Bottom':
                 // Shape at bottom of chart, text above it
                 return { position: 'top', distance: 5 };
 
             case 'absolute':
+            case 'Absolute':
             default:
                 // For labelup/down, text is INSIDE the shape
-                if (shape === 'labelup' || shape === 'labeldown') {
+                if (shape === 'labelup' || shape === 'labeldown' || shape === 'shape_label_up' || shape === 'shape_label_down') {
                     return { position: 'inside', distance: 0 };
                 }
                 // For other shapes, text above by default