Skip to content

Commit 7b8d68e

Browse files
ienagaienaga
committed
#179 width/heightも調整
1 parent d1b9192 commit 7b8d68e

15 files changed

Lines changed: 269 additions & 166 deletions

‎src/js/controller/application/TransformSetting/service/TransformSettingUpdateElementSizeService.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import type { Character } from "@/core/domain/model/Character";
2+
import { Matrix } from "@next2d/geom";
3+
import { $getConcatenatedMatrix } from "@/controller/application/TransformSetting/TransformSettingUtil";
4+
5+
/**
6+
* @description 変形後のmatrixに合わせて、elementの表示サイズを更新
7+
* 変形中は既存のcanvasを引き伸ばすだけで、確定後に再描画される
8+
* Update the display size of the element according to the transformed matrix.
9+
* During transformation the existing canvas is just stretched, and it is redrawn after it is confirmed.
10+
*
11+
* @param {HTMLElement} node
12+
* @param {Character} character
13+
* @param {number} [frame=1]
14+
* @return {void}
15+
* @method
16+
* @public
17+
*/
18+
export const execute = (
19+
node: HTMLElement,
20+
character: Character,
21+
frame: number = 1
22+
): void => {
23+
24+
const rawBounds = character.getRawBounds(frame);
25+
if (!rawBounds) {
26+
return ;
27+
}
28+
29+
// 親との合成行列から、各基底ベクトルの長さを倍率として求める
30+
// 親と自身のスケールの掛け算では、親が非等方かつ自身に回転がある場合に一致しない
31+
const matrix = Matrix.multiply($getConcatenatedMatrix(), character.matrix);
32+
33+
const width = Math.ceil(Math.abs(
34+
(rawBounds.xMax - rawBounds.xMin) * Math.hypot(matrix[0], matrix[1])
35+
));
36+
const height = Math.ceil(Math.abs(
37+
(rawBounds.yMax - rawBounds.yMin) * Math.hypot(matrix[2], matrix[3])
38+
));
39+
40+
const nodeStyle = node.style;
41+
nodeStyle.setProperty("--width", `${width}px`);
42+
nodeStyle.setProperty("--height", `${height}px`);
43+
44+
// canvasはインラインのサイズが優先されるため、合わせて更新する
45+
const canvas = node.querySelector("canvas");
46+
if (canvas) {
47+
canvas.style.width = `${width}px`;
48+
canvas.style.height = `${height}px`;
49+
}
50+
};

‎src/js/controller/application/TransformSetting/usecase/TransformSettingHeightFocusOutEventUseCase.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { $updateKeyLock } from "@/shortcut/ShortcutUtil";
22
import { $clamp } from "@/global/GlobalUtil";
33
import { transformSetting } from "@/controller/domain/model/TransformSetting";
4-
import { execute as transformSettingUpdateScaleXToElementValuesUseCase } from "./TransformSettingUpdateScaleXToElementValuesUseCase";
4+
import { execute as transformSettingUpdateWidthToElementValuesUseCase } from "./TransformSettingUpdateWidthToElementValuesUseCase";
55
import { execute as transformSettingUpdateHeightToElementValuesUseCase } from "./TransformSettingUpdateHeightToElementValuesUseCase";
66
import { execute as transformSettingUpdateSizeToRedrawCanvasUseCase } from "./TransformSettingUpdateSizeToRedrawCanvasUseCase";
77

@@ -45,7 +45,7 @@ export const execute = async (event: FocusEvent): Promise<void> =>
4545
&& transformSetting.beforeWidth
4646
) {
4747
// 変形に合わせて表示を更新
48-
await transformSettingUpdateScaleXToElementValuesUseCase(scale);
48+
await transformSettingUpdateWidthToElementValuesUseCase(scale);
4949
}
5050

5151
// 変更後のmatrixで表示を更新

