README
- ::defaultEmbedOptions::default
- ::from_jsEmbedOptions::from_js
T
ImportResult
V
add_keyboard_listener
V
add_keydown_listener
V
add_keyup_listener
V
add_sample_shapes
V
app_main
V
clear_children_ffi
V
copy_svg_as_image
V
copy_text_to_clipboard
V
create_arrow_defs
V
create_arrow_defs_node
V
create_doc_shadow_filter
V
create_doc_shadow_filter_node
V
create_embedded_app
V
create_js_editor
V
create_textarea_ffi
V
debug_log
V
download_file
V
element_to_moonlight_svg
V
element_to_svg_string
V
elements_to_moonlight_svg
V
elements_to_svg
V
get_attribute
V
get_child_at_ffi
V
get_closest_data_id_ffi
V
get_connected_points
V
get_current_time
V
get_event_target_value
V
get_svg_children
V
get_tag_name
V
get_text_content
V
get_url_search_ffi
V
hide_popover
V
import_svg_elements
V
import_svg_validated
V
insert_before_ffi
V
is_composing_ffi
V
is_input_focused_ffi
V
load_from_indexeddb
V
observe_resize_ffi
V
observe_window_resize_ffi
V
open_file_dialog
V
parse_double
V
parse_svg_string
V
read_clipboard_text
V
remove_child_safe_ffi
V
remove_element_ffi
V
render_all_anchor_points
V
render_all_anchors_vnode
V
render_box_select_vnode
V
render_canvas_background
V
render_canvas_background_vnode
V
render_connected_anchor_highlights
V
render_connected_point
V
render_connection_highlight
V
render_connection_highlight_node
V
render_connection_highlight_vnode
V
render_context_menu
V
render_delete_button
V
render_editor_modal
V
render_element
V
render_element_anchors
V
render_element_anchors_nodes
V
render_element_node
V
render_element_vnode
V
render_floating_panel
V
render_grid
V
render_grid_nodes
V
render_grid_vnode
V
render_inline_panel
V
render_layer_operations
V
render_resize_handles
V
render_resize_handles_nodes
V
render_selection_box
V
render_selection_box_node
V
render_selection_overlay
V
render_sidebar
V
render_style_editor
V
render_svg_container
V
render_svg_container_with_viewport
V
render_text_input
V
save_to_indexeddb
V
schedule_focus_with_value_ffi
V
schedule_textarea_focus_ffi
V
set_multiline_text_ffi
V
show_popover_at_button
V
svg_to_dom_node
V
update_svg_background_ffi
V
update_svg_css_vars_ffi
V
update_viewbox_ffi

moonlight

Lightweight SVG editor by mizchi/luna, like Excalidraw

luna

Download zip

Author

mizchi

Version

0.1.0

License

MIT

Repository

github.com/mizchi/moonlight

Last updated

9 months ago

Downloads

#Moonlight

A lightweight SVG editor built with MoonBit and the Luna reactive UI library. Inspired by Excalidraw, Moonlight provides a simple yet powerful interface for creating and editing vector graphics.

#Demo

Live Demo: https://moonlight.mizchi.workers.dev

Try the editor directly in your browser. No installation required.

#Features

SVG-native: Works directly with SVG elements (rect, circle, ellipse, line, text)
Multiple modes: Full editor, embeddable widget, and Web Component
Reactive UI: Built on Luna's signal-based reactivity
Undo/Redo: Full command history support
Grid snapping: Optional snap-to-grid for precise alignment
Connected lines: Lines can connect to element anchor points and follow when moved
Dark/Light themes: Toggle between dark and light modes
Import/Export: Save and load SVG files

#Getting Started

#Prerequisites

MoonBit toolchain
Node.js 18+
pnpm

#Installation

git clone <repository-url>
cd moonlight
pnpm install

#Development

# Start development server
pnpm dev

# Type checking
moon check

# Format code
moon fmt

# Build for production
pnpm build

#Access the Editor

Full Editor: http://localhost:5173/
Embed Mode: http://localhost:5173/embed.html
Web Component: http://localhost:5173/webcomponent.html

#User Guide

#Tools

