Fenêtre d'affichage

Composants de la fenêtre

apps/desktop/src/viewport/index.ts exportations Editor2D, View3D, leurs types d'accessoires, les identifiants d'outils disponibles et solidsFromProfiles. Les deux composants remplissent leur parent : fournissent un conteneur avec une largeur et une hauteur non nulles. Les entités CAO de base et les programmes CAM constituent le modèle de données partagé.

L'éditeur 2D effectue le rendu sur Canvas 2D et conserve son propre historique de sélection, de caméra et de commandes. La visionneuse 3D utilise Three.js, des contrôles d'orbite et de transformation, des tâches de maillage asynchrone et la lecture de programmes. Le rendu d'un chemin ou d'un solide ne nécessite pas de l'enregistrer ou de vérifier une opération de fabrication.

Contrat d'intégration

Editor2DProps nécessite drawing, onChange, et selectedTool. Réinjectez les dessins émis dans l’accessoire. Le composant reconnaît ses propres objets document émis ; le remplacement du document en externe charge le nouveau dessin et réinitialise l'état de l'éditeur.

import { createSignal } from "solid-js"
import { Editor2D, type ToolId } from "./viewport/index.ts"

const [drawing, setDrawing] = createSignal(initialDrawing)
const [tool, setTool] = createSignal<ToolId>("select")

<Editor2D drawing={drawing()} onChange={setDrawing} selectedTool={tool()} />

La sélection exclut les entités verrouillées et les entités sur les calques verrouillés. Les entités invisibles et les couches cachées sont exclues de l'index spatial rendu. Les nouvelles entités reçoivent des identifiants uniques au document et sont affectées à une couche visible et déverrouillée lorsqu'elle est disponible.

Outils et gestes de dessin

Le registre d'outils comporte des usines pour la sélection, la ligne, le rectangle, le cercle, l'ellipse, la polyligne, l'arc, le texte, la dimension, le déplacement, la rotation, la mise à l'échelle, la mise en miroir, le décalage, l'ajustement et le congé. AVAILABLE_TOOLS est dérivé de ces usines enregistrées. startTool reconnaît en outre chamfer via l'usine d'outils de congé, mais le chanfrein n'est pas annoncé dans ce tableau. Les consommateurs doivent utiliser le registre lui-même pour décider quels outils activer.

• Zooms à molette ou par pincement ; Faites glisser l’espace, faites glisser le milieu et faites glisser le panoramique vers la droite.
• F correspond au dessin indexé. Supprimer ou Retour arrière supprime la sélection déverrouillée.
• Cmd/Ctrl+Z annule; Cmd/Ctrl+Shift+Z ou Cmd/Ctrl+Y refait.
• Enter valide une polyligne. L'échappement est transmis à l'outil actif pour annuler son geste en cours.
• Avec le texte actif, tapez des caractères ou Retour arrière avant le placement ; le texte initial est Text.

Les positions du pointeur sont converties en coordonnées mondiales avant l'envoi de l'outil. La capture combine l'index spatial, les candidats géométriques et une grille dépendante de la caméra ; la tolérance de réussite de sélection correspond à huit pixels d'écran. Les machines-outils produisent des commandes et des aperçus plutôt que d'écrire des fichiers ou d'appeler l'API.

3Rendu et lecture D

View3D accepte les dessins, les solides, l'extrusion de profilés en option, un cam.Program, les dimensions du brut et les définitions d'outils. Il prend en charge les préréglages de perspective, haut, bas, avant, arrière, gauche, droite, isométrique et à quatre vues. Les modes d'affichage sont ombrés, ombrés avec bords, filaire et rayons X. L'éclairage, les propriétés des matériaux, les sections de découpage, la grille, les axes et l'origine sont configurables via les accessoires.

Contrôlez la lecture avec playing, playbackTime en quelques secondes, playbackRate, et onPlaybackTimeChange. La lecture étend les cycles de forage, mosaïque les mouvements circulaires/hélicoïdaux, préserve le temps de séjour et dessine distinctement les mouvements rapides. Cartes d'outils et géométrie de coupe, de tige et de support par défaut en option ; la géométrie supposée est visuellement distinguée.