‎src/js/controller/application/TransformSetting/usecase/TransformSettingUpdateHeightToElementValuesUseCase.ts‎

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { execute as transformSettingUpdateScaleXElementService } from "@/control
99
import { execute as transformSettingUpdateRotationElementService } from "@/controller/application/TransformSetting/service/TransformSettingUpdateRotationElementService";
1010
import { execute as screenStandardPointDeployElementUseCase } from "@/screen/application/StandardPoint/usecase/ScreenStandardPointDeployElementUseCase";
1111
import { execute as screenDisplayObjectUpdateMaskInCanvasStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectUpdateMaskInCanvasStyleService";
12+
import { execute as transformSettingUpdateElementSizeService } from "@/controller/application/TransformSetting/service/TransformSettingUpdateElementSizeService";
1213
import { transformSetting } from "@/controller/domain/model/TransformSetting";
1314
import { referenceSetting } from "@/controller/domain/model/ReferenceSetting";
1415
import { Matrix } from "@next2d/geom";
@@ -54,8 +55,6 @@ export const execute = async (scale_y: number): Promise<void> =>
5455

5556
// 選択中のElementを移動
5657
const concatenatedMatrix = $getConcatenatedMatrix();
57-
const scaleX = Math.hypot(concatenatedMatrix[0], concatenatedMatrix[1]);
58-
const scaleY = Math.hypot(concatenatedMatrix[2], concatenatedMatrix[3]);
5958
const frame = movieClip.currentFrame;
6059
for (const [layerIndex, depths] of movieClip.selectedDepths) {
6160

@@ -95,18 +94,33 @@ export const execute = async (scale_y: number): Promise<void> =>
9594
const localX = referenceSetting.x * matrix.a + referenceSetting.y * matrix.c + matrix.tx;
9695
const localY = referenceSetting.x * matrix.b + referenceSetting.y * matrix.d + matrix.ty;
9796

98-
const rad = character.rotation * Math.PI / 180;
97+
// 高さは親空間でのAABBの高さなので、親空間のY軸方向に伸縮させる。
98+
// characterのmatrixで挟み込むことで、回転やシアーがあっても
99+
// 全ての点のy座標がscale_y倍になり、AABBの高さもscale_y倍になる。
100+
const linearMatrix = new Float32Array([
101+
character.matrix[0], character.matrix[1],
102+
character.matrix[2], character.matrix[3],
103+
0, 0
104+
]);
105+
106+
const invertMatrix = new Matrix(...linearMatrix);
107+
invertMatrix.invert();
108+
99109
const parentMatrix = Matrix.multiply(
100110
new Float32Array([1, 0, 0, 1, localX, localY]),
101111
Matrix.multiply(
102-
new Float32Array([Math.cos(-rad), Math.sin(-rad), -Math.sin(-rad), Math.cos(-rad), 0, 0]),
103112
Matrix.multiply(
104-
new Float32Array([1, 0, 0, scale_y, 0, 0]),
113+
new Float32Array([
114+
invertMatrix.a, invertMatrix.b,
115+
invertMatrix.c, invertMatrix.d,
116+
0, 0
117+
]),
105118
Matrix.multiply(
106-
new Float32Array([Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad), 0, 0]),
107-
new Float32Array([1, 0, 0, 1, -localX, -localY])
119+
new Float32Array([1, 0, 0, scale_y, 0, 0]),
120+
linearMatrix
108121
)
109-
)
122+
),
123+
new Float32Array([1, 0, 0, 1, -localX, -localY])
110124
)
111125
);
112126

@@ -126,19 +140,8 @@ export const execute = async (scale_y: number): Promise<void> =>
126140
nodeStyle.top = `${$getScreenOffsetTop() + bounds.yMin}px`;
127141
}
128142

129-
const rawBounds = character.getRawBounds();
130-
if (rawBounds) {
131-
const width = Math.ceil(Math.abs((rawBounds.xMax - rawBounds.xMin) * character.scaleX * scaleX));
132-
const height = Math.ceil(Math.abs((rawBounds.yMax - rawBounds.yMin) * character.scaleY * scaleY));
133-
nodeStyle.setProperty("--width", `${width}px`);
134-
nodeStyle.setProperty("--height", `${height}px`);
135-
136-
const canvas = node.querySelector("canvas");
137-
if (canvas) {
138-
canvas.style.width = `${width}px`;
139-
canvas.style.height = `${height}px`;
140-
}
141-
}
143+
// 変形後のmatrixに合わせて表示サイズを更新
144+
transformSettingUpdateElementSizeService(node, character, frame);
142145

143146
await screenDisplayObjectUpdateMaskInCanvasStyleService(node, layer, character);
144147

@@ -148,8 +151,15 @@ export const execute = async (scale_y: number): Promise<void> =>
148151
transformSetting.h = character.height;
149152
transformSettingUpdateHeightElementService(character.height);
150153
transformSettingUpdateRotationElementService(character.rotation);
154+
155+
// 親空間のY軸方向の伸縮なので、回転している場合はscaleXも変化する
156+
transformSetting.scaleX = character.scaleX;
157+
transformSetting.scaleY = character.scaleY;
151158
transformSettingUpdateScaleXElementService(
152-
Math.round(transformSetting.scaleX * 10000) / 100
159+
Math.round(character.scaleX * 10000) / 100
160+
);
161+
transformSettingUpdateScaleYElementService(
162+
Math.round(character.scaleY * 10000) / 100
153163
);
154164