Tool	Shortcut	Description
Select	V or 1	Select and move elements
Rectangle	R or 2	Draw rectangles
Circle	C or 3	Draw circles/ellipses
Line	L or 4	Draw lines and arrows
Text	T or 5	Add text elements

#Keyboard Shortcuts

#General

Shortcut	Action
Ctrl+Z / Cmd+Z	Undo
Ctrl+Shift+Z / Cmd+Shift+Z	Redo
Ctrl+Y / Cmd+Y	Redo (alternative)
Delete / Backspace	Delete selected element
Escape	Deselect / Cancel operation

#Navigation

Shortcut	Action
Arrow Keys	Move selected element (5px)
Shift + Arrow Keys	Move selected element (1px, precise)
Ctrl + Arrow Keys	Move selected element (10px, fast)

#Element Operations

Shortcut	Action
Ctrl+D / Cmd+D	Duplicate selected element
[	Send backward
]	Bring forward
Ctrl+[ / Cmd+[	Send to back
Ctrl+] / Cmd+]	Bring to front

#View

Shortcut	Action
G	Toggle grid visibility
Ctrl+G / Cmd+G	Toggle grid snapping

#Mouse Operations

Click: Select element
Click + Drag: Move element or draw new shape
Click on canvas: Deselect all
Right-click: Context menu (delete, duplicate, layer ordering)

#Working with Lines

Lines can be connected to other elements:

Select the Line tool (L)
Click near an element's anchor point (edges or center)
Drag to another element's anchor point
The line will automatically follow when connected elements are moved

#Detail Panel

The right sidebar shows properties of the selected element:

Position: X/Y coordinates (editable)
Size: Width/Height or radius (editable)
Style: Fill color, stroke color, stroke width
Line markers: Add arrows to line endpoints

#Themes

Toggle between light and dark themes using the theme button in the toolbar.

#Usage Modes

#1. Full Editor Mode

The standalone editor with all features enabled.

<script type="module" src="./main.ts"></script>

#2. Embed Mode

Embed the editor in your application using JavaScript:

<script type="module" src="./embed.ts"></script>
<div id="editor-container"></div>
<script>
  const editor = MoonlightEditor.create(
    document.getElementById('editor-container'),
    {
      width: 800,
      height: 600,
      theme: 'light',  // or 'dark'
      readonly: false
    }
  );

  // API
  const svg = editor.exportSvg();
  editor.importSvg(svgString);
  editor.clear();
  editor.hasFocus();
</script>

#3. Web Component Mode

Use as a custom HTML element:

<script type="module" src="./webcomponent.ts"></script>

<moonlight-editor
  width="800"
  height="600"
  theme="light">
</moonlight-editor>

<script>
  const editor = document.querySelector('moonlight-editor');

  // API (same as embed mode)
  const svg = editor.exportSvg();
  editor.importSvg(svgString);
  editor.clear();
  editor.hasFocus();
</script>

#Attributes

Attribute	Type	Default	Description
width	number	400	Canvas width in pixels
height	number	300	Canvas height in pixels
theme	string	"light"	Theme: "light" or "dark"
readonly	boolean	false	Disable editing

#4. CDN Distribution (Copy & Paste)

Embed the editor in any HTML page with just 2 lines:

#Minimal Example

<moonlight-editor width="800" height="600"></moonlight-editor>
<script src="https://moonlight.mizchi.workers.dev/moonlight-editor.component.js" async></script>

#With Initial SVG (using template)

<moonlight-editor width="800" height="500">
  <template>
    <svg viewBox="0 0 800 500">
      <rect x="100" y="100" width="120" height="80" fill="#4CAF50" stroke="#2E7D32" stroke-width="2"/>
      <circle cx="400" cy="200" r="50" fill="#2196F3" stroke="#1565C0" stroke-width="2"/>
      <text x="300" y="350" font-size="24" fill="#333">Hello Moonlight!</text>
    </svg>
  </template>
</moonlight-editor>
<script src="https://moonlight.mizchi.workers.dev/moonlight-editor.component.js" async></script>

#With API Usage

<button onclick="alert(editor.exportSvg())">Export SVG</button>
<button onclick="editor.clear()">Clear</button>

<moonlight-editor id="editor" width="800" height="600" theme="dark"></moonlight-editor>

