Function Layer

src/components/Workspace/Layer/index.jsx:10–285

(props)

const { SubMenu } = Menu;

function Layer (props) {
  const [dragId, setDragId] = useState(null)
  const [layer, setLayer] = useState([])
  const [isCtrl, setIsCtrl] = useState(false)
  const [openSubKey, setOpenSubKey] = useState([]) // 展开的subMenu Key数组
  const [isShowMenu, setIsShowMenu] = useState(false) // 右键菜单
  const [eventProperty, setEventProperty] = useState({ left: 0, top: 0 })
  const [showSubMenu, setShowSubMenu] = useState(false) // 是否显示submenu 右键菜单
  const [isClickSubMenu, setIsClickSubMenu] = useState(false) // 是否右键点击了submenu
  const [menuStatus, setMenuStatus] = useState(null)
  const layerRef = useRef(null);

  useEffect(() => {
    layerRef.current.addEventListener('keydown', keyDown, false);
    layerRef.current.addEventListener('keyup', keyUp, false);
    setLayer(props.layer)
    const tempOpenSubKey = [...openSubKey]
    if (props.nowGroupId) {
      const find = (node) => {
        // 找到当前组的所有父组
        if (!node) return;
        tempOpenSubKey.push(node.property.elementId)
        if (node.property.parentId) {
          find(findGroupForId(node.property.parentId, layer))
        }
      }
      const nowGroup = findGroupForId(props.nowGroupId, layer)
      find(nowGroup)
    }
    setOpenSubKey([...new Set(tempOpenSubKey)])
  }, [JSON.stringify(props.layer), props.nowGroupId])
  useEffect(() => {
    if (isShowMenu) {
      const menu = document.querySelector('#layerMenu')
      if (menu) {
        menu.style.left = `${eventProperty.clientX}px`
        menu.style.top = `${eventProperty.clientY - 70}px`
      }
    }

  }, [menuStatus]) // 当菜单属性改变时执行
  useEffect(() => {
    // 如果点了中间的iframe 则让菜单隐藏
    if (document.activeElement.tagName === 'IFRAME') {
      setIsCtrl(false)
      closeMenu()
    }
  }, [document.activeElement.tagName])

  function keyDown (event) {
    setIsCtrl(event.ctrlKey)
  }
  function keyUp (event) {
    const key = event.keyCode;
    if (key === 17) {
      setIsCtrl(false)
    }
  }