155165
// MovieClipの基準点を再配置
@@ -161,22 +171,17 @@ export const execute = async (scale_y: number): Promise<void> =>
161171
// 変形エリアのy座標を更新
162172
if (!movieClip.isSingleSelectedOfDisplayObject()) {
163173
const bounds = screenAreaCalcSelectedBoundsService(movieClip);
164-
if (!bounds) {
165-
return ;
166-
}
167-
168174
if (bounds) {
169175
transformSettingUpdateXElementService(bounds.xMin);
170176
transformSettingUpdateYElementService(bounds.yMin);
171177
transformSetting.h = Math.round(Math.abs(bounds.yMax - bounds.yMin) * 100) / 100;
172178
transformSettingUpdateHeightElementService(transformSetting.h);
173179
}
174180

181+
// 複数選択時は個々のscaleYを表示できないので、累積値を表示する
182+
transformSetting.scaleY *= scale_y;
183+
transformSettingUpdateScaleYElementService(
184+
Math.round(transformSetting.scaleY * 10000) / 100
185+
);
175186
}
176-
177-
// 変形エリアのyスケールを更新
178-
transformSetting.scaleY *= scale_y;
179-
transformSettingUpdateScaleYElementService(
180-
Math.round(transformSetting.scaleY * 10000) / 100
181-
);
182187
};

‎src/js/controller/application/TransformSetting/usecase/TransformSettingUpdateRotateToElementValuesUseCase.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { execute as transformSettingUpdateScaleXElementService } from "@/control
99
import { execute as transformSettingUpdateScaleYElementService } from "@/controller/application/TransformSetting/service/TransformSettingUpdateScaleYElementService";
1010
import { execute as screenStandardPointDeployElementUseCase } from "@/screen/application/StandardPoint/usecase/ScreenStandardPointDeployElementUseCase";
1111
import { execute as screenDisplayObjectUpdateMaskInCanvasStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectUpdateMaskInCanvasStyleService";
12+
import { execute as transformSettingUpdateElementSizeService } from "@/controller/application/TransformSetting/service/TransformSettingUpdateElementSizeService";
1213
import { Matrix } from "@next2d/geom";
1314
import { referenceSetting } from "@/controller/domain/model/ReferenceSetting";
1415
import { $getCurrentWorkSpace } from "@/core/application/CoreUtil";
@@ -130,6 +131,9 @@ export const execute = async (rotation: number): Promise<void> =>
130131
nodeStyle.top = `${$getScreenOffsetTop() + bounds.yMin}px`;
131132
}
132133

134+
// 変形後のmatrixに合わせて表示サイズを更新
135+
transformSettingUpdateElementSizeService(node, character, frame);
136+
133137
// マスクを更新
134138
await screenDisplayObjectUpdateMaskInCanvasStyleService(node, layer, character);
135139