<script src="https://moonlight.mizchi.workers.dev/moonlight-editor.component.js" async></script>
<script>
  const editor = document.getElementById('editor');
  // editor.exportSvg()    - Get SVG string
  // editor.importSvg(svg) - Load SVG
  // editor.clear()        - Clear canvas
  // editor.hasFocus()     - Check focus state
</script>

#Attributes

Attribute	Default	Description
width	400	Canvas width (px)
height	300	Canvas height (px)
theme	"light"	"light" or "dark"
readonly	-	Add to disable editing

#Self-hosting with Cloudflare Workers

pnpm build:all   # Build component
pnpm deploy      # Deploy to Workers

The worker serves files with CORS headers, enabling cross-origin usage.

#API Reference

#Editor Handle

Both embed and web component modes return an editor handle with these methods:

interface EditorHandle {
  // Export current canvas as SVG string
  exportSvg(): string;

  // Import SVG string to canvas
  importSvg(svg: string): void;

  // Clear all elements
  clear(): void;

  // Check if editor has focus
  hasFocus(): boolean;

  // Register change callback
  onChange(callback: () => void): void;
}

#Architecture

src/
├── main.mbt          # Full editor entry point
├── ui.mbt            # UI components (sidebar, toolbar)
├── render.mbt        # SVG rendering
├── core/
│   └── scene.mbt     # Editor state management
├── model/
│   ├── types.mbt     # Data models (Element, Style, etc.)
│   ├── command.mbt   # Undo/Redo commands
│   └── element_ops.mbt # Pure element operations
├── lib/              # Shared library code
├── embed/            # Embed mode entry point
├── webcomponent/     # Web Component entry point
└── preview/          # Preview mode

#Tech Stack

MoonBit: Systems programming language that compiles to WebAssembly/JavaScript
Luna: Signal-based reactive UI library for MoonBit
Vite: Build tool with hot module replacement
vite-plugin-moonbit: Vite plugin for MoonBit integration

#License

MIT

EmbedOptions

source

pub struct EmbedOptions {
  width : Int
  height : Int
  doc_width : Int
  doc_height : Int
  zoom : Double
  theme : String
  is_readonly : Bool
  initial_svg : String?
}

エディタオプション（JavaScript から渡される）

EmbedOptions::default

source

fn EmbedOptions::default() -> EmbedOptions

デフォルトオプション

EmbedOptions::from_js

source

fn EmbedOptions::from_js(js_obj : @mizchi/js/core.Any
Any) -> EmbedOptions

JavaScript オブジェクトからオプションを作成

ImportResult

source

pub struct ImportResult {
  elements : Array[@mizchi/moonlight/model.Element
Element]
  is_moonlight : Bool
  plain_svg_ids : Array[String]
}

インポート結果（要素と検証結果）

add_keyboard_listener

source

fn add_keyboard_listener(handler : (@mizchi/js/core.Any
Any) -> Unit) -> Unit

window に keydown イベントリスナーを追加

add_keydown_listener

source

fn add_keydown_listener(handler : (@mizchi/js/core.Any
Any) -> Unit) -> Unit

keydown リスナー

add_keyup_listener

source

fn add_keyup_listener(handler : (@mizchi/js/core.Any
Any) -> Unit) -> Unit

keyup リスナー

add_sample_shapes

source

fn add_sample_shapes(state : @mizchi/moonlight/core.EditorState
EditorState, new_id : () -> String) -> Unit

サンプル図形を追加

app_main

source

fn app_main() -> Unit

アプリケーションのエントリポイント（外部から呼び出し可能）

clear_children_ffi

source

fn clear_children_ffi(el : @mizchi/js/core.Any
Any) -> Unit

SVG コンテナの子要素をクリア

copy_svg_as_image

source

fn copy_svg_as_image(svg_str : String, width : Int, height : Int, on_done : () -> Unit, on_error : () -> Unit) -> Unit

SVGをPNG画像としてクリップボードにコピー

copy_text_to_clipboard

source

fn copy_text_to_clipboard(text : String, on_done : () -> Unit, on_error : () -> Unit) -> Unit

テキストをクリップボードにコピー

create_arrow_defs

source

fn create_arrow_defs() -> @mizchi/js/core.Any
Any

