🎨

src/client/directives/get-size.ts

@@ -0,0 +1,34 @@
+import { Directive } from 'vue';
+
+export default {
+	mounted(src, binding, vn) {
+		const calc = () => {
+			const height = src.clientHeight;
+			const width = src.clientWidth;
+
+			// 要素が(一時的に)DOMに存在しないときは計算スキップ
+			if (height === 0) return;
+
+			binding.value(width, height);
+		};
+
+		calc();
+
+		// Vue3では使えなくなった
+		// 無くても大丈夫か...？
+		// TODO: ↑大丈夫じゃなかったので解決策を探す
+		//vn.context.$on('hook:activated', calc);
+
+		const ro = new ResizeObserver((entries, observer) => {
+			calc();
+		});
+		ro.observe(src);
+
+		src._get_size_ro_ = ro;
+	},
+
+	unmounted(src, binding, vn) {
+		binding.value(0, 0);
+		src._get_size_ro_.unobserve(src);
+	}
+} as Directive;

src/client/directives/index.ts

@@ -2,6 +2,7 @@ import { App } from 'vue';
 
 import userPreview from './user-preview';
 import size from './size';
+import getSize from './get-size';
 import particle from './particle';
 import tooltip from './tooltip';
 import hotkey from './hotkey';
@@ -14,6 +15,7 @@ export default function(app: App) {
 	app.directive('userPreview', userPreview);
 	app.directive('user-preview', userPreview);
 	app.directive('size', size);
+	app.directive('get-size', getSize);
 	app.directive('particle', particle);
 	app.directive('tooltip', tooltip);
 	app.directive('hotkey', hotkey);