Les rappels de sélection rapportent un index solide. Les contrôles de transformation émettent la position, la rotation et l'échelle onTransformCommit; les appelants décident comment conserver cette transformation. Les superpositions de parcours d'outil peuvent afficher des points et des étiquettes, des filtres de type de point, des centres d'arc, des rayons d'arc et la transparence du brut.

Coordonnées et unités

Les coordonnées du dessin de base et les tailles de stock utilisent des millimètres. Les angles de dessin et les composants de rotation Three.js utilisent des radians ; n'appliquez pas cette convention aux valeurs de l'axe rotatif CAM ou aux entrées de fonctionnalités qui utilisent explicitement des degrés. viewport/units.ts contient des aides à la conversion pour les millimètres et les pouces affichés. Convertissez aux limites d'entrée/sortie afin que l'accrochage, la géométrie et le mouvement du parcours d'outil conservent un système d'unités cohérent.

La caméra 2D mappe les coordonnées du monde en pixels CSS ; Les dimensions de la toile de support intègrent le rapport de pixels de l'appareil. Le redimensionnement met à jour la caméra et le tampon de sauvegarde via ResizeObserver. L'échelle de la caméra détermine l'espacement de la grille et les tolérances d'impact sur l'espace de l'écran.

L'affichage en pouces est converti avec exactement 25,4 mm par pouce et les longueurs sont par défaut de 3 décimales (apps/desktop/src/viewport/units.ts). Dans l'éditeur 2D, chaque pas de roue effectue un zoom d'un facteur de 1.15, l'échelle est serrée entre 0.001 et 100,000, et l'ajustement à la vue laisse une marge de 10 % (editor2d/camera.ts).

Ressources et cycle de vie

Le composant 2D annule les images d'animation en file d'attente et déconnecte son observateur de redimensionnement lors du démontage. Le composant 3D propose des écouteurs de redimensionnement et de visibilité, des contrôles d'orbite et de transformation, des travailleurs de maillage, la planification d'animations, des géométries, des matériaux, des sprites, des maillages d'outils et le moteur de rendu WebGL.

Un planificateur d'images regroupe les invalidations et demande d'autres images pendant que l'amortissement ou la lecture de la caméra en a besoin. Les changements de visibilité suspendent les travaux. Il s'agit d'une politique de planification et non d'un budget de fréquence d'images garanti pour chaque modèle et appareil.

Carte des modules

• editor2d/editor2d.tsx: composant contrôlé, envoi de pointeur, caméra, sélection, historique et peinture sur toile.
• editor2d/tools/: machines à états gestuelles et construction de commandes.
• editor2d/camera.ts, render.ts, et snap-pipeline.ts: transformations de coordonnées, rendu d'entités, sélection et orchestration instantanée.
• spatial/grid.ts: dessin d'un index spatial.
• view3d/view3d.tsx: composition de scène, commandes de caméra, sélection, transformations, stock et outils.
• view3d/playback.ts, toolpath-overlays.ts, et modeling.ts: chronologie du mouvement, données de superposition et conversion profil-solide.
• view3d/mesh-jobs.ts et mesh-worker.ts: construction de la géométrie de fond et appropriation du travail.

Disponibilité des outils

ToolId décrit le vocabulaire plus large des outils ; AVAILABLE_TOOLS décrit le sous-ensemble enregistré. Pour les outils interactifs, utilisez startTool(id, lookup, context, text). La recherche de sélection interroge les entités candidates ; le contexte fournit la sélection actuelle et l'accès à l'entité ; text fournit le contenu de l’annotation.

Une usine disparue revient undefined. Gérez cela explicitement plutôt que de présenter un outil désactivé ou non implémenté comme mode d'édition actif. Les outils qui modifient la géométrie existante nécessitent une sélection et un contexte d'entité actuels ; invoquer une usine sans ces dépendances est insuffisant pour une modification utile.

Maillage et vérification

Pour les solides avec un nombre de sommets estimé supérieur à 50,000 et la prise en charge du navigateur Worker, la visionneuse met en file d'attente la construction du maillage dans un module Worker. Les solides plus petits se maillent de manière synchrone. La file d'attente maillée gère l'achèvement, les tâches obsolètes, les erreurs de travail et le nettoyage. Le seuil est une estimation utilisée pour la planification, et non une limite documentée de taille de modèle.

bun test apps/desktop/src/viewport
bun run --filter @cadcamfun/desktop typecheck

