@fmsim/machine 2.0.0-beta.99 → 2.0.0

package/src/carrier.ts

@@ -4,7 +4,7 @@ import { getPopupData } from '@fmsim/api'
 import { BOUNDS, Component, ComponentNature, Properties, Shape, sceneComponent } from '@hatiolab/things-scene'
 import { ANIMATION_DEFAULT, AnimationPreset, AnimationConfig } from './features/animation-default.js'
 import { ParentObjectMixin } from './features/parent-object-mixin.js'
-import { LEGEND_CARRIER, Legend } from './features/mcs-status-default.js'
+import { Legend, resolveCarrierLegend } from './features/mcs-status-default.js'
 import { MCSStatusMixin } from './features/mcs-status-mixin.js'
 
 const NATURE: ComponentNature = {
@@ -56,6 +56,8 @@ export default class Carrier extends MCSStatusMixin(ParentObjectMixin(Shape)) {
 
   set path(path) {}
 
+  /** 마지막으로 적용한 (애니메이션 테마 | CARRIERSTATUS) 조합. 같은 조합 재적용을 막는다. */
+  private _appliedAnimationKey?: string
 
   added(parent: any) {
     super.added(parent)
@@ -74,6 +76,11 @@ export default class Carrier extends MCSStatusMixin(ParentObjectMixin(Shape)) {
 
     this.syncStateFromData()
 
+    /* 부모가 정해진 지금 다시 해석한다 — 생성 시(data 선할당) 판정에는 parent 가 없어
+     * 홀더의 carrierAnimationName 이 반영되지 않았다. reparent 로 홀더가 바뀐 경우도 여기서
+     * 새 홀더 테마로 갱신된다. (같은 조합이면 내부 가드로 no-op) */
+    this._applyStatusAnimation()
+
     // 3D 오브젝트 최초 생성 (동기적 — reparent()에서 _realObject 필요)
     if ((this.root as any)?.threed && !this._realObject) {
       ;(this.root as any).model_layer?._threeCapability?.addObject(this)
@@ -102,52 +109,60 @@ export default class Carrier extends MCSStatusMixin(ParentObjectMixin(Shape)) {
     this.setState('CARRIERTYPE', CARRIERTYPE)
     this.setState('CARRIERSTATUS', CARRIERSTATUS)
 
-    // TODO carrierstatus에 따라서 매핑되는 애니메이션 테마 수행
-    if (after.data?.CARRIERSTATUS !== before.data?.CARRIERSTATUS) {
-      const { CARRIERSTATUS: lastCarrierStatus } = before.data || {}
-      const lastAnimationConfig = lastCarrierStatus && this.getAnimationConfig(lastCarrierStatus)
-
-      if (lastAnimationConfig) {
-        let { animation, decorator, border, arrow } = lastAnimationConfig
-        if (animation) {
-          this.resetAnimation()
-          this.setState('animation', {
-            oncreate: null
-          })
-        }
-
-        if (decorator || border || arrow) {
-          this.trigger('deco-off')
-        }
-      }
-
-      const animationConfig = this.getAnimationConfig(this.getState('CARRIERSTATUS'))
+    /* 상태에 매핑된 애니메이션/데코 적용. 조건 판정은 _applyStatusAnimation 내부의
+     * (테마|상태) 키 비교로 하므로 여기서 status 변경 여부를 따지지 않는다 —
+     * 상태는 그대로여도 홀더가 바뀌어(=테마가 바뀌어) 재적용이 필요할 수 있다. */
+    this._applyStatusAnimation()
+  }
 
-      if (animationConfig) {
-        let { animation, decorator, border, arrow } = animationConfig
-        if (animation) {
-          this.resetAnimation()
-          this.setState('animation', {
-            oncreate: animation
-          })
-          this.started = true
-        }
+  /**
+   * 현재 (해석된 애니메이션 테마 | CARRIERSTATUS) 조합에 맞는 애니메이션/데코를 적용한다.
+   *
+   * 같은 조합이면 아무것도 하지 않는다 — data 는 매 update 마다 재할당되므로, 가드가 없으면
+   * 매번 애니메이션이 재시작되어 끊긴다.
+   *
+   * 호출 시점이 둘인 이유:
+   *   1) onchangeData  — 상태(또는 테마) 변화 반영
+   *   2) added()       — **부모가 생긴 직후**. CarrierManager 는 `carrier.data = item` 을
+   *      addComponent 보다 먼저 하므로, 생성 시 첫 판정에는 parent 가 없어 홀더의
+   *      carrierAnimationName 이 무시된다(루트 폴백만 보임). 부모가 붙은 뒤 한 번 더
+   *      해석해야 홀더 테마가 반영된다.
+   */
+  private _applyStatusAnimation(): void {
+    const status = this.getState('CARRIERSTATUS')
+    const key = `${this.resolvedCarrierAnimationName}|${status ?? ''}`
+    if (key === this._appliedAnimationKey) return
+    this._appliedAnimationKey = key
+
+    /* 이전 적용분 해제 — 이전 테마/상태를 되짚지 않고 끈다(끄는 동작은 멱등).
+     * 테마가 바뀐 경우 이전 config 로는 무엇이 켜져 있었는지 정확히 알 수 없다. */
+    this.resetAnimation()
+    this.setState('animation', { oncreate: null })
+    this.trigger('deco-off')
+
+    const animationConfig = this.getAnimationConfig(status)
+    if (!animationConfig) return
+
+    const { animation, decorator, border, arrow } = animationConfig
+
+    if (animation) {
+      this.setState('animation', { oncreate: animation })
+      this.started = true
+    }
 
-        if (decorator) {
-          this.trigger('deco-icon-off')
-          this.trigger('deco-icon', decorator)
-        }
+    if (decorator) {
+      this.trigger('deco-icon-off')
+      this.trigger('deco-icon', decorator)
+    }
 
-        if (border) {
-          this.trigger('deco-border-off')
-          this.trigger('deco-border', border)
-        }
+    if (border) {
+      this.trigger('deco-border-off')
+      this.trigger('deco-border', border)
+    }
 
-        if (arrow) {
-          this.trigger('deco-arrow-off')
-          this.trigger('deco-arrow', arrow)
-        }
-      }
+    if (arrow) {
+      this.trigger('deco-arrow-off')
+      this.trigger('deco-arrow', arrow)
     }
   }
 
@@ -156,13 +171,8 @@ export default class Carrier extends MCSStatusMixin(ParentObjectMixin(Shape)) {
   }
 
   get legend(): Legend {
-    const { carrierLegendName } = this.parent?.state || {}
-
-    if (carrierLegendName) {
-      return (this.root as any)?.style[carrierLegendName]
-    }
-
-    return (this.root as any)?.carrierLegendTheme || LEGEND_CARRIER
+    // carrier·스토커 게이지(2D/3D) 공유 단일 소스.
+    return resolveCarrierLegend(this)
   }
 
   getAnimationConfig(carrierStatus): AnimationConfig | null {
@@ -170,9 +180,20 @@ export default class Carrier extends MCSStatusMixin(ParentObjectMixin(Shape)) {
     return (config as AnimationConfig) || null
   }
 
+  /**
+   * 적용할 애니메이션 테마 이름 — 소유 홀더(부모) 설정이 우선, 없으면 보드(rootModel) 폴백.
+   *
+   * 부모가 아직 없는 시점(생성 직후 data 선할당)에는 홀더 설정을 알 수 없어 루트 폴백만
+   * 보인다. 그래서 added() 에서 한 번 더 해석한다 — _applyStatusAnimation 참조.
+   */
+  get resolvedCarrierAnimationName(): string {
+    return (
+      this.parent?.state.carrierAnimationName || (this.root as any)?.rootModel?.state?.carrierAnimationName || ''
+    )
+  }
+
   get animationPreset(): AnimationPreset {
-    const carrierAnimationName = this.parent?.state.carrierAnimationName || 
-                                this.root?.rootModel.state.carrierAnimationName || ''
+    const carrierAnimationName = this.resolvedCarrierAnimationName
 
     if (carrierAnimationName) {
       // 캐시에서 먼저 확인

package/src/crane.ts

@@ -165,10 +165,12 @@ export default class Crane extends MCSVehicle {
    * cranePosition (current + limit) → state.left/top + forkZ.
    *
    * 부모 오브젝트 (보통은 Stocker 이지만 다른 컨테이너일 수도) 의 width/height
-   * 만 사용해 좌표 매핑 — 타입 무관 일반화. 가상 rail 은 host 의 긴쪽:
-   *   - current.x → host 의 긴쪽 (자동 판별: max(width, height))
-   *   - current.y → 짧은쪽
-   *   - current.z → forkZ (state 에 0~100 으로 저장, 3D 측에서 mast 비율로 매핑)
+   * 만 사용해 좌표 매핑 — 타입 무관 일반화. 축 배정과 원점은 host 의 내부 좌표계 설정을
+   * 따른다 (coordAxisX / coordInvertX / coordInvertY, 미설정 시 아래 폴백):
+   *   - current.x → X축 (기본: host 의 긴쪽, 자동 판별 max(width, height))
+   *   - current.y → Y축 (기본: 짧은쪽)
+   *   - current.z → forkZ (state 에 0~100 으로 저장, 3D 측에서 mast 비율로 매핑).
+   *     Z 는 바닥 기준이 물리적으로 고정이라 반전 설정을 두지 않는다.
    *
    * 각 축 비율 = (current - limit.min) / (limit.max - limit.min) ∈ [0,1].
    *
@@ -196,7 +198,14 @@ export default class Crane extends MCSVehicle {
     const ry = axisRatio(cp.current?.y, cp.limit?.y)
     const rz = axisRatio(cp.current?.z, cp.limit?.z)
 
-    const { left, top } = mapCraneLocalPosition(hw, hh, cw, ch, rx, ry)
+    // 축 배정/원점은 host(보통 STOCKER) 의 내부 좌표계 설정을 따른다. 타입을 묻지 않고
+    // state 만 읽어 어떤 컨테이너가 host 여도 동일하게 동작한다 — 미설정이면 종전
+    // 폴백(긴쪽=X, 원점 left/top).
+    const { left, top } = mapCraneLocalPosition(hw, hh, cw, ch, rx, ry, {
+      axisX: host.state?.coordAxisX,
+      invertX: !!host.state?.coordInvertX,
+      invertY: !!host.state?.coordInvertY
+    })
 
     return {
       left,

package/src/factories/agv-3d.ts

@@ -15,7 +15,7 @@
 
 import * as THREE from 'three'
 import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js'
-import { RealObjectGroup, registerRealObjectFactory, disposeObject3D } from '@hatiolab/things-scene'
+import { RealObjectGroup, registerRealObjectFactory, disposeObject3D, MaterialBank } from '@hatiolab/things-scene'
 import type { Component } from '@hatiolab/things-scene'
 import { TRANSPORT_SURFACE_HEIGHT } from './machine-3d.js'
 
@@ -76,11 +76,8 @@ export class AGV3D extends RealObjectGroup {
     const bumperPad = Math.min(w, h) * 0.03
     const bumperCornerR = Math.min(w + bumperPad * 2, h + bumperPad * 2, bumperH) * 0.2
     const bumperGeo = new RoundedBoxGeometry(w + bumperPad * 2, bumperH, h + bumperPad * 2, 4, bumperCornerR)
-    const bumperMat = new THREE.MeshStandardMaterial({
-      color: BUMPER_COLOR,
-      roughness: 0.8,
-      metalness: 0.1,
-    })
+    // MaterialBank 공유 — dedup + faint 안전(코어 변형 스왑, disposeObject3D 가 __bankOwned 스킵).
+    const bumperMat = MaterialBank.material('agv|bumper', { roughness: 0.8, metalness: 0.1 }, BUMPER_COLOR)
     const bumper = new THREE.Mesh(bumperGeo, bumperMat)
     bumper.position.y = bumperH / 2
     bumper.castShadow = true
@@ -89,11 +86,7 @@ export class AGV3D extends RealObjectGroup {
     // ── 본체 (둥근 모서리, statusColor 적용) ──
     const bodyColor = this.resolveColor()
     const bodyGeo = new RoundedBoxGeometry(w, bodyH, h, 4, cornerR)
-    const bodyMat = new THREE.MeshStandardMaterial({
-      color: bodyColor,
-      roughness: 0.3,
-      metalness: 0.5,
-    })
+    const bodyMat = MaterialBank.material('agv|body', { roughness: 0.3, metalness: 0.5 }, bodyColor)
     const body = new THREE.Mesh(bodyGeo, bodyMat)
     body.position.y = bumperH + bodyH / 2
     body.castShadow = true
@@ -103,11 +96,7 @@ export class AGV3D extends RealObjectGroup {
     const platInset = Math.min(w, h) * 0.04
     const platCornerR = Math.min(w - platInset * 2, h - platInset * 2, platH) * 0.15
     const platGeo = new RoundedBoxGeometry(w - platInset * 2, platH, h - platInset * 2, 4, platCornerR)
-    const platMat = new THREE.MeshStandardMaterial({
-      color: PLATFORM_COLOR,
-      roughness: 0.5,
-      metalness: 0.15,
-    })
+    const platMat = MaterialBank.material('agv|platform', { roughness: 0.5, metalness: 0.15 }, PLATFORM_COLOR)
     const plat = new THREE.Mesh(platGeo, platMat)
     plat.position.y = bumperH + bodyH + gapH + platH / 2
     plat.castShadow = true
@@ -116,6 +105,9 @@ export class AGV3D extends RealObjectGroup {
     this._ownMeshes = [bumper, body, plat]
     // ownGroup이 center-origin ↔ bottom-up 좌표계 변환을 자동 처리
     for (const m of this._ownMeshes) this.components3D.add(m)
+
+    // mesh 는 super.build() 이후 생성 → 코어 faint 를 명시 적용(편집 흐림이 mesh 에 닿게).
+    this.updateAlpha()
   }
 
   updateDimension() {}
@@ -134,16 +126,8 @@ export class AGV3D extends RealObjectGroup {
     this.updateHidden()
   }
 
-  updateAlpha() {
-    const { alpha = 1 } = this.component.state
-    for (const m of this._ownMeshes) {
-      const materials = Array.isArray(m.material) ? m.material : [m.material]
-      for (const mat of materials) {
-        ;(mat as THREE.MeshStandardMaterial).opacity = alpha
-        ;(mat as THREE.MeshStandardMaterial).transparent = alpha < 1
-      }
-    }
-  }
+  // updateAlpha override 제거 — 코어 RealObject.updateAlpha(=applyMaterialOpacity)로 수렴.
+  // canonical(bank base opacity 1) × state.alpha × faint. view 모드 불변, 편집 모드 faint 추가.
 
   onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
     if ('width' in after || 'height' in after || 'depth' in after ||

package/src/factories/conveyor-3d.ts

@@ -13,7 +13,7 @@
 
 import * as THREE from 'three'
 import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
-import { RealObjectGroup, registerRealObjectFactory } from '@hatiolab/things-scene'
+import { RealObjectGroup, registerRealObjectFactory, MaterialBank } from '@hatiolab/things-scene'
 import type { Component } from '@hatiolab/things-scene'
 import { TRANSPORT_SURFACE_HEIGHT } from './machine-3d.js'
 import { Z_FMSIM } from './z-priority'
@@ -85,11 +85,8 @@ export class Conveyor3D extends RealObjectGroup {
     const railW = Math.max(beltWidth * 0.06, 2)
     const legThickness = Math.max(railW * 0.8, 2)
 
-    const frameMaterial = new THREE.MeshStandardMaterial({
-      color: FRAME_COLOR,
-      metalness: 0.85,
-      roughness: 0.35,
-    })
+    // MaterialBank 공유(dedup). 자체 update() 없이 base 생명주기(guarded disposeObject3D) 상속 → 안전.
+    const frameMaterial = MaterialBank.material('conveyor|frame', { metalness: 0.85, roughness: 0.35 }, FRAME_COLOR)
 
     // --- Frame: side rails + legs + cross-bracing ---
     // Y 좌표: y=0(바닥) ~ y=depth(상단). 레일 상단이 depth에 위치.
@@ -179,6 +176,9 @@ export class Conveyor3D extends RealObjectGroup {
     } else {
       this.buildRollers(width, height, depth, frameH, railW, rollWidth, isVertical)
     }
+
+    // mesh 는 super.build() 이후 생성 → 코어 faint 를 명시 적용(편집 흐림이 mesh 에 닿게).
+    this.updateAlpha()
   }
 
   private buildRollers(
@@ -231,7 +231,7 @@ export class Conveyor3D extends RealObjectGroup {
     if (rollerGeometries.length > 0) {
       const rollerMesh = new THREE.Mesh(
         BufferGeometryUtils.mergeGeometries(rollerGeometries),
-        new THREE.MeshStandardMaterial({ color, metalness: 0.9, roughness: 0.2 })
+        MaterialBank.material('conveyor|roller', { metalness: 0.9, roughness: 0.2 }, color)
       )
       rollerMesh.castShadow = true
       this.components3D.add(rollerMesh)
@@ -268,18 +268,14 @@ export class Conveyor3D extends RealObjectGroup {
 
     const drumMesh = new THREE.Mesh(
       BufferGeometryUtils.mergeGeometries(drumGeometries),
-      new THREE.MeshStandardMaterial({ color: ROLLER_COLOR, metalness: 0.9, roughness: 0.2 })
+      MaterialBank.material('conveyor|drum', { metalness: 0.9, roughness: 0.2 }, ROLLER_COLOR)
     )
     drumMesh.castShadow = true
     this.components3D.add(drumMesh)
 
     // Belt surface
     const beltThickness = drumRadius * 0.12
-    const beltMaterial = new THREE.MeshStandardMaterial({
-      color: color,
-      metalness: 0.0,
-      roughness: 0.9,
-    })
+    const beltMaterial = MaterialBank.material('conveyor|belt', { metalness: 0.0, roughness: 0.9 }, color)
 
     // Flat belt top surface spanning between drums
     const flatLen = drum2 - drum1
@@ -347,11 +343,7 @@ export class Conveyor3D extends RealObjectGroup {
     // 두 레일 간격: 내부 폭의 60%
     const railSpacing = innerWidth * 0.6
 
-    const railMaterial = new THREE.MeshStandardMaterial({
-      color,
-      metalness: 0.7,
-      roughness: 0.3,
-    })
+    const railMaterial = MaterialBank.material('conveyor|rail', { metalness: 0.7, roughness: 0.3 }, color)
 
     const railGeometries: THREE.BufferGeometry[] = []
 
@@ -376,7 +368,8 @@ export class Conveyor3D extends RealObjectGroup {
   }
 
   updateDimension() {}
-  updateAlpha() {}
+  // updateAlpha override 제거 — 코어 RealObject.updateAlpha(=applyMaterialOpacity)로 수렴(faint).
+  // view 모드는 factor=1 → build-시 opacity 그대로(불변), 편집 모드만 faint 추가.
 
   onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
     if (

package/src/factories/crane-3d.ts

@@ -13,7 +13,7 @@
 
 import * as THREE from 'three'
 import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
-import { RealObjectGroup, registerRealObjectFactory } from '@hatiolab/things-scene'
+import { RealObjectGroup, registerRealObjectFactory, MaterialBank } from '@hatiolab/things-scene'
 import type { Component } from '@hatiolab/things-scene'
 import { TRANSPORT_SURFACE_HEIGHT } from './machine-3d.js'
 
@@ -84,11 +84,8 @@ export class Crane3D extends RealObjectGroup {
 
     const pillarThick = Math.min(w, h) * 0.12
 
-    const clampMat = new THREE.MeshStandardMaterial({
-      color: CLAMP_COLOR,
-      roughness: 0.5,
-      metalness: 0.5,
-    })
+    // MaterialBank 공유(dedup). 자체 update() 없이 base 생명주기(guarded disposeObject3D) 상속 → 안전.
+    const clampMat = MaterialBank.material('crane|clamp', { roughness: 0.5, metalness: 0.5 }, CLAMP_COLOR)
 
     // ── 1. 하단 클램프 (바닥 레일에 물리는 바퀴부) ──
     const clampW = w * 0.7
@@ -102,11 +99,7 @@ export class Crane3D extends RealObjectGroup {
     // ── 2. 수직 마스트 (좌우 기둥 + 상·하 가로 연결 바) ──
     const mastBaseY = clampH
     const bodyColor = this.resolveColor()
-    const mastMat = new THREE.MeshStandardMaterial({
-      color: bodyColor,
-      roughness: 0.3,
-      metalness: 0.6,
-    })
+    const mastMat = MaterialBank.material('crane|mast', { roughness: 0.3, metalness: 0.6 }, bodyColor)
 
     const mastGeometries: THREE.BufferGeometry[] = []
 
@@ -137,11 +130,7 @@ export class Crane3D extends RealObjectGroup {
     // 포크 geometry 는 *_mastBaseY 기준 local 0 에 둠* — 즉 group.position.y = 0
     // 일 때 mast 바닥 자리에. forkZ 0~100 에 따라 group.position.y 만 변경하면
     // mast 따라 위/아래 이동. mesh 재구축 불필요.
-    const forkMat = new THREE.MeshStandardMaterial({
-      color: FORK_COLOR,
-      roughness: 0.4,
-      metalness: 0.5,
-    })
+    const forkMat = MaterialBank.material('crane|fork', { roughness: 0.4, metalness: 0.5 }, FORK_COLOR)
 
     const forkGeometries: THREE.BufferGeometry[] = []
 
@@ -188,10 +177,13 @@ export class Crane3D extends RealObjectGroup {
     topClamp.position.y = mastBaseY + mastH + clampH / 2
     topClamp.castShadow = true
     inner.add(topClamp)
+
+    // mesh 는 super.build() 이후 생성 → 코어 faint 를 명시 적용(편집 흐림이 mesh 에 닿게).
+    this.updateAlpha()
   }
 
   updateDimension() {}
-  updateAlpha() {}
+  // updateAlpha override 제거 — 코어 RealObject.updateAlpha(=applyMaterialOpacity)로 수렴(faint).
 
   /** build() 직전 호출. forkGroup 참조를 깨끗이 비워둔다 — 새 build 가 다시 set. */
   clear() {

package/src/factories/crane-rail-3d.ts

@@ -12,7 +12,7 @@
 
 import * as THREE from 'three'
 import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
-import { RealObjectGroup, registerRealObjectFactory } from '@hatiolab/things-scene'
+import { RealObjectGroup, registerRealObjectFactory, MaterialBank } from '@hatiolab/things-scene'
 import type { Component } from '@hatiolab/things-scene'
 import { TRANSPORT_SURFACE_HEIGHT } from './machine-3d.js'
 import { Z_FMSIM } from './z-priority'
@@ -46,17 +46,10 @@ export class CraneRail3D extends RealObjectGroup {
     const railW = Math.max(h * 0.06, 2) // 레일 폭
     const supportThick = Math.max(Math.min(w, h) * 0.05, 2)
 
-    const railMat = new THREE.MeshStandardMaterial({
-      color: RAIL_COLOR,
-      roughness: 0.3,
-      metalness: 0.7,
-    })
-
-    const supportMat = new THREE.MeshStandardMaterial({
-      color: SUPPORT_COLOR,
-      roughness: 0.5,
-      metalness: 0.5,
-    })
+    // MaterialBank 공유(정적 색 dedup). 자체 update() 없이 base 생명주기(guarded disposeObject3D)
+    // 상속 → 공유 base dispose 안전.
+    const railMat = MaterialBank.material('crane-rail|rail', { roughness: 0.3, metalness: 0.7 }, RAIL_COLOR)
+    const supportMat = MaterialBank.material('crane-rail|support', { roughness: 0.5, metalness: 0.5 }, SUPPORT_COLOR)
 
     // ── 바닥 레일 (2개 평행 트랙) ──
     const bottomGeometries: THREE.BufferGeometry[] = []
@@ -98,10 +91,13 @@ export class CraneRail3D extends RealObjectGroup {
     const supportMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(supportGeometries), supportMat)
     supportMesh.castShadow = true
     inner.add(supportMesh)
+
+    // mesh 는 super.build() 이후 생성 → 코어 faint 를 명시 적용(편집 흐림이 mesh 에 닿게).
+    this.updateAlpha()
   }
 
   updateDimension() {}
-  updateAlpha() {}
+  // updateAlpha override 제거 — 코어 RealObject.updateAlpha(=applyMaterialOpacity)로 수렴(faint).
 
   onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
     if ('width' in after || 'height' in after || 'depth' in after || 'fillStyle' in after || 'strokeStyle' in after) {