@principal-ai/file-city-react 0.4.7 → 0.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"drawLayeredBuildings.d.ts","sourceRoot":"","sources":["../../../src/render/client/drawLayeredBuildings.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAI1E,MAAM,MAAM,mBAAmB,GAC3B,QAAQ,GACR,MAAM,GACN,MAAM,GACN,SAAS,GACT,OAAO,GACP,MAAM,GACN,QAAQ,CAAC;AAEb,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,cAAc,CAAC,EAAE,mBAAmB,CAAC;IAErC,YAAY,CAAC,EAAE;QACb,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IAEF,YAAY,CAAC,EAAE,CACb,GAAG,EAAE,wBAAwB,EAC7B,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAC/D,KAAK,EAAE,MAAM,KACV,IAAI,CAAC;CACX;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,SAAS,EAAE,CAAC;IAEnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,qBAAa,UAAU;IAErB,OAAO,CAAC,UAAU,CAA6E;IAE/F,OAAO,CAAC,cAAc,CAAuE;IAE7F,OAAO,CAAC,WAAW,CAA6E;gBAEpF,MAAM,EAAE,cAAc,EAAE;IAIpC,OAAO,CAAC,UAAU;IA0BlB;;;;OAIG;IACH,eAAe,CACb,IAAI,EAAE,MAAM,EACZ,SAAS,GAAE,OAAO,GAAG,UAAuB,GAC3C,KAAK,CAAC;QAAE,KAAK,EAAE,cAAc,CAAC;QAAC,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;CAuCrD;AA8BD,wBAAgB,QAAQ,CACtB,GAAG,EAAE,wBAAwB,EAC7B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,QAqBjB;AA0VD,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,wBAAwB,EAC7B,SAAS,EAAE,YAAY,EAAE,EACzB,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACjE,KAAK,EAAE,MAAM,EAAE,wDAAwD;AACvE,MAAM,EAAE,cAAc,EAAE,EACxB,eAAe,CAAC,EAAE,YAAY,GAAG,IAAI,EACrC,QAAQ,CAAC,EAAE,OAAO,EAClB,qBAAqB,CAAC,EAAE,MAAM,EAC9B,YAAY,CAAC,EAAE;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB,EACD,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,yDAAyD;AACxF,mBAAmB,GAAE,OAAc,EACnC,YAAY,GAAE,MAAU,EAAE,uDAAuD;AACjF,UAAU,CAAC,EAAE,UAAU,QAgQxB;AAGD,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,wBAAwB,EAC7B,SAAS,EAAE,YAAY,EAAE,EACzB,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACjE,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,cAAc,EAAE,EACxB,eAAe,CAAC,EAAE,YAAY,GAAG,IAAI,EACrC,oBAAoB,CAAC,EAAE,MAAM,EAC7B,aAAa,CAAC,EAAE,OAAO,EACvB,gBAAgB,CAAC,EAAE,MAAM,EACzB,qBAAqB,CAAC,EAAE,OAAO,EAC/B,iBAAiB,CAAC,EAAE,OAAO,EAC3B,YAAY,GAAE,MAAU,EAAE,2DAA2D;AACrF,UAAU,CAAC,EAAE,UAAU,EAAE,2CAA2C;AACpE,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,QA4I1C"}
1
+ {"version":3,"file":"drawLayeredBuildings.d.ts","sourceRoot":"","sources":["../../../src/render/client/drawLayeredBuildings.ts"],"names":[],"mappings":"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"}
@@ -653,10 +653,35 @@ iconMap) {
653
653
  }
654
654
  }
655
655
  // Draw file type icon if enabled and icon map is provided
656
+ // Track icon size for positioning file name below
657
+ let iconBottomY = pos.y;
656
658
  if (showFileTypeIcons && iconMap) {
657
659
  const iconConfig = (0, fileTypeIcons_1.getFileTypeIcon)(building.path, iconMap);
658
660
  if (iconConfig) {
659
- (0, fileTypeIcons_1.drawFileTypeIcon)(ctx, iconConfig, pos.x, pos.y, width, height);
661
+ // For wide buildings (wider than tall), shift icon up to make room for text below
662
+ const isWide = width > height;
663
+ const iconYOffset = isWide ? -height * 0.15 : 0;
664
+ const iconY = pos.y + iconYOffset;
665
+ (0, fileTypeIcons_1.drawFileTypeIcon)(ctx, iconConfig, pos.x, iconY, width, height);
666
+ // Calculate where the icon ends vertically
667
+ const minDimension = Math.min(width, height);
668
+ if (iconConfig.type === 'emoji') {
669
+ const sizeScale = iconConfig.size || 0.75;
670
+ const emojiSize = minDimension * sizeScale;
671
+ iconBottomY = iconY + emojiSize / 2;
672
+ }
673
+ else if (iconConfig.type === 'lucide') {
674
+ const sizeScale = iconConfig.size || 0.5;
675
+ const actualIconSize = minDimension * sizeScale;
676
+ // Account for background circle if present
677
+ if (iconConfig.backgroundColor) {
678
+ const bgRadius = actualIconSize * 0.7;
679
+ iconBottomY = iconY + bgRadius;
680
+ }
681
+ else {
682
+ iconBottomY = iconY + actualIconSize / 2;
683
+ }
684
+ }
660
685
  }
661
686
  }
