itmar-block-packages 1.1.0 → 1.2.0

package/src/DraggableBox.js

@@ -7,6 +7,94 @@ import {
   __experimentalUnitControl as UnitControl,
 } from "@wordpress/components";
 
+import { useEffect, useRef } from "@wordpress/element";
+
+export const useDraggingMove = (
+  isMovable,
+  blockRef,
+  position,
+  onPositionChange
+) => {
+  const elmposition = useRef({ x: 0, y: 0 });
+  const isDragging = useRef(false);
+  const mousePosition = useRef({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const element = blockRef.current;
+
+    if (!isMovable) {
+      if (element) {
+        element.classList.remove("itmar_isDraggable"); //移動カーソル表示クラス削除
+      }
+      return; // 移動許可がある場合のみ、後続のロジックを実行
+    }
+    //positionの変化に合わせて現在位置を変更
+    const pos_value_x = position.x.match(/(-?\d+)([%a-zA-Z]+)/);
+    const pos_value_y = position.y.match(/(-?\d+)([%a-zA-Z]+)/);
+    elmposition.current = {
+      x: parseInt(pos_value_x[1]),
+      y: parseInt(pos_value_y[1]),
+    };
+
+    //イベントハンドラ
+    const handleMouseDown = (event) => {
+      // 移動カーソル表示クラス名を追加します。
+      element.classList.add("itmar_isDraggable");
+      //ドラッグの開始フラグオン
+      isDragging.current = true;
+      //ドラッグ開始の絶対位置
+      mousePosition.current = { x: event.clientX, y: event.clientY };
+    };
+
+    const handleMouseMove = (event) => {
+      if (!isDragging.current) return; //ドラッグ中でなければ処理を中止
+      const dx = event.clientX - mousePosition.current.x;
+      const dy = event.clientY - mousePosition.current.y;
+      //ドラッグ後の位置を保存
+      const newPosition = {
+        x: elmposition.current.x + dx,
+        y: elmposition.current.y + dy,
+      };
+      elmposition.current = newPosition;
+      mousePosition.current = { x: event.clientX, y: event.clientY }; //マウス位置の保存
+      //ドラッグによるブロックの一時的移動
+      element.style.transform = `translate(${elmposition.current.x}px, ${elmposition.current.y}px)`;
+    };
+
+    const handleMouseUp = () => {
+      isDragging.current = false;
+      element.style.transform = null;
+      //呼出しもとに要素の位置を返す
+      onPositionChange({
+        x: `${elmposition.current.x}px`,
+        y: `${elmposition.current.y}px`,
+      });
+    };
+    const handleMouseLeave = () => {
+      isDragging.current = false;
+    };
+
+    if (element) {
+      // クラス名を追加します。
+      element.classList.add("itmar_isDraggable");
+    }
+    // イベントハンドラを追加します。
+    element.addEventListener("mousedown", handleMouseDown);
+    element.addEventListener("mousemove", handleMouseMove);
+    element.addEventListener("mouseup", handleMouseUp);
+    element.addEventListener("mouseleave", handleMouseLeave);
+
+    // イベントリスナーを削除するクリーンアップ関数を返します。
+    return () => {
+      element.removeEventListener("mousedown", handleMouseDown);
+      element.removeEventListener("mousemove", handleMouseMove);
+      element.removeEventListener("mouseup", handleMouseUp);
+      element.removeEventListener("mouseleave", handleMouseLeave);
+      element.style.transform = null;
+    };
+  }, [isMovable, blockRef, position, onPositionChange]); // 依存配列に isMovable を含めます
+};
+
 export default function DraggableBox(props) {
   const position = props.attributes;
 

package/src/GridControls.js

@@ -0,0 +1,403 @@
+import {
+  Button,
+  Icon,
+  PanelRow,
+  ComboboxControl,
+  ToolbarDropdownMenu,
+  __experimentalNumberControl as NumberControl,
+  __experimentalUnitControl as UnitControl,
+  __experimentalInputControl as InputControl
+} from '@wordpress/components';
+
+import { useSelect, dispatch } from '@wordpress/data';
+import { useState, useEffect, useRef } from '@wordpress/element';
+
+
+import { __ } from '@wordpress/i18n';
+import { justifyCenter, justifyLeft, justifyRight } from '@wordpress/icons';
+//上よせアイコン
+const upper = <Icon icon={justifyLeft} className="rotate-icon" />
+//中央よせのアイコン
+const middle = <Icon icon={justifyCenter} className="rotate-icon" />
+//下よせのアイコン
+const lower = <Icon icon={justifyRight} className="rotate-icon" />
+// アイコンと文字列キーのマッピングを作成
+const alignIconMap = {
+  left: justifyLeft,
+  center: justifyCenter,
+  right: justifyRight,
+  upper: upper,
+  middle: middle,
+  lower: lower
+};
+
+const units = [
+  { value: 'px', label: 'px' },
+  { value: 'em', label: 'em' },
+  { value: 'rem', label: 'rem' },
+];
+
+const initializeUnitArray = (rowUnit, length) => {
+  if (!Array.isArray(rowUnit)) {
+    // rowUnit が配列ではない（undefined を含む）場合、全て "1fr" で埋めた配列を返す
+    return Array(length).fill("1fr");
+  }
+
+  return Array.from({ length }, (_, i) => rowUnit[i] || "1fr");
+}
+
+//r,cで与えられた座標がgridElmsのどの要素に含まれているかを返す
+const findElementInGrid = (gridElms, r, c) => {
+  for (let i = 0; i < gridElms.length; i++) {
+    const { startCell, endCell } = gridElms[i];
+    // 各座標の最小値と最大値を決定
+    const minRow = Math.min(startCell?.rowInx, endCell?.rowInx);
+    const maxRow = Math.max(startCell?.rowInx, endCell?.rowInx);
+    const minCol = Math.min(startCell?.colInx, endCell?.colInx);
+    const maxCol = Math.max(startCell?.colInx, endCell?.colInx);
+
+    // 座標が範囲内にあるかどうかをチェック
+    if (r >= minRow && r <= maxRow && c >= minCol && c <= maxCol) {
+      return { index: i, elm: gridElms[i] };
+    }
+  }
+  return null;
+}
+
+//親にイベントを伝播させないラッパー
+const StopPropagationWrapper = ({ children }) => {
+  const handleClick = (event) => {
+    // イベントの伝播を阻止
+    event.stopPropagation();
+  };
+
+  return (
+    <div className='itmar_event_stopper' onClick={handleClick}>
+      {children}
+    </div>
+  );
+};
+
+const GridControls = ({ attributes, clientId, onChange }) => {
+  const {
+    gridElms,
+    rowNum,
+    colNum,
+    rowGap,
+    colGap,
+    rowUnit,
+    colUnit
+  } = attributes;
+
+  //コンポーネント内の行列情報
+  const [rowCount, setRowCount] = useState(rowNum);
+  const [colCount, setColCount] = useState(colNum);
+
+  //マウント時検出用フラグ
+  const firstFlgRef = useRef(true);
+
+  //グリッドの配置指定用テーブル要素
+  const renderRows = () => {
+    //セルが埋まっているかどうかの判定配列
+
+    const occupied = new Array(rowCount).fill(0).map(() => new Array(colCount).fill(false));
+
+    let rows = [];
+    // 列単位入力行を追加
+    let headerCells = [<th key="header-corner"></th>]; // 左上の角の空白セル
+    for (let c = 0; c < colCount; c++) {
+      headerCells.push(
+        <th key={`header-${c}`}>
+          <InputControl
+            value={colUnit ? colUnit[c] : ""}
+            type="text"
+            isPressEnterToChange={true}
+            onChange={(newValue) => {
+              const newArray = [...colUnit.slice(0, c), newValue, ...colUnit.slice(c + 1)];
+              setUnitColArray(newArray);
+            }}
+          />
+        </th>
+      );
+    }
+    rows.push(<tr key="header-row">{headerCells}</tr>);
+
+    // 各行とセルの生成
+    for (let r = 0; r < rowCount; r++) {
+      let cells = [];
+      // 行行単位入力を追加
+      cells.push(
+        <th key={`row-header-${r}`}>
+          <InputControl
+            value={rowUnit ? rowUnit[r] : ""}
+            type="text"
+            isPressEnterToChange={true}
+            onChange={(newValue) => {
+              const newArray = [...rowUnit.slice(0, r), newValue, ...rowUnit.slice(r + 1)];
+              setUnitRowArray(newArray);
+            }}
+
+          />
+        </th>
+      );
+
+      // 各行に対するセルを生成
+      for (let c = 0; c < colCount; c++) {
+        if (occupied[r][c]) {
+          continue; // このセルは既に占められているのでスキップ
+        }
+        //複数のセルを占める設定があればセルの結合オブジェクトを生成
+        const setElm = findElementInGrid(gridElms, r, c);
+        const rowSpanValue = setElm ? Math.abs(setElm.elm.startCell.rowInx - setElm.elm.endCell.rowInx) : 0;
+        const colSpanValue = setElm ? Math.abs(setElm.elm.startCell.colInx - setElm.elm.endCell.colInx) : 0;
+        const cellSpan = {
+          ...(rowSpanValue !== 0 && { rowspan: rowSpanValue + 1 }),
+          ...(colSpanValue !== 0 && { colspan: colSpanValue + 1 })
+        };
+        // 占められるセルの位置を記録
+        for (let i = 0; i <= rowSpanValue; i++) {
+          for (let j = 0; j <= colSpanValue; j++) {
+            if (r + i < rowCount && c + j < colCount) {
+              occupied[r + i][c + j] = true;
+            }
+          }
+        }
+        //セルを生成
+        cells.push(<td
+          key={`cell-${r}-${c}`}
+          {...cellSpan}
+          className={isCellSelected(r, c) ? 'selected' : ''}
+          style={setElm ? { backgroundColor: `var(--wp--custom--color--area-${setElm.index})` } : undefined}
+          onClick={() => detectCellPosition(r, c)}
+        >
+          {setElm &&
+            <StopPropagationWrapper>
+              <ToolbarDropdownMenu
+                label={__('Lateral Alignment', 'block-collections')}
+                icon={setElm.elm.latAlign ? alignIconMap[setElm.elm.latAlign] : alignIconMap['left']}
+                controls={['left', 'center', 'right'].map(align => ({
+                  icon: alignIconMap[align],
+                  isActive: setElm.elm.latAlign === align,
+                  onClick: () => updateAlignment(setElm.index, align, 'latAlign'),
+                }))}
+              />
+              <ToolbarDropdownMenu
+                label={__('Vertical Alignment', 'block-collections')}
+                icon={setElm.elm.vertAlign ? alignIconMap[setElm.elm.vertAlign] : alignIconMap['upper']}
+                controls={['upper', 'middle', 'lower'].map(align => ({
+                  icon: alignIconMap[align],
+                  isActive: setElm.elm.vertAlign === align,
+                  onClick: () => updateAlignment(setElm.index, align, 'vertAlign'),
+                }))}
+              />
+            </StopPropagationWrapper>
+          }
+        </td>)
+      }
+      // 行の追加
+      rows.push(<tr key={`row-${r}`}>{cells}</tr>);
+    }
+    return rows;
+  };
+
+  //テーブルの位置選択関数
+  const detectCellPosition = (rowIndex, colIndex) => {
+    //インナーブロックの選択がなければリターン
+    if (!selBlock) {
+      dispatch('core/notices').createNotice(
+        'error',
+        __('No blocks selected.', 'itmar_guest_contact_block'),
+        { type: 'snackbar', isDismissible: true, }
+      );
+      return;
+    }
+    //選択済みのセルが選択されたときはリターン
+    if (findElementInGrid(gridElms, rowIndex, colIndex)) {
+      dispatch('core/notices').createNotice(
+        'error',
+        __('That cell is already selected by another block.', 'itmar_guest_contact_block'),
+        { type: 'snackbar', isDismissible: true, }
+      );
+      return;
+    }
+
+    //選択されたブロックのポジションを記録
+    const newBlock = !selBlock.startCell
+      ? { ...selBlock, startCell: { rowInx: rowIndex, colInx: colIndex }, endCell: { rowInx: rowIndex, colInx: colIndex } }
+      : { ...selBlock, endCell: { rowInx: rowIndex, colInx: colIndex } };
+
+    setSelBlock(newBlock);
+
+    //blockNamesの更新
+    const index = gridElms?.findIndex((block) => block.value === selBlock.value);
+    const setAreaBlock = [...blockNames.slice(0, index), newBlock, ...blockNames.slice(index + 1)];
+    setBlockNames(setAreaBlock);
+  };
+
+  // セルが選択されているか判断する関数
+  const isCellSelected = (rowIndex, colIndex) => {
+    if (selBlock) {
+      // 各座標の最小値と最大値を決定
+      const minRow = Math.min(selBlock.startCell?.rowInx, selBlock.endCell?.rowInx);
+      const maxRow = Math.max(selBlock.startCell?.rowInx, selBlock.endCell?.rowInx);
+      const minCol = Math.min(selBlock.startCell?.colInx, selBlock.endCell?.colInx);
+      const maxCol = Math.max(selBlock.startCell?.colInx, selBlock.endCell?.colInx);
+
+      // 座標が範囲内にあるかどうかをチェック
+      return (
+        rowIndex >= minRow && rowIndex <= maxRow &&
+        colIndex >= minCol && colIndex <= maxCol
+      );
+    } else {
+      return false;
+    }
+
+  };
+
+  //コンテンツ位置設定
+  const updateAlignment = (index, align, derection) => {
+    const alignBlock = { ...blockNames[index], [derection]: align };
+    const setAlignBlock = [...blockNames.slice(0, index), alignBlock, ...blockNames.slice(index + 1)];
+    setBlockNames(setAlignBlock);
+  }
+
+  //選択したインナーブロック
+  const [selBlock, setSelBlock] = useState(null);
+
+  //インナーブロックを取得
+  const parentBlocks = useSelect((select) => {
+    const innerBlocks = select('core/block-editor').getBlocks(clientId);
+    //インナーブロック入れ替えの際は既に登録したブロックの位置情報があれば、それを付加する。
+    const new_block_names = innerBlocks.map((block, index) => gridElms.length > index ? {
+      value: block.clientId,
+      label: block.name,
+      startCell: gridElms[index].startCell,
+      endCell: gridElms[index].endCell,
+      latAlign: gridElms[index].latAlign,
+      vertAlign: gridElms[index].vertAlign
+    } :
+      {
+        value: block.clientId,
+        label: block.name
+      }
+    );
+    return new_block_names
+  }, [clientId]);
+  const [blockNames, setBlockNames] = useState(parentBlocks);
+
+  //グリッド配置のクリア
+  const clear_placement = () => {
+    //ブロックの配置情報削除
+    const clear_block = blockNames.map((block) => ({
+      value: block.value,
+      label: block.label
+    }
+    ));
+    setBlockNames(clear_block);
+
+  }
+
+  //単位配列の初期化
+  const initRowUnitArray = initializeUnitArray(rowUnit, rowCount);
+  const [unitRowArray, setUnitRowArray] = useState(initRowUnitArray);
+  const initColUnitArray = initializeUnitArray(colUnit, colCount);;
+  const [unitColArray, setUnitColArray] = useState(initColUnitArray);
+
+  //親ブロックへの書き戻し
+  useEffect(() => {
+    const gridStyle = { ...attributes, gridElms: blockNames, rowNum: rowCount, colNum: colCount, rowUnit: unitRowArray, colUnit: unitColArray };
+
+    onChange(gridStyle);
+
+  }, [blockNames, unitRowArray, unitColArray]);
+
+  //行と列の数を変えた場合は位置情報を削除・単位の再編成
+  useEffect(() => {
+    if (!firstFlgRef.current) {//マウント時は実行しない
+      //ブロックの位置情報クリア
+      clear_placement();
+      //単位情報の再編成
+      const newRowUnitArray = initializeUnitArray(rowUnit, rowCount);
+      setUnitRowArray(newRowUnitArray);
+      const newColUnitArray = initializeUnitArray(colUnit, colCount);
+      setUnitColArray(newColUnitArray);
+    } else {
+      firstFlgRef.current = false
+    }
+
+  }, [rowCount, colCount]);
+
+  return (
+    <>
+      <PanelRow
+        className='distance_row'
+      >
+        <NumberControl
+          onChange={(newValue) => {
+            const input_val = typeof (newValue) === 'number' ? newValue : Number(newValue);
+            setRowCount(input_val);
+          }}
+          label={__('Number of Row ', 'block-collections')}
+          value={rowCount}
+          min={2}
+        />
+        <NumberControl
+          onChange={(newValue) => {
+            const input_val = typeof (newValue) === 'number' ? newValue : Number(newValue);
+            setColCount(input_val);
+          }}
+          label={__('Number of Colum', 'block-collections')}
+          value={colCount}
+        />
+      </PanelRow>
+      <PanelRow
+        className='distance_row'
+      >
+        <UnitControl
+          onChange={(newValue) => {
+            newValue = newValue != '' ? newValue : '0px'
+            const newStyle = { ...attributes, rowGap: newValue };
+            onChange(newStyle);
+          }}
+          label={__('Row Gap', 'block-collections')}
+          value={rowGap}
+          units={units}
+        />
+        <UnitControl
+          onChange={(newValue) => {
+            newValue = newValue != '' ? newValue : '0px'
+            const newStyle = { ...attributes, colGap: newValue };
+            onChange(newStyle);
+          }}
+          label={__('Colum Gap', 'block-collections')}
+          value={colGap}
+          units={units}
+        />
+
+      </PanelRow>
+
+      <PanelRow className='distance_row'>
+        <p>{__('Element placement', 'block-collections')}</p>
+        <Button variant="secondary" onClick={clear_placement}>
+          {__("Clear", 'block-collections')}
+        </Button>
+      </PanelRow>
+
+      <PanelRow className='grid_table' >
+        <table>
+          {renderRows()}
+        </table>
+      </PanelRow>
+      <ComboboxControl
+        label={__('InnerBlock Name', 'block-collections')}
+        options={blockNames}
+        value={selBlock ? selBlock.value : null}
+        onChange={(sel_id) => {
+          const matchedBlock = blockNames.find(block => block.value === sel_id);
+          setSelBlock(matchedBlock)
+        }}
+      />
+    </>
+  );
+};
+export default GridControls;

package/src/IconSelectControl.js

@@ -0,0 +1,139 @@
+
+import { __ } from '@wordpress/i18n';
+
+import {
+  TextControl,
+  PanelRow,
+  RadioControl,
+  ComboboxControl,
+  __experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+
+import {
+  PanelColorSettings
+} from '@wordpress/block-editor';
+
+
+const helpLink = createElement(
+  'a',
+  { href: 'https://fontawesome.com/search', target: '_blank' },
+  'FontAwesome'
+);
+
+const helpTextCode = createElement(
+  'span',
+  {},
+  helpLink,
+  __('Select the icon from and enter Unicode (the upper right four digits of the selection dialog). ', 'block-collections')
+);
+
+const helpTextFamily = createElement(
+  'span',
+  {},
+  helpLink,
+  __('Please select the first class name shown in the HTML code field of the selection dialog. ', 'block-collections')
+);
+
+
+const units = [
+  { value: 'px', label: 'px' },
+  { value: 'em', label: 'em' },
+  { value: 'rem', label: 'rem' },
+];
+
+const family_option = [
+  { value: 'Font Awesome 6 Free', label: 'SOLID' },
+  { value: 'Font Awesome 6 Brands', label: 'BRANDS' },
+]
+
+export default ({ iconStyle, onChange }) => {
+  const {
+    icon_name,
+    icon_pos,
+    icon_size,
+    icon_color,
+    icon_space,
+    icon_family
+  } = iconStyle;
+
+  return (
+    <>
+      <TextControl
+        label={__("icon name", 'block-collections')}
+        help={helpTextCode}
+        labelPosition="top"
+        value={icon_name}
+        isPressEnterToChange
+        onChange={(newValue) => {
+          const newStyle = { ...iconStyle, icon_name: newValue };
+          onChange(newStyle);
+        }}
+      />
+
+      <ComboboxControl
+        label={__('Icon Family', 'block-collections')}
+        help={helpTextFamily}
+        options={family_option}
+        value={icon_family ? icon_family : 'Font Awesome 6 Free'}
+        onChange={(newValue) => {
+          const newStyle = { ...iconStyle, icon_family: newValue };
+          onChange(newStyle);
+        }}
+      />
+
+      <PanelRow className='sizing_row'>
+        <UnitControl
+          dragDirection="e"
+          onChange={(newValue) => {
+            const newStyle = { ...iconStyle, icon_size: newValue };
+            onChange(newStyle);
+          }}
+          label={__("Size", 'block-collections')}
+          value={icon_size}
+          units={units}
+        />
+        <UnitControl
+          dragDirection="e"
+          onChange={(newValue) => {
+            const newStyle = { ...iconStyle, icon_space: newValue };
+            onChange(newStyle);
+          }}
+          label={__('spacing to end', 'block-collections')}
+          value={icon_space}
+          units={units}
+        />
+      </PanelRow>
+
+      <PanelColorSettings
+        title={__('Color settings', 'itmar_location')}
+        initialOpen={false}
+        colorSettings={[
+          {
+            value: icon_color,
+            onChange: (newValue) => {
+              const newStyle = { ...iconStyle, icon_color: newValue };
+              onChange(newStyle);
+            },
+            label: __('Icon color', 'itmar_location')
+          },
+
+        ]}
+      />
+      <label className="components-base-control__label">{__("Arrangement", 'block-collections')}</label>
+      <PanelRow className='itmar_position_row'>
+        <RadioControl
+          selected={icon_pos}
+          options={[
+            { label: __("left", 'block-collections'), value: "left" },
+            { label: __("right", 'block-collections'), value: "right" },
+          ]}
+          onChange={(newValue) => {
+            const newStyle = { ...iconStyle, icon_pos: newValue };
+            onChange(newStyle);
+          }}
+        />
+      </PanelRow>
+    </>
+
+  );
+}

package/src/PseudoElm.js

@@ -1,6 +1,39 @@
 import { __ } from "@wordpress/i18n";
+import { css } from "styled-components";
 import { RadioControl } from "@wordpress/components";
 
+// 矢印の向きに応じたスタイルを生成するヘルパー関数
+const arrowDirectionStyles = (direction) => {
+  switch (direction) {
+    case "left":
+      return "transform: translate(-50%, -50%) rotate(-135deg);";
+    case "right":
+      return "transform: translate(-50%, -50%) rotate(45deg);";
+    case "upper":
+      return "transform: translate(-50%, -50%) rotate(-45deg);";
+    case "under":
+      return "transform: translate(-50%, -50%) rotate(135deg);";
+    default:
+      return "transform: translate(-50%, -50%) rotate(45deg);"; // default to 'down'
+  }
+};
+
+// 矢印のスタイルを適用するコンポーネント
+export const Arrow = ({ direction = "down" }) => css`
+  &::after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 15%;
+    height: 15%;
+    border-top: 3px solid var(--wp--preset--color--accent-2);
+    border-right: 3px solid var(--wp--preset--color--accent-2);
+    top: 50%;
+    left: 50%;
+    ${arrowDirectionStyles(direction)}
+  }
+`;
+
 //擬似要素の出力を選択させるインスペクターコントロール
 const PseudoElm = ({ direction, onChange }) => {
   return (