@pagezilla/layers - npm Package Compare versions

@pagezilla/layers

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.1.1 to 0.1.2

dist/cjs/index.js

		@@ -1,1 +0,1 @@
		"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var utils=require("@pagezilla/utils"),React=require("react"),core=require("@pagezilla/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)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function __extends(e,t){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,n=utils.useCollector(t,e);return React.useMemo((function(){return _assign({store:t},n)}),[t,n])}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])})),i=o.actions,d=__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 i.toggleLayer(n)}}}),[i,n]),u=React.useMemo((function(){return utils.wrapConnectorHooks({layer:function(e){return r.layer(e,n)},drag:function(e){return r.drag(e,n)},layerHeader:function(e){return r.layerHeader(e,n)}})}),[r,n]);return _assign({id:n,depth:a,children:l,actions:c,connectors:u},d)}var templateObject_1$2,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)}})),i=o.data,d=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],y=v[1];React.useLayoutEffect((function(){u(t),y(!0)}),[u,t]);var _=React.useRef(r);_.current=r;var m=React.useRef(p&&t===core.ROOT_NODE);return React.useEffect((function(){!_.current&&d&&s(t)}),[s,t,d]),React.useEffect((function(){m.current&&s(t)}),[s,t]),i&&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},LayerEventHandlerContext=React.createContext(null),useLayerEventHandler=function(){return React.useContext(LayerEventHandlerContext)},LayerContextProvider=function(e){var t=e.id,n=e.depth,a=useLayerEventHandler(),r=React.useContext(LayerManagerContext).store;React.useRef(r).current=r;var o=React.useMemo((function(){return a.createConnectorsUsage()}),[a]),i=React.useMemo((function(){return utils.wrapConnectorHooks(o.connectors)}),[o]);return React.useEffect((function(){return function(){o.cleanup()}}),[o]),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}}},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.layerStore;return{layer:function(r,o){a.actions.setDOM(o,{dom:r});var i=e.inherit((function(e){e.select(r,o),e.hover(r,o),e.drag(r,o)})),d=e.addCraftEventListener(r,"mouseover",(function(e){e.craft.stopPropagation(),a.actions.setLayerEvent("hovered",o)})),l=e.addCraftEventListener(r,"dragover",(function(r){r.craft.stopPropagation(),r.preventDefault();var o=t.events,i=o.indicator,d=o.currentCanvasHovered;if(d&&i&&d.data.nodes){var l=e.getLayer(d.id).headingDom.getBoundingClientRect();if(r.clientY>l.top+10&&r.clientY<l.bottom-10){var c=d.data.nodes[d.data.nodes.length-1];if(!c)return;t.events.indicator=_assign(_assign({},i),{placement:{currentNode:n.query.node(c).get(),index:d.data.nodes.length,where:"after",parent:d},onCanvas:!0}),a.actions.setIndicator(t.events.indicator)}}})),c=e.addCraftEventListener(r,"dragenter",(function(r){r.craft.stopPropagation(),r.preventDefault();var i=t.draggedElement;if(i){var d=n.query.getDropPlaceholder(i,o,{x:r.clientX,y:r.clientY},(function(t){var n=e.getLayer(t.id);return n&&n.dom}));if(d){var l=d.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,(r.clientY>c.bottom-10&&!e.getLayer(l.id).expanded\|\|r.clientY<c.top+10)&&(d.placement.parent=u,d.placement.currentNode=l,d.placement.index=u.data.nodes?u.data.nodes.indexOf(l.id):0,r.clientY>c.bottom-10&&!e.getLayer(l.id).expanded?d.placement.where="after":r.clientY<c.top+10&&(d.placement.where="before")))}t.events.indicator=_assign(_assign({},d),{onCanvas:!1}),a.actions.setIndicator(t.events.indicator)}}}));return function(){i(),d(),l(),c()}},layerHeader:function(e,t){a.actions.setDOM(t,{headingDom:e})},drag:function(r,o){r.setAttribute("draggable","true");var i=e.addCraftEventListener(r,"dragstart",(function(e){e.craft.stopPropagation(),t.draggedElement=o})),d=e.addCraftEventListener(r,"dragend",(function(e){e.craft.stopPropagation();var r=t.events;if(r.indicator&&!r.indicator.error){var o=r.indicator.placement;n.actions.move(t.draggedElement,o.parent.id,o.index+("after"===o.where?1:0))}t.draggedElement=null,t.events.indicator=null,a.actions.setIndicator(null)}));return function(){r.removeAttribute("draggable"),i(),d()}}}},t.events={indicator:null,currentCanvasHovered:null},t}(core.DerivedCoreEventHandlers),RenderLayerIndicator=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,i=React.useMemo((function(){var e=r.indicator;if(e){var t=e.placement,n=t.where,i=t.parent,d=t.currentNode,l=d?d.id:i.id,c=e.error?o.error:o.success;if(e.onCanvas&&null!=a[i.id].dom){var u=a[i.id].dom.getBoundingClientRect(),s=a[i.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&&d?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:i}):null,t)},LayerEventContextProvider=function(e){var t=e.children,n=useLayerManager().store,a=core.useEventHandler(),r=React.useMemo((function(){return a.derive(LayerHandlers,{layerStore:n})}),[a,n]);return React__default.default.createElement(LayerEventHandlerContext.Provider,{value:r},React__default.default.createElement(RenderLayerIndicator,null),t)},SvgIcon=styled__default.default.svg.attrs({version:"1.1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 24 24",role:"img",fontSize:"inherit"})(templateObject_1$2\|\|(templateObject_1$2=__makeTemplateObject(["\n user-select: none;\n width: 1em;\n height: 1em;\n display: inline-block;\n fill: currentColor;\n flex-shrink: 0;\n font-size: 1rem;\n"],["\n user-select: none;\n width: 1em;\n height: 1em;\n display: inline-block;\n fill: currentColor;\n flex-shrink: 0;\n font-size: 1rem;\n"])));function Visibility(e){return React__default.default.createElement(SvgIcon,_assign({},e),React__default.default.createElement("path",{d:"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"}))}function VisibilityOff(e){return React__default.default.createElement(SvgIcon,_assign({},e),React__default.default.createElement("path",{d:"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"}))}function ExpandIcon(){var e=useLayer((function(e){return{expanded:e.expanded}})).id,t=core.useEditor((function(t,n){return{couldNotHide:t.nodes[e].data.parent===core.ROOT_NODE\|\|e===core.ROOT_NODE,hidden:t.nodes[e]&&t.nodes[e].data.hidden,topLevel:n.node(e).isTopLevelCanvas()}})),n=t.hidden,a=t.actions;return t.couldNotHide?null:React__default.default.createElement("div",{color:"inherit",className:"visibility","aria-label":"toggle visibility",onClick:function(t){t.preventDefault(),a.setHidden(e,!n)},onMouseDown:function(e){e.preventDefault()}},React__default.default.createElement(n?Visibility:VisibilityOff,null))}var 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],i=r[1],d=React.useRef(null),l=React.useCallback((function(e){d.current&&!d.current.contains(e.target)&&i(!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&&(d.current=e.el.current,window.removeEventListener("click",l),window.addEventListener("click",l))},onKeyDown:function(e){"Enter"!==e.key&&13!==e.keyCode\|\|i(!1)},onChange:function(t){a.setCustom(e,(function(e){return e.displayName=t.target.value}))},tagName:"h2",onDoubleClick:function(){o\|\|i(!0)}})};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 &::before {\n content: ' ';\n position: absolute;\n left: ",";\n bottom: 0;\n height: ",";\n width: 1px;\n border-left: ",";\n z-index: 2;\n }\n .inner {\n flex: 1;\n > div {\n padding: 0px;\n flex: 1;\n display: flex;\n align-items: center;\n margin-left: ","px;\n div.layer-name {\n flex: 1;\n h2 {\n font-size: 15px;\n line-height: 26px;\n }\n }\n }\n }\n .visibility {\n svg {\n font-size: 1.25rem;\n }\n }\n .toggle {\n display: flex;\n align-items: center;\n padding: 4px 12px 4px 0;\n cursor: pointer;\n }\n"],["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 4px 10px;\n background: ",";\n color: ",";\n &::before {\n content: ' ';\n position: absolute;\n left: ",";\n bottom: 0;\n height: ",";\n width: 1px;\n border-left: ",";\n z-index: 2;\n }\n .inner {\n flex: 1;\n > div {\n padding: 0px;\n flex: 1;\n display: flex;\n align-items: center;\n margin-left: ","px;\n div.layer-name {\n flex: 1;\n h2 {\n font-size: 15px;\n line-height: 26px;\n }\n }\n }\n }\n .visibility {\n svg {\n font-size: 1.25rem;\n }\n }\n .toggle {\n display: flex;\n align-items: center;\n padding: 4px 12px 4px 0;\n cursor: pointer;\n }\n"])),(function(e){return e.selected?"#2680eb":"transparent"}),(function(e){return e.selected?"#fff":"inherit"}),(function(e){var t=e.depth;return 0===t?0:2t8+2+"px"}),(function(e){return 0===e.depth?"0":"100%"}),(function(e){return 0===e.depth?"none":"1px solid black"}),(function(e){return 2e.depth8})),ExpandWithChildren=styled__default.default.a(templateObject_2$1\|\|(templateObject_2$1=__makeTemplateObject(["\n width: 16px;\n height: 16px;\n display: flex;\n position: relative;\n &::before {\n content: '","';\n position: absolute;\n font-size: 1.25rem;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n z-index: 2;\n }\n"],["\n width: 16px;\n height: 16px;\n display: flex;\n position: relative;\n &::before {\n content: '","';\n position: absolute;\n font-size: 1.25rem;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n z-index: 2;\n }\n"])),(function(e){return e.hasChildren?e.expanded?"\\229F":"\\229E":"\\22A0"})),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,i=o.drag,d=o.layerHeader,l=e.actions.toggleLayer,c=Boolean(r)&&Boolean(r.length),u=core.useEditor((function(e,n){return{selected:e.events.selected===t,topLevel:n.node(t).isTopLevelCanvas()}})),s=u.topLevel;return React__default.default.createElement(StyledDiv,{selected:u.selected,ref:i,depth:n},React__default.default.createElement("div",{className:"inner"},React__default.default.createElement("div",{ref:d},React__default.default.createElement("div",{className:"toggle"},React__default.default.createElement(ExpandWithChildren,{expanded:a,hasChildren:c,onClick:function(e){c&&(e.preventDefault(),l())}})),s?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(ExpandIcon,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 ","px;\n background: ",";\n position: relative;\n\n ","\n"],["\n margin: 0 0 0 ","px;\n background: ",";\n position: relative;\n\n ","\n"])),(function(e){return e.hasCanvases?35:0}),(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,i=n.connectors.layer,d=core.useEditor((function(e,t){return{hasChildCanvases:t.node(a).isParentOfTopLevelNodes()}})).hasChildCanvases;return React__default.default.createElement(LayerNodeDiv,{ref:i,expanded:r,hasCanvases:d,hovered:o},React__default.default.createElement(DefaultLayerHeader,null),t?React__default.default.createElement(LayerChildren,{hasCanvases:d,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(LayerEventContextProvider,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;
		"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var utils=require("@pagezilla/utils"),React=require("react"),core=require("@pagezilla/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)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function __extends(e,t){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,n=utils.useCollector(t,e);return React.useMemo((function(){return _assign({store:t},n)}),[t,n])}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])})),i=o.actions,d=__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 i.toggleLayer(n)}}}),[i,n]),u=React.useMemo((function(){return utils.wrapConnectorHooks({layer:function(e){return r.layer(e,n)},drag:function(e){return r.drag(e,n)},layerHeader:function(e){return r.layerHeader(e,n)}})}),[r,n]);return _assign({id:n,depth:a,children:l,actions:c,connectors:u},d)}var templateObject_1$2,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)}})),i=o.data,d=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],y=v[1];React.useLayoutEffect((function(){u(t),y(!0)}),[u,t]);var _=React.useRef(r);_.current=r;var m=React.useRef(p&&t===core.ROOT_NODE);return React.useEffect((function(){!_.current&&d&&s(t)}),[s,t,d]),React.useEffect((function(){m.current&&s(t)}),[s,t]),i&&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},LayerEventHandlerContext=React.createContext(null),useLayerEventHandler=function(){return React.useContext(LayerEventHandlerContext)},LayerContextProvider=function(e){var t=e.id,n=e.depth,a=useLayerEventHandler(),r=React.useContext(LayerManagerContext).store;React.useRef(r).current=r;var o=React.useMemo((function(){return a.createConnectorsUsage()}),[a]),i=React.useMemo((function(){return utils.wrapConnectorHooks(o.connectors)}),[o]);return React.useEffect((function(){return function(){o.cleanup()}}),[o]),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}}},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.layerStore;return{layer:function(r,o){a.actions.setDOM(o,{dom:r});var i=e.inherit((function(e){e.select(r,o),e.hover(r,o),e.drag(r,o)})),d=e.addCraftEventListener(r,"mouseover",(function(e){e.craft.stopPropagation(),a.actions.setLayerEvent("hovered",o)})),l=e.addCraftEventListener(r,"dragover",(function(r){r.craft.stopPropagation(),r.preventDefault();var o=t.events,i=o.indicator,d=o.currentCanvasHovered;if(d&&i&&d.data.nodes){var l=e.getLayer(d.id).headingDom.getBoundingClientRect();if(r.clientY>l.top+10&&r.clientY<l.bottom-10){var c=d.data.nodes[d.data.nodes.length-1];if(!c)return;t.events.indicator=_assign(_assign({},i),{placement:{currentNode:n.query.node(c).get(),index:d.data.nodes.length,where:"after",parent:d},onCanvas:!0}),a.actions.setIndicator(t.events.indicator)}}})),c=e.addCraftEventListener(r,"dragenter",(function(r){r.craft.stopPropagation(),r.preventDefault();var i=t.draggedElement;if(i){var d=n.query.getDropPlaceholder(i,o,{x:r.clientX,y:r.clientY},(function(t){var n=e.getLayer(t.id);return n&&n.dom}));if(d){var l=d.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,(r.clientY>c.bottom-10&&!e.getLayer(l.id).expanded\|\|r.clientY<c.top+10)&&(d.placement.parent=u,d.placement.currentNode=l,d.placement.index=u.data.nodes?u.data.nodes.indexOf(l.id):0,r.clientY>c.bottom-10&&!e.getLayer(l.id).expanded?d.placement.where="after":r.clientY<c.top+10&&(d.placement.where="before")))}t.events.indicator=_assign(_assign({},d),{onCanvas:!1}),a.actions.setIndicator(t.events.indicator)}}}));return function(){i(),d(),l(),c()}},layerHeader:function(e,t){a.actions.setDOM(t,{headingDom:e})},drag:function(r,o){r.setAttribute("draggable","true");var i=e.addCraftEventListener(r,"dragstart",(function(e){e.craft.stopPropagation(),t.draggedElement=o})),d=e.addCraftEventListener(r,"dragend",(function(e){e.craft.stopPropagation();var r=t.events;if(r.indicator&&!r.indicator.error){var o=r.indicator.placement;n.actions.move(t.draggedElement,o.parent.id,o.index+("after"===o.where?1:0))}t.draggedElement=null,t.events.indicator=null,a.actions.setIndicator(null)}));return function(){r.removeAttribute("draggable"),i(),d()}}}},t.events={indicator:null,currentCanvasHovered:null},t}(core.DerivedCoreEventHandlers),RenderLayerIndicator=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,i=React.useMemo((function(){var e=r.indicator;if(e){var t=e.placement,n=t.where,i=t.parent,d=t.currentNode,l=d?d.id:i.id,c=e.error?o.error:o.success;if(e.onCanvas&&null!=a[i.id].dom){var u=a[i.id].dom.getBoundingClientRect(),s=a[i.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&&d?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:i}):null,t)},LayerEventContextProvider=function(e){var t=e.children,n=useLayerManager().store,a=core.useEventHandler(),r=React.useMemo((function(){return a.derive(LayerHandlers,{layerStore:n})}),[a,n]);return React__default.default.createElement(LayerEventHandlerContext.Provider,{value:r},React__default.default.createElement(RenderLayerIndicator,null),t)},SvgIcon=styled__default.default.svg.attrs({version:"1.1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 24 24",role:"img",fontSize:"inherit"})(templateObject_1$2\|\|(templateObject_1$2=__makeTemplateObject(["\n user-select: none;\n width: 1em;\n height: 1em;\n display: inline-block;\n fill: currentColor;\n flex-shrink: 0;\n font-size: 1rem;\n"],["\n user-select: none;\n width: 1em;\n height: 1em;\n display: inline-block;\n fill: currentColor;\n flex-shrink: 0;\n font-size: 1rem;\n"])));function Visibility(e){return React__default.default.createElement(SvgIcon,_assign({},e),React__default.default.createElement("path",{d:"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"}))}function VisibilityOff(e){return React__default.default.createElement(SvgIcon,_assign({},e),React__default.default.createElement("path",{d:"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"}))}function ExpandIcon(){var e=useLayer((function(e){return{expanded:e.expanded}})).id,t=core.useEditor((function(t,n){return{couldNotHide:t.nodes[e].data.parent===core.ROOT_NODE\|\|e===core.ROOT_NODE,hidden:t.nodes[e]&&t.nodes[e].data.hidden,topLevel:n.node(e).isTopLevelCanvas()}})),n=t.hidden,a=t.actions;return t.couldNotHide?null:React__default.default.createElement("div",{color:"inherit",className:"visibility","aria-label":"toggle visibility",onClick:function(t){t.preventDefault(),a.setHidden(e,!n)},onMouseDown:function(e){e.preventDefault()}},React__default.default.createElement(n?Visibility:VisibilityOff,null))}var 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],i=r[1],d=React.useRef(null),l=React.useCallback((function(e){d.current&&!d.current.contains(e.target)&&i(!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&&(d.current=e.el.current,window.removeEventListener("click",l),window.addEventListener("click",l))},onKeyDown:function(e){"Enter"!==e.key&&13!==e.keyCode\|\|i(!1)},onChange:function(t){a.setCustom(e,(function(e){return e.displayName=t.target.value}))},tagName:"h2",onDoubleClick:function(){o\|\|i(!0)}})};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: 0 12px;\n background: ",";\n color: ",";\n &::before {\n content: ' ';\n position: absolute;\n left: ",";\n bottom: 0;\n height: ",";\n width: 1px;\n border-left: ",";\n z-index: 2;\n }\n .inner {\n flex: 1;\n > div {\n padding: 0px;\n flex: 1;\n display: flex;\n align-items: center;\n margin-left: ","px;\n div.layer-name {\n flex: 1;\n h2 {\n font-size: 0.875rem;\n line-height: 1.57;\n }\n }\n }\n }\n .visibility {\n svg {\n font-size: 1.25rem;\n }\n }\n .toggle {\n display: flex;\n align-items: center;\n padding: 4px 12px 4px 0;\n cursor: pointer;\n }\n"],["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 12px;\n background: ",";\n color: ",";\n &::before {\n content: ' ';\n position: absolute;\n left: ",";\n bottom: 0;\n height: ",";\n width: 1px;\n border-left: ",";\n z-index: 2;\n }\n .inner {\n flex: 1;\n > div {\n padding: 0px;\n flex: 1;\n display: flex;\n align-items: center;\n margin-left: ","px;\n div.layer-name {\n flex: 1;\n h2 {\n font-size: 0.875rem;\n line-height: 1.57;\n }\n }\n }\n }\n .visibility {\n svg {\n font-size: 1.25rem;\n }\n }\n .toggle {\n display: flex;\n align-items: center;\n padding: 4px 12px 4px 0;\n cursor: pointer;\n }\n"])),(function(e){return e.selected?"#0678BE":"transparent"}),(function(e){return e.selected?"#fff":"inherit"}),(function(e){var t=e.depth;return 0===t?0:2t8+2+"px"}),(function(e){return 0===e.depth?"0":"100%"}),(function(e){return 0===e.depth?"none":"1px solid black"}),(function(e){return 2e.depth8})),ExpandWithChildren=styled__default.default.a(templateObject_2$1\|\|(templateObject_2$1=__makeTemplateObject(["\n width: 16px;\n height: 16px;\n display: flex;\n position: relative;\n &:hover {\n color: inherit;\n }\n &::before {\n content: '","';\n position: absolute;\n font-size: 1.25rem;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n z-index: 2;\n }\n"],["\n width: 16px;\n height: 16px;\n display: flex;\n position: relative;\n &:hover {\n color: inherit;\n }\n &::before {\n content: '","';\n position: absolute;\n font-size: 1.25rem;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n z-index: 2;\n }\n"])),(function(e){return e.hasChildren?e.expanded?"\\229F":"\\229E":"\\22A0"})),TopLevelIndicator=styled__default.default.div(templateObject_3\|\|(templateObject_3=__makeTemplateObject(["\n margin-left: -22px;\n margin-right: 10px;\n svg {\n width: 12px;\n height: 12px;\n }\n"],["\n margin-left: -22px;\n margin-right: 10px;\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,i=o.drag,d=o.layerHeader,l=e.actions.toggleLayer,c=Boolean(r)&&Boolean(r.length),u=core.useEditor((function(e,n){return{selected:e.events.selected===t,topLevel:n.node(t).isTopLevelCanvas()}})),s=u.topLevel;return React__default.default.createElement(StyledDiv,{selected:u.selected,ref:i,depth:n},React__default.default.createElement("div",{className:"inner"},React__default.default.createElement("div",{ref:d},React__default.default.createElement("div",{className:"toggle"},React__default.default.createElement(ExpandWithChildren,{expanded:a,hasChildren:c,onClick:function(e){c&&(e.preventDefault(),l())}})),s?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(ExpandIcon,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;\n position: relative;\n ","\n"],["\n margin: 0;\n position: relative;\n ","\n"])),(function(e){return e.hasCanvases?"> * { overflow:hidden; }":""})),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,i=n.connectors.layer,d=core.useEditor((function(e,t){return{hasChildCanvases:t.node(a).isParentOfTopLevelNodes()}})).hasChildCanvases;return React__default.default.createElement(LayerNodeDiv,{ref:i,expanded:r,hasCanvases:d,hovered:o},React__default.default.createElement(DefaultLayerHeader,null),t?React__default.default.createElement(LayerChildren,{hasCanvases:d,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(LayerEventContextProvider,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;

dist/esm/index.js

		@@ -1,2 +0,2 @@
		import{useCollector as e,wrapConnectorHooks as n,RenderIndicator as t,useMethods as r,ROOT_NODE as a}from"@pagezilla/utils";import o,{createContext as i,useMemo as d,useContext as l,useState as c,useLayoutEffect as s,useRef as u,useEffect as p,useCallback as f}from"react";import{useEditor as v,ROOT_NODE as g,DerivedCoreEventHandlers as h,useEventHandler as m}from"@pagezilla/core";import x from"styled-components";import y from"react-contenteditable";
		import{useCollector as e,wrapConnectorHooks as n,RenderIndicator as t,useMethods as r,ROOT_NODE as a}from"@pagezilla/utils";import o,{createContext as i,useMemo as d,useContext as l,useState as c,useLayoutEffect as s,useRef as u,useEffect as p,useCallback as f}from"react";import{useEditor as v,ROOT_NODE as h,DerivedCoreEventHandlers as g,useEventHandler as m}from"@pagezilla/core";import y from"styled-components";import x from"react-contenteditable";
		/! ****************************************************************************
		@@ -15,2 +15,2 @@ Copyright (c) Microsoft Corporation.
		PERFORMANCE OF THIS SOFTWARE.
		***************************************************************************** /var b=function(e,n){return(b=Object.setPrototypeOf\|\|{__proto__:[]}instanceof Array&&function(e,n){e.__proto__=n}\|\|function(e,n){for(var t in n)n.hasOwnProperty(t)&&(e[t]=n[t])})(e,n)},E=function(){return(E=Object.assign\|\|function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var a in n=arguments[t])Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a]);return e}).apply(this,arguments)};function w(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)n.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(t[r[a]]=e[r[a]])}return t}function C(e,n){return Object.defineProperty?Object.defineProperty(e,"raw",{value:n}):e.raw=n,e}var L=o.createContext({}),O=i({});function k(n){var t=l(O).store,r=e(t,n);return d((function(){return E({store:t},r)}),[t,r])}function z(e){var t=l(L),r=t.id,a=t.depth,o=t.connectors,i=k((function(n){return r&&n.layers[r]&&e&&e(n.layers[r])})),c=i.actions,s=w(i,["actions"]),u=v((function(e,n){return{children:e.nodes[r]&&n.node(r).descendants()}})).children,p=d((function(){return{toggleLayer:function(){return c.toggleLayer(r)}}}),[c,r]),f=d((function(){return n({layer:function(e){return o.layer(e,r)},drag:function(e){return o.drag(e,r)},layerHeader:function(e){return o.layerHeader(e,r)}})}),[o,r]);return E({id:r,depth:a,children:u,actions:p,connectors:f},s)}var D,N=function(){var e=z((function(e){return{expanded:e.expanded}})),n=e.id,t=e.depth,r=e.children,a=e.expanded,i=v((function(e,t){return{data:e.nodes[n]&&e.nodes[n].data,shouldBeExpanded:e.events.selected&&t.node(e.events.selected).ancestors(!0).includes(n)}})),d=i.data,l=i.shouldBeExpanded,f=k((function(e){return{renderLayer:e.options.renderLayer,expandRootOnLoad:e.options.expandRootOnLoad}})),h=f.actions,m=h.registerLayer,x=h.toggleLayer,y=f.renderLayer,b=f.expandRootOnLoad,E=c(!1),w=E[0],C=E[1];s((function(){m(n),C(!0)}),[m,n]);var L=u(a);L.current=a;var O=u(b&&n===g);return p((function(){!L.current&&l&&x(n)}),[x,n,l]),p((function(){O.current&&x(n)}),[x,n]),d&&w?o.createElement("div",{className:"craft-layer-node "+n},o.createElement(y,{},r&&a?r.map((function(e){return o.createElement(_,{key:e,id:e,depth:t+1})})):null)):null},P=i(null),_=function(e){var t=e.id,r=e.depth,a=l(P),i=l(O).store;u(i).current=i;var c=d((function(){return a.createConnectorsUsage()}),[a]),s=d((function(){return n(c.connectors)}),[c]);return p((function(){return function(){c.cleanup()}}),[c]),v((function(e){return{exists:!!e.nodes[t]}})).exists?o.createElement(L.Provider,{value:{id:t,depth:r,connectors:s}},o.createElement(N,null)):null},M=function(e){return{setLayerEvent:function(n,t){if(null===t\|\|e.layers[t]){var r=e.events[n];r&&t!==r&&(e.layers[r].event[n]=!1),t?(e.layers[t].event[n]=!0,e.events[n]=t):e.events[n]=null}},registerLayer:function(n){e.layers[n]\|\|(e.layers[n]={dom:null,headingDom:null,expanded:!1,id:n,event:{selected:!1,hovered:!1}})},setDOM:function(n,t){e.layers[n]=E(E(E({},e.layers[n]),t.dom?{dom:t.dom}:{}),t.headingDom?{headingDom:t.headingDom}:{})},toggleLayer:function(n){e.layers[n].expanded=!e.layers[n].expanded},setIndicator:function(n){e.events.indicator=n}}},j=function(e){function n(){return null!==e&&e.apply(this,arguments)\|\|this}return function(e,n){function t(){this.constructor=e}b(e,n),e.prototype=null===n?Object.create(n):(t.prototype=n.prototype,new t)}(n,e),n.prototype.getLayer=function(e){return this.options.layerStore.getState().layers[e]},n.prototype.handlers=function(){var e=this,t=this.derived.options.store,r=this.options.layerStore;return{layer:function(a,o){r.actions.setDOM(o,{dom:a});var i=e.inherit((function(e){e.select(a,o),e.hover(a,o),e.drag(a,o)})),d=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=n.events,i=o.indicator,d=o.currentCanvasHovered;if(d&&i&&d.data.nodes){var l=e.getLayer(d.id).headingDom.getBoundingClientRect();if(a.clientY>l.top+10&&a.clientY<l.bottom-10){var c=d.data.nodes[d.data.nodes.length-1];if(!c)return;n.events.indicator=E(E({},i),{placement:{currentNode:t.query.node(c).get(),index:d.data.nodes.length,where:"after",parent:d},onCanvas:!0}),r.actions.setIndicator(n.events.indicator)}}})),c=e.addCraftEventListener(a,"dragenter",(function(a){a.craft.stopPropagation(),a.preventDefault();var i=n.draggedElement;if(i){var d=t.query.getDropPlaceholder(i,o,{x:a.clientX,y:a.clientY},(function(n){var t=e.getLayer(n.id);return t&&t.dom}));if(d){var l=d.placement.parent,c=e.getLayer(l.id).headingDom.getBoundingClientRect();if(n.events.currentCanvasHovered=null,t.query.node(l.id).isCanvas()&&l.data.parent){var s=t.query.node(l.data.parent).get();t.query.node(s.id).isCanvas()&&(n.events.currentCanvasHovered=l,(a.clientY>c.bottom-10&&!e.getLayer(l.id).expanded\|\|a.clientY<c.top+10)&&(d.placement.parent=s,d.placement.currentNode=l,d.placement.index=s.data.nodes?s.data.nodes.indexOf(l.id):0,a.clientY>c.bottom-10&&!e.getLayer(l.id).expanded?d.placement.where="after":a.clientY<c.top+10&&(d.placement.where="before")))}n.events.indicator=E(E({},d),{onCanvas:!1}),r.actions.setIndicator(n.events.indicator)}}}));return function(){i(),d(),l(),c()}},layerHeader:function(e,n){r.actions.setDOM(n,{headingDom:e})},drag:function(a,o){a.setAttribute("draggable","true");var i=e.addCraftEventListener(a,"dragstart",(function(e){e.craft.stopPropagation(),n.draggedElement=o})),d=e.addCraftEventListener(a,"dragend",(function(e){e.craft.stopPropagation();var a=n.events;if(a.indicator&&!a.indicator.error){var o=a.indicator.placement;t.actions.move(n.draggedElement,o.parent.id,o.index+("after"===o.where?1:0))}n.draggedElement=null,n.events.indicator=null,r.actions.setIndicator(null)}));return function(){a.removeAttribute("draggable"),i(),d()}}}},n.events={indicator:null,currentCanvasHovered:null},n}(h),B=function(e){var n=e.children,r=k((function(e){return e})),a=r.layers,i=r.events,l=v((function(e){return{enabled:e.options.enabled}})).query.getOptions().indicator,c=d((function(){var e=i.indicator;if(e){var n=e.placement,t=n.where,r=n.parent,o=n.currentNode,d=o?o.id:r.id,c=e.error?l.error:l.success;if(e.onCanvas&&null!=a[r.id].dom){var s=a[r.id].dom.getBoundingClientRect(),u=a[r.id].headingDom.getBoundingClientRect();return{top:u.top,left:s.left,width:s.width,height:u.height,background:"transparent",borderWidth:"1px",borderColor:c}}if(!a[d])return;var p=a[d].headingDom.getBoundingClientRect(),f=a[d].dom.getBoundingClientRect();return{top:"after"!==t&&o?f.top:f.top+f.height,left:p.left,width:f.width-p.left,height:2,borderWidth:0,background:c}}}),[i,l.error,l.success,a]);return o.createElement("div",null,i.indicator?o.createElement(t,{style:c}):null,n)},H=function(e){var n=e.children,t=k().store,r=m(),a=d((function(){return r.derive(j,{layerStore:t})}),[r,t]);return o.createElement(P.Provider,{value:a},o.createElement(B,null),n)},R=x.svg.attrs({version:"1.1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 24 24",role:"img",fontSize:"inherit"})(D\|\|(D=C(["\n user-select: none;\n width: 1em;\n height: 1em;\n display: inline-block;\n fill: currentColor;\n flex-shrink: 0;\n font-size: 1rem;\n"],["\n user-select: none;\n width: 1em;\n height: 1em;\n display: inline-block;\n fill: currentColor;\n flex-shrink: 0;\n font-size: 1rem;\n"])));function Y(e){return o.createElement(R,E({},e),o.createElement("path",{d:"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"}))}function S(e){return o.createElement(R,E({},e),o.createElement("path",{d:"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"}))}function q(){var e=z((function(e){return{expanded:e.expanded}})).id,n=v((function(n,t){return{couldNotHide:n.nodes[e].data.parent===g\|\|e===g,hidden:n.nodes[e]&&n.nodes[e].data.hidden,topLevel:t.node(e).isTopLevelCanvas()}})),t=n.hidden,r=n.actions;return n.couldNotHide?null:o.createElement("div",{color:"inherit",className:"visibility","aria-label":"toggle visibility",onClick:function(n){n.preventDefault(),r.setHidden(e,!t)},onMouseDown:function(e){e.preventDefault()}},o.createElement(t?Y:S,null))}var A=function(){var e=z().id,n=v((function(n){return{displayName:n.nodes[e]&&n.nodes[e].data.custom.displayName?n.nodes[e].data.custom.displayName:n.nodes[e].data.displayName,hidden:n.nodes[e]&&n.nodes[e].data.hidden}})),t=n.displayName,r=n.actions,a=c(!1),i=a[0],d=a[1],l=u(null),s=f((function(e){l.current&&!l.current.contains(e.target)&&d(!1)}),[]);return p((function(){return function(){window.removeEventListener("click",s)}}),[s]),o.createElement(y,{html:t,disabled:!i,ref:function(e){e&&(l.current=e.el.current,window.removeEventListener("click",s),window.addEventListener("click",s))},onKeyDown:function(e){"Enter"!==e.key&&13!==e.keyCode\|\|d(!1)},onChange:function(n){r.setCustom(e,(function(e){return e.displayName=n.target.value}))},tagName:"h2",onDoubleClick:function(){i\|\|d(!0)}})};function I(){return(I=Object.assign\|\|function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var T,V,W,X,F,K=o.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"}),U=o.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"}),G=function(e){return o.createElement("svg",I({viewBox:"0 0 18 18"},e),K,U)},J=x.div(T\|\|(T=C(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 4px 10px;\n background: ",";\n color: ",";\n &::before {\n content: ' ';\n position: absolute;\n left: ",";\n bottom: 0;\n height: ",";\n width: 1px;\n border-left: ",";\n z-index: 2;\n }\n .inner {\n flex: 1;\n > div {\n padding: 0px;\n flex: 1;\n display: flex;\n align-items: center;\n margin-left: ","px;\n div.layer-name {\n flex: 1;\n h2 {\n font-size: 15px;\n line-height: 26px;\n }\n }\n }\n }\n .visibility {\n svg {\n font-size: 1.25rem;\n }\n }\n .toggle {\n display: flex;\n align-items: center;\n padding: 4px 12px 4px 0;\n cursor: pointer;\n }\n"],["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 4px 10px;\n background: ",";\n color: ",";\n &::before {\n content: ' ';\n position: absolute;\n left: ",";\n bottom: 0;\n height: ",";\n width: 1px;\n border-left: ",";\n z-index: 2;\n }\n .inner {\n flex: 1;\n > div {\n padding: 0px;\n flex: 1;\n display: flex;\n align-items: center;\n margin-left: ","px;\n div.layer-name {\n flex: 1;\n h2 {\n font-size: 15px;\n line-height: 26px;\n }\n }\n }\n }\n .visibility {\n svg {\n font-size: 1.25rem;\n }\n }\n .toggle {\n display: flex;\n align-items: center;\n padding: 4px 12px 4px 0;\n cursor: pointer;\n }\n"])),(function(e){return e.selected?"#2680eb":"transparent"}),(function(e){return e.selected?"#fff":"inherit"}),(function(e){var n=e.depth;return 0===n?0:2n8+2+"px"}),(function(e){return 0===e.depth?"0":"100%"}),(function(e){return 0===e.depth?"none":"1px solid black"}),(function(e){return 2e.depth8})),Q=x.a(V\|\|(V=C(["\n width: 16px;\n height: 16px;\n display: flex;\n position: relative;\n &::before {\n content: '","';\n position: absolute;\n font-size: 1.25rem;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n z-index: 2;\n }\n"],["\n width: 16px;\n height: 16px;\n display: flex;\n position: relative;\n &::before {\n content: '","';\n position: absolute;\n font-size: 1.25rem;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n z-index: 2;\n }\n"])),(function(e){return e.hasChildren?e.expanded?"\\229F":"\\229E":"\\22A0"})),Z=x.div(W\|\|(W=C(["\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"]))),$=function(){var e=z((function(e){return{expanded:e.expanded}})),n=e.id,t=e.depth,r=e.expanded,a=e.children,i=e.connectors,d=i.drag,l=i.layerHeader,c=e.actions.toggleLayer,s=Boolean(a)&&Boolean(a.length),u=v((function(e,t){return{selected:e.events.selected===n,topLevel:t.node(n).isTopLevelCanvas()}})),p=u.topLevel;return o.createElement(J,{selected:u.selected,ref:d,depth:t},o.createElement("div",{className:"inner"},o.createElement("div",{ref:l},o.createElement("div",{className:"toggle"},o.createElement(Q,{expanded:r,hasChildren:s,onClick:function(e){s&&(e.preventDefault(),c())}})),p?o.createElement(Z,null,o.createElement(G,null)):null,o.createElement("div",{className:"layer-name s"},o.createElement(A,null)))),o.createElement(q,null))},ee=x.div(X\|\|(X=C(["\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})),ne=x.div(F\|\|(F=C(["\n margin: 0 0 0 ","px;\n background: ",";\n position: relative;\n\n ","\n"],["\n margin: 0 0 0 ","px;\n background: ",";\n position: relative;\n\n ","\n"])),(function(e){return e.hasCanvases?35:0}),(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 ':""})),te=function(e){var n=e.children,t=z((function(e){return{hovered:e.event.hovered,expanded:e.expanded}})),r=t.id,a=t.expanded,i=t.hovered,d=t.connectors.layer,l=v((function(e,n){return{hasChildCanvases:n.node(r).isParentOfTopLevelNodes()}})).hasChildCanvases;return o.createElement(ee,{ref:d,expanded:a,hasCanvases:l,hovered:i},o.createElement($,null),n?o.createElement(ne,{hasCanvases:l,className:"craft-layer-children"},n):null)},re=function(e){var n=e.children,t=r(M,{layers:{},events:{selected:null,dragged:null,hovered:null},options:E({renderLayer:te},e.options)});return o.createElement(O.Provider,{value:{store:t}},o.createElement(H,null,n))},ae=function(e){var n=w(e,[]);return o.createElement(re,{options:n},o.createElement(_,{id:a,depth:0}))};export{ae as Layers,z as useLayer};
		***************************************************************************** /var b=function(e,n){return(b=Object.setPrototypeOf\|\|{__proto__:[]}instanceof Array&&function(e,n){e.__proto__=n}\|\|function(e,n){for(var t in n)n.hasOwnProperty(t)&&(e[t]=n[t])})(e,n)},E=function(){return(E=Object.assign\|\|function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var a in n=arguments[t])Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a]);return e}).apply(this,arguments)};function w(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)n.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(t[r[a]]=e[r[a]])}return t}function C(e,n){return Object.defineProperty?Object.defineProperty(e,"raw",{value:n}):e.raw=n,e}var L=o.createContext({}),O=i({});function k(n){var t=l(O).store,r=e(t,n);return d((function(){return E({store:t},r)}),[t,r])}function z(e){var t=l(L),r=t.id,a=t.depth,o=t.connectors,i=k((function(n){return r&&n.layers[r]&&e&&e(n.layers[r])})),c=i.actions,s=w(i,["actions"]),u=v((function(e,n){return{children:e.nodes[r]&&n.node(r).descendants()}})).children,p=d((function(){return{toggleLayer:function(){return c.toggleLayer(r)}}}),[c,r]),f=d((function(){return n({layer:function(e){return o.layer(e,r)},drag:function(e){return o.drag(e,r)},layerHeader:function(e){return o.layerHeader(e,r)}})}),[o,r]);return E({id:r,depth:a,children:u,actions:p,connectors:f},s)}var D,N=function(){var e=z((function(e){return{expanded:e.expanded}})),n=e.id,t=e.depth,r=e.children,a=e.expanded,i=v((function(e,t){return{data:e.nodes[n]&&e.nodes[n].data,shouldBeExpanded:e.events.selected&&t.node(e.events.selected).ancestors(!0).includes(n)}})),d=i.data,l=i.shouldBeExpanded,f=k((function(e){return{renderLayer:e.options.renderLayer,expandRootOnLoad:e.options.expandRootOnLoad}})),g=f.actions,m=g.registerLayer,y=g.toggleLayer,x=f.renderLayer,b=f.expandRootOnLoad,E=c(!1),w=E[0],C=E[1];s((function(){m(n),C(!0)}),[m,n]);var L=u(a);L.current=a;var O=u(b&&n===h);return p((function(){!L.current&&l&&y(n)}),[y,n,l]),p((function(){O.current&&y(n)}),[y,n]),d&&w?o.createElement("div",{className:"craft-layer-node "+n},o.createElement(x,{},r&&a?r.map((function(e){return o.createElement(_,{key:e,id:e,depth:t+1})})):null)):null},P=i(null),_=function(e){var t=e.id,r=e.depth,a=l(P),i=l(O).store;u(i).current=i;var c=d((function(){return a.createConnectorsUsage()}),[a]),s=d((function(){return n(c.connectors)}),[c]);return p((function(){return function(){c.cleanup()}}),[c]),v((function(e){return{exists:!!e.nodes[t]}})).exists?o.createElement(L.Provider,{value:{id:t,depth:r,connectors:s}},o.createElement(N,null)):null},B=function(e){return{setLayerEvent:function(n,t){if(null===t\|\|e.layers[t]){var r=e.events[n];r&&t!==r&&(e.layers[r].event[n]=!1),t?(e.layers[t].event[n]=!0,e.events[n]=t):e.events[n]=null}},registerLayer:function(n){e.layers[n]\|\|(e.layers[n]={dom:null,headingDom:null,expanded:!1,id:n,event:{selected:!1,hovered:!1}})},setDOM:function(n,t){e.layers[n]=E(E(E({},e.layers[n]),t.dom?{dom:t.dom}:{}),t.headingDom?{headingDom:t.headingDom}:{})},toggleLayer:function(n){e.layers[n].expanded=!e.layers[n].expanded},setIndicator:function(n){e.events.indicator=n}}},M=function(e){function n(){return null!==e&&e.apply(this,arguments)\|\|this}return function(e,n){function t(){this.constructor=e}b(e,n),e.prototype=null===n?Object.create(n):(t.prototype=n.prototype,new t)}(n,e),n.prototype.getLayer=function(e){return this.options.layerStore.getState().layers[e]},n.prototype.handlers=function(){var e=this,t=this.derived.options.store,r=this.options.layerStore;return{layer:function(a,o){r.actions.setDOM(o,{dom:a});var i=e.inherit((function(e){e.select(a,o),e.hover(a,o),e.drag(a,o)})),d=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=n.events,i=o.indicator,d=o.currentCanvasHovered;if(d&&i&&d.data.nodes){var l=e.getLayer(d.id).headingDom.getBoundingClientRect();if(a.clientY>l.top+10&&a.clientY<l.bottom-10){var c=d.data.nodes[d.data.nodes.length-1];if(!c)return;n.events.indicator=E(E({},i),{placement:{currentNode:t.query.node(c).get(),index:d.data.nodes.length,where:"after",parent:d},onCanvas:!0}),r.actions.setIndicator(n.events.indicator)}}})),c=e.addCraftEventListener(a,"dragenter",(function(a){a.craft.stopPropagation(),a.preventDefault();var i=n.draggedElement;if(i){var d=t.query.getDropPlaceholder(i,o,{x:a.clientX,y:a.clientY},(function(n){var t=e.getLayer(n.id);return t&&t.dom}));if(d){var l=d.placement.parent,c=e.getLayer(l.id).headingDom.getBoundingClientRect();if(n.events.currentCanvasHovered=null,t.query.node(l.id).isCanvas()&&l.data.parent){var s=t.query.node(l.data.parent).get();t.query.node(s.id).isCanvas()&&(n.events.currentCanvasHovered=l,(a.clientY>c.bottom-10&&!e.getLayer(l.id).expanded\|\|a.clientY<c.top+10)&&(d.placement.parent=s,d.placement.currentNode=l,d.placement.index=s.data.nodes?s.data.nodes.indexOf(l.id):0,a.clientY>c.bottom-10&&!e.getLayer(l.id).expanded?d.placement.where="after":a.clientY<c.top+10&&(d.placement.where="before")))}n.events.indicator=E(E({},d),{onCanvas:!1}),r.actions.setIndicator(n.events.indicator)}}}));return function(){i(),d(),l(),c()}},layerHeader:function(e,n){r.actions.setDOM(n,{headingDom:e})},drag:function(a,o){a.setAttribute("draggable","true");var i=e.addCraftEventListener(a,"dragstart",(function(e){e.craft.stopPropagation(),n.draggedElement=o})),d=e.addCraftEventListener(a,"dragend",(function(e){e.craft.stopPropagation();var a=n.events;if(a.indicator&&!a.indicator.error){var o=a.indicator.placement;t.actions.move(n.draggedElement,o.parent.id,o.index+("after"===o.where?1:0))}n.draggedElement=null,n.events.indicator=null,r.actions.setIndicator(null)}));return function(){a.removeAttribute("draggable"),i(),d()}}}},n.events={indicator:null,currentCanvasHovered:null},n}(g),j=function(e){var n=e.children,r=k((function(e){return e})),a=r.layers,i=r.events,l=v((function(e){return{enabled:e.options.enabled}})).query.getOptions().indicator,c=d((function(){var e=i.indicator;if(e){var n=e.placement,t=n.where,r=n.parent,o=n.currentNode,d=o?o.id:r.id,c=e.error?l.error:l.success;if(e.onCanvas&&null!=a[r.id].dom){var s=a[r.id].dom.getBoundingClientRect(),u=a[r.id].headingDom.getBoundingClientRect();return{top:u.top,left:s.left,width:s.width,height:u.height,background:"transparent",borderWidth:"1px",borderColor:c}}if(!a[d])return;var p=a[d].headingDom.getBoundingClientRect(),f=a[d].dom.getBoundingClientRect();return{top:"after"!==t&&o?f.top:f.top+f.height,left:p.left,width:f.width-p.left,height:2,borderWidth:0,background:c}}}),[i,l.error,l.success,a]);return o.createElement("div",null,i.indicator?o.createElement(t,{style:c}):null,n)},H=function(e){var n=e.children,t=k().store,r=m(),a=d((function(){return r.derive(M,{layerStore:t})}),[r,t]);return o.createElement(P.Provider,{value:a},o.createElement(j,null),n)},R=y.svg.attrs({version:"1.1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 24 24",role:"img",fontSize:"inherit"})(D\|\|(D=C(["\n user-select: none;\n width: 1em;\n height: 1em;\n display: inline-block;\n fill: currentColor;\n flex-shrink: 0;\n font-size: 1rem;\n"],["\n user-select: none;\n width: 1em;\n height: 1em;\n display: inline-block;\n fill: currentColor;\n flex-shrink: 0;\n font-size: 1rem;\n"])));function Y(e){return o.createElement(R,E({},e),o.createElement("path",{d:"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"}))}function S(e){return o.createElement(R,E({},e),o.createElement("path",{d:"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"}))}function q(){var e=z((function(e){return{expanded:e.expanded}})).id,n=v((function(n,t){return{couldNotHide:n.nodes[e].data.parent===h\|\|e===h,hidden:n.nodes[e]&&n.nodes[e].data.hidden,topLevel:t.node(e).isTopLevelCanvas()}})),t=n.hidden,r=n.actions;return n.couldNotHide?null:o.createElement("div",{color:"inherit",className:"visibility","aria-label":"toggle visibility",onClick:function(n){n.preventDefault(),r.setHidden(e,!t)},onMouseDown:function(e){e.preventDefault()}},o.createElement(t?Y:S,null))}var A=function(){var e=z().id,n=v((function(n){return{displayName:n.nodes[e]&&n.nodes[e].data.custom.displayName?n.nodes[e].data.custom.displayName:n.nodes[e].data.displayName,hidden:n.nodes[e]&&n.nodes[e].data.hidden}})),t=n.displayName,r=n.actions,a=c(!1),i=a[0],d=a[1],l=u(null),s=f((function(e){l.current&&!l.current.contains(e.target)&&d(!1)}),[]);return p((function(){return function(){window.removeEventListener("click",s)}}),[s]),o.createElement(x,{html:t,disabled:!i,ref:function(e){e&&(l.current=e.el.current,window.removeEventListener("click",s),window.addEventListener("click",s))},onKeyDown:function(e){"Enter"!==e.key&&13!==e.keyCode\|\|d(!1)},onChange:function(n){r.setCustom(e,(function(e){return e.displayName=n.target.value}))},tagName:"h2",onDoubleClick:function(){i\|\|d(!0)}})};function I(){return(I=Object.assign\|\|function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var T,V,W,X,F,K=o.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"}),U=o.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"}),G=function(e){return o.createElement("svg",I({viewBox:"0 0 18 18"},e),K,U)},J=y.div(T\|\|(T=C(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 12px;\n background: ",";\n color: ",";\n &::before {\n content: ' ';\n position: absolute;\n left: ",";\n bottom: 0;\n height: ",";\n width: 1px;\n border-left: ",";\n z-index: 2;\n }\n .inner {\n flex: 1;\n > div {\n padding: 0px;\n flex: 1;\n display: flex;\n align-items: center;\n margin-left: ","px;\n div.layer-name {\n flex: 1;\n h2 {\n font-size: 0.875rem;\n line-height: 1.57;\n }\n }\n }\n }\n .visibility {\n svg {\n font-size: 1.25rem;\n }\n }\n .toggle {\n display: flex;\n align-items: center;\n padding: 4px 12px 4px 0;\n cursor: pointer;\n }\n"],["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 12px;\n background: ",";\n color: ",";\n &::before {\n content: ' ';\n position: absolute;\n left: ",";\n bottom: 0;\n height: ",";\n width: 1px;\n border-left: ",";\n z-index: 2;\n }\n .inner {\n flex: 1;\n > div {\n padding: 0px;\n flex: 1;\n display: flex;\n align-items: center;\n margin-left: ","px;\n div.layer-name {\n flex: 1;\n h2 {\n font-size: 0.875rem;\n line-height: 1.57;\n }\n }\n }\n }\n .visibility {\n svg {\n font-size: 1.25rem;\n }\n }\n .toggle {\n display: flex;\n align-items: center;\n padding: 4px 12px 4px 0;\n cursor: pointer;\n }\n"])),(function(e){return e.selected?"#0678BE":"transparent"}),(function(e){return e.selected?"#fff":"inherit"}),(function(e){var n=e.depth;return 0===n?0:2n8+2+"px"}),(function(e){return 0===e.depth?"0":"100%"}),(function(e){return 0===e.depth?"none":"1px solid black"}),(function(e){return 2e.depth8})),Q=y.a(V\|\|(V=C(["\n width: 16px;\n height: 16px;\n display: flex;\n position: relative;\n &:hover {\n color: inherit;\n }\n &::before {\n content: '","';\n position: absolute;\n font-size: 1.25rem;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n z-index: 2;\n }\n"],["\n width: 16px;\n height: 16px;\n display: flex;\n position: relative;\n &:hover {\n color: inherit;\n }\n &::before {\n content: '","';\n position: absolute;\n font-size: 1.25rem;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n z-index: 2;\n }\n"])),(function(e){return e.hasChildren?e.expanded?"\\229F":"\\229E":"\\22A0"})),Z=y.div(W\|\|(W=C(["\n margin-left: -22px;\n margin-right: 10px;\n svg {\n width: 12px;\n height: 12px;\n }\n"],["\n margin-left: -22px;\n margin-right: 10px;\n svg {\n width: 12px;\n height: 12px;\n }\n"]))),$=function(){var e=z((function(e){return{expanded:e.expanded}})),n=e.id,t=e.depth,r=e.expanded,a=e.children,i=e.connectors,d=i.drag,l=i.layerHeader,c=e.actions.toggleLayer,s=Boolean(a)&&Boolean(a.length),u=v((function(e,t){return{selected:e.events.selected===n,topLevel:t.node(n).isTopLevelCanvas()}})),p=u.topLevel;return o.createElement(J,{selected:u.selected,ref:d,depth:t},o.createElement("div",{className:"inner"},o.createElement("div",{ref:l},o.createElement("div",{className:"toggle"},o.createElement(Q,{expanded:r,hasChildren:s,onClick:function(e){s&&(e.preventDefault(),c())}})),p?o.createElement(Z,null,o.createElement(G,null)):null,o.createElement("div",{className:"layer-name s"},o.createElement(A,null)))),o.createElement(q,null))},ee=y.div(X\|\|(X=C(["\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})),ne=y.div(F\|\|(F=C(["\n margin: 0;\n position: relative;\n ","\n"],["\n margin: 0;\n position: relative;\n ","\n"])),(function(e){return e.hasCanvases?"> { overflow:hidden; }":""})),te=function(e){var n=e.children,t=z((function(e){return{hovered:e.event.hovered,expanded:e.expanded}})),r=t.id,a=t.expanded,i=t.hovered,d=t.connectors.layer,l=v((function(e,n){return{hasChildCanvases:n.node(r).isParentOfTopLevelNodes()}})).hasChildCanvases;return o.createElement(ee,{ref:d,expanded:a,hasCanvases:l,hovered:i},o.createElement($,null),n?o.createElement(ne,{hasCanvases:l,className:"craft-layer-children"},n):null)},re=function(e){var n=e.children,t=r(B,{layers:{},events:{selected:null,dragged:null,hovered:null},options:E({renderLayer:te},e.options)});return o.createElement(O.Provider,{value:{store:t}},o.createElement(H,null,n))},ae=function(e){var n=w(e,[]);return o.createElement(re,{options:n},o.createElement(_,{id:a,depth:0}))};export{ae as Layers,z as useLayer};

package.json

		@@ -14,3 +14,3 @@ {
		],
		"version": "0.1.1",
		"version": "0.1.2",
		"main": "./dist/cjs/index.js",
		@@ -46,3 +46,3 @@ "module": "./dist/esm/index.js",
		},
		"gitHead": "1ea415a531678d6680066f69b36354541fd00688"
		"gitHead": "8f112215fe88ca91a269d653a3618d370bb7608f"
		}

lib/tsconfig.tsbuildinfo

Sorry, the diff of this file is not supported yet

Worsened metrics