@ibodr/editor 0.1.10 → 0.1.11

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.
Files changed (5) hide show
  1. package/dist/index.d.ts +9 -3
  2. package/dist/index.mjs +217 -19
  3. package/dist/index.mjs.map +1 -1
  4. package/editor.css +26 -99
  5. package/package.json +7 -7
package/editor.css CHANGED
@@ -161,7 +161,6 @@
161
161
  --dr-color-grid: hsl(0, 0%, 43%);
162
162
  --dr-color-board-bg-line: hsl(210, 50%, 55%, 35%);
163
163
  --dr-color-board-bg-line-secondary: hsl(210, 50%, 55%, 18%);
164
- --dr-color-board-bg-chalkboard: hsl(160, 30%, 16%);
165
164
  /* UI */
166
165
  --dr-color-low: hsl(204, 16%, 94%);
167
166
  --dr-color-low-border: hsl(204, 16%, 92%);
@@ -218,7 +217,6 @@
218
217
  --dr-color-grid: hsl(0, 0%, 40%);
219
218
  --dr-color-board-bg-line: hsl(210, 70%, 70%, 25%);
220
219
  --dr-color-board-bg-line-secondary: hsl(210, 70%, 70%, 13%);
221
- --dr-color-board-bg-chalkboard: hsl(160, 25%, 10%);
222
220
  /* UI */
223
221
  --dr-color-low: hsl(260, 4.5%, 10.5%);
224
222
  --dr-color-low-border: hsl(207, 10%, 10%);
@@ -348,103 +346,32 @@ input,
348
346
  height: 100%;
349
347
  }
350
348
 
351
- /* Board background patterns (`DrInstance.backgroundType`), independent from the
352
- dot grid rendered by `DefaultGrid` (used for snapping / `isGridMode`). */
353
-
354
- .dr-background__dots {
355
- background-image: radial-gradient(circle, var(--dr-color-board-bg-line) 1px, transparent 1px);
356
- background-size: 24px 24px;
357
- }
358
-
359
- .dr-background__grid {
360
- background-image:
361
- linear-gradient(to right, var(--dr-color-board-bg-line) 1px, transparent 1px),
362
- linear-gradient(to bottom, var(--dr-color-board-bg-line) 1px, transparent 1px);
363
- background-size: 48px 48px;
364
- }
365
-
366
- .dr-background__hex-grid {
367
- background-image:
368
- repeating-linear-gradient(
369
- 60deg,
370
- var(--dr-color-board-bg-line) 0,
371
- var(--dr-color-board-bg-line) 1px,
372
- transparent 1px,
373
- transparent 26px
374
- ),
375
- repeating-linear-gradient(
376
- -60deg,
377
- var(--dr-color-board-bg-line) 0,
378
- var(--dr-color-board-bg-line) 1px,
379
- transparent 1px,
380
- transparent 26px
381
- ),
382
- repeating-linear-gradient(
383
- 0deg,
384
- var(--dr-color-board-bg-line) 0,
385
- var(--dr-color-board-bg-line) 1px,
386
- transparent 1px,
387
- transparent 26px
388
- );
389
- }
390
-
391
- .dr-background__lined {
392
- background-image: repeating-linear-gradient(
393
- to bottom,
394
- transparent 0,
395
- transparent 31px,
396
- var(--dr-color-board-bg-line) 31px,
397
- var(--dr-color-board-bg-line) 32px
398
- );
399
- }
400
-
401
- .dr-background__double-line {
402
- background-image: repeating-linear-gradient(
403
- to bottom,
404
- transparent 0,
405
- transparent 24px,
406
- var(--dr-color-board-bg-line-secondary) 24px,
407
- var(--dr-color-board-bg-line-secondary) 25px,
408
- transparent 25px,
409
- transparent 39px,
410
- var(--dr-color-board-bg-line) 39px,
411
- var(--dr-color-board-bg-line) 40px
412
- );
413
- }
414
-
415
- .dr-background__double-line-slash {
416
- background-image:
417
- repeating-linear-gradient(
418
- 65deg,
419
- var(--dr-color-board-bg-line-secondary) 0,
420
- var(--dr-color-board-bg-line-secondary) 1px,
421
- transparent 1px,
422
- transparent 22px
423
- ),
424
- repeating-linear-gradient(
425
- to bottom,
426
- transparent 0,
427
- transparent 24px,
428
- var(--dr-color-board-bg-line-secondary) 24px,
429
- var(--dr-color-board-bg-line-secondary) 25px,
430
- transparent 25px,
431
- transparent 39px,
432
- var(--dr-color-board-bg-line) 39px,
433
- var(--dr-color-board-bg-line) 40px
434
- );
435
- }
436
-
437
- .dr-background__checkered {
438
- background-image:
439
- linear-gradient(to right, var(--dr-color-board-bg-line-secondary) 1px, transparent 1px),
440
- linear-gradient(to bottom, var(--dr-color-board-bg-line-secondary) 1px, transparent 1px);
441
- background-size: 20px 20px;
442
- }
443
-
444
- .dr-background__chalkboard {
445
- background-color: var(--dr-color-board-bg-chalkboard);
446
- background-image: radial-gradient(hsl(0, 0%, 100%, 4%) 1px, transparent 1px);
447
- background-size: 3px 3px;
349
+ /* Board background patterns (`DrInstance.backgroundType`), rendered as an SVG overlay
350
+ on top of `.dr-background`. Unlike the old CSS `background-image` version, this is
351
+ generated dynamically (see `DefaultBackground`) so the pattern pans and scales with
352
+ the camera exactly like the dot grid rendered by `DefaultGrid`. */
353
+ .dr-background-pattern {
354
+ position: absolute;
355
+ inset: 0px;
356
+ width: 100%;
357
+ height: 100%;
358
+ pointer-events: none;
359
+ }
360
+
361
+ .dr-bg-line {
362
+ stroke: var(--dr-color-board-bg-line);
363
+ stroke-width: 1px;
364
+ fill: none;
365
+ }
366
+
367
+ .dr-bg-line-secondary {
368
+ stroke: var(--dr-color-board-bg-line-secondary);
369
+ stroke-width: 1px;
370
+ fill: none;
371
+ }
372
+
373
+ .dr-bg-dot {
374
+ fill: var(--dr-color-board-bg-line);
448
375
  }
449
376
 
450
377
  /* --------------------- Grid Layer --------------------- */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ibodr/editor",
3
- "version": "0.1.10",
3
+ "version": "0.1.11",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "publishConfig": {
@@ -29,12 +29,12 @@
29
29
  "eventemitter3": "^4.0.7",
30
30
  "idb": "^7.1.1",
31
31
  "rbush": "^3.0.1",
32
- "@ibodr/schema": "0.1.10",
33
- "@ibodr/store": "0.1.10",
34
- "@ibodr/state": "0.1.10",
35
- "@ibodr/state-react": "0.1.10",
36
- "@ibodr/validate": "0.1.10",
37
- "@ibodr/utils": "0.1.10"
32
+ "@ibodr/schema": "0.1.11",
33
+ "@ibodr/store": "0.1.11",
34
+ "@ibodr/utils": "0.1.11",
35
+ "@ibodr/state-react": "0.1.11",
36
+ "@ibodr/state": "0.1.11",
37
+ "@ibodr/validate": "0.1.11"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "react": "^18.2.0 || ^19.2.1",