History: ClientPanelEditor - ぺったんR - ぺったんR

パネルエディタについて

panel editor

finder

Premium Stage

panel editor

panel editor

panel editor

panel editor

reversible

• ぺったんR で最も込み入ったデータである、パネルの json データ制作のための GUI を提供する．
• 機能をプラグインで追加できる（はず）
• ぺったんR サーバと疎結合なため、サーバ管理者は好みのクライアント実装を選べる（はず）

パネルエディタを実装する人へ

• 画像・吹き出し各要素の順番(t)を入力する UI を備えなければならない．（アクセサビリティのために）
• 画像素材のライセンス等を正しく扱えなければならない．

プラグインを書く人へ

• peta.apps.js 内の パネルエディターの構造を以下に示します．
• system.js の理解も必要です．ClientSystem
• 画像エクスプローラ（ PremiumStage ）とテキストエディタはオーバーレイアプリケーションとなります．

ぺったんR チームによる パネルエディタ実装の詳細

• system.js から起動する application として書かれている．
• パネルエディターを定義している function が new された段階では、また html 要素が生成されていない．
• application.onInit() 以降 application.rootElement にアクセスできる．そのタイミングで application.rootElement.innerHTML に大量の html 要素が書き込まれる．
• 上記要素には application.onOpen() 以降にアクセスするのが安全．
• パネルエディターを構成する部品は多岐に渡る．そのほとんどはいわゆる js シングルトンパターンで書かれている．
• 複数のインスタンスが作られる場合、.prototype を使ったクラス生成を用いる．
  • これはメモリ効率で有利．
  • 但し、全ての値が public に露出してしまう．これはグループ開発ではきつい．
  • そこでクロージャを使ったパターンと使い分けがいる．完全に内部で使用されるものは、値が全て public でも無問題．
  • しかしどこからどこまでが内部ということになるのだろう？？
• 各モジュールは、init, open, close メソッドを持つ．
  • init でモジュールの初期化．（ rootElement 以下にもアクセス可能 ）
  • open で他モジュールにもアクセスしつつ起動プロセスの完了．
  • close でメモリを開放

MENU_BAR_CONTROL

ページ上部に表示されているメニューバーを扱う．

• init: function()
  • メニュー部品のオリジナル要素を取得
  • QUIT, EDIT, WINDOW, HELP という 4 つのメニューを登録
  • 他のモジュールから MenuBarItemClass の createOption が呼ばるのは このあと．つまり各モジュールの .open() 以降．
• open: function()
• close: function()
• mousemove: function( x, y )
• mouseup: function( x, y )
• mousedown: function( x, y )
• busy: boolean
• onWindowResize: function( w, h )
• h: Number
  • メニュバーの高さ
• QUIT: MenuBarItemClass
• EDIT: MenuBarItemClass
• WINDOW: MenuBarItemClass
• HELP: MenuBarItemClass

MenuBarItemClass

MENU_BAR_CONTROL.init() 後にアクセス可能になる．他のモジュールから createOption が呼ばれる．

• elm: HTMLElement
• elmUL: HTMLElement
• optionList: Array( MenubarOptionClass )
• show: function()
• hide: function()
• createOption: function( title, shortcut, callback, visible, separateBefore, separateAfter )
• _open: funciton()
• _close: function()

MenubarOptionClass

• elm: HTMLElement
• elmTitle: HTMLElement
• callback: function
• separateAfter: Boolean
• title: function( _title )
• visible: function( _visible )
• _init: function( elmParent, _title, _shortcut, _visible )
• _kill: function()

HISTORY_CONTROL

もどる、進む情報を保持．もどる、進むを実行．

• init: function()
  • KeyEvent の登録
• open: function()
  • MENU_BAR_CONTROL.EDIT に 戻る・進む オプションを作る．
• close: function()
• saveStaet: function( _function, _argBack, _argForword, _destroy )
  • 内部で new StackClass する．StackClass は HISTORY_CONTROL の外から見えない．

SAVE_CONTROL

• init: functiion()
• open: function()
  • MENU_BAR_CONTROL.QUIT に save などのオプションを作る
• close: funciton()
• quit: function()
• panelUpdated: function( _updated )
  • パネルの内容が更新された場合、save オプションを有効にする．HISTORY_CONTROL が呼び出している．
