Skip to content

Commit

Permalink
#147 feat: マスク描画の実装(WIP)
Browse files Browse the repository at this point in the history
  • Loading branch information
ienaga committed Jul 15, 2024
1 parent ab50843 commit dc00506
Show file tree
Hide file tree
Showing 13 changed files with 150 additions and 112 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { transformSetting } from "@/controller/domain/model/TransformSetting";
import { $clamp, $setCursor } from "@/global/GlobalUtil";
import { execute as screenDisplayObjectSelectedMoveElementService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectSelectedMoveElementService";
import { execute as screenDisplayObjectSelectedMoveElementUseCase } from "@/screen/application/DisplayObject/usecase/ScreenDisplayObjectSelectedMoveElementUseCase";
import { execute as targetRectMoveElementService } from "@/screen/application/TargetRect/service/TargetRectMoveElementService";
import { execute as screenStandardPointMoveElementService } from "@/screen/application/StandardPoint/service/ScreenStandardPointMoveElementService";
import { $getCurrentWorkSpace } from "@/core/application/CoreUtil";
Expand Down Expand Up @@ -47,7 +47,7 @@ export const execute = (event: PointerEvent): void =>
transformSetting.x += movementX;

// スクリーンで選択中のElementを移動
screenDisplayObjectSelectedMoveElementService(
screenDisplayObjectSelectedMoveElementUseCase(
movementX, 0
);

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { transformSetting } from "@/controller/domain/model/TransformSetting";
import { $clamp, $setCursor } from "@/global/GlobalUtil";
import { execute as screenDisplayObjectSelectedMoveElementService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectSelectedMoveElementService";
import { execute as screenDisplayObjectSelectedMoveElementUseCase } from "@/screen/application/DisplayObject/usecase/ScreenDisplayObjectSelectedMoveElementUseCase";
import { execute as targetRectMoveElementService } from "@/screen/application/TargetRect/service/TargetRectMoveElementService";
import { execute as screenStandardPointMoveElementService } from "@/screen/application/StandardPoint/service/ScreenStandardPointMoveElementService";
import { $getCurrentWorkSpace } from "@/core/application/CoreUtil";
Expand Down Expand Up @@ -47,7 +47,7 @@ export const execute = (event: PointerEvent): void =>
transformSetting.y += movementX;

// スクリーンで選択中のElementを移動
screenDisplayObjectSelectedMoveElementService(
screenDisplayObjectSelectedMoveElementUseCase(
0, movementX
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,13 @@ import { $getCurrentWorkSpace } from "../../CoreUtil";
*
* @params {Character} character
* @params {number} layer_id
* @params {string} [mask_style=""]
* @return {string}
* @method
* @public
*/
export const execute = (
character: Character,
layer_id: number,
mask_style: string = ""
layer_id: number
): string => {

// 変形スタイルを生成
Expand All @@ -30,6 +28,6 @@ export const execute = (
const depth = character.depth;

return `
<div class="display-object layer-id-${layer_id}" data-depth="${depth}" data-layer-id="${layer_id}" style="left: ${x}px; top: ${y}px; opacity: ${alpha}; ${mask_style} ${transform}"></div>
<div class="display-object layer-id-${layer_id}" data-depth="${depth}" data-layer-id="${layer_id}" style="left: ${x}px; top: ${y}px; opacity: ${alpha}; ${transform}"></div>
`;
};
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { execute as instanceUpdateBlendModeService } from "@/core/application/In
import { execute as screenAreaHierarchyAdjustmentService } from "@/screen/application/ScreenArea/service/ScreenAreaHierarchyAdjustmentService";
import { $getDeactivated, $getReDrawState } from "@/screen/application/ScreenArea/ScreenAreaUtil";
import { execute as screenAreaReadOnlyElementService } from "@/screen/application/ScreenArea/service/ScreenAreaReadOnlyElementService";
import { execute as screenDisplayObjectGetMaskStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectGetMaskStyleService";
import { execute as screenDisplayObjectUpdateMaskStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectUpdateMaskStyleService";

/**
* @description Bitmapをcanvasに描画して返却する
Expand Down Expand Up @@ -49,17 +49,17 @@ export const execute = async (
// ブレンドモードを設定
instanceUpdateBlendModeService(canvas, character.blendMode);

// マスクのスタイルを取得
const maskStyle = await screenDisplayObjectGetMaskStyleService(character, layer);

// ステージに追加
element.insertAdjacentHTML("beforeend",
bitmapDisplayObjectComponent(character, layer.id, maskStyle)
bitmapDisplayObjectComponent(character, layer.id)
);

const div = element.lastElementChild as HTMLDivElement;
div.appendChild(canvas);

// マスクのスタイルを更新
await screenDisplayObjectUpdateMaskStyleService(div, layer, character.x, character.y);

// 追加するDisplayObjectのレイヤーの階層を調整
if (!$getReDrawState()) {
screenAreaHierarchyAdjustmentService(element, div, layer);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,13 @@ import { $createTransformStyle } from "@/controller/application/TransformSetting
*
* @params {Character} character
* @params {number} layer_id
* @params {string} [mask_style=""]
* @return {string}
* @method
* @public
*/
export const execute = (
character: Character,
layer_id: number,
mask_style: string = ""
layer_id: number
): string => {

// 変形スタイルを生成
Expand All @@ -30,6 +28,6 @@ export const execute = (
const depth = character.depth;

return `
<div class="display-object layer-id-${layer_id}" data-depth="${depth}" data-layer-id="${layer_id}" style="left: ${x}px; top: ${y}px; opacity: ${alpha}; ${mask_style} ${transform}"></div>
<div class="display-object layer-id-${layer_id}" data-depth="${depth}" data-layer-id="${layer_id}" style="left: ${x}px; top: ${y}px; opacity: ${alpha}; ${transform}"></div>
`;
};
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { execute as instanceUpdateBlendModeService } from "@/core/application/In
import { execute as screenAreaHierarchyAdjustmentService } from "@/screen/application/ScreenArea/service/ScreenAreaHierarchyAdjustmentService";
import { $getDeactivated, $getReDrawState } from "@/screen/application/ScreenArea/ScreenAreaUtil";
import { execute as screenAreaReadOnlyElementService } from "@/screen/application/ScreenArea/service/ScreenAreaReadOnlyElementService";
import { execute as screenDisplayObjectGetMaskStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectGetMaskStyleService";
import { execute as screenDisplayObjectUpdateMaskStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectUpdateMaskStyleService";

/**
* @description MovieClipをcanvasに描画して返却する
Expand Down Expand Up @@ -46,17 +46,17 @@ export const execute = async (
// ブレンドモードを設定
instanceUpdateBlendModeService(canvas, character.blendMode);

// マスクのスタイルを取得
const maskStyle = await screenDisplayObjectGetMaskStyleService(character, layer);

// ステージに追加
element.insertAdjacentHTML("beforeend",
movieClipDisplayObjectComponent(character, layer.id, maskStyle)
movieClipDisplayObjectComponent(character, layer.id)
);

const div = element.lastElementChild as HTMLDivElement;
div.appendChild(canvas);

// マスクのスタイルを更新
await screenDisplayObjectUpdateMaskStyleService(div, layer, character.x, character.y);

// 追加するDisplayObjectのレイヤーの階層を調整
if (!$getReDrawState()) {
screenAreaHierarchyAdjustmentService(element, div, layer);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,13 @@ import { $createTransformStyle } from "@/controller/application/TransformSetting
*
* @params {Character} character
* @params {number} layer_id
* @params {string} [mask_style=""]
* @return {string}
* @method
* @public
*/
export const execute = (
character: Character,
layer_id: number,
mask_style: string = ""
layer_id: number
): string => {

// 変形スタイルを生成
Expand All @@ -30,6 +28,6 @@ export const execute = (
const depth = character.depth;

return `
<div class="display-object layer-id-${layer_id}" data-depth="${depth}" data-layer-id="${layer_id}" style="left: ${x}px; top: ${y}px; opacity: ${alpha}; ${mask_style} ${transform}"></div>
<div class="display-object layer-id-${layer_id}" data-depth="${depth}" data-layer-id="${layer_id}" style="left: ${x}px; top: ${y}px; opacity: ${alpha}; ${transform}"></div>
`;
};
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { execute as screenAreaHierarchyAdjustmentService } from "@/screen/applic
import { execute as screenAreaReadOnlyElementService } from "@/screen/application/ScreenArea/service/ScreenAreaReadOnlyElementService";
import { execute as instanceUpdateBlendModeService } from "@/core/application/Instance/service/InstanceUpdateBlendModeService";
import { $getDeactivated, $getReDrawState } from "@/screen/application/ScreenArea/ScreenAreaUtil";
import { execute as screenDisplayObjectGetMaskStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectGetMaskStyleService";
import { execute as screenDisplayObjectUpdateMaskStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectUpdateMaskStyleService";

/**
* @description Shapeをcanvasに描画して返却する
Expand Down Expand Up @@ -46,17 +46,17 @@ export const execute = async (
// ブレンドモードを設定
instanceUpdateBlendModeService(canvas, character.blendMode);

// マスクのスタイルを取得
const maskStyle = await screenDisplayObjectGetMaskStyleService(character, layer);

// ステージに追加
element.insertAdjacentHTML("beforeend",
shapeDisplayObjectComponent(character, layer.id, maskStyle)
shapeDisplayObjectComponent(character, layer.id)
);

const div = element.lastElementChild as HTMLDivElement;
div.appendChild(canvas);

// マスクのスタイルを更新
await screenDisplayObjectUpdateMaskStyleService(div, layer, character.x, character.y);

// 追加するDisplayObjectのレイヤーの階層を調整
if (!$getReDrawState()) {
screenAreaHierarchyAdjustmentService(element, div, layer);
Expand Down
7 changes: 5 additions & 2 deletions src/js/global/GlobalUtil.ts
Original file line number Diff line number Diff line change
Expand Up @@ -150,11 +150,14 @@ export const $getCanvas = (): HTMLCanvasElement =>
*/
export const $poolCanvas = (canvas: HTMLCanvasElement): void =>
{
// canvas reset
// キャンバスの描画をリセット
canvas.width = canvas.height = 1;

// pool
// キャッシュするcanvasの内部データを初期化
canvas.dataset.base64 = "";
canvas.setAttribute("class", "");
canvas.setAttribute("style", "");

// キャッシュ登録
$canvasPool.push(canvas);
};

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import { $getCacheCanvas, $setCacheCanvas } from "@/cache/CacheUtil";
import { $getCurrentWorkSpace } from "@/core/application/CoreUtil";
import type { Layer } from "@/core/domain/model/Layer";

/**
* @description マスクスタイルを取得
* Get mask style
*
* @param {HTMLElement} element
* @param {Layer} layer
* @param {number} x
* @param {number} y
* @return {Promise}
* @method
* @public
*/
export const execute = async (
element: HTMLElement,
layer: Layer,
x: number,
y: number
): Promise<void> => {

// styleを初期化
const style = element.style;
style.mask = "";
style.webkitMask = "";
style.maskSize = "";
style.webkitMaskSize = "";
style.maskRepeat = "";
style.webkitMaskRepeat = "";
style.maskPosition = "";
style.webkitMaskPosition = "";

if (layer.parentId === -1) {
return ;
}

const workSpace = $getCurrentWorkSpace();
const movieClip = workSpace.scene;

const maskLayer = movieClip.getLayerById(layer.parentId);
if (!maskLayer || !maskLayer.lock) {
return ;
}

const activeCharacters = maskLayer.getActiveCharacters(movieClip.currentFrame);
if (!activeCharacters.length) {
return ;
}

const maskCharacter = activeCharacters[0];
if (!maskCharacter) {
return ;
}

const instance = workSpace.getLibrary(maskCharacter.libraryId);
if (!instance) {
return ;
}

const cacheKey = maskCharacter.cacheKey;

let canvas = $getCacheCanvas(workSpace.id, instance.id, cacheKey);
if (!canvas) {
canvas = await instance.getHTMLElement();
if (!canvas) {
return ;
}

// キャッシュに保存
$setCacheCanvas(workSpace.id, instance.id, cacheKey, canvas);
}

if (!canvas.dataset.base64) {
canvas.dataset.base64 = canvas.toDataURL();
}

const base64 = canvas.dataset.base64;
const scale = window.devicePixelRatio;
const width = canvas.width / scale;
const height = canvas.height / scale;
const dx = maskCharacter.x - x;
const dy = maskCharacter.y - y;

style.mask = `url(${base64}), none`;
style.webkitMask = `url(${base64}), none`;
style.maskSize = `${width}px ${height}px`;
style.webkitMaskSize = `${width}px ${height}px`;
style.maskRepeat = "no-repeat";
style.webkitMaskRepeat = "no-repeat";
style.maskPosition = `${dx}px ${dy}px`;
style.webkitMaskPosition = `${dx}px ${dy}px`;
};
Loading

0 comments on commit dc00506

Please sign in to comment.