@magic-circle/layers - npm Package Compare versions

Comparing version 0.3.0-alpha.5 to 0.3.0-alpha.6

dist/index.d.ts

@@ -19,2 +19,6 @@ /// <reference types="react" />
     selected: Store<string | null>;
+    depthStart: Store<{
+        layer: LayerExport;
+        depth: number;
+    } | null>;
     external: Store<Record<string, string[]>>;
@@ -21,0 +25,0 @@ setExternal: Store<ExternalQuery | null>;

dist/index.jsx

@@ -65,3 +65,3 @@ var __extends = (this && this.__extends) || (function () {
 import { Store, StoreFamily } from '@magic-circle/state';
-import { ArrowRight, ChevronDown, registerIcon, Layers as LayersIcon, } from '@magic-circle/styles';
+import { ArrowRight, ChevronDown, ChevronRight, AnnotationWarning, registerIcon, Layers as LayersIcon, } from '@magic-circle/styles';
 import SidebarLeft from './SidebarLeft';
@@ -71,3 +71,5 @@ import SidebarRight from './SidebarRight';
 registerIcon(ChevronDown);
+registerIcon(ChevronRight);
 registerIcon(ArrowRight);
+registerIcon(AnnotationWarning);
 var convert = function (main) {
@@ -102,2 +104,3 @@ var flat = [];
         _this.selected = new Store(null);
+        _this.depthStart = new Store(null);
         _this.external = new Store({});
@@ -124,2 +127,8 @@ _this.setExternal = new Store(null);
                 this.app.setLayoutHook(LayoutHook.SIDEBAR_RIGHT, <SidebarRight app={this.app} layers={this}/>);
+                // Track updates of selected layer and send to FE
+                this.selected.onChange(function (path) {
+                    if (path) {
+                        _this.ipc.send('layer:visible', path);
+                    }
+                });
                 return [2 /*return*/];
@@ -126,0 +135,0 @@ });

dist/SidebarLeft.jsx

@@ -5,15 +5,25 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 };
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo, Fragment } from 'react';
 import styled from 'styled-components';
 import { useStore, usePermanentState } from '@magic-circle/state';
 import { SPACING, COLORS, TYPO, Icon } from '@magic-circle/styles';
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
-var LayerRow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  align-items: center;\n  height: ", "px;\n  color: ", ";\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  background: ", ";\n  font-weight: ", ";\n\n  &:nth-child(2n) {\n    background: ", ";\n  }\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  ", "\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  align-items: center;\n  height: ", "px;\n  color: ", ";\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  background: ", ";\n  font-weight: ", ";\n\n  &:nth-child(2n) {\n    background: ", ";\n  }\n\n  &:hover {\n    background: ", ";\n  }\n"])), TYPO.regular, function (props) { return SPACING(props.depth * 2) + SPACING(1); }, SPACING(1), SPACING(4), COLORS.white.css, function (props) {
-    return props.selected
-        ? String(COLORS.shades.s500.mix(COLORS.accent, 0.75))
-        : 'none';
+import { iconMap } from './icon';
+var MAX_DEPTH = 3;
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  position: relative;\n"])));
+var Inner = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n"])));
+var getRowColor = function (index, selected, depthZoomBase) {
+    if (selected)
+        return String(COLORS.shades.s500.mix(COLORS.accent, 0.75));
+    if (depthZoomBase)
+        return String(COLORS.shades.s700.css);
+    if (index % 2 === 1)
+        return COLORS.shades.s500.css;
+    return 'none';
+};
+var LayerRow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  align-items: center;\n  height: ", "px;\n  width: 100%;\n  color: ", ";\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  background: ", ";\n  font-weight: ", ";\n  border-bottom: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n\n  span {\n    display: flex;\n    align-items: center;\n\n    svg {\n      color: ", ";\n    }\n  }\n"], ["\n  ", "\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  align-items: center;\n  height: ", "px;\n  width: 100%;\n  color: ", ";\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  background: ", ";\n  font-weight: ", ";\n  border-bottom: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n\n  span {\n    display: flex;\n    align-items: center;\n\n    svg {\n      color: ", ";\n    }\n  }\n"])), TYPO.medium, function (props) { return SPACING(props.depth * 1) + SPACING(1); }, function (props) {
+    return props.hasChildLayers ? SPACING(1) : SPACING(2);
+}, SPACING(4), COLORS.white.css, function (props) {
+    return getRowColor(props.index, !!props.selected, !!props.depthZoomBase);
 }, function (props) { return (props.selected ? 700 : 400); }, function (props) {
-    return props.selected
-        ? String(COLORS.shades.s500.mix(COLORS.accent, 0.75))
-        : COLORS.shades.s500.css;
+    return props.depthZoomBase ? "1px solid ".concat(COLORS.shades.s100.css) : 'none';
 }, function (props) {
@@ -23,24 +33,40 @@ return props.selected
         : String(COLORS.shades.s500.mix(COLORS.accent, 0.1));
+}, function (props) {
+    return props.selected ? COLORS.white.css : COLORS.shades.s400.css;
 });
