webtalekit-alpha 0.2.11 → 0.2.14

package/src/core/defaultUIHandler.js

@@ -0,0 +1,309 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultUIHandler = void 0;
+var DefaultUIHandler = /** @class */ (function () {
+    function DefaultUIHandler() {
+    }
+    /**
+     * 指定されたEventBusにDOM操作関連のイベントハンドラをすべて登録する。
+     *
+     * @param eventBus      - 共有EventBusインスタンス
+     * @param drawer        - Drawerインスタンス（キャンバス・テキスト描画）
+     * @param gameContainer - ゲームのルートコンテナ要素
+     * @param resolution    - キャンバス初期化に使用するエンジン解像度
+     */
+    DefaultUIHandler.register = function (eventBus, drawer, gameContainer, resolution) {
+        var _this = this;
+        // ----------------------------------------------------------------
+        // screen:load
+        //   テンプレートURLからHTMLを読み込み・パースしてDOMに注入する。
+        //   通常モードはgameContainerのinnerHTMLを置換し、drawer.setScreenを呼び出す。
+        //   ダイアログモードはダイアログ要素を追加し、スタイルにマークを付ける。
+        //   data.template         — テンプレートファイルのURL
+        //   data.isDialog         — ダイアログモードかどうか
+        //   data.fallbackTemplate — テンプレートが見つからない場合のフォールバック関数
+        // ----------------------------------------------------------------
+        eventBus.on('screen:load', function (data) { return __awaiter(_this, void 0, void 0, function () {
+            var template, isDialog, fallbackTemplate, htmlString, parser, doc, mainDiv, fallbackContent, wrapper, styleEl, styleElement, styleContent, styleTags, styleEl, existingDialog, styleEl;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        template = data.template, isDialog = data.isDialog, fallbackTemplate = data.fallbackTemplate;
+                        return [4 /*yield*/, fetch(template)];
+                    case 1: return [4 /*yield*/, (_a.sent()).text()];
+                    case 2:
+                        htmlString = _a.sent();
+                        parser = new DOMParser();
+                        doc = parser.parseFromString(htmlString, 'text/html');
+                        mainDiv = isDialog
+                            ? doc.getElementById('dialogContainer')
+                            : doc.getElementById('main');
+                        if (!mainDiv) {
+                            // 対象要素が見つからない場合はフォールバックテンプレートを使用する
+                            if (fallbackTemplate) {
+                                console.warn('テンプレートにメイン要素が見つからないため、フォールバックを使用します');
+                                fallbackContent = fallbackTemplate();
+                                wrapper = doc.createElement('div');
+                                wrapper.innerHTML = fallbackContent.htmlString;
+                                mainDiv = wrapper;
+                                styleEl = doc.head.getElementsByTagName('style')[0] || doc.createElement('style');
+                                styleEl.textContent = fallbackContent.styleString || '';
+                                doc.head.appendChild(styleEl);
+                            }
+                            else {
+                                throw new Error('テンプレートにメイン要素が見つからず、フォールバックも指定されていません。');
+                            }
+                        }
+                        styleElement = doc.head.getElementsByTagName('style')[0];
+                        styleContent = styleElement ? styleElement.textContent : null;
+                        if (!isDialog) {
+                            styleTags = Array.from(document.head.getElementsByTagName('style'));
+                            styleTags.forEach(function (tag) { return document.head.removeChild(tag); });
+                            gameContainer.tabIndex = 0;
+                            gameContainer.style.outline = 'none';
+                            // HTMLコンテンツを注入する
+                            gameContainer.innerHTML = mainDiv.innerHTML;
+                            // キャンバスと各ビューの参照を初期化する
+                            drawer.setScreen(gameContainer, resolution);
+                            // テンプレートのスタイルシートを適用する
+                            if (styleContent) {
+                                styleEl = document.createElement('style');
+                                styleEl.textContent = styleContent;
+                                document.head.appendChild(styleEl);
+                            }
+                            gameContainer.focus();
+                        }
+                        else {
+                            // 古いダイアログ用スタイルシートを削除する
+                            document.head
+                                .querySelectorAll('style[data-dialog-style]')
+                                .forEach(function (tag) { return document.head.removeChild(tag); });
+                            existingDialog = document.querySelector('#dialogContainer');
+                            if (existingDialog) {
+                                existingDialog.close();
+                                existingDialog.remove();
+                            }
+                            // 新しいダイアログ要素を追加する
+                            gameContainer.appendChild(mainDiv);
+                            // ダイアログ用スタイルシートにマークを付けて適用する
+                            if (styleContent) {
+                                styleEl = document.createElement('style');
+                                styleEl.textContent = styleContent;
+                                styleEl.setAttribute('data-dialog-style', 'true');
+                                document.head.appendChild(styleEl);
+                            }
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        // ----------------------------------------------------------------
+        // text:clear
+        //   メッセージテキスト表示領域をクリアする。
+        // ----------------------------------------------------------------
+        eventBus.on('text:clear', function () {
+            drawer.clearText();
+        });
+        // ----------------------------------------------------------------
+        // text:show
+        //   話者名を表示し、コンテンツを1文字ずつアニメーションで描画する。
+        //   data.expandVariable — Coreから渡される変数展開コールバック
+        //   data.waitFn         — Coreから渡されるwaitHandlerコールバック（<wait>タグ用）
+        // ----------------------------------------------------------------
+        eventBus.on('text:show', function (data) { return __awaiter(_this, void 0, void 0, function () {
+            var name, content, speed, expandVariable, waitFn, _i, content_1, text, container;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        name = data.name, content = data.content, speed = data.speed, expandVariable = data.expandVariable, waitFn = data.waitFn;
+                        drawer.drawName(name);
+                        _i = 0, content_1 = content;
+                        _a.label = 1;
+                    case 1:
+                        if (!(_i < content_1.length)) return [3 /*break*/, 9];
+                        text = content_1[_i];
+                        if (!(typeof text === 'string')) return [3 /*break*/, 3];
+                        return [4 /*yield*/, drawer.drawText(expandVariable(text), speed)];
+                    case 2:
+                        _a.sent();
+                        return [3 /*break*/, 8];
+                    case 3:
+                        if (!(text.type === 'br' || text.type === 'wait')) return [3 /*break*/, 6];
+                        if (text.type === 'br')
+                            drawer.drawLineBreak();
+                        if (!(text.type === 'wait' && !text.nw)) return [3 /*break*/, 5];
+                        return [4 /*yield*/, waitFn({ wait: text.time })];
+                    case 4:
+                        _a.sent();
+                        _a.label = 5;
+                    case 5: return [3 /*break*/, 8];
+                    case 6:
+                        container = drawer.createDecoratedElement(text);
+                        return [4 /*yield*/, drawer.drawText(expandVariable(text.content[0]), text.speed || speed, container)];
+                    case 7:
+                        _a.sent();
+                        _a.label = 8;
+                    case 8:
+                        _i++;
+                        return [3 /*break*/, 1];
+                    case 9: return [2 /*return*/];
+                }
+            });
+        }); });
+        // ----------------------------------------------------------------
+        // choice:show
+        //   インタラクティブビューを表示し、Drawerで選択肢ボタンを描画して、
+        //   選択後に非表示に戻す。選択結果 { selectId, onSelect } を返す。
+        // ----------------------------------------------------------------
+        eventBus.on('choice:show', function (data) { return __awaiter(_this, void 0, void 0, function () {
+            var interactiveView, result;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        interactiveView = document.querySelector('#interactiveView');
+                        if (interactiveView)
+                            interactiveView.style.visibility = 'visible';
+                        return [4 /*yield*/, drawer.drawChoices(data)];
+                    case 1:
+                        result = _a.sent();
+                        if (interactiveView)
+                            interactiveView.style.visibility = 'hidden';
+                        return [2 /*return*/, result];
+                }
+            });
+        }); });
+        // ----------------------------------------------------------------
+        // dialog:show
+        //   読み込まれたダイアログコンテナにプロンプトテキストとアクションボタンを
+        //   設定し、モーダルを表示する。ダイアログが閉じられると選択されたアクションの
+        //   IDで解決するPromiseを返す。
+        //   data.expandVariable — Coreから渡される変数展開コールバック
+        //   data.addScenario    — scenarioManager.addScenarioコールバック
+        // ----------------------------------------------------------------
+        eventBus.on('dialog:show', function (data) { return __awaiter(_this, void 0, void 0, function () {
+            var content, expandVariable, addScenario, result, dialogContainer;
+            return __generator(this, function (_a) {
+                content = data.content, expandVariable = data.expandVariable, addScenario = data.addScenario;
+                result = null;
+                dialogContainer = document.querySelector('#dialogContainer');
+                if (!dialogContainer) {
+                    throw new Error('Dialog container not found.');
+                }
+                content.forEach(function (item) {
+                    if (item.type === 'prompt') {
+                        var promptElement = dialogContainer.querySelector('.dialog-prompt');
+                        if (promptElement) {
+                            promptElement.innerHTML = item.content
+                                .map(function (text) { return expandVariable(text); })
+                                .join('\n');
+                        }
+                    }
+                    else if (item.type === 'actions') {
+                        var buttonContainer_1 = dialogContainer.querySelector('.dialog-buttons');
+                        if (!buttonContainer_1)
+                            return;
+                        item.content.forEach(function (action) {
+                            action.label = expandVariable(action.label);
+                            var button = buttonContainer_1.querySelector("#dialog-button-".concat(action.id));
+                            if (!button) {
+                                // ボタンが存在しない場合は新規作成する
+                                button = document.createElement('button');
+                                button.id = "dialog-button-".concat(action.id);
+                                button.classList.add('dialog-button');
+                                buttonContainer_1.appendChild(button);
+                            }
+                            button.innerText = action.label;
+                            button.addEventListener('click', function () {
+                                // 選択されたアクションのシナリオを追加してダイアログを閉じる
+                                addScenario(action.content);
+                                result = action.id;
+                                dialogContainer.close();
+                            });
+                        });
+                    }
+                });
+                dialogContainer.showModal();
+                return [2 /*return*/, new Promise(function (resolve) {
+                        dialogContainer.addEventListener('close', function () {
+                            resolve(result);
+                        });
+                    })];
+            });
+        }); });
+        // ----------------------------------------------------------------
+        // input:bind
+        //   ゲームコンテナにキーボードとクリックのリスナーをバインドする。
+        //   data.onNext  — ユーザーが進行操作（Enter / クリック）した際に呼ばれる
+        //   data.setSkip — (drawerSkip: boolean, coreNext: boolean) => void
+        //   再度 input:bind が発行された際は以前のリスナーを先に削除する。
+        // ----------------------------------------------------------------
+        var inputAbortController = null;
+        eventBus.on('input:bind', function (data) {
+            // 重複登録を防ぐために以前バインドしたリスナーを削除する
+            if (inputAbortController)
+                inputAbortController.abort();
+            inputAbortController = new AbortController();
+            var signal = inputAbortController.signal;
+            var onNext = data.onNext, setSkip = data.setSkip, toggleAuto = data.toggleAuto, toggleSkip = data.toggleSkip;
+            gameContainer.addEventListener('keydown', function (e) {
+                if (e.key === 'Enter') {
+                    onNext();
+                }
+                else if (e.key === 'Control') {
+                    toggleSkip();
+                }
+                else if (e.key.toLowerCase() === 'a' && toggleAuto) {
+                    toggleAuto();
+                }
+            }, { signal: signal });
+            gameContainer.addEventListener('keyup', function (e) {
+                if (e.key === 'Control') {
+                    toggleSkip();
+                }
+            }, { signal: signal });
+            gameContainer.addEventListener('click', function () {
+                gameContainer.focus();
+                onNext();
+            }, { signal: signal });
+        });
+    };
+    return DefaultUIHandler;
+}());
+exports.DefaultUIHandler = DefaultUIHandler;
+//# sourceMappingURL=defaultUIHandler.js.map

