@liquidcars/atlas 0.1.17 → 0.1.19
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.
- package/README.md +4 -4
- package/demo/index.html +2 -2
- package/dist/liquidcars-atlas.js +21 -7
- package/index.html +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -112,8 +112,8 @@ como `setClickBehavior()`).
|
|
|
112
112
|
- `relations` acepta objetos `{from, to, label}` o la forma corta `[from, to, label]`.
|
|
113
113
|
El campo visual opcional `mode` admite `directed` (por defecto),
|
|
114
114
|
`bidirectional` y `broken`. En modo bidireccional los indicadores animados
|
|
115
|
-
circulan en ambos sentidos por el mismo tubo; en modo broken
|
|
116
|
-
|
|
115
|
+
circulan en ambos sentidos por el mismo tubo; en modo broken los dos tramos
|
|
116
|
+
aparecen en rojo, con una X y un anillo detenido en el punto de interrupción.
|
|
117
117
|
|
|
118
118
|
Geometrías incluidas en esta primera versión: `box`, `cylinder`, `sphere`, `cone`, `frustum-cone`, `frustum-pyramid`, `frustum-triangle`, `prism`, `pyramid-square`, `pyramid-triangle`, `octahedron`, `dodecahedron` e `icosahedron`. Las variantes `frustum-*` son sólidos truncados con dos caras finitas paralelas; las dimensiones `s` se aplican sobre su caja final normalizada.
|
|
119
119
|
|
|
@@ -141,9 +141,9 @@ Una vez publicado, los consumidores podrán instalarlo con `npm install @liquidc
|
|
|
141
141
|
Para probar el paquete sin publicarlo, basta con instalar el tarball generado:
|
|
142
142
|
|
|
143
143
|
```bash
|
|
144
|
-
npm install ./liquidcars-atlas-0.1.
|
|
144
|
+
npm install ./liquidcars-atlas-0.1.19.tgz
|
|
145
145
|
```
|
|
146
146
|
|
|
147
147
|
## Estado
|
|
148
148
|
|
|
149
|
-
`0.1.
|
|
149
|
+
`0.1.19` mantiene la corrección del desplazamiento interno del texto y ancla las etiquetas a las dimensiones reales de las geometrías redondeadas. Además fija un margen superior absoluto para las etiquetas secundarias de contenedores abiertos, situado dentro del frontal del contenedor y sin depender de sus dimensiones. También corrige los sólidos truncados, normaliza sus dimensiones finales, refuerza la visibilidad de la toolbar con el atributo `toolbar="on"`/`"off"` y `setToolbarVisible()`, desacopla la paleta por defecto de nombres de dominio, añade actualización programática de la paleta con `setPalette`, expone las acciones de navegación para controles externos y mantiene siempre visibles las ayudas de interacción dentro del viewport. Esta versión añade edición en caliente de entidades y relaciones, eventos compuestos de selección y los modos de relación `directed`, `bidirectional` y `broken`; las relaciones rotas se representan con tubo rojo y anillos oscilantes localmente.
|
package/demo/index.html
CHANGED
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
liquidcars-atlas { display: block; width: 100%; max-width: 1480px; margin: 0 auto; }
|
|
15
15
|
code { color: #85e5d3; }
|
|
16
16
|
</style>
|
|
17
|
-
<script type="module" src="../dist/liquidcars-atlas.js?v=0.1.
|
|
17
|
+
<script type="module" src="../dist/liquidcars-atlas.js?v=0.1.19"></script>
|
|
18
18
|
</head>
|
|
19
19
|
<body>
|
|
20
20
|
<header>
|
|
21
21
|
<h1>LiquidCars Atlas</h1>
|
|
22
|
-
<p>Prueba de distribución del componente <code><liquidcars-atlas></code> · v0.1.
|
|
22
|
+
<p>Prueba de distribución del componente <code><liquidcars-atlas></code> · v0.1.19</p>
|
|
23
23
|
</header>
|
|
24
24
|
<main>
|
|
25
25
|
<liquidcars-atlas id="atlas" height="720" relation-mode="selected" shell-labels="on"></liquidcars-atlas>
|
package/dist/liquidcars-atlas.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! LiquidCars Atlas 0.1.
|
|
1
|
+
/*! LiquidCars Atlas 0.1.19 | MIT */
|
|
2
2
|
|
|
3
3
|
// src/three.core.js
|
|
4
4
|
/**
|
|
@@ -30114,17 +30114,29 @@ var LiquidCarsAtlas = class extends HTMLElement {
|
|
|
30114
30114
|
const delta = end.clone().sub(start);
|
|
30115
30115
|
if (delta.lengthSq() < 0.01) continue;
|
|
30116
30116
|
const visualMode = relationVisualMode(relation);
|
|
30117
|
-
const makeTube = (from2, to2, opacity = 0.82) => {
|
|
30118
|
-
const tube = new Mesh(new TubeGeometry(new LineCurve3(from2, to2), 10,
|
|
30117
|
+
const makeTube = (from2, to2, opacity = 0.82, tubeColor = color, tubeRadius = 0.045) => {
|
|
30118
|
+
const tube = new Mesh(new TubeGeometry(new LineCurve3(from2, to2), 10, tubeRadius, 6, false), new MeshBasicMaterial({ color: tubeColor, transparent: true, opacity }));
|
|
30119
30119
|
tube.userData.relationIndex = index;
|
|
30120
30120
|
this.relationGroup.add(tube);
|
|
30121
30121
|
};
|
|
30122
30122
|
if (visualMode === "broken") {
|
|
30123
|
+
const brokenColor = new Color(0xe45b63);
|
|
30123
30124
|
const direction = delta.clone().normalize();
|
|
30124
30125
|
const midpoint = start.clone().lerp(end, 0.5);
|
|
30125
|
-
|
|
30126
|
-
|
|
30127
|
-
|
|
30126
|
+
// A broken communication remains a continuous red tube. Its rings
|
|
30127
|
+
// oscillate locally around the interruption instead of travelling
|
|
30128
|
+
// along the whole connection, conveying a failed/retrying signal.
|
|
30129
|
+
makeTube(start, end, 0.88, brokenColor, 0.055);
|
|
30130
|
+
const amplitude = Math.min(0.18, Math.max(0.07, delta.length() * 0.018));
|
|
30131
|
+
for (let ringIndex = 0; ringIndex < 3; ringIndex++) {
|
|
30132
|
+
const ring = new Mesh(new TorusGeometry(0.085, 0.024, 8, 20), new MeshBasicMaterial({ color: brokenColor, transparent: true, opacity: 1 }));
|
|
30133
|
+
ring.userData.phase = ringIndex / 3;
|
|
30134
|
+
ring.userData.oscillate = true;
|
|
30135
|
+
ring.userData.start = midpoint.clone().addScaledVector(direction, -amplitude);
|
|
30136
|
+
ring.userData.end = midpoint.clone().addScaledVector(direction, amplitude);
|
|
30137
|
+
ring.quaternion.setFromUnitVectors(new Vector3(0, 0, 1), direction);
|
|
30138
|
+
this.relationGroup.add(ring);
|
|
30139
|
+
}
|
|
30128
30140
|
continue;
|
|
30129
30141
|
}
|
|
30130
30142
|
makeTube(start, end);
|
|
@@ -30336,7 +30348,9 @@ var LiquidCarsAtlas = class extends HTMLElement {
|
|
|
30336
30348
|
if (!child.userData.start) continue;
|
|
30337
30349
|
const phase = child.userData.phase || 0;
|
|
30338
30350
|
const direction = child.userData.direction || 1;
|
|
30339
|
-
const factor =
|
|
30351
|
+
const factor = child.userData.oscillate
|
|
30352
|
+
? 0.5 + 0.5 * Math.sin(time * 0.004 + phase * Math.PI * 2)
|
|
30353
|
+
: ((time * 22e-5 * direction + phase) % 1 + 1) % 1;
|
|
30340
30354
|
child.position.lerpVectors(child.userData.start, child.userData.end, factor);
|
|
30341
30355
|
}
|
|
30342
30356
|
this.renderer.render(this.scene, this.camera);
|
package/index.html
CHANGED
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
liquidcars-atlas { display: block; width: 100%; max-width: 1480px; margin: 0 auto; }
|
|
15
15
|
code { color: #85e5d3; }
|
|
16
16
|
</style>
|
|
17
|
-
<script type="module" src="./dist/liquidcars-atlas.js?v=0.1.
|
|
17
|
+
<script type="module" src="./dist/liquidcars-atlas.js?v=0.1.19"></script>
|
|
18
18
|
</head>
|
|
19
19
|
<body>
|
|
20
20
|
<header>
|
|
21
21
|
<h1>LiquidCars Atlas</h1>
|
|
22
|
-
<p>Prueba de distribución del componente <code><liquidcars-atlas></code> · v0.1.
|
|
22
|
+
<p>Prueba de distribución del componente <code><liquidcars-atlas></code> · v0.1.19</p>
|
|
23
23
|
</header>
|
|
24
24
|
<main>
|
|
25
25
|
<liquidcars-atlas id="atlas" height="720" relation-mode="selected" shell-labels="on"></liquidcars-atlas>
|