@artidev/odontogram-core

Low-level odontogram runtime for custom integrations.

Use this package when you want direct control over the runtime instance, state import/export, and bundled SVG assets. If you use Vue and want the easiest setup, use @artidev/vue-odontogram instead.

Quick path

1. Install the package.
2. Create a root element that contains the runtime hooks your wrapper needs.
3. Create an instance, call init(), and listen to onChange.

npm install @artidev/odontogram-core

What this package includes

• Runtime instance API.
• Full-state import/export.
• Readonly toggling.
• Default tooth and icon SVG assets.
• Asset override support.

Important before you use it

This package is intentionally low-level.

• It is not a drop-in component.
• It expects your integration to provide the DOM structure the runtime binds to.
• The Vue package already ships that structure for you.

If you want the fastest path, use @artidev/vue-odontogram.

Exports

| Export | Description | |--------|-------------| | createOdontogramInstance | Creates a runtime instance bound to a root element | | defaultAssets | Bundled asset URLs for teeth, occlusal templates, and icons |

API

createOdontogramInstance(rootEl, options)

Creates one isolated runtime instance.

| Option | Type | Description | |--------|------|-------------| | onChange | (state) => void | Called with the full serialized state after a change | | readOnly | boolean | Starts the runtime in readonly mode | | assets | object | Overrides default SVG assets |

Instance methods

| Method | What it does | |--------|--------------| | init() | Builds the chart UI inside the root | | destroy() | Clears grid bindings and runtime state | | importState(data) | Replaces the entire chart state | | exportState() | Returns the current serialized chart state | | setReadOnly(value) | Enables or disables editing |

State behavior

• importState(data) is a full replacement, not a partial patch.
• Missing items in an imported state fall back to defaults.
• exportState() always returns the full chart state.

Assets

The package bundles default SVG assets.

You can read them from defaultAssets and override them in createOdontogramInstance() if you need your own visual set.

import { defaultAssets } from '@artidev/odontogram-core'

console.log(defaultAssets.icons.occlusal)
console.log(defaultAssets.teeth[11])

Example: create an instance

This is the runtime API shape.

import { createOdontogramInstance } from '@artidev/odontogram-core'

const root = document.getElementById('odontogram-root')

if (!root) {
  throw new Error('Missing #odontogram-root')
}

const instance = createOdontogramInstance(root, {
  readOnly: false,
  onChange(state) {
    console.log('Updated state', state)
  },
})

await instance.init()

Example: load saved state

instance.importState({
  11: { toothSelection: 'implant' },
  21: { toothSelection: 'tooth-base', crownMaterial: 'zircon' },
})

Example: export state

const state = instance.exportState()
localStorage.setItem('odontogram-state', JSON.stringify(state))

Example: toggle readonly mode

instance.setReadOnly(true)

Who should use this package?

• Teams building their own wrapper around the runtime.
• Teams that need asset overrides.
• Teams integrating outside Vue.

Who should not use this package directly?

• Apps that just need a working component quickly.
• Teams that do not want to maintain runtime markup hooks.

In those cases, use @artidev/vue-odontogram.

Repository

https://github.com/ArnoldOlanda/odontogram-packages

License

MIT