SVG 定義（マーカー）を作成

create_arrow_defs_node

source

fn create_arrow_defs_node() -> @mizchi/luna/luna/dom/element.DomNode
DomNode

SVG defs を DomNode として作成

create_doc_shadow_filter

source

fn create_doc_shadow_filter(is_dark_theme : Bool) -> @mizchi/js/core.Any
Any

ドキュメントシャドウフィルタを defs に追加

create_doc_shadow_filter_node

source

fn create_doc_shadow_filter_node(is_dark_theme : Bool) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

ドキュメントシャドウフィルタを defs Node として作成

create_embedded_app

source

fn create_embedded_app() -> @mizchi/luna/luna/dom/element.DomNode
DomNode

埋め込みモード用のアプリを作成（外部から呼び出し可能）

create_js_editor

source

fn create_js_editor(container : @mizchi/js/core.Any
Any, options : EmbedOptions) -> @mizchi/js/core.Any
Any

JavaScript 埋め込み用エディタを作成 container: DOM コンテナ要素 options: エディタオプション戻り値: エディタハンドル

create_textarea_ffi

source

fn create_textarea_ffi(style : String, initial_value : String, on_commit : (String) -> Unit, on_escape : (String) -> Unit, on_input : (String) -> Unit) -> @mizchi/js/core.Any
Any

テキストエリアを作成（IMEコンポジション対応）

debug_log

source

fn debug_log(msg : String) -> Unit

デバッグログ

download_file

source

fn download_file(content : String, filename : String, mime_type : String) -> Unit

ファイルをダウンロード

element_to_moonlight_svg

source

fn element_to_moonlight_svg(el : @mizchi/moonlight/model.Element
Element) -> String

要素を Moonlight SVG 文字列に変換（メタデータ付き）

element_to_svg_string

source

fn element_to_svg_string(el : @mizchi/moonlight/model.Element
Element) -> String

要素を SVG 文字列に変換（エクスポート用）

elements_to_moonlight_svg

source

fn elements_to_moonlight_svg(elements : Array[@mizchi/moonlight/model.Element
Element], width : Int, height : Int, bg_color : String) -> String

全要素を Moonlight SVG 形式で出力

elements_to_svg

source

fn elements_to_svg(elements : Array[@mizchi/moonlight/model.Element
Element], width : Int, height : Int) -> String

全要素を SVG 文字列に変換

get_attribute

source

fn get_attribute(el : @mizchi/js/core.Any
Any, name : String) -> @mizchi/js/core.Any
Any

要素の属性を取得（存在しない場合はnull）

get_child_at_ffi

source

fn get_child_at_ffi(parent : @mizchi/js/core.Any
Any, index : Int) -> @mizchi/js/core.Any
Any

子要素を取得

get_closest_data_id_ffi

source

fn get_closest_data_id_ffi(el : @mizchi/js/core.Any
Any) -> @mizchi/js/core.Any
Any

要素から data-id を持つ最も近い親要素の data-id を取得

get_connected_points

source

fn get_connected_points(elements : Array[@mizchi/moonlight/model.Element
Element], selected_el : @mizchi/moonlight/model.Element
Element) -> Array[@mizchi/moonlight/model.Point
Point]

選択要素に接続しているラインの接続ポイントを収集

get_current_time

source

fn get_current_time() -> Double

現在時刻を取得（ミリ秒）

get_event_target_value

source

fn get_event_target_value(e : @mizchi/js/core.Any
Any) -> String

イベントから target.value を取得

get_svg_children

source

fn get_svg_children(svg : @mizchi/js/core.Any
Any) -> @mizchi/js/core.Any
Any

SVG要素の子要素リストを取得

get_tag_name

source

fn get_tag_name(el : @mizchi/js/core.Any
Any) -> String

要素のタグ名を取得

get_text_content

source

fn get_text_content(el : @mizchi/js/core.Any
Any) -> String

要素のテキスト内容を取得

get_url_search_ffi

source

fn get_url_search_ffi() -> String

URL の search パラメータを取得

fn hide_popover(popover_id : String) -> Unit

Popover を非表示

import_svg_elements

source

fn import_svg_elements(svg_str : String, new_id : () -> String) -> Array[@mizchi/moonlight/model.Element
Element]