-var Chevron = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transform: rotate(", "deg);\n  transition: transform 0.2s ease;\n"], ["\n  transform: rotate(", "deg);\n  transition: transform 0.2s ease;\n"])), function (props) { return (props.collapsed ? 0 : -180); });
+var LayerIcon = styled(Icon)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: ", "px;\n"], ["\n  margin: ", "px;\n"])), SPACING(0.5));
+var LayerEmpty = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  gap: ", "px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  align-items: center;\n  height: ", "px;\n  width: 100%;\n  color: ", ";\n  background: ", ";\n  font-weight: 400;\n"], ["\n  ", "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  gap: ", "px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  align-items: center;\n  height: ", "px;\n  width: 100%;\n  color: ", ";\n  background: ", ";\n  font-weight: 400;\n"])), TYPO.regular, SPACING(1), SPACING(2), SPACING(1), SPACING(5), COLORS.shades.s300.css, COLORS.shades.s600.css);
+var Chevron = styled(Icon)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  transform: rotate(", "deg);\n  transition: transform 0.2s ease;\n"], ["\n  transform: rotate(", "deg);\n  transition: transform 0.2s ease;\n"])), function (props) { return (props.collapsed ? 0 : -180); });
 var Layer = function (_a) {
-    var layers = _a.layers, layer = _a.layer, depth = _a.depth;
+    var layers = _a.layers, layer = _a.layer, depth = _a.depth, currentDepth = _a.currentDepth, indexList = _a.indexList, _b = _a.depthZoomBase, depthZoomBase = _b === void 0 ? false : _b;
     var selected = useStore(layers.selected);
-    var _b = usePermanentState("collapsed-".concat(layer.path), !layer.collapse), expand = _b[0], setExpand = _b[1];
+    var _c = usePermanentState("collapsed-".concat(layer.path), !layer.collapse), expand = _c[0], setExpand = _c[1];
     var hasChildLayers = layer.children.filter(function (c) { return 'children' in c && !c.folder; }).length > 0;
-    return (<div key={layer.path}>
-      <LayerRow key={layer.path} depth={depth} selected={selected === layer.path} onClick={function () {
+    var reachedMaxDepth = depth >= currentDepth + MAX_DEPTH;
+    return (<Fragment key={layer.path}>
+      <LayerRow index={indexList.indexOf(layer.path)} key={layer.path} depth={depth} selected={selected === layer.path} onClick={function () {
             layers.selected.set(layer.path);
-        }}>
-        <span>{layer.name}</span>
-        {hasChildLayers && (<Chevron name="ChevronDown" width={SPACING(2)} height={SPACING(2)} onClick={function () { return setExpand(!expand); }} collapsed={!expand}/>)}
+        }} hasChildLayers={hasChildLayers} depthZoomBase={depthZoomBase}>
+        <span>
+          {layer.icon && (<LayerIcon name={iconMap[layer.icon] || 'Rows'} width={SPACING(1.5)} height={SPACING(1.5)}/>)}
+          {layer.name}
+        </span>
+        {hasChildLayers && !reachedMaxDepth && !depthZoomBase && (<Chevron name="ChevronDown" width={SPACING(2)} height={SPACING(2)} onClick={function () { return setExpand(!expand); }} collapsed={!expand}/>)}
+        {hasChildLayers && !reachedMaxDepth && depthZoomBase && (<Icon name="Close" width={SPACING(1.5)} height={SPACING(1.5)} onClick={function () { return layers.depthStart.set(null); }}/>)}
+        {hasChildLayers && reachedMaxDepth && (<Chevron name="ChevronRight" width={SPACING(2)} height={SPACING(2)} onClick={function () {
+                layers.depthStart.set({
+                    layer: layer,
+                    depth: depth,
+                });
+            }} collapsed={true}/>)}
       </LayerRow>
       {expand &&
+            !reachedMaxDepth &&
             (layer.children || []).map(function (child) {
                 if ('children' in child && !child.folder) {
-                    return (<Layer key={child.path} layers={layers} layer={child} depth={depth + 1}/>);
+                    return (<Layer key={child.path} layers={layers} layer={child} depth={depth + 1} currentDepth={currentDepth} indexList={indexList}/>);
                 }
                 return null;
             })}
-    </div>);
+    </Fragment>);
 };