662
687
  // Draw filename if enabled
@@ -666,18 +691,16 @@ iconMap) {
666
691
  const fontSize = Math.min(30, Math.max(10, Math.floor(Math.min(width, height) * 0.3)));
667
692
  ctx.font = `${fontSize}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
668
693
  ctx.textAlign = 'center';
669
- ctx.textBaseline = 'middle';
694
+ ctx.textBaseline = 'top'; // Changed from 'middle' to 'top'
670
695
  const textMetrics = ctx.measureText(fileName);
671
696
  const textWidth = textMetrics.width;
672
697
  if (textWidth < width - 8) {
673
- // Background for contrast
674
- const textPadding = 2;
675
- const textHeight = fontSize * 1.2;
676
- ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
677
- ctx.fillRect(pos.x - textWidth / 2 - textPadding, pos.y - textHeight / 2, textWidth + textPadding * 2, textHeight);
698
+ // Add spacing between icon and text
699
+ const spacing = 4;
700
+ const textY = iconBottomY + spacing;
678
701
  // Text
679
702
  ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
680
- ctx.fillText(fileName, pos.x, pos.y);
703
+ ctx.fillText(fileName, pos.x, textY);
681
704
  }
682
705
  ctx.restore();
683
706
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@principal-ai/file-city-react",
3
- "version": "0.4.7",
3
+ "version": "0.4.8",
4
4
  "description": "React components for File City visualization",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -930,10 +930,35 @@ export function drawLayeredBuildings(
930
930
  }
931
931
 
932
932
  // Draw file type icon if enabled and icon map is provided
933
+ // Track icon size for positioning file name below
934
+ let iconBottomY = pos.y;
933
935
  if (showFileTypeIcons && iconMap) {
934
936
  const iconConfig = getFileTypeIcon(building.path, iconMap);
935
937
  if (iconConfig) {
936
- drawFileTypeIcon(ctx, iconConfig, pos.x, pos.y, width, height);
938
+ // For wide buildings (wider than tall), shift icon up to make room for text below
939
+ const isWide = width > height;
940
+ const iconYOffset = isWide ? -height * 0.15 : 0;
941
+ const iconY = pos.y + iconYOffset;
942
+
943
+ drawFileTypeIcon(ctx, iconConfig, pos.x, iconY, width, height);
944
+
945
+ // Calculate where the icon ends vertically
946
+ const minDimension = Math.min(width, height);
947
+ if (iconConfig.type === 'emoji') {
948
+ const sizeScale = iconConfig.size || 0.75;
949
+ const emojiSize = minDimension * sizeScale;
950
+ iconBottomY = iconY + emojiSize / 2;
951
+ } else if (iconConfig.type === 'lucide') {
952
+ const sizeScale = iconConfig.size || 0.5;
953
+ const actualIconSize = minDimension * sizeScale;
954
+ // Account for background circle if present
955
+ if (iconConfig.backgroundColor) {
956
+ const bgRadius = actualIconSize * 0.7;
957
+ iconBottomY = iconY + bgRadius;
958
+ } else {
959
+ iconBottomY = iconY + actualIconSize / 2;
960
+ }
961
+ }
937
962
  }
938
963
  }
939
964
 
@@ -946,26 +971,19 @@ export function drawLayeredBuildings(
946
971
  const fontSize = Math.min(30, Math.max(10, Math.floor(Math.min(width, height) * 0.3)));
947
972
  ctx.font = `${fontSize}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
948
973
  ctx.textAlign = 'center';
949
- ctx.textBaseline = 'middle';
974
+ ctx.textBaseline = 'top'; // Changed from 'middle' to 'top'
950
975
 
951
976
  const textMetrics = ctx.measureText(fileName);
952
977
  const textWidth = textMetrics.width;
953
978
 
954
979
  if (textWidth < width - 8) {
955
- // Background for contrast
956
- const textPadding = 2;
957
- const textHeight = fontSize * 1.2;
958
- ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
959
- ctx.fillRect(
960
- pos.x - textWidth / 2 - textPadding,
961
- pos.y - textHeight / 2,
962
- textWidth + textPadding * 2,
963
- textHeight,
964
- );
980
+ // Add spacing between icon and text
981
+ const spacing = 4;
982
+ const textY = iconBottomY + spacing;
965
983
 
966
984
  // Text
967
985
  ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
968
- ctx.fillText(fileName, pos.x, pos.y);
986
+ ctx.fillText(fileName, pos.x, textY);
969
987
  }
970
988
 
971
989
  ctx.restore();