SVG文字列をパースして Element 配列を返す

import_svg_validated

source

fn import_svg_validated(svg_str : String, new_id : () -> String) -> ImportResult

SVG文字列をパースして検証付きでインポート

insert_before_ffi

source

fn insert_before_ffi(parent : @mizchi/js/core.Any
Any, new_child : @mizchi/js/core.Any
Any, ref_child : @mizchi/js/core.Any
Any) -> Unit

指定した子要素の前に挿入

is_composing_ffi

source

fn is_composing_ffi() -> Bool

IMEコンポジション中かどうかを取得

is_input_focused_ffi

source

fn is_input_focused_ffi() -> Bool

入力要素にフォーカスがあるかチェック

load_from_indexeddb

source

fn load_from_indexeddb(db_name : String, store_name : String, key : String, on_success : (String) -> Unit, on_not_found : () -> Unit, on_error : () -> Unit) -> Unit

IndexedDB から文字列を読み込み

observe_resize_ffi

source

fn observe_resize_ffi(el : @mizchi/js/core.Any
Any, callback : (Double, Double) -> Unit) -> Unit

ResizeObserver で要素のサイズ変更を監視

observe_window_resize_ffi

source

fn observe_window_resize_ffi(callback : (Int, Int) -> Unit) -> Unit

ウィンドウサイズを監視

open_file_dialog

source

fn open_file_dialog(accept : String, on_file : (String) -> Unit) -> Unit

ファイル選択ダイアログを開く

parse_double

source

fn parse_double(s : String) -> Double?

文字列を Double にパース

parse_svg_string

source

fn parse_svg_string(svg_str : String) -> @mizchi/js/core.Any
Any

SVG文字列をパースしてDOM要素を返す

read_clipboard_text

source

fn read_clipboard_text(on_success : (String) -> Unit, on_error : () -> Unit) -> Unit

クリップボードからテキストを読み込み

remove_child_safe_ffi

source

fn remove_child_safe_ffi(parent : @mizchi/js/core.Any
Any, child : @mizchi/js/core.Any
Any) -> Unit

子要素を安全に削除（存在しない場合は何もしない）

remove_element_ffi

source

fn remove_element_ffi(el : @mizchi/js/core.Any
Any) -> Unit

要素を親から削除

render_all_anchor_points

source

fn render_all_anchor_points(elements : Array[@mizchi/moonlight/model.Element
Element], exclude_id : String) -> Array[@mizchi/js/core.Any
Any]

全てのアンカーポイントを描画（ドラッグ中の可視化用）

render_all_anchors_vnode

source

fn render_all_anchors_vnode(state : @mizchi/moonlight/core.EditorState
EditorState) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

全アンカーポイントを VNode として描画（ライン編集中、Effect ベース）

render_box_select_vnode

source

fn render_box_select_vnode(state : @mizchi/moonlight/core.EditorState
EditorState) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

矩形選択ボックスを VNode として描画（Effect ベース）

render_canvas_background

source

fn render_canvas_background(doc_width : Double, doc_height : Double, viewport : @mizchi/moonlight/model.Viewport
Viewport, screen_width : Int, screen_height : Int, is_dark_theme : Bool) -> Array[@mizchi/js/core.Any
Any]

Canvas 背景レイヤーを描画

境界外のグレー背景（テーマ連動）
ドキュメント境界（白/黒 rect + ドロップシャドウ）

render_canvas_background_vnode

source

fn render_canvas_background_vnode(state : @mizchi/moonlight/core.EditorState
EditorState) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

Canvas 背景を VNode として描画（Effect ベース）

境界外のグレー背景（テーマ連動）
ドキュメント境界（白/黒 rect + ドロップシャドウ）

render_connected_anchor_highlights

source

fn render_connected_anchor_highlights(elements : Array[@mizchi/moonlight/model.Element
Element], selected_el : @mizchi/moonlight/model.Element
Element) -> Array[@mizchi/js/core.Any
Any]

選択要素に接続しているラインのアンカーポイントを黄色でハイライト描画

render_connected_point

source

fn render_connected_point(point : @mizchi/moonlight/model.Point
Point) -> @mizchi/js/core.Any
Any

