saltcorn-craft-layers-noeye
Version:
A Photoshop-like layers panel for your page editor
2 lines (1 loc) • 16 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var utils=require("@craftjs/utils"),React=require("react"),core=require("@craftjs/core"),styled=require("styled-components"),ContentEditable=require("react-contenteditable");function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultLegacy(React),styled__default=_interopDefaultLegacy(styled),ContentEditable__default=_interopDefaultLegacy(ContentEditable),_extendStatics=function(e,t){return(_extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])})(e,t)};function __extends(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}_extendStatics(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var _assign=function(){return(_assign=Object.assign||function(e){for(var t,n=1,a=arguments.length;n<a;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)};function __rest(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(a=Object.getOwnPropertySymbols(e);r<a.length;r++)t.indexOf(a[r])<0&&Object.prototype.propertyIsEnumerable.call(e,a[r])&&(n[a[r]]=e[a[r]])}return n}function __makeTemplateObject(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var LayerContext=React__default.default.createContext({}),LayerManagerContext=React.createContext({});function useLayerManager(e){var t=React.useContext(LayerManagerContext).store;return utils.useCollector(t,e)}function useLayer(e){var t=React.useContext(LayerContext),n=t.id,a=t.depth,r=t.connectors,o=useLayerManager((function(t){return n&&t.layers[n]&&e&&e(t.layers[n])})),d=o.actions,i=__rest(o,["actions"]),l=core.useEditor((function(e,t){return{children:e.nodes[n]&&t.node(n).descendants()}})).children,c=React.useMemo((function(){return{toggleLayer:function(){return d.toggleLayer(n)}}}),[d,n]);return _assign({id:n,depth:a,children:l,actions:c,connectors:r},i)}var LayerNode=function(){var e=useLayer((function(e){return{expanded:e.expanded}})),t=e.id,n=e.depth,a=e.children,r=e.expanded,o=core.useEditor((function(e,n){return{data:e.nodes[t]&&e.nodes[t].data,shouldBeExpanded:e.events.selected&&n.node(e.events.selected).ancestors(!0).includes(t)}})),d=o.data,i=o.shouldBeExpanded,l=useLayerManager((function(e){return{renderLayer:e.options.renderLayer,expandRootOnLoad:e.options.expandRootOnLoad}})),c=l.actions,u=c.registerLayer,s=c.toggleLayer,f=l.renderLayer,p=l.expandRootOnLoad,v=React.useState(!1),g=v[0],_=v[1];React.useLayoutEffect((function(){u(t),_(!0)}),[u,t]);var y=React.useRef(r);y.current=r;var m=React.useRef(p&&t===core.ROOT_NODE);return React.useEffect((function(){!y.current&&i&&s(t)}),[s,t,i]),React.useEffect((function(){m.current&&s(t)}),[s,t]),d&&g?React__default.default.createElement("div",{className:"craft-layer-node "+t},React__default.default.createElement(f,{},a&&r?a.map((function(e){return React__default.default.createElement(LayerContextProvider,{key:e,id:e,depth:n+1})})):null)):null},LayerHandlers=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return __extends(t,e),t.prototype.getLayer=function(e){return this.options.layerStore.getState().layers[e]},t.prototype.handlers=function(){var e=this,n=this.derived.options.store,a=this.options,r=a.layerStore,o=a.layerId;return{layer:function(a){var d=e.inherit((function(e){e.select(a,o),e.hover(a,o),e.drag(a,o),r.actions.setDOM(o,{dom:a})})),i=e.addCraftEventListener(a,"mouseover",(function(e){e.craft.stopPropagation(),r.actions.setLayerEvent("hovered",o)})),l=e.addCraftEventListener(a,"dragover",(function(a){a.craft.stopPropagation(),a.preventDefault();var o=t.events,d=o.indicator,i=o.currentCanvasHovered;if(i&&d&&i.data.nodes){var l=e.getLayer(i.id).headingDom.getBoundingClientRect();if(a.clientY>l.top+10&&a.clientY<l.bottom-10){var c=i.data.nodes[i.data.nodes.length-1];if(!c)return;t.events.indicator=_assign(_assign({},d),{placement:{currentNode:n.query.node(c).get(),index:i.data.nodes.length,where:"after",parent:i},onCanvas:!0}),r.actions.setIndicator(t.events.indicator)}}})),c=e.addCraftEventListener(a,"dragenter",(function(a){a.craft.stopPropagation(),a.preventDefault();var d=t.draggedElement;if(d){var i=n.query.getDropPlaceholder(d,o,{x:a.clientX,y:a.clientY},(function(t){var n=e.getLayer(t.id);return n&&n.dom}));if(i){var l=i.placement.parent,c=e.getLayer(l.id).headingDom.getBoundingClientRect();if(t.events.currentCanvasHovered=null,n.query.node(l.id).isCanvas()&&l.data.parent){var u=n.query.node(l.data.parent).get();n.query.node(u.id).isCanvas()&&(t.events.currentCanvasHovered=l,(a.clientY>c.bottom-10&&!e.getLayer(l.id).expanded||a.clientY<c.top+10)&&(i.placement.parent=u,i.placement.currentNode=l,i.placement.index=u.data.nodes?u.data.nodes.indexOf(l.id):0,a.clientY>c.bottom-10&&!e.getLayer(l.id).expanded?i.placement.where="after":a.clientY<c.top+10&&(i.placement.where="before")))}t.events.indicator=_assign(_assign({},i),{onCanvas:!1}),r.actions.setIndicator(t.events.indicator)}}}));return function(){d(),i(),l(),c()}},layerHeader:function(e){r.actions.setDOM(o,{headingDom:e})},drag:function(a){a.setAttribute("draggable","true");var d=e.addCraftEventListener(a,"dragstart",(function(e){e.craft.stopPropagation(),t.draggedElement=o})),i=e.addCraftEventListener(a,"dragend",(function(e){e.craft.stopPropagation();var a=t.events;if(a.indicator&&!a.indicator.error){var o=a.indicator.placement;n.actions.move(t.draggedElement,o.parent.id,o.index+("after"===o.where?1:0))}t.draggedElement=null,t.events.indicator=null,r.actions.setIndicator(null)}));return function(){a.removeAttribute("draggable"),d(),i()}}}},t.events={indicator:null,currentCanvasHovered:null},t}(core.DerivedCoreEventHandlers),LayerContextProvider=function(e){var t=e.id,n=e.depth,a=core.useEventHandler(),r=React.useContext(LayerManagerContext).store,o=React.useRef(r);o.current=r;var d=React.useMemo((function(){return a.derive(LayerHandlers,{layerStore:o.current,layerId:t})}),[a,t]),i=React.useMemo((function(){return utils.wrapConnectorHooks(d.connectors)}),[d]);return core.useEditor((function(e){return{exists:!!e.nodes[t]}})).exists?React__default.default.createElement(LayerContext.Provider,{value:{id:t,depth:n,connectors:i}},React__default.default.createElement(LayerNode,null)):null},LayerMethods=function(e){return{setLayerEvent:function(t,n){if(null===n||e.layers[n]){var a=e.events[t];a&&n!==a&&(e.layers[a].event[t]=!1),n?(e.layers[n].event[t]=!0,e.events[t]=n):e.events[t]=null}},registerLayer:function(t){e.layers[t]||(e.layers[t]={dom:null,headingDom:null,expanded:!1,id:t,event:{selected:!1,hovered:!1}})},setDOM:function(t,n){e.layers[t]=_assign(_assign(_assign({},e.layers[t]),n.dom?{dom:n.dom}:{}),n.headingDom?{headingDom:n.headingDom}:{})},toggleLayer:function(t){e.layers[t].expanded=!e.layers[t].expanded},setIndicator:function(t){e.events.indicator=t}}},EventManager=function(e){var t=e.children,n=useLayerManager((function(e){return e})),a=n.layers,r=n.events,o=core.useEditor((function(e){return{enabled:e.options.enabled}})).query.getOptions().indicator,d=React.useMemo((function(){var e=r.indicator;if(e){var t=e.placement,n=t.where,d=t.parent,i=t.currentNode,l=i?i.id:d.id,c=e.error?o.error:o.success;if(e.onCanvas&&null!=a[d.id].dom){var u=a[d.id].dom.getBoundingClientRect(),s=a[d.id].headingDom.getBoundingClientRect();return{top:s.top,left:u.left,width:u.width,height:s.height,background:"transparent",borderWidth:"1px",borderColor:c}}if(!a[l])return;var f=a[l].headingDom.getBoundingClientRect(),p=a[l].dom.getBoundingClientRect();return{top:"after"!==n&&i?p.top:p.top+p.height,left:f.left,width:p.width-f.left,height:2,borderWidth:0,background:c}}}),[r,o.error,o.success,a]);return React__default.default.createElement("div",null,r.indicator?React__default.default.createElement(utils.RenderIndicator,{style:d}):null,t)},EditableLayerName=function(){var e=useLayer().id,t=core.useEditor((function(t){return{displayName:t.nodes[e]&&t.nodes[e].data.custom.displayName?t.nodes[e].data.custom.displayName:t.nodes[e].data.displayName,hidden:t.nodes[e]&&t.nodes[e].data.hidden}})),n=t.displayName,a=t.actions,r=React.useState(!1),o=r[0],d=r[1],i=React.useRef(null),l=React.useCallback((function(e){i.current&&!i.current.contains(e.target)&&d(!1)}),[]);return React.useEffect((function(){return function(){window.removeEventListener("click",l)}}),[l]),React__default.default.createElement(ContentEditable__default.default,{html:n,disabled:!o,ref:function(e){e&&(i.current=e.el.current,window.removeEventListener("click",l),window.addEventListener("click",l))},onChange:function(t){a.setCustom(e,(function(e){return e.displayName=t.target.value}))},tagName:"h2",onDoubleClick:function(){o||d(!0)}})};function _extends$1(){return(_extends$1=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}var _ref$1=React__default.default.createElement("path",{d:"M9.99 1.01A1 1 0 008.283.303L5 3.586 1.717.303A1 1 0 10.303 1.717l3.99 3.98a1 1 0 001.414 0l3.99-3.98a.997.997 0 00.293-.707z"}),SvgArrow=function(e){return React__default.default.createElement("svg",_extends$1({viewBox:"0 0 10 6"},e),_ref$1)};function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}var templateObject_1$1,templateObject_2$1,templateObject_3,templateObject_1,templateObject_2,_ref=React__default.default.createElement("path",{className:"linked_svg__a",d:"M16.5 9h-1a.5.5 0 00-.5.5V15H3V3h5.5a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5h-7a.5.5 0 00-.5.5v15a.5.5 0 00.5.5h15a.5.5 0 00.5-.5v-7a.5.5 0 00-.5-.5z"}),_ref2=React__default.default.createElement("path",{className:"linked_svg__a",d:"M16.75 1h-5.373a.4.4 0 00-.377.4.392.392 0 00.117.28l1.893 1.895-3.52 3.521a.5.5 0 000 .707l.706.708a.5.5 0 00.708 0l3.521-3.521 1.893 1.892A.39.39 0 0016.6 7a.4.4 0 00.4-.377V1.25a.25.25 0 00-.25-.25z"}),SvgLinked=function(e){return React__default.default.createElement("svg",_extends({viewBox:"0 0 18 18"},e),_ref,_ref2)},StyledDiv=styled__default.default.div(templateObject_1$1||(templateObject_1$1=__makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 4px 10px;\n background: ",";\n color: ",";\n svg {\n fill: ",";\n margin-top: 2px;\n }\n .inner {\n flex: 1;\n > div {\n padding: 0px;\n flex: 1;\n display: flex;\n margin-left: ","px;\n align-items: center;\n div.layer-name {\n flex: 1;\n h2 {\n font-size: 15px;\n line-height: 26px;\n }\n }\n }\n }\n"],["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 4px 10px;\n background: ",";\n color: ",";\n svg {\n fill: ",";\n margin-top: 2px;\n }\n .inner {\n flex: 1;\n > div {\n padding: 0px;\n flex: 1;\n display: flex;\n margin-left: ","px;\n align-items: center;\n div.layer-name {\n flex: 1;\n h2 {\n font-size: 15px;\n line-height: 26px;\n }\n }\n }\n }\n"])),(function(e){return e.selected?"#2680eb":"transparent"}),(function(e){return e.selected?"#fff":"inherit"}),(function(e){return e.selected?"#fff":"#808184"}),(function(e){return 10*e.depth})),Expand=styled__default.default.a(templateObject_2$1||(templateObject_2$1=__makeTemplateObject(["\n width: 8px;\n height: 8px;\n display: block;\n transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n transform: rotate(","deg);\n opacity: 0.7;\n cursor: pointer;\n transform-origin: 60% center;\n"],["\n width: 8px;\n height: 8px;\n display: block;\n transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n transform: rotate(","deg);\n opacity: 0.7;\n cursor: pointer;\n transform-origin: 60% center;\n"])),(function(e){return e.expanded?180:0})),TopLevelIndicator=styled__default.default.div(templateObject_3||(templateObject_3=__makeTemplateObject(["\n margin-left: -22px;\n margin-right: 10px;\n\n svg {\n width: 12px;\n height: 12px;\n }\n"],["\n margin-left: -22px;\n margin-right: 10px;\n\n svg {\n width: 12px;\n height: 12px;\n }\n"]))),DefaultLayerHeader=function(){var e=useLayer((function(e){return{expanded:e.expanded}})),t=e.id,n=e.depth,a=e.expanded,r=e.children,o=e.connectors,d=o.drag,i=o.layerHeader,l=e.actions.toggleLayer,c=core.useEditor((function(e,n){return{hidden:e.nodes[t]&&e.nodes[t].data.hidden,selected:e.events.selected===t,topLevel:n.node(t).isTopLevelCanvas()}}));return React__default.default.createElement(StyledDiv,{selected:c.selected,ref:d,depth:n},React__default.default.createElement("div",{className:"inner"},React__default.default.createElement("div",{ref:i},c.topLevel?React__default.default.createElement(TopLevelIndicator,null,React__default.default.createElement(SvgLinked,null)):null,React__default.default.createElement("div",{className:"layer-name s"},React__default.default.createElement(EditableLayerName,null)),React__default.default.createElement("div",null,r&&r.length?React__default.default.createElement(Expand,{expanded:a,onMouseDown:function(){return l()}},React__default.default.createElement(SvgArrow,null)):null))))},LayerNodeDiv=styled__default.default.div(templateObject_1||(templateObject_1=__makeTemplateObject(["\n background: ",";\n display: block;\n padding-bottom: ","px;\n"],["\n background: ",";\n display: block;\n padding-bottom: ","px;\n"])),(function(e){return e.hovered?"#f1f1f1":"transparent"}),(function(e){return e.hasCanvases&&e.expanded?5:0})),LayerChildren=styled__default.default.div(templateObject_2||(templateObject_2=__makeTemplateObject(["\n margin: 0 0 0 0px;\n background: ",";\n position: relative;\n\n ","\n"],["\n margin: 0 0 0 0px;\n background: ",";\n position: relative;\n\n ","\n"])),(function(e){return e.hasCanvases?"rgba(255, 255, 255, 0.02)":"transparent"}),(function(e){return e.hasCanvases?'\n \n box-shadow: 0px 0px 44px -1px #00000014;\n border-radius: 10px;\n margin-right: 5px;\n margin-bottom:5px;\n margin-top:5px; \n > * { overflow:hidden; }\n &:before { \n position:absolute;\n left:-19px;\n width: 2px;\n height:100%;\n content: " ";\n background:#00000012;\n }\n ':""})),DefaultLayer=function(e){var t=e.children,n=useLayer((function(e){return{hovered:e.event.hovered,expanded:e.expanded}})),a=n.id,r=n.expanded,o=n.hovered,d=n.connectors.layer,i=core.useEditor((function(e,t){return{hasChildCanvases:t.node(a).isParentOfTopLevelNodes()}})).hasChildCanvases;return React__default.default.createElement(LayerNodeDiv,{ref:d,expanded:r,hasCanvases:i,hovered:o},React__default.default.createElement(DefaultLayerHeader,null),t?React__default.default.createElement(LayerChildren,{hasCanvases:i,className:"craft-layer-children"},t):null)},LayerManagerProvider=function(e){var t=e.children,n=utils.useMethods(LayerMethods,{layers:{},events:{selected:null,dragged:null,hovered:null},options:_assign({renderLayer:DefaultLayer},e.options)});return React__default.default.createElement(LayerManagerContext.Provider,{value:{store:n}},React__default.default.createElement(EventManager,null,t))},Layers=function(e){var t=__rest(e,[]);return React__default.default.createElement(LayerManagerProvider,{options:t},React__default.default.createElement(LayerContextProvider,{id:utils.ROOT_NODE,depth:0}))};exports.Layers=Layers,exports.useLayer=useLayer;