• save: function

WINDOWS_CONTROL

• init: function()
  • windown のための htmlテンプレートを取得．
• open: function()
  • createWindow で登録された window の init を呼び出す．
• close: function()
• mousemove: function( _mouseX, _mouseY )
• mouseup: function( _mouseX, _mouseY )
• mousedown: function( _mouseX, _mouseY )
• busy:Boolean
• onWindowResize: function( _windowW, _windowH )
• createWindow: function( EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH )

WindowClass

• init: function()
  • window の html を構築．
• x: Number
• y: Number
• w: Number
• h: Number
• title: function( _title )
• visible: Boolean
• firstOpen: function()
• open: function()
• onFadeIn: function()
• close: function()
• onFadeOut: function()
• bodyBackOrForward: function( isBack )
• mousemove: function( _mouseX, _mouseY )
• mouseup: function( _mouseX, _mouseY )
• mousedown: function( _mouseX, _mouseY )
• mouseOut: function( _mouseX, _mouseY )
• budy: Boolean

TOOL_BOX_WINDOW

WindowClass

IMAGE_EXPLORER_WINDOW

WindowClass

INFOMATION_WINDOW

WindowClass

HELP_DOCUMENTS_WINDOW

WindowClass

• onInit: function()
  • MENU_BAR_CONTROL.HELP.createAjaxSelection( onAjaxStart ) を呼び出す．

GRID_CONTROL

グリッドが表示されていると、パネルエレメントの配置が 10px 刻みになる． グリッド用 url の設定は初回表示のときでグリッドを一度も表示しない場合、グリッド画像へのアクセスが発生しない．

• init: functiion()
  • elmGrid の取得
• open: function()
• close: funciton()
• onPanelResize: function( _panelX, _panelY )
• enabled: Boolean

WHITE_GLASS_CONTROL

• init: functiion()
  • elm の取得
• onPanelResize: function( _panelX, _panelY, _panelW, _panelH )

PanelResizerClass

• mousemove: function( _mouseX, _mouseY )
• mouseup: function( _mouseX, _mouseY )
• mousedown: function( _mouseX, _mouseY )
• busy: Boolean
• onPanelResize: function( _x, _y, _w, _h )

PANEL_RESIZER_TOP

PanelResizerClass

PANEL_RESIZER_BOTTOM

PanelResizerClass

PANEL_CONTROL

パネルの枠線の表示．パネルのリサイズの通知．パネルのドラッグ．

• init: function()
  • PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true );
  • PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false );
• open: function( _panelW, _panelH, _borderSize )
• close: function()
• x: Number
• y: Number
• w: Number
• h: Number
• resize: function( isResizerTopAction, _x, _y, _w, _h )
  • PanelResizerClass から呼ばれる．以下のモジュールの onPaneResize をそれぞれ呼び出す．
  • PANEL_RESIZER_TOP.onPanelResize( _x, _y, _w, _h );
  • PANEL_RESIZER_BOTTOM.onPanelResize( _x, _y, _w, _h );
  • GRID_CONTROL.onPanelResize( _x, _y );
  • WHITE_GLASS_CONTROL.onPanelResize( _x, _y, _w, _h );
  • COMIC_ELEMENT_CONTROL.onPanelResize( _x, _y, _w, _h, isResizerTopAction === true );
• onWindowResize: function( _windowW, _windowH )
• mousemove: function( _mouseX, _mouseY )
• mouseup: function( _mouseX, _mouseY )
• mousedown: function( _mouseX, _mouseY )
• busy: Boolean

CONSOLE_CONTROLER

画像・吹き出しの各パネル要素にマウスオーバーすると表示される操作盤（ボタンボックス）の表示とクリックを扱う．

• init: function()
• show: function( _currentElement, _w, _h )
• hide: function()
• x: Number
• y: Number
• w: Number
• h: Number
• mousemove: function( _mouseX, _mouseY )

コミックエレメントオペレーター

COMIC_ELEMENT_OPERATION_MANAGER によって呼び出される．onDrag, onFinish, onCancel といった共通関数を持つ．

TAIL_OPERATOR

RESIZE_OPERATOR

POSITION_OPERATOR

COMIC_ELEMENT_OPERATION_MANAGER