接続済みポイントを描画（選択要素に接続しているラインの端点）

render_connection_highlight

source

fn render_connection_highlight(point : @mizchi/moonlight/model.Point
Point) -> @mizchi/js/core.Any
Any

接続ポイントのハイライトを描画（スナップ先）

render_connection_highlight_node

source

fn render_connection_highlight_node(point : @mizchi/moonlight/model.Point
Point) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

接続ポイントハイライトを DomNode として作成

render_connection_highlight_vnode

source

fn render_connection_highlight_vnode(state : @mizchi/moonlight/core.EditorState
EditorState) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

接続ハイライトを VNode として描画（Effect ベース）

render_context_menu

source

fn render_context_menu(state : @mizchi/moonlight/core.EditorState
EditorState, history : @mizchi/moonlight/model.History
History, new_id : () -> String) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

コンテキストメニューをレンダリング

render_delete_button

source

fn render_delete_button(state : @mizchi/moonlight/core.EditorState
EditorState, history : @mizchi/moonlight/model.History
History, element_id : String, close_menu : () -> Unit) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

削除ボタンコンポーネント

render_editor_modal

source

fn render_editor_modal(state : @mizchi/moonlight/core.EditorState
EditorState, history : @mizchi/moonlight/model.History
History, new_id : () -> String) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

エディタモーダルをレンダリング（フルエディタを別ウィンドウ風に表示）

render_element

source

fn render_element(el : @mizchi/moonlight/model.Element
Element, is_selected : Bool, parent? : @mizchi/moonlight/model.Element
Element?) -> @mizchi/js/core.Any
Any

要素を SVG ノードに変換 parent: テキスト子要素の場合、親要素を渡すと中央に配置

render_element_anchors

source

fn render_element_anchors(el : @mizchi/moonlight/model.Element
Element) -> Array[@mizchi/js/core.Any
Any]

選択中の図形のアンカーポイントを描画（ドラッグでライン生成用）

render_element_anchors_nodes

source

fn render_element_anchors_nodes(el : @mizchi/moonlight/model.Element
Element) -> Array[@mizchi/luna/luna/dom/element.DomNode
DomNode]

アンカーポイントを DomNode として作成

render_element_node

source

fn render_element_node(el : @mizchi/moonlight/model.Element
Element, is_selected : Bool, parent? : @mizchi/moonlight/model.Element
Element?) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

要素を DomNode に変換（Luna VNode ベース）

render_element_vnode

source

fn render_element_vnode(state : @mizchi/moonlight/core.EditorState
EditorState, id : String) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

要素を VNode として描画（Effect で直接 DOM 更新）

render_floating_panel

source

fn render_floating_panel(state : @mizchi/moonlight/core.EditorState
EditorState, history : @mizchi/moonlight/model.History
History) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

フローティングパネルをレンダリング

render_grid

source

fn render_grid(width : Int, height : Int, grid_size : Int, viewport : @mizchi/moonlight/model.Viewport
Viewport) -> Array[@mizchi/js/core.Any
Any]

グリッド線を描画

render_grid_nodes

source

fn render_grid_nodes(width : Int, height : Int, grid_size : Int, viewport : @mizchi/moonlight/model.Viewport
Viewport) -> Array[@mizchi/luna/luna/dom/element.DomNode
DomNode]

グリッド線を DomNode として作成

render_grid_vnode

source

fn render_grid_vnode(state : @mizchi/moonlight/core.EditorState
EditorState) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

グリッド線を VNode として描画

render_inline_panel

source

fn render_inline_panel(state : @mizchi/moonlight/core.EditorState
EditorState, history : @mizchi/moonlight/model.History
History) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

インラインパネルをレンダリング（モーダル内で使用、position: fixed なし）

render_layer_operations

source

fn render_layer_operations(state : @mizchi/moonlight/core.EditorState
EditorState, history : @mizchi/moonlight/model.History
History, element_id : String, close_menu : () -> Unit) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

Layer 操作コンポーネント

render_resize_handles

source

fn render_resize_handles(el : @mizchi/moonlight/model.Element
Element) -> Array[@mizchi/js/core.Any
Any]

リサイズハンドルを描画

render_resize_handles_nodes

source