Les tests logiques couvrent les aides au rendu, les gestes des outils, l'indexation spatiale, la lecture et les superpositions. Le comportement du navigateur/WebGL dépend également de l'environnement graphique ; inspectez l’interaction réelle de la fenêtre lors de la modification des commandes de la caméra, du cycle de vie de la scène ou du rendu.

Exemple de lecture contrôlée

Un parent peut posséder des commandes de transport sans dupliquer la chronologie des mouvements du spectateur. Ce composant accepte un programme CAM déjà construit et contrôle le temps, l'état de lecture, la vitesse et le préréglage de la fenêtre d'affichage. Ses chemins d'importation supposent un fichier directement sous apps/desktop/src.

import { createSignal } from "solid-js"
import { cam } from "@cadcamfun/core"
import { View3D } from "./viewport/index.ts"

export function ProgramPreview(props: { program: cam.Program }) {
  const [seconds, setSeconds] = createSignal(0)
  const [playing, setPlaying] = createSignal(false)
  return <div style={{ height: "600px" }}>
    <button onClick={() => setPlaying(value => !value)}>Play / pause</button>
    <button onClick={() => { setSeconds(0); setPlaying(true) }}>Restart</button>
    <View3D
      program={props.program}
      preset="isometric"
      playing={playing()}
      playbackTime={seconds()}
      playbackRate={1}
      onPlaybackTimeChange={setSeconds}
      stock={{ origin: { x: 0, y: 0, z: -10 }, size: { x: 100, y: 80, z: 10 } }}
    />
  </div>
}

Le générateur de lecture commence à l'origine, développe les cycles en mouvements et calcule les durées à partir de la longueur du trajet et de l'avance. Sa vitesse rapide par défaut est de 5,000 mm/min et la tolérance de pavage d'arc par défaut est de 0,1 mm. Il s’agit d’hypothèses préliminaires, et non d’accélérations mesurées de la machine ou de synchronisation du contrôleur. Les commandes Dwell conservent leurs secondes indiquées ; les commentaires et les entrées d'orientation uniquement n'ajoutent pas de déplacement linéaire.

Les couleurs des outils sont attribuées par la première occurrence de chaque identifiant d'outil et conservées sur ses chemins. Fournir une carte d'outils/un outil par défaut pour la géométrie de l'assemblage ; un tracé coloré à lui seul n'établit pas les dimensions du couteau ou du support utilisées par vérification.

Modification des recettes et limites actuelles des outils

Ces détails proviennent des implémentations de gestes plutôt que de leurs étiquettes de palette. Inspectez l’aperçu avant de valider et utilisez Annuler si le résultat diffère de la géométrie prévue. Un outil ne renvoyant aucune commande peut signifier que ses prérequis géométriques n'ont pas été satisfaits, et non que l'éditeur a perdu l'événement de pointeur.

Échecs de rendu et de maillage

La file d'attente maillée en arrière-plan admet par défaut au maximum 128 tâches en attente, s'exécute une par une et a un délai d'expiration par défaut de 15 secondes par tâche. La réinitialisation d'une scène met fin au travailleur et efface le travail en file d'attente ; les réponses obsolètes sont ignorées. Les réponses de travailleur non valides, les erreurs de décodage de message, les délais d'attente et les échecs de capacité de file d'attente signalent les erreurs via le rappel de file d'attente.

Les tests pertinents incluent editor2d/tools/offset.test.ts, annotation-transform.test.ts, spatial/grid.test.ts, view3d/playback.test.ts, et toolpath-overlays.test.ts. L'implémentation de la file d'attente maillée est view3d/mesh-jobs.ts.

Présentoirs en détail

L'éditeur travaille toujours en millimètres. Seul ce que l'utilisateur lit et saisit est converti, en utilisant les facteurs exacts ci-dessous. L'unité propre d'un dessin stocké reste mm ou inch; les unités supplémentaires sont uniquement des choix d'affichage.

import { formatLength, parseLength, formatAngle, programUnitsOf } from "./units"

formatLength(25.4, "inch")     // "1.0000 inch"
formatLength(12.5)             // "12.500 mm"
formatLength(0.0254, "thou")   // "1.00 thou"
parseLength("2 in", "inch")    // 50.8  (a trailing unit word is ignored)
parseLength("abc")             // undefined
formatAngle(Math.PI / 2)       // "90.0°"
programUnitsOf("thou")         // "inch"

