update at 2026-01-22 20:01:21

src/composables/useLuopan.ts

@@ -65,6 +65,7 @@ export function useLuopan(
     const resolver = new ColorResolver(configObj.theme, configObj.background);
     const builder = new SectorBuilder(resolver, {
       textRadialPosition: textRadialPosition.value,
+      insetDistance: configObj.insetDistance,
     });
     const sectorLayers = configObj.layers.filter(isSectorLayer);
     return sectorLayers.flatMap((layer, index) => builder.buildLayer(layer, index));
@@ -104,6 +105,9 @@ export function useLuopan(
         strokeOpacity: typeof configObj.strokeOpacity === 'number'
           ? configObj.strokeOpacity
           : undefined,
+        insetDistance: typeof configObj.insetDistance === 'number'
+          ? configObj.insetDistance
+          : undefined,
       };
 
       config.value = resolvedConfig;

src/configParser.ts

@@ -79,6 +79,7 @@ export const parseConfig = (jsonText: string): LuopanConfig => {
     strokeWidth: typeof config.strokeWidth === 'number' ? config.strokeWidth : undefined,
     strokeColor: typeof config.strokeColor === 'string' ? config.strokeColor : undefined,
     strokeOpacity: typeof config.strokeOpacity === 'number' ? config.strokeOpacity : undefined,
+    insetDistance: typeof config.insetDistance === 'number' ? config.insetDistance : undefined,
     outerRadius: typeof config.outerRadius === 'number' ? config.outerRadius : undefined,
     theme: normalizeTheme(config.theme),
     layers: config.layers as LuopanConfig['layers'],

src/sectorBuilder.ts

@@ -18,17 +18,23 @@ const ensureTrailingSlash = (input: string): string =>
 interface SectorBuilderOptions {
   textRadialPosition?: TextRadialPosition;
   svgIconPath?: string;
+  insetDistance?: number;
 }
 
 export class SectorBuilder {
   private colorResolver: ColorResolver;
   private textRadialPosition: TextRadialPosition;
   private svgIconPath: string;
+  private insetDistance: number;
 
   constructor(colorResolver: ColorResolver, options: SectorBuilderOptions = {}) {
     this.colorResolver = colorResolver;
     this.textRadialPosition = options.textRadialPosition ?? 'middle';
     this.svgIconPath = ensureTrailingSlash(options.svgIconPath ?? 'src/assets/icons/');
+    this.insetDistance =
+      typeof options.insetDistance === 'number'
+        ? Math.max(0, options.insetDistance)
+        : SECTOR_INSET_DISTANCE;
   }
 
   buildLayer(layer: SectorLayerConfig, layerIndex: number): Sector[] {
@@ -57,7 +63,7 @@ export class SectorBuilder {
             layer.rOuter,
             aStart,
             aEnd,
-            SECTOR_INSET_DISTANCE
+            this.insetDistance
           )
         : undefined;
 

src/types.ts

@@ -29,6 +29,7 @@ export interface LuopanConfig {
   strokeWidth?: number;
   strokeColor?: string;
   strokeOpacity?: number;
+  insetDistance?: number;
   outerRadius?: number;
   theme: ThemeConfig;
   layers: LayerConfig[];