fn render_resize_handles_nodes(el : @mizchi/moonlight/model.Element
Element) -> Array[@mizchi/luna/luna/dom/element.DomNode
DomNode]

リサイズハンドルを DomNode として作成

render_selection_box

source

fn render_selection_box(box_state : @mizchi/moonlight/model.BoxSelectState
BoxSelectState) -> @mizchi/js/core.Any
Any

矩形選択ボックスを描画

render_selection_box_node

source

fn render_selection_box_node(box_state : @mizchi/moonlight/model.BoxSelectState
BoxSelectState) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

矩形選択ボックスを DomNode として作成

render_selection_overlay

source

fn render_selection_overlay(state : @mizchi/moonlight/core.EditorState
EditorState) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

選択オーバーレイ（ハンドル・アンカー）を描画（Effect ベース）

render_sidebar

source

fn render_sidebar(state : @mizchi/moonlight/core.EditorState
EditorState, history : @mizchi/moonlight/model.History
History, _canvas_height : Int) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

サイドバーをレンダリング（後方互換性のため残す）

render_style_editor

source

fn render_style_editor(state : @mizchi/moonlight/core.EditorState
EditorState, history : @mizchi/moonlight/model.History
History, element_id : String, close_menu : () -> Unit) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

共通スタイルエディタコンポーネント（コンテキストメニュー・詳細パネル両方で使用） close_menu: メニューを閉じるコールバック（コンテキストメニュー用、詳細パネルでは空の関数を渡す） ShapeConfig を使用して、シェープごとに表示する項目を制御

render_svg_container

source

fn render_svg_container(width : Int, height : Int, on_pointerdown : (@mizchi/js/core.Any
Any) -> Unit, on_pointermove : (@mizchi/js/core.Any
Any) -> Unit, on_pointerup : (@mizchi/js/core.Any
Any) -> Unit, on_contextmenu : (@mizchi/js/core.Any
Any) -> Unit, children : Array[@mizchi/js/core.Any
Any]) -> @mizchi/js/core.Any
Any

SVG コンテナを作成（イベントハンドラ付き）

render_svg_container_with_viewport

source

fn render_svg_container_with_viewport(width : Int, height : Int, viewport : @mizchi/moonlight/model.Viewport
Viewport, on_pointerdown : (@mizchi/js/core.Any
Any) -> Unit, on_pointermove : (@mizchi/js/core.Any
Any) -> Unit, on_pointerup : (@mizchi/js/core.Any
Any) -> Unit, on_contextmenu : (@mizchi/js/core.Any
Any) -> Unit, on_wheel : (@mizchi/js/core.Any
Any) -> Unit, children : Array[@mizchi/js/core.Any
Any]) -> @mizchi/js/core.Any
Any

SVG コンテナを作成（ビューポート対応）

render_text_input

source

fn render_text_input(state : @mizchi/moonlight/core.EditorState
EditorState, commit : (String) -> Unit, cancel : () -> Unit) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

テキスト入力オーバーレイをレンダリング

save_to_indexeddb

source

fn save_to_indexeddb(db_name : String, store_name : String, key : String, value : String, on_done : () -> Unit, on_error : () -> Unit) -> Unit

IndexedDB に文字列を保存

schedule_focus_with_value_ffi

source

fn schedule_focus_with_value_ffi(selector : String, value : String) -> Int

指定セレクタの要素にフォーカスを遅延設定（初期値付き）

schedule_textarea_focus_ffi

source

fn schedule_textarea_focus_ffi(selector : String, value : String) -> Int

指定セレクタのテキストエリアにフォーカスを遅延設定（IMEコンポジション対応）

set_multiline_text_ffi

source

fn set_multiline_text_ffi(text_el : @mizchi/js/core.Any
Any, content : String, x : Double, font_size : Double) -> Unit

SVG text 要素に複数行テキストを設定（tspan使用）

fn show_popover_at_button(popover_id : String, e : @mizchi/js/core.Any
Any) -> Unit

Popover を表示してボタン位置に配置

svg_to_dom_node

source

fn svg_to_dom_node(svg : @mizchi/js/core.Any
Any) -> @mizchi/luna/luna/dom/element.DomNode
DomNode

SVG を DomNode にラップ