2Caméra D et grille

const camera = createCamera({ x: 0, y: 0 }, 2, 800, 600)   // 2 px per mm
worldToScreen(camera, { x: 10, y: 10 })   // { x: 420, y: 280 }
screenToWorld(camera, { x: 420, y: 280 }) // { x: 10, y: 10 }
gridStep(2)    // 5   -> 5 mm apart = 10 px
gridStep(0.5)  // 20  -> 20 mm apart = 10 px

Le rendu élimine les entités par rapport visibleBounds(camera). L'accrochage évite également de numériser l'intégralité du dessin : une grille spatiale uniforme renvoie les entités dont les limites se situent dans la tolérance d'accrochage plus une marge candidate de 2 mm, et seules celles-ci sont transmises au noyau. findSnap. Cela permet au pointeur de se déplacer rapidement dans les dessins comportant de nombreuses entités.

Référence d'accrochage

Les types d’accrochage sont essayés par ordre de priorité. L'ordre par défaut correspond à l'ancien éditeur : endpoint, midpoint, center, intersection, perpendicular, tangent, nearest, et quadrant. Les points finaux sont les sommets de l'entité source, pas ses pavages.

Le pipeline renvoie le snap, les ID des entités sous le curseur (le plus proche en premier, que l'outil de sélection consomme) et le nombre de candidats pris en compte.

Comment la lecture du parcours d'outil est chronométrée

const playback = buildPlayback(program)          // rapids at 5000 mm/min
playback.duration                                // total seconds
positionAt(playback, 12.5)                       // tool position at t = 12.5 s
toolAt(playback, 12.5)                           // toolId cutting at that time
toolColors(program)                              // Map toolId -> colour, first use order

// A 10 mm feed move at 600 mm/min lasts 10 / 600 × 60 = 1 s.
// The same 10 mm as a rapid lasts 10 / 5000 × 60 = 0.12 s.

Pratiques de fenêtre

• Convertir en périphérie : stocker et calculer en millimètres et en radians, et formater uniquement pour l'affichage avec formatLength et formatAngle.
• Ne réutilisez jamais une longueur analysée après parseLength retours undefined; conserver la valeur précédente et afficher un indice de validation.
• Lors de l'ajout d'un outil de dessin, enregistrez-le dans la table de la fabrique d'outils afin que la barre d'outils, les raccourcis et les tests l'adressent par le même ID.
• Gardez les requêtes des candidats instantanés spatiales. Passer chaque entité à findSnap à chaque mouvement du pointeur, l'index est vaincu.
• Traitez la durée de lecture comme un aperçu et non comme une citation de durée de cycle.

Hit-testing à grande échelle : la grille spatiale

L'éditeur 2D cible 60 images par seconde avec 10,000 entités. Par conséquent, les tests d'impact et l'élimination n'analysent jamais chaque entité par événement de pointeur. viewport/spatial/grid.ts conserve une grille uniforme : chaque élément est enregistré dans chaque cellule touchée par son cadre de sélection, et une requête renvoie tous les éléments dont les limites coupent le cadre de requête, dans l'ordre d'insertion. Le résultat est exact, jamais un échantillon.

Les cellules touchées par la zone de requête en pointillés sont visitées ; A et la longue ligne sont renvoyés parce que leurs limites le coupent, B ne l'est pas.

3File d'attente de maillage D

Les solides sont maillés dans un Web Worker afin que le thread de l'interface utilisateur ne se bloque jamais. MeshWorkerQueue dans view3d/mesh-jobs.ts exécute une tâche à la fois :

Tout échec met fin au travail de travail et efface toute la file d'attente, de sorte que le travail de scène obsolète n'arrive jamais après une modification plus récente ; la soumission suivante démarre un nouveau travailleur. Les réponses correspondent à l'ID de travail, donc une réponse tardive d'un travailleur terminé est ignorée.

2Implémentations d'outils D

Chaque outil est une petite machine à états avec onPointerDown, onPointerMove et onPointerUp, créé par une usine à tools/index.ts, un par entrée de palette. Les positions du pointeur passent snap-pipeline.ts avant qu'un outil ne les voie.