Implement reorderable layers by mouse

assets/src/edit-story/components/panels/layer/context.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export default createContext({ state: {}, actions: {} });

assets/src/edit-story/components/panels/layer/layer.js

@@ -26,9 +26,14 @@ import { rgba } from 'polished';
 import StoryPropTypes from '../../../types';
 import { getDefinitionForType } from '../../../elements';
 import useLayerSelection from './useLayerSelection';
+import useLayerReordering from './useLayerReordering';
 import { LAYER_HEIGHT } from './constants';
 
-const LayerButton = styled.button.attrs({ type: 'button' })`
+const LayerButton = styled.button.attrs({
+  type: 'button',
+  tabIndex: '0',
+  role: 'option',
+})`
   display: flex;
   border: 0;
   padding: 0;
@@ -76,11 +81,15 @@ const LayerDescription = styled.div`
 
 function Layer({ element }) {
   const { LayerIcon, LayerContent } = getDefinitionForType(element.type);
-
   const { isSelected, handleClick } = useLayerSelection(element);
+  const { handleReordering } = useLayerReordering(element);
 
   return (
-    <LayerButton isSelected={isSelected} onClick={handleClick}>
+    <LayerButton
+      isSelected={isSelected}
+      onClick={handleClick}
+      onPointerDown={handleReordering}
+    >
       <LayerIconWrapper>
         <LayerIcon />
       </LayerIconWrapper>

assets/src/edit-story/components/panels/layer/layerList.js

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import styled from 'styled-components';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment, useContext, useEffect } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import Layer from './layer';
+import LayerContext from './context';
+import LayerSeparator from './separator';
+
+const LayerList = styled.div.attrs({ role: 'listbox' })`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+function LayerPanel() {
+  const {
+    state: { layers, isReordering, currentSeparator },
+  } = useContext(LayerContext);
+
+  const numLayers = layers && layers.length;
+
+  useEffect(() => {
+    if (isReordering && currentSeparator) {
+      speak(
+        `Reordering layers.. Press Escape to abort.. Release mouse to drop in position ${numLayers -
+          currentSeparator}`,
+        'assertive'
+      );
+    }
+  }, [isReordering, currentSeparator, numLayers]);
+
+  if (!numLayers) {
+    return null;
+  }
+
+  return (
+    <LayerList>
+      {layers.map((element) => (
+        <Fragment key={element.id}>
+          {isReordering && <LayerSeparator position={element.position + 1} />}
+          <Layer element={element} />
+        </Fragment>
+      ))}
+    </LayerList>
+  );
+}
+
+export default LayerPanel;

assets/src/edit-story/components/panels/layer/panel.js

@@ -14,11 +14,6 @@
  * limitations under the License.
  */
 
-/**
- * External dependencies
- */
-import styled from 'styled-components';
-
 /**
  * WordPress dependencies
  */
@@ -29,30 +24,20 @@ import { __ } from '@wordpress/i18n';
  */
 import { Panel, PanelTitle, PanelContent } from '../panel';
 import { DEFAULT_LAYERS_VISIBLE, LAYER_HEIGHT } from './constants';
-import Layer from './layer';
-import useLayers from './useLayers';
-
-const LayerList = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`;
+import LayerList from './layerList';
+import LayerProvider from './provider';
 
 function LayerPanel() {
-  const layers = useLayers();
-
   return (
     <Panel name="layers" initialHeight={DEFAULT_LAYERS_VISIBLE * LAYER_HEIGHT}>
       <PanelTitle isPrimary isResizable>
         {__('Layers', 'web-stories')}
       </PanelTitle>
 
       <PanelContent isScrollable padding={'0'}>
-        <LayerList>
-          {layers.map((element) => (
-            <Layer key={element.id} element={element} />
-          ))}
-        </LayerList>
+        <LayerProvider>
+          <LayerList />
+        </LayerProvider>
       </PanelContent>
     </Panel>
   );

assets/src/edit-story/components/panels/layer/provider.js

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import StoryPropTypes from '../../../types';
+import Context from './context';
+import useLayers from './useLayers';
+
+function LayerProvider({ children }) {
+  const layers = useLayers();
+  const [isReordering, setIsReordering] = useState(false);
+  const [currentSeparator, setCurrentSeparator] = useState(null);
+
+  const state = {
+    state: {
+      layers,
+      isReordering,
+      currentSeparator,
+    },
+    actions: {
+      setIsReordering,
+      setCurrentSeparator,
+    },
+  };
+
+  return <Context.Provider value={state}>{children}</Context.Provider>;
+}
+
+LayerProvider.propTypes = {
+  children: StoryPropTypes.children,
+};
+
+export default LayerProvider;

assets/src/edit-story/components/panels/layer/separator.js

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { LAYER_HEIGHT } from './constants';
+import LayerContext from './context';
+
+const Wrapper = styled.div`
+  height: ${LAYER_HEIGHT}px;
+  margin: -${LAYER_HEIGHT / 2}px 0;
+  padding: ${LAYER_HEIGHT / 2}px 0;
+  width: 100%;
+  opacity: 0;
+  position: relative;
+  z-index: 1;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+const Line = styled.div`
+  height: 4px;
+  margin: 0 0 -4px;
+  background: ${({ theme }) => theme.colors.action};
+  width: 100%;
+`;
+
+function LayerSeparator({ position }) {
+  const {
+    actions: { setCurrentSeparator },
+  } = useContext(LayerContext);
+  const handlePointerEnter = useCallback(() => {
+    setCurrentSeparator(position);
+  }, [setCurrentSeparator, position]);
+  return (
+    <Wrapper onPointerEnter={handlePointerEnter}>
+      <Line />
+    </Wrapper>
+  );
+}
+
+LayerSeparator.propTypes = {
+  position: PropTypes.number.isRequired,
+};
+
+export default LayerSeparator;