@jjlmoya/utils-developer 1.17.0 → 1.20.0

package/src/tool/visualCssGridFlexboxGenerator/interactions.ts

@@ -0,0 +1,45 @@
+import type { LayoutMode } from './logic';
+
+export function setupSpanHandler(
+  canvas: HTMLElement,
+  modeFn: () => LayoutMode,
+  itemPrefix: string,
+  onUpdate: () => void,
+) {
+  canvas.addEventListener('dblclick', (e: MouseEvent) => {
+    const item = (e.target as HTMLElement).closest('.vcg-item') as HTMLElement | null;
+    if (!item || modeFn() !== 'grid') return;
+    const cur = Number(item.dataset.span ?? '1');
+    const next = cur >= 3 ? 1 : cur + 1;
+    item.dataset.span = String(next);
+    const label = item.querySelector('span');
+    if (label) {
+      const num = item.dataset.item;
+      label.textContent = next > 1 ? `${itemPrefix} ${num} (${next}x)` : `${itemPrefix} ${num}`;
+    }
+    onUpdate();
+  });
+}
+
+export function spawnConfetti(x: number, y: number) {
+  const container = document.createElement('div');
+  container.className = 'vcg-confetti-container';
+  const colors = ['#2dd4bf', '#fbbf24', '#6366f1', '#f472b6', '#34d399', '#f97316', '#a78bfa', '#22d3ee', '#fde047'];
+  for (let i = 0; i < 32; i++) {
+    const p = document.createElement('div');
+    p.className = 'vcg-confetti-piece';
+    p.style.left = `${x}px`;
+    p.style.top = `${y}px`;
+    p.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]!;
+    p.style.width = `${5 + Math.random() * 7}px`;
+    p.style.height = `${5 + Math.random() * 7}px`;
+    const a = Math.random() * Math.PI * 2;
+    const d = 40 + Math.random() * 80;
+    p.style.setProperty('--cx', `${Math.cos(a) * d}px`);
+    p.style.setProperty('--cy', `${Math.sin(a) * d - 30}px`);
+    p.style.setProperty('--cr', `${Math.random() * 720 - 360}deg`);
+    container.append(p);
+  }
+  document.body.append(container);
+  setTimeout(() => container.remove(), 900);
+}

package/src/tool/visualCssGridFlexboxGenerator/logic.ts

@@ -0,0 +1,49 @@
+export type LayoutMode = 'flex' | 'grid';
+
+export interface LayoutState {
+  mode: LayoutMode;
+  gap: number;
+  columns: number;
+  width: number;
+  height: number;
+  itemSize: number;
+  justifyContent: string;
+  alignItems: string;
+  flexDirection: string;
+  flexWrap: string;
+  alignContent: string;
+  itemSpans: Record<string, number>;
+}
+
+function buildSpanRules(spans: Record<string, number>): string[] {
+  const lines: string[] = [];
+  for (const [id, span] of Object.entries(spans)) {
+    if (span > 1) {
+      lines.push(`.layout-item[data-item="${id}"] {`, `  grid-column: span ${span};`, '}');
+    }
+  }
+  return lines;
+}
+
+export function buildLayoutCss(state: LayoutState): string {
+  const lines: string[] = ['.layout-playground {'];
+
+  if (state.mode === 'grid') {
+    lines.push('  display: grid;', `  grid-template-columns: repeat(${state.columns}, minmax(0, 1fr));`);
+  } else {
+    lines.push('  display: flex;', `  flex-direction: ${state.flexDirection};`, `  flex-wrap: ${state.flexWrap};`);
+  }
+
+  lines.push(`  gap: ${state.gap}px;`, `  justify-content: ${state.justifyContent};`, `  align-items: ${state.alignItems};`);
+
+  if (state.mode === 'flex' && state.flexWrap !== 'nowrap') {
+    lines.push(`  align-content: ${state.alignContent};`);
+  }
+
+  lines.push(`  width: ${state.width}px;`, `  min-height: ${state.height}px;`, '}', '', '.layout-item {', `  min-width: ${state.itemSize}px;`, `  min-height: ${state.itemSize}px;`, '}');
+
+  if (state.mode === 'grid') {
+    lines.push(...buildSpanRules(state.itemSpans));
+  }
+  return lines.join('\n');
+}

package/src/tool/visualCssGridFlexboxGenerator/presets.ts

