Commenti Workspace

Un commento dell'area di lavoro è un elemento grafico in cui puoi inserire del testo. Di solito viene utilizzato per documentare informazioni sul codice, proprio come i commenti in un linguaggio di programmazione basato su testo.

Nota: i commenti dell'area di lavoro non possono essere aggiunti al flyout.

Attiva i commenti dell'area di lavoro

Per abilitare i commenti dell'area di lavoro nella tua applicazione, devi offrire agli utenti un modo per crearli. Un modo per farlo è aggiungere una voce di menu contesto che crea un commento nell'area di lavoro. Puoi registrare le voci di menu contestuale predefinite per creare, eliminare e duplicare i commenti dell'area di lavoro con il seguente codice:

// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();

Puoi anche creare opzioni di menu contestuale personalizzate o aggiungere un altro modo per consentire all'utente di aggiungere commenti all'area di lavoro. Per ulteriori informazioni sulle opzioni del menu contestuale, consulta Menu contestuali.

Personalizzare visivamente i commenti

Esistono diversi modi per personalizzare l'aspetto dei commenti nell'area di lavoro. Utilizzano il CSS e non i temi. È possibile controllare la maggior parte dei colori e delle dimensioni delle diverse parti del commento, ma non la posizione.

Variabili CSS dei colori

Puoi impostare la variabile CSS commentFillColour per modificare il colore di sfondo dell'area di testo. Puoi impostare la variabile CSS commentBorderColour per modificare il colore della barra superiore dei commenti e il bordo del commento.

.blocklyWorkspace {
  --commentFillColour: blue;
  --commentBorderColour: red;
}

Classi CSS

Esistono diverse classi CSS assegnate ai diversi elementi nella visualizzazione dei commenti, che ti consentono di modificare lo stile degli elementi.

Classi CSS	Immagine
blocklyComment, blocklyDraggable
blocklySelected, blocklyCommentHighlight
blocklyCollapsed
blocklyCommentTopbar
blocklyFoldoutIcon
blocklyCommentPreview, blocklyText
blocklyDeleteIcon
blocklyText
blocklyResizeHandle

Utilizzo di base di CSS

Nella maggior parte dei casi, puoi applicare gli attributi personalizzati con la classe CSS appropriata:

.blocklyCommentTopbarBackground {
  height: 50px;
}

CSS per il testo

Tuttavia, per il testo devi essere più specifico per sostituire il codice CSS generato dal renderer.

/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
  fill: blue;
}

/* Modifies the input text. */
.blocklyComment .blocklyText {
  color: blue;
}

CSS per le caratteristiche principali selezionate

Per evidenziare il commento quando è selezionato, l'oggetto in cui il CSS deve essere applicato alle modifiche, a seconda che il commento sia compresso o meno. Quando viene compresso, il CSS viene applicato a blocklyCommentTopbarBackground, altrimenti a blocklyCommentHighlight.

/* Highlight when expanded. */
.blocklySelected .blocklyCommentHighlight {
  stroke: #fc3;
  stroke-width: 3px;
}

/* Hide normal highlight when collapsed. */
.blocklyCollapsed.blocklySelected .blocklyCommentHighlight {
  stroke: none;
}

/* Instead apply the collapsed highlight to the top bar. */
.blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
  stroke: #fc3;
  stroke-width: 3px;
}

Icone

Le classi blocklyFoldoutIcon, blocklyDeleteIcon e blocklyResizeHandle vengono applicate agli elementi <image>. Pertanto, se vuoi modificare il colore o la forma di un'icona, puoi includere un'immagine diversa nella cartella contenuti multimediali.

Nome immagine	Immagine
freccia-pieghevole.svg
elimina-icon.svg
resize-handle.svg

Icona Elimina

L'icona Elimina è nascosta per impostazione predefinita. Se vuoi abilitarla, devi utilizzare CSS per renderla visibile:

.blocklyDeleteIcon {
  display: block;
}