‎src/js/controller/application/TransformSetting/usecase/TransformSettingUpdateScaleXToElementValuesUseCase.ts‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { execute as transformSettingUpdateHeightElementService } from "@/control
1010
import { execute as transformSettingUpdateScaleXElementService } from "@/controller/application/TransformSetting/service/TransformSettingUpdateScaleXElementService";
1111
import { execute as screenStandardPointDeployElementUseCase } from "@/screen/application/StandardPoint/usecase/ScreenStandardPointDeployElementUseCase";
1212
import { execute as screenDisplayObjectUpdateMaskInCanvasStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectUpdateMaskInCanvasStyleService";
13+
import { execute as transformSettingUpdateElementSizeService } from "@/controller/application/TransformSetting/service/TransformSettingUpdateElementSizeService";
1314
import { transformSetting } from "@/controller/domain/model/TransformSetting";
1415
import { referenceSetting } from "@/controller/domain/model/ReferenceSetting";
1516
import { Matrix } from "@next2d/geom";
@@ -22,7 +23,6 @@ import {
2223
$getScreenOffsetLeft,
2324
$getScreenOffsetTop
2425
} from "@/global/GlobalUtil";
25-
import { $MOVIE_CLIP_TYPE } from "@/config/InstanceConfig";
2626

2727
/**
2828
* @description スクリーンで選択中のElementをmatrixに合わせて変形させる
@@ -56,8 +56,6 @@ export const execute = async (scale_x: number): Promise<void> =>
5656

5757
// 選択中のElementを移動
5858
const concatenatedMatrix = $getConcatenatedMatrix();
59-
const scaleX = Math.hypot(concatenatedMatrix[0], concatenatedMatrix[1]);
60-
const scaleY = Math.hypot(concatenatedMatrix[2], concatenatedMatrix[3]);
6159
const frame = movieClip.currentFrame;
6260
for (const [layerIndex, depths] of movieClip.selectedDepths) {
6361

@@ -120,22 +118,8 @@ export const execute = async (scale_x: number): Promise<void> =>
120118
nodeStyle.top = `${$getScreenOffsetTop() + bounds.yMin}px`;
121119
}
122120

123-
const rawBounds = character.getRawBounds();
124-
if (rawBounds && instance) {
125-
const width = Math.ceil(Math.abs((rawBounds.xMax - rawBounds.xMin) * character.scaleX * scaleX));
126-
const height = Math.ceil(Math.abs((rawBounds.yMax - rawBounds.yMin) * character.scaleY * scaleY));
127-
128-
if (instance.type !== $MOVIE_CLIP_TYPE) {
129-
nodeStyle.setProperty("--width", `${width}px`);
130-
nodeStyle.setProperty("--height", `${height}px`);
131-
132-
const canvas = node.querySelector("canvas");
133-
if (canvas) {
134-
canvas.style.width = `${width}px`;
135-
canvas.style.height = `${height}px`;
136-
}
137-
}
138-
}
121+
// 変形後のmatrixに合わせて表示サイズを更新
122+
transformSettingUpdateElementSizeService(node, character, frame);
139123

140124
await screenDisplayObjectUpdateMaskInCanvasStyleService(node, layer, character);
141125

‎src/js/controller/application/TransformSetting/usecase/TransformSettingUpdateScaleYToElementValuesUseCase.ts‎

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { execute as transformSettingUpdateScaleXElementService } from "@/control
1010
import { execute as transformSettingUpdateRotationElementService } from "@/controller/application/TransformSetting/service/TransformSettingUpdateRotationElementService";
1111
import { execute as screenStandardPointDeployElementUseCase } from "@/screen/application/StandardPoint/usecase/ScreenStandardPointDeployElementUseCase";
1212
import { execute as screenDisplayObjectUpdateMaskInCanvasStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectUpdateMaskInCanvasStyleService";
13+
import { execute as transformSettingUpdateElementSizeService } from "@/controller/application/TransformSetting/service/TransformSettingUpdateElementSizeService";
1314
import { referenceSetting } from "@/controller/domain/model/ReferenceSetting";
1415
import { transformSetting } from "@/controller/domain/model/TransformSetting";
1516
import { $getCurrentWorkSpace } from "@/core/application/CoreUtil";
@@ -22,7 +23,6 @@ import {
2223
$createTransformElementStyle,
2324
$getConcatenatedMatrix
2425
} from "@/controller/application/TransformSetting/TransformSettingUtil";
25-
import { $MOVIE_CLIP_TYPE } from "@/config/InstanceConfig";
2626

2727
/**
2828
* @description スクリーンで選択中のElementをmatrixに合わせて変形させる
@@ -56,8 +56,6 @@ export const execute = async (scale_y: number): Promise<void> =>
5656

5757
// 選択中のElementを移動
5858
const concatenatedMatrix = $getConcatenatedMatrix();
59-
const scaleX = Math.hypot(concatenatedMatrix[0], concatenatedMatrix[1]);
60-
const scaleY = Math.hypot(concatenatedMatrix[2], concatenatedMatrix[3]);
6159
const frame = movieClip.currentFrame;
6260
for (const [layerIndex, depths] of movieClip.selectedDepths) {
6361

@@ -121,24 +119,8 @@ export const execute = async (scale_y: number): Promise<void> =>
121119
nodeStyle.top = `${$getScreenOffsetTop() + bounds.yMin}px`;
122120
}
123121

124-
const rawBounds = character.getRawBounds();
125-
const canvas = node.querySelector("canvas");
126-
if (canvas && rawBounds) {
127-
if (instance.type === $MOVIE_CLIP_TYPE) {
128-
// rawBoundsにmatrixを適用(回転含む)して、widthとheightを計算する
129-
canvas.style.width = `${Math.abs(rawBounds.xMax - rawBounds.xMin) * character.scaleX}px`;
130-
canvas.style.height = `${Math.abs(rawBounds.yMax - rawBounds.yMin) * character.scaleY}px`;
131-
} else {
132-
const width = Math.ceil(Math.abs((rawBounds.xMax - rawBounds.xMin) * character.scaleX * scaleX));
133-
const height = Math.ceil(Math.abs((rawBounds.yMax - rawBounds.yMin) * character.scaleY * scaleY));
134-
135-
nodeStyle.setProperty("--width", `${width}px`);
136-
nodeStyle.setProperty("--height", `${height}px`);
137-
138-
canvas.style.width = `${width}px`;
139-
canvas.style.height = `${height}px`;
140-
}
141-
}
122+
// 変形後のmatrixに合わせて表示サイズを更新
123+
transformSettingUpdateElementSizeService(node, character, frame);
142124

143125
await screenDisplayObjectUpdateMaskInCanvasStyleService(node, layer, character);
144126

0 commit comments

Comments
 (0)