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 16, 2024
1 parent dc00506 commit 59f607b
Show file tree
Hide file tree
Showing 10 changed files with 138 additions and 35 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { execute as screenDisplayObjectChangeElementClassService } from "@/scree
import { execute as targetRectUpdateElementUseCase } from "@/screen/application/TargetRect/usecase/TargetRectUpdateElementUseCase";
import { execute as screenStandardPointDeployElementUseCase } from "@/screen/application/StandardPoint/usecase/ScreenStandardPointDeployElementUseCase";
import { execute as propertyAreaChangeDisplayUseCase } from "@/controller/application/PropertyArea/usecase/PropertyAreaChangeDisplayUseCase";
import { execute as screenDisplayObjectUpdateMaskAndMaskInElementUseCase } from "@/screen/application/DisplayObject/usecase/ScreenDisplayObjectUpdateMaskAndMaskInElementUseCase";

/**
* @description レイヤーのロック情報を更新
Expand All @@ -23,13 +24,13 @@ import { execute as propertyAreaChangeDisplayUseCase } from "@/controller/applic
* @method
* @public
*/
export const execute = (
export const execute = async (
work_space: WorkSpace,
movie_clip: MovieClip,
layer: Layer,
value: boolean,
receiver: boolean = false
): void => {
): Promise<void> => {

// 外部APIを起動
const externalLayer = new ExternalLayer(
Expand Down Expand Up @@ -65,6 +66,9 @@ export const execute = (

// プロパティエリアの表示を更新
propertyAreaChangeDisplayUseCase();

// マスクレイヤーなら、子レイヤーの表示を更新
await screenDisplayObjectUpdateMaskAndMaskInElementUseCase(movie_clip, layer);
}

// 受け取り処理ではなく、画面共有していれば共有者に送信
Expand Down
4 changes: 2 additions & 2 deletions src/js/external/core/domain/model/ExternalLayer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -129,9 +129,9 @@ export class ExternalLayer
* @method
* @public
*/
setLock (lock: boolean, receiver: boolean = false): void
async setLock (lock: boolean, receiver: boolean = false): Promise<void>
{
externalLayerUpdateLockUseCase(
await externalLayerUpdateLockUseCase(
this._$workSpace, this._$movieClip, this._$layer, lock, receiver
);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { $getCacheCanvas, $setCacheCanvas } from "@/cache/CacheUtil";
import { $getConcatenatedMatrix } from "@/controller/application/TransformSetting/TransformSettingUtil";
import { $getCurrentWorkSpace } from "@/core/application/CoreUtil";
import type { Layer } from "@/core/domain/model/Layer";

Expand All @@ -23,14 +24,10 @@ export const execute = async (

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

if (layer.parentId === -1) {
return ;
Expand Down Expand Up @@ -69,7 +66,7 @@ export const execute = async (
}

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

if (!canvas.dataset.base64) {
Expand All @@ -83,12 +80,18 @@ export const execute = async (
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`;
const concatenatedMatrix = $getConcatenatedMatrix();
const matrix = new next2d.geom.Matrix(
concatenatedMatrix[0], concatenatedMatrix[1], concatenatedMatrix[2],
concatenatedMatrix[3], concatenatedMatrix[4], concatenatedMatrix[5]
);
matrix.invert();

const localX = dx * matrix.a + dy * matrix.c + matrix.tx;
const localY = dx * matrix.b + dy * matrix.d + matrix.ty;

style.mask = style.webkitMask = `url(${base64}), none`;
style.maskSize = style.webkitMaskSize = `${width}px ${height}px`;
style.maskRepeat = style.webkitMaskRepeat = "no-repeat";
style.maskPosition = style.webkitMaskPosition = `${localX}px ${localY}px`;
};
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { $getCurrentWorkSpace } from "@/core/application/CoreUtil";
import { $SCREEN_STAGE_AREA_ID } from "@/config/ScreenConfig";
import { execute as screenDisplayObjectUpdateMaskStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectUpdateMaskStyleService";
import { $getScreenOffsetLeft, $getScreenOffsetTop } from "@/global/GlobalUtil";
import { transformSetting } from "@/controller/domain/model/TransformSetting";

/**
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import { $MASK_MODE } from "@/config/LayerModeConfig";
import { $SCREEN_STAGE_AREA_ID } from "@/config/ScreenConfig";
import type { Layer } from "@/core/domain/model/Layer";
import type { MovieClip } from "@/core/domain/model/MovieClip";
import { execute as screenDisplayObjectUpdateMaskStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectUpdateMaskStyleService";
import { execute as screenAreaAppendCharacterService } from "@/screen/application/ScreenArea/service/ScreenAreaAppendCharacterService";

/**
* @description マスクの表示と子のレイヤーの表示を更新
* Update mask display and child layer display
*
* @param {MovieClip} movie_clip
* @param {Layer} layer
* @return {Promise}
* @method
* @public
*/
export const execute = async (movie_clip: MovieClip, layer: Layer): Promise<void> =>
{
if (layer.mode !== $MASK_MODE) {
return ;
}

const element: HTMLElement | null = document
.getElementById($SCREEN_STAGE_AREA_ID);

if (!element) {
return ;
}

const elements = element
.querySelectorAll(`.layer-id-${layer.id}`);

if (layer.lock) {
const length = elements.length;
for (let idx = 0; idx < length; ++idx) {
const node = elements[idx] as HTMLElement;
if (!node) {
continue ;
}

node.remove();
}
} else {
if (elements.length) {
return ;
}

const activeCharacters = layer.getActiveCharacters(movie_clip.currentFrame);
if (!activeCharacters.length) {
return ;
}

for (let idx = 0; activeCharacters.length > idx; ++idx) {
const character = activeCharacters[idx];
if (!character) {
continue;
}

await screenAreaAppendCharacterService(character, layer);
}
}

const index = movie_clip.layers.indexOf(layer);
for (let idx = index + 1; movie_clip.layers.length > idx; ++idx) {

const childLayer = movie_clip.layers[idx];

const activeCharacters = childLayer.getActiveCharacters(movie_clip.currentFrame);
if (!activeCharacters.length) {
continue;
}

const elements = element
.querySelectorAll(`.layer-id-${childLayer.id}`);

for (let idx = 0; idx < activeCharacters.length; ++idx) {

const character = activeCharacters[idx];
if (!character) {
continue;
}

const element = elements[character.depth] as HTMLElement;
if (!element) {
continue;
}

screenDisplayObjectUpdateMaskStyleService(
element,
childLayer,
character.x,
character.y
);
}
}
};
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ import { ExternalLayer } from "@/external/core/domain/model/ExternalLayer";
* Update layer locks
*
* @param {object} message
* @return {void}
* @return {Promise}
* @method
* @public
*/
export const execute = (message: ShareReceiveMessageImpl): void =>
export const execute = async (message: ShareReceiveMessageImpl): Promise<void> =>
{
const id = message.data[0] as NonNullable<number>;

Expand All @@ -36,7 +36,7 @@ export const execute = (message: ShareReceiveMessageImpl): void =>

// 外部APIを起動
const externalLayer = new ExternalLayer(workSpace, movieClip, layer);
externalLayer.setLock(
await externalLayer.setLock(
message.data[3] as NonNullable<boolean>,
true
);
Expand Down
2 changes: 1 addition & 1 deletion src/js/share/usecase/ShareReceiveUseCase.ts
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ export const execute = async (message: ShareReceiveMessageImpl): Promise<void> =

// レイヤーのロックを更新
case $LAYER_LOCK_UPDATE_COMMAND:
timelineLayerControllerLayerLockUpdateReceiveService(message);
await timelineLayerControllerLayerLockUpdateReceiveService(message);
break;

// レイヤー表示を更新
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ import { ExternalLayer } from "@/external/core/domain/model/ExternalLayer";
* Layer lock icon event handling
*
* @param {PointerEvent} event
* @return {void}
* @return {Promise}
* @method
* @public
*/
export const execute = (event: PointerEvent): void =>
export const execute = async (event: PointerEvent): Promise<void> =>
{
if (event.button !== 0) {
return ;
Expand Down Expand Up @@ -50,5 +50,5 @@ export const execute = (event: PointerEvent): void =>
const externalLayer = new ExternalLayer(workSpace, workSpace.scene, layer);

// Layerオブジェクトの値を更新
externalLayer.setLock(!layer.lock);
await externalLayer.setLock(!layer.lock);
};
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import { ExternalLayer } from "@/external/core/domain/model/ExternalLayer";
* Processing functions for successive locking functions
*
* @param {PointerEvent} event
* @return {void}
* @return {Promise}
* @method
* @public
*/
export const execute = (event: PointerEvent): void =>
export const execute = async (event: PointerEvent): Promise<void> =>
{
if (!$getLockState()) {
return ;
Expand All @@ -32,5 +32,5 @@ export const execute = (event: PointerEvent): void =>
const workSpace = $getCurrentWorkSpace();
const externalLayer = new ExternalLayer(workSpace, workSpace.scene, layer);

externalLayer.setLock(!layer.lock);
await externalLayer.setLock(!layer.lock);
};
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ import { ExternalLayer } from "@/external/core/domain/model/ExternalLayer";
* Timeline-wide lock tool event registration
*
* @param {PointerEvent} event
* @return {void}
* @return {Promise}
* @method
* @public
*/
export const execute = (event: PointerEvent): void =>
export const execute = async (event: PointerEvent): Promise<void> =>
{
if (event.button !== 0) {
return;
Expand All @@ -40,7 +40,7 @@ export const execute = (event: PointerEvent): void =>

// 外部APIを起動
const externalLayer = new ExternalLayer(workSpace, scene, layer);
externalLayer.setLock(mode);
await externalLayer.setLock(mode);
}

// モードを更新
Expand Down

0 comments on commit 59f607b

Please sign in to comment.