admtracksteel/camila
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajuste de Formas (Espessura, Cor de Linha e Preenchimento), Alça de Redimensionamento e Ordenamento de Camadas (Z-Index)

Browse Source
This commit is contained in:
admtracksteel
2026-09-03 11:28:55 +00:00
parent 1e9d80b69c
commit e17e358e35
3 changed files with 530 additions and 569 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+457 -534
View File
File diff suppressed because it is too large Load Diff
public/index.html
+41 -22
View File
@@ -2770,15 +2770,15 @@
</div> </div>
<!-- Painel de Controle do Canvas (Apenas visível no Modo Canvas) --> <!-- Painel de Controle do Canvas (Apenas visível no Modo Canvas) -->
<div id="canvasControlPanel" style="display: none; background: var(--bg-tertiary); border: 1px solid var(--border-light); padding: 10px 14px; border-radius: 10px; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px;"> <div id="canvasControlPanel" style="display: none; background: var(--bg-tertiary); border: 1px solid var(--border-light); padding: 8px 12px; border-radius: 10px; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 16px rgba(0,0,0,0.3);">
<button id="btnCanvasAddText" class="btn-save-settings" style="background: #10a37f; color: white; border: none; padding: 5px 12px; font-size: 0.75rem; font-weight: 600; border-radius: 6px; cursor: pointer;">➕ Texto</button> <button id="btnCanvasAddText" class="btn-save-settings" style="background: #10a37f; color: white; border: none; padding: 5px 11px; font-size: 0.74rem; font-weight: 600; border-radius: 6px; cursor: pointer;">➕ Texto</button>
<button id="btnCanvasAddCard" class="btn-save-settings" style="background: #a855f7; color: white; border: none; padding: 5px 12px; font-size: 0.75rem; font-weight: 600; border-radius: 6px; cursor: pointer;">➕ Card</button> <button id="btnCanvasAddCard" class="btn-save-settings" style="background: #a855f7; color: white; border: none; padding: 5px 11px; font-size: 0.74rem; font-weight: 600; border-radius: 6px; cursor: pointer;">➕ Card</button>
<div style="height: 20px; width: 1px; background: var(--border-light);"></div> <div style="height: 18px; width: 1px; background: var(--border-light);"></div>
<!-- Controles do Item Selecionado --> <!-- Controles do Item Selecionado -->
<span style="font-size: 0.75rem; color: var(--text-secondary);">Item:</span> <span style="font-size: 0.73rem; color: var(--text-secondary);">Item:</span>
<select id="canvasFontFamily" class="obs-select" style="padding: 3px 6px; font-size: 0.75rem; min-width: 90px; margin: 0;"> <select id="canvasFontFamily" class="obs-select" style="padding: 2px 6px; font-size: 0.74rem; min-width: 85px; margin: 0;">
<option value="Fredoka">Fredoka</option> <option value="Fredoka">Fredoka</option>
<option value="Outfit">Outfit</option> <option value="Outfit">Outfit</option>
<option value="Caveat">Caveat</option> <option value="Caveat">Caveat</option>
@@ -2786,32 +2786,51 @@
<option value="Arial">Arial</option> <option value="Arial">Arial</option>
</select> </select>
<input type="number" id="canvasFontSize" class="obs-input" style="width: 55px; padding: 3px 6px; font-size: 0.75rem; margin: 0;" min="8" max="72" value="16" title="Tamanho da fonte (px)"> <input type="number" id="canvasFontSize" class="obs-input" style="width: 50px; padding: 2px 5px; font-size: 0.74rem; margin: 0;" min="8" max="72" value="16" title="Tamanho da fonte (px)">
<!-- 1. Cor do Texto / Ícone -->
<div style="display: flex; align-items: center; gap: 4px;"> <div style="display: flex; align-items: center; gap: 4px;">
<label style="font-size: 0.72rem; color: var(--text-secondary);">Cor:</label> <label style="font-size: 0.7rem; color: var(--text-secondary);">Texto:</label>
<input type="color" id="canvasTextColor" style="width: 24px; height: 24px; border: 1px solid var(--border-light); border-radius: 4px; padding: 0; cursor: pointer; background: transparent; margin: 0;"> <input type="color" id="canvasTextColor" style="width: 22px; height: 22px; border: 1px solid var(--border-light); border-radius: 4px; padding: 0; cursor: pointer; background: transparent; margin: 0;" title="Cor do texto ou ícone">
</div>
<!-- 2. Cor da Linha de Contorno (Solicitado pelo usuário) -->
<div style="display: flex; align-items: center; gap: 4px;">
<label style="font-size: 0.7rem; color: var(--text-secondary);" title="Cor da linha de contorno">Linha:</label>
<input type="color" id="canvasBorderColor" value="#2d3748" style="width: 22px; height: 22px; border: 1px solid var(--border-light); border-radius: 4px; padding: 0; cursor: pointer; background: transparent; margin: 0;" title="Cor da linha / contorno">
</div>
<!-- 3. Espessura da Linha (Alargar / Afinar, solicitado pelo usuário) -->
<div style="display: flex; align-items: center; gap: 4px;">
<label style="font-size: 0.7rem; color: var(--text-secondary);" title="Alargar ou afinar as linhas">Espessura:</label>
<input type="number" id="canvasBorderWidth" class="obs-input" style="width: 44px; padding: 2px 4px; font-size: 0.74rem; margin: 0;" min="0" max="40" value="3" title="Espessura da linha em pixels">
</div>
<!-- 4. Preenchimento de Cor (Solicitado pelo usuário) -->
<div style="display: flex; align-items: center; gap: 4px;">
<label style="font-size: 0.7rem; color: var(--text-secondary);" title="Preencher com cor">Preencher:</label>
<input type="color" id="canvasBgColor" value="#ffffff" style="width: 22px; height: 22px; border: 1px solid var(--border-light); border-radius: 4px; padding: 0; cursor: pointer; background: transparent; margin: 0;" title="Cor de preenchimento">
<button type="button" id="btnCanvasBgTransparent" class="btn-save-settings" style="background: transparent; border: 1px dashed var(--border-light); color: var(--text-secondary); padding: 2px 6px; font-size: 0.66rem; border-radius: 4px; cursor: pointer;" title="Tornar o preenchimento transparente (vazado)">🚫 Sem Cor</button>
</div> </div>
<div style="display: flex; align-items: center; gap: 4px;"> <div style="display: flex; align-items: center; gap: 4px;">
<label style="font-size: 0.72rem; color: var(--text-secondary);">Fundo:</label> <label style="font-size: 0.7rem; color: var(--text-secondary);" title="Rotação">Giro:</label>
<input type="color" id="canvasBgColor" style="width: 24px; height: 24px; border: 1px solid var(--border-light); border-radius: 4px; padding: 0; cursor: pointer; background: transparent; margin: 0;"> <input type="range" id="canvasRotation" min="-180" max="180" value="0" style="width: 50px; height: 4px; cursor: pointer; margin: 0;">
</div> </div>
<div style="display: flex; align-items: center; gap: 4px;"> <div style="display: flex; align-items: center; gap: 4px;">
<label style="font-size: 0.72rem; color: var(--text-secondary);" title="Rotação">Giro:</label> <label style="font-size: 0.7rem; color: var(--text-secondary);" title="Opacidade">Opac.:</label>
<input type="range" id="canvasRotation" min="-180" max="180" value="0" style="width: 60px; height: 4px; cursor: pointer; margin: 0;"> <input type="range" id="canvasOpacity" min="10" max="100" value="100" style="width: 50px; height: 4px; cursor: pointer; margin: 0;">
</div> </div>
<div style="display: flex; align-items: center; gap: 4px;"> <!-- CONTROLE AVANÇADO DE CAMADAS / PROFUNDIDADE (Z-INDEX) -->
<label style="font-size: 0.72rem; color: var(--text-secondary);" title="Opacidade">Opac.:</label> <div style="display: flex; gap: 3px; align-items: center; background: rgba(0,0,0,0.25); padding: 3px 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08);">
<input type="range" id="canvasOpacity" min="10" max="100" value="100" style="width: 60px; height: 4px; cursor: pointer; margin: 0;"> <span id="canvasItemZIndexBadge" style="font-size: 0.68rem; font-weight: 700; color: #a78bfa; padding: 1px 4px;" title="Ordem da camada do elemento">Camada: --</span>
</div> <button id="btnCanvasZIndexFront" class="btn-save-settings" style="background: rgba(139,92,246,0.25); border: 1px solid rgba(139,92,246,0.4); color: #c4b5fd; padding: 2px 6px; font-size: 0.68rem; cursor: pointer; border-radius: 4px;" title="Trazer para Frente de Tudo (Topo)">⏫</button>
<button id="btnCanvasZIndexUp" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 2px 6px; font-size: 0.68rem; cursor: pointer; border-radius: 4px;" title="Avançar 1 Nível">🔺</button>
<div style="display: flex; gap: 4px; align-items: center;"> <button id="btnCanvasZIndexDown" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 2px 6px; font-size: 0.68rem; cursor: pointer; border-radius: 4px;" title="Recuar 1 Nível">🔻</button>
<button id="btnCanvasZIndexUp" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 3px 7px; font-size: 0.7rem; cursor: pointer;" title="Trazer para Frente">🔺</button> <button id="btnCanvasZIndexBack" class="btn-save-settings" style="background: rgba(100,116,139,0.25); border: 1px solid rgba(100,116,139,0.4); color: #94a3b8; padding: 2px 6px; font-size: 0.68rem; cursor: pointer; border-radius: 4px;" title="Enviar para Trás de Tudo (Fundo)">⏬</button>
<button id="btnCanvasZIndexDown" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 3px 7px; font-size: 0.7rem; cursor: pointer;" title="Enviar para Trás">🔻</button> <button id="btnCanvasDelete" class="btn-save-settings" style="background: #ef4444; color: white; border: none; padding: 2px 7px; font-size: 0.68rem; font-weight: bold; border-radius: 4px; cursor: pointer; margin-left: 2px;" title="Excluir Elemento">🗑️</button>
<button id="btnCanvasDelete" class="btn-save-settings" style="background: #ef4444; color: white; border: none; padding: 3px 8px; font-size: 0.7rem; font-weight: bold; border-radius: 4px; cursor: pointer;" title="Excluir Elemento">🗑️</button>
</div> </div>
</div> </div>
public/style.css
+32 -13
View File
@@ -3988,24 +3988,41 @@ code {
} }
.canvas-item.active-item { .canvas-item.active-item {
border: 2.5px solid #3b82f6 !important; outline: 2.5px solid #3b82f6 !important;
box-shadow: 0 0 12px rgba(59, 130, 246, 0.4); outline-offset: 1px;
z-index: 1000; box-shadow: 0 0 16px rgba(59, 130, 246, 0.45) !important;
} }
/* Alça de redimensionamento do card */ /* Alça de redimensionamento do card */
.canvas-resize-handle { .canvas-resize-handle {
position: absolute; position: absolute;
width: 14px; width: 16px;
height: 14px; height: 16px;
background: #3b82f6; background: #3b82f6;
border: 2px solid white; border: 2.5px solid #ffffff;
border-radius: 50%; border-radius: 50%;
bottom: -7px; bottom: -8px;
right: -7px; right: -8px;
cursor: se-resize; cursor: nwse-resize;
z-index: 10; z-index: 9999;
display: none; display: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
touch-action: none;
transition: transform 0.15s ease, background-color 0.15s ease;
}
/* Área de toque expandida para facilitar o clique em telas de toque e mouse */
.canvas-resize-handle::after {
content: '';
position: absolute;
inset: -10px;
border-radius: 50%;
}
.canvas-resize-handle:hover,
.canvas-resize-handle:active {
transform: scale(1.35);
background: #10b981;
} }
.canvas-item.active-item .canvas-resize-handle { .canvas-item.active-item .canvas-resize-handle {
@@ -4019,6 +4036,7 @@ code {
} }
.canvas-item { .canvas-item {
border: none !important; border: none !important;
outline: none !important;
box-shadow: none !important; box-shadow: none !important;
cursor: default !important; cursor: default !important;
} }
@@ -4043,13 +4061,14 @@ code {
} }
.canvas-scene-layer:hover { .canvas-scene-layer:hover {
border-color: rgba(139, 92, 246, 0.8); outline: 1.5px dashed rgba(139, 92, 246, 0.7);
box-shadow: 0 0 10px rgba(139, 92, 246, 0.3); box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
} }
.canvas-scene-layer.active-item { .canvas-scene-layer.active-item {
border: 2px dashed #8b5cf6 !important; outline: 2.5px dashed #8b5cf6 !important;
box-shadow: 0 0 14px rgba(139, 92, 246, 0.4); outline-offset: 1px;
box-shadow: 0 0 16px rgba(139, 92, 246, 0.5) !important;
} }
/* Animação dos dots de loading */ /* Animação dos dots de loading */