@@ -52,2 +78,12 @@ var Sidebar = function (_a) {
     var selected = useStore(layers.selected);
+    var depthStart = useStore(layers.depthStart);
+    var indexList = useMemo(function () { return list.map(function (l) { return l.path; }); }, [list]);
+    var _b = useMemo(function () {
+        if (!depthStart)
+            return { startLayers: tree, currentDepth: 0 };
+        return {
+            startLayers: [depthStart.layer],
+            currentDepth: depthStart.depth,
+        };
+    }, [tree, depthStart]), startLayers = _b.startLayers, currentDepth = _b.currentDepth;
     useEffect(function () {
@@ -63,8 +99,14 @@ // If nothing is selected, try to select the first option
     return (<Container>
-      {tree.map(function (layer) {
-            return !layer.folder && (<Layer key={layer.path} layers={layers} layer={layer} depth={0}/>);
+      <Inner>
+        {tree.length === 0 && (<LayerEmpty>
+            <Icon name="AnnotationWarning" width={SPACING(2)} height={SPACING(2)}/>
+            No layers detected
+          </LayerEmpty>)}
+        {startLayers.map(function (layer) {
+            return !layer.folder && (<Layer key={layer.path} layers={layers} layer={layer} depth={0} currentDepth={currentDepth} indexList={indexList} depthZoomBase={currentDepth !== 0}/>);
         })}
+      </Inner>
     </Container>);
 };
 export default Sidebar;
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

dist/SidebarRight.jsx

@@ -9,6 +9,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import { SPACING, COLORS, TYPO, Icon, Expand } from '@magic-circle/styles';
+import { iconMap } from './icon';
 var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  color: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  color: ", ";\n"])), COLORS.white.css);
 var GroupContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var GroupHeader = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 ", "px;\n  height: ", "px;\n  background: ", ";\n  border-bottom: 1px solid ", ";\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 ", "px;\n  height: ", "px;\n  background: ", ";\n  border-bottom: 1px solid ", ";\n"])), TYPO.title, SPACING(1), SPACING(5), COLORS.shades.s600.css, String(COLORS.shades.s400.opacity(0.5)));
-var Chevron = styled(Icon)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  transform: rotate(", "deg);\n  transition: transform 0.2s ease;\n  cursor: pointer;\n"], ["\n  transform: rotate(", "deg);\n  transition: transform 0.2s ease;\n  cursor: pointer;\n"])), function (props) { return (props.collapsed ? 0 : -180); });
+var GroupHeader = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 ", "px;\n  height: ", "px;\n  background: ", ";\n  border-bottom: 1px solid ", ";\n\n  span {\n    display: flex;\n    align-items: center;\n  }\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 ", "px;\n  height: ", "px;\n  background: ", ";\n  border-bottom: 1px solid ", ";\n\n  span {\n    display: flex;\n    align-items: center;\n  }\n"])), TYPO.title, SPACING(1), SPACING(5), COLORS.shades.s600.css, String(COLORS.shades.s400.opacity(0.5)));
+var GroupIcon = styled(Icon)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-right: ", "px;\n  color: ", ";\n"], ["\n  margin-right: ", "px;\n  color: ", ";\n"])), SPACING(1), COLORS.shades.s400.css);
+var Chevron = styled(Icon)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  transform: rotate(", "deg);\n  transition: transform 0.2s ease;\n  cursor: pointer;\n"], ["\n  transform: rotate(", "deg);\n  transition: transform 0.2s ease;\n  cursor: pointer;\n"])), function (props) { return (props.collapsed ? 0 : -180); });
 var Control = function (_a) {
@@ -40,3 +42,4 @@ var layers = _a.layers, controlPath = _a.controlPath;
         // @ts-ignore
-        <Element_1 key={control.path} value={control.value} label={control.label} options={control.options} select={select} hasChanges={!shallowEqual(control.value, control.initialValue)} set={function (newValue) { return layers.setControl(control.path, newValue); }} reset={function () { return layers.resetControl(control.path); }}/>);
+        <Element_1 key={control.path} value={control.value} label={control.label} options={control.options} select={select} hasChanges={!shallowEqual(control.value, control.initialValue) &&
+                !control.watching} set={function (newValue) { return layers.setControl(control.path, newValue); }} reset={function () { return layers.resetControl(control.path); }}/>);
     }
@@ -51,3 +54,6 @@ throw new Error('Control data is corrupted');
       <GroupHeader>
-        {group.name}
+        <span>
+          <GroupIcon name={iconMap[group.icon] || 'Folder'} width={SPACING(1.5)} height={SPACING(1.5)}/>
+          {group.name}
+        </span>
         {hasChildren && (<Chevron name="ChevronDown" width={SPACING(2)} height={SPACING(2)} onClick={function () { return setExpand(!expand); }} collapsed={!expand}/>)}
@@ -85,2 +91,2 @@ </GroupHeader>
 export default SidebarRight;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package.json

 {
   "name": "@magic-circle/layers",
-  "version": "0.3.0-alpha.5",
+  "version": "0.3.0-alpha.6",
   "description": "Magic Circle layers",
@@ -35,8 +35,8 @@ "keywords": [
   "dependencies": {
-    "@magic-circle/state": "^0.3.0-alpha.5",
-    "@magic-circle/styles": "^0.3.0-alpha.5",
+    "@magic-circle/state": "^0.3.0-alpha.6",
+    "@magic-circle/styles": "^0.3.0-alpha.6",
     "shallowequal": "^1.1.0"
   },
   "devDependencies": {
-    "@magic-circle/schema": "^0.3.0-alpha.5",
+    "@magic-circle/schema": "^0.3.0-alpha.6",
     "@types/react": "^18.0.21",
@@ -52,3 +52,3 @@ "typescript": "^4.8.4"
   },
-  "gitHead": "2452bd0926ac7f6a9cd15dbe424911776d017bb2"
+  "gitHead": "7c4cd1cb046d885c4f942c4fdb205884786f0f58"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29135

increased by27.07%

Number of package files

11

increased by22.22%

Lines of code

517

increased by24.88%

Dependency changes

• Updated@magic-circle/state@^0.3.0-alpha.6

• Updated@magic-circle/styles@^0.3.0-alpha.6