Merge pull request #1 from masuP9/feature/follow-image-size-change

Fix form position when change image size and add/remove element in editor

src/scripts/actions.ts

@@ -17,4 +17,13 @@ export function deselectImageAction(): DeselectImageAction {
  return { type: DESELECT_IMAGE };
 }
 
-export type ActionTypes = SelectImageAction | DeselectImageAction;
+export const CHANGE_SIZE_IMAGE = 'CHANGE_SIZE_IMAGE';
+export type ChangeSizeImageAction = {
+ type: typeof CHANGE_SIZE_IMAGE;
+};
+
+export function changeSizeImageAction(): ChangeSizeImageAction {
+ return { type: CHANGE_SIZE_IMAGE };
+}
+
+export type ActionTypes = SelectImageAction | DeselectImageAction | ChangeSizeImageAction;

src/scripts/main.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import ReactDom from 'react-dom';
 import { Provider } from 'react-redux';
 import { store } from './store';
-import { selectImageAction } from './actions';
 import App from './components/App';
+import { noteBodyObserver } from './observers';
 
 window.onload = (_e: Event): void => {
  const noteBody = document.getElementById('note-body');
@@ -17,19 +17,5 @@ window.onload = (_e: Event): void => {
  rootApp,
  );
 
- const noteBodyObserver = new MutationObserver((records) => {
- records.forEach((record) => {
- const addImages = Array.from(record.addedNodes)
- .map((node) => node.firstChild)
- .filter((node) => node.nodeName === 'IMG');
-
- addImages.forEach((image) => {
- image.addEventListener('click', (e) => {
- store.dispatch(selectImageAction(e.target as HTMLImageElement));
- });
- });
- });
- });
-
  noteBodyObserver.observe(noteBody, { childList: true });
 };

src/scripts/observers.ts

@@ -0,0 +1,49 @@
+import { store } from './store';
+import { selectImageAction, deselectImageAction, changeSizeImageAction } from './actions';
+
+export const imageObserver = new MutationObserver((records) => {
+ records.forEach((record) => {
+ const { type, target, oldValue, attributeName } = record;
+ if (
+ type === 'attributes' &&
+ target.nodeName === 'IMG' &&
+ oldValue !== (target as HTMLImageElement).getAttribute(attributeName)
+ ) {
+ store.dispatch(changeSizeImageAction());
+ }
+ });
+});
+
+function handleClickAddedImage(e: Event) {
+ store.dispatch(selectImageAction(e.target as HTMLImageElement));
+}
+
+export const noteBodyObserver = new MutationObserver((records) => {
+ records.forEach((record) => {
+ if (record.addedNodes.length > 0) {
+ const addImages = Array.from(record.addedNodes)
+ .map((node) => node.firstChild)
+ .filter((node) => node.nodeName === 'IMG');
+
+ addImages.forEach((image) => {
+ image.addEventListener('click', handleClickAddedImage);
+ imageObserver.observe(image, { attributeFilter: ['style'] });
+ });
+
+ store.dispatch(deselectImageAction());
+ }
+
+ if (record.removedNodes.length > 0) {
+ // 削除された Image へのイベントを削除
+ const removedImages = Array.from(record.removedNodes)
+ .map((node) => node.firstChild)
+ .filter((node) => node.nodeName === 'IMG');
+
+ removedImages.forEach((image, i, self) => {
+ image.removeEventListener('click', handleClickAddedImage);
+ });
+
+ store.dispatch(deselectImageAction());
+ }
+ });
+});

src/scripts/reducer.ts

@@ -1,5 +1,5 @@
 import { combineReducers } from 'redux';
-import { DESELECT_IMAGE, SELECT_IMAGE, ActionTypes } from './actions';
+import { DESELECT_IMAGE, SELECT_IMAGE, ActionTypes, CHANGE_SIZE_IMAGE } from './actions';
 
 export type Position = {
  left: number;
@@ -23,7 +23,7 @@ type Action = ActionTypes;
 
 export function imageReducer(state = initialState, action: Action) {
  switch (action.type) {
- case SELECT_IMAGE:
+ case SELECT_IMAGE: {
  const imageRect = action.payload.getBoundingClientRect();
  return {
  ...state,
@@ -33,8 +33,20 @@ export function imageReducer(state = initialState, action: Action) {
  top: imageRect.top,
  },
  };
- case DESELECT_IMAGE:
+ }
+ case DESELECT_IMAGE: {
  return { ...state, selectedImage: null };
+ }
+ case CHANGE_SIZE_IMAGE: {
+ const imageRect = state.selectedImage.getBoundingClientRect();
+ return {
+ ...state,
+ position: {
+ left: imageRect.right + 12,
+ top: imageRect.top,
+ },
+ };
+ }
  default:
  return state;
  }