@@ -0,0 +1,63 @@
+import type { LayoutMode } from './logic';
+import { getAllItems, clearPresetActive } from './canvas';
+
+type PresetCfg = Partial<{
+  mode: LayoutMode;
+  gap: number; columns: number; width: number; height: number; itemSize: number;
+  justifyContent: string; alignItems: string; flexDirection: string;
+  flexWrap: string; alignContent: string;
+}>;
+
+export const PRESETS: Record<string, PresetCfg> = {
+  navbar: { mode: 'flex', flexDirection: 'row', flexWrap: 'nowrap', gap: 12, justifyContent: 'space-between', alignItems: 'center', alignContent: 'stretch', width: 760, height: 220, itemSize: 80 },
+  cards: { mode: 'grid', columns: 3, gap: 24, justifyContent: 'center', alignItems: 'center', width: 760, height: 420, itemSize: 100 },
+  hero: { mode: 'flex', flexDirection: 'column', flexWrap: 'nowrap', gap: 20, justifyContent: 'center', alignItems: 'center', alignContent: 'center', width: 600, height: 500, itemSize: 120 },
+  sidebar: { mode: 'grid', columns: 2, gap: 16, justifyContent: 'start', alignItems: 'stretch', width: 760, height: 460, itemSize: 100 },
+  gallery: { mode: 'grid', columns: 4, gap: 12, justifyContent: 'center', alignItems: 'start', width: 760, height: 400, itemSize: 80 },
+};
+
+interface PresetCtrls {
+  gapInput: HTMLInputElement;
+  columnsInput: HTMLInputElement;
+  widthInput: HTMLInputElement;
+  heightInput: HTMLInputElement;
+  itemSizeInput: HTMLInputElement;
+  justifySelect: HTMLSelectElement;
+  alignSelect: HTMLSelectElement;
+  directionSelect: HTMLSelectElement;
+  wrapSelect: HTMLSelectElement;
+  alignContentSelect: HTMLSelectElement;
+}
+
+const KEY_MAP: Record<string, keyof PresetCtrls> = {
+  gap: 'gapInput', columns: 'columnsInput', width: 'widthInput', height: 'heightInput',
+  itemSize: 'itemSizeInput', justifyContent: 'justifySelect', alignItems: 'alignSelect',
+  flexDirection: 'directionSelect', flexWrap: 'wrapSelect', alignContent: 'alignContentSelect',
+};
+
+interface PresetContext {
+  canvas: HTMLElement;
+  ctrls: PresetCtrls;
+  setMode: (m: LayoutMode) => void;
+  update: () => void;
+}
+
+export function applyPreset(name: string, ctx: PresetContext) {
+  const cfg = PRESETS[name];
+  if (!cfg) return;
+
+  clearPresetActive();
+  const btn = document.querySelector(`[data-preset="${name}"]`);
+  if (btn) btn.classList.add('vcg-preset-active');
+
+  getAllItems(ctx.canvas).forEach((item) => { item.dataset.span = '1'; });
+  if (cfg.mode) ctx.setMode(cfg.mode);
+
+  for (const [key, value] of Object.entries(cfg)) {
+    if (key === 'mode') continue;
+    const ck = KEY_MAP[key] as keyof PresetCtrls | undefined;
+    if (ck && ctx.ctrls[ck]) ctx.ctrls[ck].value = String(value);
+  }
+
+  ctx.update();
+}

package/src/tool/visualCssGridFlexboxGenerator/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { visualCssGridFlexboxGenerator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await visualCssGridFlexboxGenerator.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/visualCssGridFlexboxGenerator/ui.ts

@@ -0,0 +1,58 @@
+export interface VisualCssGridFlexboxGeneratorUI extends Record<string, string> {
+  modeLabel: string;
+  flexMode: string;
+  gridMode: string;
+  canvasLabel: string;
+  addItem: string;
+  removeItem: string;
+  resetLayout: string;
+  gapLabel: string;
+  columnsLabel: string;
+  widthLabel: string;
+  heightLabel: string;
+  justifyLabel: string;
+  alignLabel: string;
+  itemSizeLabel: string;
+  codeTitle: string;
+  copyCode: string;
+  copied: string;
+  dragHint: string;
+  outputLabel: string;
+  justifyStart: string;
+  justifyCenter: string;
+  justifyEnd: string;
+  justifyBetween: string;
+  justifyAround: string;
+  justifyEvenly: string;
+  alignStart: string;
+  alignCenter: string;
+  alignEnd: string;
+  alignStretch: string;
+  alignBaseline: string;
+  itemPrefix: string;
+  directionLabel: string;
+  directionRow: string;
+  directionRowReverse: string;
+  directionColumn: string;
+  directionColumnReverse: string;
+  wrapLabel: string;
+  wrapNoWrap: string;
+  wrapWrap: string;
+  wrapWrapReverse: string;
+  alignContentLabel: string;
+  alignContentStart: string;
+  alignContentCenter: string;
+  alignContentEnd: string;
+  alignContentBetween: string;
+  alignContentAround: string;
+  alignContentEvenly: string;
+  alignContentStretch: string;
+  presetsLabel: string;
+  presetNavbar: string;
+  presetCards: string;
+  presetHero: string;
+  presetSidebar: string;
+  presetGallery: string;
+  shakeLimit: string;
+  spanHint: string;
+}