package/src/core/defaultUIHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultUIHandler.js","sourceRoot":"","sources":["../../../src/core/defaultUIHandler.ts"],"names":[],"mappings":"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"}

package/src/core/drawer.js

@@ -37,8 +37,8 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Drawer = void 0;
-var logger_1 = require("../utils/logger");
 var waitUtil_1 = require("../utils/waitUtil");
+var gsap_1 = require("gsap");
 /*
  drawerの目的
   UIのHTMLとcanvasを描画する。
@@ -89,56 +89,62 @@ var Drawer = /** @class */ (function () {
     };
     Drawer.prototype.drawText = function (text, wait, containerElement) {
         return __awaiter(this, void 0, void 0, function () {
-            var element, _i, text_1, char;
+            var element, textNode, rt, displayedLength, _i, text_1, char;
             var _this = this;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        (0, logger_1.outputLog)('drawText', 'debug', { text: text, wait: wait, containerElement: containerElement });
                         element = this.messageText;
                         // テキストを表示するコンテナ要素を指定した場合は、その要素に追加する
                         if (containerElement) {
                             this.messageText.appendChild(containerElement);
                             element = containerElement;
                         }
+                        textNode = document.createTextNode('');
+                        element.appendChild(textNode);
+                        // ruby要素の場合、ルビテキスト(<rt>)をベーステキストの後に追加する
+                        if (element.tagName === 'RUBY' && element.dataset.rubyText) {
+                            rt = document.createElement('rt');
+                            rt.textContent = element.dataset.rubyText;
+                            element.appendChild(rt);
+                        }
+                        displayedLength = 0;
                         _i = 0, text_1 = text;
                         _a.label = 1;
                     case 1:
-                        if (!(_i < text_1.length)) return [3 /*break*/, 7];
+                        if (!(_i < text_1.length)) return [3 /*break*/, 5];
                         char = text_1[_i];
                         //prettier-ignore
                         setTimeout(function () { _this.readySkip = true, wait; });
                         if (!!this.isSkip) return [3 /*break*/, 3];
-                        element.innerHTML += char;
+                        textNode.textContent += char;
+                        displayedLength++;
                         return [4 /*yield*/, (0, waitUtil_1.sleep)(wait)];
                     case 2:
                         _a.sent();
                         return [3 /*break*/, 4];
                     case 3:
                         if (this.readySkip) {
-                            element.innerHTML += text.slice(element.textContent.length);
+                            textNode.textContent += text.slice(displayedLength);
                             this.readySkip = false;
                             this.isSkip = false;
-                            return [3 /*break*/, 7];
+                            return [3 /*break*/, 5];
                         }
                         _a.label = 4;
-                    case 4: return [4 /*yield*/, (0, waitUtil_1.sleep)(wait)];
-                    case 5:
-                        _a.sent();
-                        _a.label = 6;
-                    case 6:
+                    case 4:
                         _i++;
                         return [3 /*break*/, 1];
-                    case 7: return [2 /*return*/];
+                    case 5: return [2 /*return*/];
                 }
             });
         });
     };
     Drawer.prototype.drawLineBreak = function () {
         return __awaiter(this, void 0, void 0, function () {
+            var br;
             return __generator(this, function (_a) {
-                // メッセージテキストに改行を追加する
-                this.messageText.innerHTML += '<br>';
+                br = document.createElement('br');
+                this.messageText.appendChild(br);
                 return [2 /*return*/];
             });
         });
@@ -156,22 +162,19 @@ var Drawer = /** @class */ (function () {
                 return span;
             case 'ruby':
                 var ruby = document.createElement('ruby');
-                var rt = document.createElement('rt');
-                rt.textContent = element.text;
-                ruby.appendChild(rt);
+                ruby.dataset.rubyText = element.text;
                 return ruby;
             case 'b':
                 return document.createElement('strong');
             case 'i':
                 return document.createElement('i');
             default:
-                (0, logger_1.outputLog)("Unknown decoration type: ".concat(element.type), 'warn');
                 return document.createElement('span');
         }
     };
     Drawer.prototype.drawChoices = function (choices) {
         return __awaiter(this, void 0, void 0, function () {
-            var isSelect, selectId, onSelect, interactiveView, _loop_1, this_1, _i, _a, choice;
+            var isSelect, selectId, onSelect, interactiveView, CHOICE_HEIGHT, TWO_COLUMN_THRESHOLD, choiceCount_1, choiceCount, useTwoColumns, _loop_1, this_1, _i, _a, choice;
             var _this = this;
             var _b, _c;
             return __generator(this, function (_d) {
@@ -179,12 +182,31 @@ var Drawer = /** @class */ (function () {
                 selectId = 0;
                 onSelect = 0;
                 interactiveView = document.querySelector('#interactiveView');
+                CHOICE_HEIGHT = 50 // 1つの選択肢の高さ（px） - button.style.heightと一致させる必要がある
+                ;
+                TWO_COLUMN_THRESHOLD = 6 // 2列レイアウトに切り替える選択肢の数
+                ;
                 if (choices.position == 'auto' || choices.position === undefined) {
                     interactiveView.className = 'auto';
+                    choiceCount_1 = choices.content.length;
+                    if (choiceCount_1 >= TWO_COLUMN_THRESHOLD) {
+                        // 6つ以上の選択肢がある場合、2列レイアウトに切り替え
+                        interactiveView.style.flexWrap = 'wrap';
+                        interactiveView.style.columnGap = '20px'; // 列間の余白を減らす
+                        interactiveView.style.alignContent = 'center';
+                    }
+                    else {
+                        // 少数の選択肢の場合、通常通り表示
+                        interactiveView.style.flexWrap = 'wrap';
+                        interactiveView.style.columnGap = '';
+                        interactiveView.style.alignContent = 'center';
+                    }
                 }
                 else {
                     interactiveView.className = 'manual';
                 }
+                choiceCount = choices.content.length;
+                useTwoColumns = choiceCount >= TWO_COLUMN_THRESHOLD;
                 _loop_1 = function (choice) {
                     var defaultImage = choice.default !== undefined ? choice.default : './src/resource/system/systemPicture/02_button/button.png';
                     var hoverImage = choice.hover !== undefined ? choice.hover : './src/resource/system/systemPicture/02_button/button2.png';
@@ -197,7 +219,8 @@ var Drawer = /** @class */ (function () {
                         button.style.left = ((_c = choice.position) === null || _c === void 0 ? void 0 : _c.x) || 0;
                     }
                     button.style.color = choice.color !== undefined ? choice.color.default : 'black';
-                    button.style.width = '100%';
+                    // 2列レイアウトの場合は幅を調整
+                    button.style.width = useTwoColumns ? 'calc(50% - 10px)' : '100%';
                     button.style.height = '50px';
                     button.style.backgroundImage = "url(".concat(defaultImage, ")");
                     button.style.textAlign = 'center';
@@ -221,7 +244,6 @@ var Drawer = /** @class */ (function () {
                     });
                     button.innerHTML = choice.label;
                     button.onclick = function () {
-                        (0, logger_1.outputLog)('click', 'debug', choice);
                         _this.interactiveView.querySelectorAll('.choice').forEach(function (element) {
                             var _a;
                             (_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(element);
@@ -233,7 +255,6 @@ var Drawer = /** @class */ (function () {
                     this_1.interactiveView.appendChild(button);
                 };
                 this_1 = this;
-                // 選択肢を表示
                 for (_i = 0, _a = choices.content; _i < _a.length; _i++) {
                     choice = _a[_i];
                     _loop_1(choice);
@@ -254,7 +275,6 @@ var Drawer = /** @class */ (function () {
         return __awaiter(this, arguments, void 0, function (duration, img, option) {
             if (duration === void 0) { duration = 1000; }
             return __generator(this, function (_a) {
-                (0, logger_1.outputLog)('Fade in', 'debug', duration);
                 return [2 /*return*/, this.fade(0, 1, duration, img, option)];
             });
         });
@@ -263,7 +283,6 @@ var Drawer = /** @class */ (function () {
         return __awaiter(this, arguments, void 0, function (duration, img, option) {
             if (duration === void 0) { duration = 1000; }
             return __generator(this, function (_a) {
-                (0, logger_1.outputLog)('Fade out', 'debug', duration);
                 return [2 /*return*/, this.fade(1, 0, duration, img, option)];
             });
         });
@@ -290,12 +309,10 @@ var Drawer = /** @class */ (function () {
                 else {
                     _this.fadeCtx.fillRect(0, 0, _this.fadeCanvas.width, _this.fadeCanvas.height);
                 }
-                (0, logger_1.outputLog)('Fade animation', 'debug', { progress: progress, alpha: currentAlpha });
                 if (progress < 1) {
                     requestAnimationFrame(animate);
                 }
                 else {
-                    (0, logger_1.outputLog)('Fade animation complete', 'debug');
                     _this.clear(_this.fadeCtx);
                     resolve();
                 }
@@ -329,32 +346,25 @@ var Drawer = /** @class */ (function () {
         for (var key in displayedImages) {
             _loop_2(key);
         }
+        this.adjustScale(this.gameScreen);
     };
     Drawer.prototype.moveTo = function (name, displayedImages, pos, durning) {
         var _this = this;
         return new Promise(function (resolve) {
             var target = displayedImages[name];
-            var startPos = { x: target.pos.x, y: target.pos.y };
-            var dest = { x: startPos.x + Number(pos.x), y: startPos.y + Number(pos.y) };
-            var startTime = performance.now();
-            var move = function (currentTime) {
-                var elapsedTime = (currentTime - startTime) / 1000; // 秒単位の経過時間
-                var progress = Math.min(elapsedTime / durning, 1); // 0から1の進捗
-                target.pos.x = startPos.x + (dest.x - startPos.x) * progress;
-                target.pos.y = startPos.y + (dest.y - startPos.y) * progress;
-                _this.show(displayedImages);
-                if (progress < 1) {
-                    window.requestAnimationFrame(move);
-                }
-                else {
-                    // 最終位置を正確に設定
-                    target.pos.x = dest.x;
-                    target.pos.y = dest.y;
+            var dest = { x: target.pos.x + Number(pos.x), y: target.pos.y + Number(pos.y) };
+            gsap_1.gsap.to(target.pos, {
+                x: dest.x,
+                y: dest.y,
+                duration: durning,
+                ease: 'power2.out',
+                onUpdate: function () {
                     _this.show(displayedImages);
+                },
+                onComplete: function () {
                     resolve(null);
-                }
-            };
-            window.requestAnimationFrame(move);
+                },
+            });
         });
     };
     Drawer.prototype.clear = function (ctx) {
@@ -364,7 +374,6 @@ var Drawer = /** @class */ (function () {
         ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     };
     Drawer.prototype.drawCanvas = function (img, pos, size, reverse, ctx) {
-        (0, logger_1.outputLog)('drawCanvas', 'debug', { img: img, pos: pos, size: size, reverse: reverse });
         if (ctx === undefined) {
             ctx = this.ctx;
         }
@@ -384,8 +393,15 @@ var Drawer = /** @class */ (function () {
         var scaleY = viewportHeight / originalHeight;
         // 幅と高さのうち、小さい方のスケールを選択（アスペクト比を維持）
         var scale = Math.min(scaleX, scaleY);
-        // ターゲット要素にスケールを適用
-        targetElement.style.transform = "scale(".concat(scale, ")");
+        // スケール後のサイズを計算
+        var scaledWidth = originalWidth * scale;
+        var scaledHeight = originalHeight * scale;
+        // 中央配置のための位置を計算
+        var offsetX = (viewportWidth - scaledWidth) / 2;
+        var offsetY = (viewportHeight - scaledHeight) / 2;
+        // ターゲット要素にスケールと位置を適用
+        targetElement.style.transformOrigin = 'top left';
+        targetElement.style.transform = "translate(".concat(offsetX, "px, ").concat(offsetY, "px) scale(").concat(scale, ")");
     };
     Drawer.prototype.setVisibility = function (name, isVisible) {
         var target = this.screenHtml.querySelector(name);