update_svg_background_ffi

source

fn update_svg_background_ffi(svg : @mizchi/js/core.Any
Any, background : String) -> Unit

SVG の背景スタイルを更新

update_svg_css_vars_ffi

source

fn update_svg_css_vars_ffi(svg : @mizchi/js/core.Any
Any, stroke : String, fill : String, text_color : String) -> Unit

SVG の CSS 変数を更新

update_viewbox_ffi

source

fn update_viewbox_ffi(svg : @mizchi/js/core.Any
Any, viewbox : String) -> Unit

SVG の viewBox を更新

Source Files

Site source Report issue Packages Build queue Skills Statistics

moonlight

#Moonlight

#Demo

#Features

#Getting Started

#Prerequisites

#Installation

#Development

#Access the Editor

#User Guide

#Tools

#Keyboard Shortcuts

#General

#Navigation

#Element Operations

#View

#Mouse Operations

#Working with Lines

#Detail Panel

#Themes

#Usage Modes

#1. Full Editor Mode

#2. Embed Mode

#3. Web Component Mode

#Attributes

#4. CDN Distribution (Copy & Paste)

#Minimal Example

#With Initial SVG (using template)

#With API Usage

#Attributes

#Self-hosting with Cloudflare Workers

#API Reference

#Editor Handle

#Architecture

#Tech Stack

#License

#EmbedOptions

#EmbedOptions::default

#EmbedOptions::from_js

#ImportResult

#add_keyboard_listener

#add_keydown_listener

#add_keyup_listener

#add_sample_shapes

#app_main

#clear_children_ffi

#copy_svg_as_image

#copy_text_to_clipboard

#create_arrow_defs

#create_arrow_defs_node

#create_doc_shadow_filter

#create_doc_shadow_filter_node

#create_embedded_app

#create_js_editor

#create_textarea_ffi

#debug_log

#download_file

#element_to_moonlight_svg

#element_to_svg_string

#elements_to_moonlight_svg

#elements_to_svg

#get_attribute

#get_child_at_ffi

#get_closest_data_id_ffi

#get_connected_points

#get_current_time

#get_event_target_value

#get_svg_children

#get_tag_name

#get_text_content

#get_url_search_ffi

#hide_popover

#import_svg_elements

#import_svg_validated

#insert_before_ffi

#is_composing_ffi

#is_input_focused_ffi

#load_from_indexeddb

#observe_resize_ffi

#observe_window_resize_ffi

EmbedOptions

EmbedOptions::default

EmbedOptions::from_js

ImportResult

add_keyboard_listener

add_keydown_listener

add_keyup_listener

add_sample_shapes

app_main

clear_children_ffi

copy_svg_as_image

copy_text_to_clipboard

create_arrow_defs

create_arrow_defs_node

create_doc_shadow_filter

create_doc_shadow_filter_node

create_embedded_app

create_js_editor

create_textarea_ffi

debug_log

download_file

element_to_moonlight_svg

element_to_svg_string

elements_to_moonlight_svg

elements_to_svg

get_attribute

get_child_at_ffi

get_closest_data_id_ffi

get_connected_points

get_current_time

get_event_target_value

get_svg_children

get_tag_name

get_text_content

get_url_search_ffi

hide_popover

import_svg_elements

import_svg_validated

insert_before_ffi

is_composing_ffi

is_input_focused_ffi

load_from_indexeddb

observe_resize_ffi

observe_window_resize_ffi

open_file_dialog

parse_double

parse_svg_string

read_clipboard_text

remove_child_safe_ffi

remove_element_ffi

render_all_anchor_points

render_all_anchors_vnode

render_box_select_vnode

render_canvas_background

render_canvas_background_vnode

render_connected_anchor_highlights

render_connected_point

render_connection_highlight

render_connection_highlight_node

render_connection_highlight_vnode

render_context_menu

render_delete_button

render_editor_modal

render_element

render_element_anchors

render_element_anchors_nodes

render_element_node

render_element_vnode

render_floating_panel

render_grid

render_grid_nodes

render_grid_vnode

render_inline_panel

render_layer_operations

render_resize_handles

render_resize_handles_nodes

render_selection_box

render_selection_box_node

render_selection_overlay

render_sidebar