release prep - supports scoped codegen

Author: softmarshmallow

editor/components/app-runner/app-runner.tsx

@@ -53,7 +53,7 @@ export function AppRunner(props: {
             overflow: "hidden",
             width: viewportsize.width || sceneSize.w || "100%",
             height: viewportsize.height || sceneSize.h || "100%",
-            boxShadow: "0px 0px 48px #63636328",
+            boxShadow: "0px 0px 48px #00000020",
           }}
         >
           <DedicatedFrameworkRunner

editor/components/codeui-code-options-control/code-options-control.tsx

@@ -31,6 +31,11 @@ export function CodeOptionsControl(props: CodeOptionsControlProps) {
     all_preset_options_map__prod[__presetname]
   );
 
+  useEffect(() => {
+    // trigger initial value
+    props.onUseroptionChange(useroption);
+  }, []);
+
   // FIXME: this should be fixed on https://github.com/gridaco/code-like-ui (view CURSOR)
   const __dirty_sort_framework = (): Option<string>[] => {
     const presets = [

editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import styled from "@emotion/styled";
+import { useEditorState } from "core/states";
 
 export function AppbarFragmentForCanvas() {
+  const [state] = useEditorState();
   return (
     <RootWrapperAppbarFragmentForCanvas>
-      <MusicAppHomeScreen>@music-app / home-screen</MusicAppHomeScreen>
+      <Breadcrumbs>{state.design?.current?.name}</Breadcrumbs>
     </RootWrapperAppbarFragmentForCanvas>
   );
 }
@@ -22,7 +24,7 @@ const RootWrapperAppbarFragmentForCanvas = styled.div`
   padding: 10px 24px;
 `;
 
-const MusicAppHomeScreen = styled.span`
+const Breadcrumbs = styled.span`
   text-overflow: ellipsis;
   font-size: 14px;
   color: grey;

editor/components/editor/editor-layer-hierarchy/editor-layer-hierarchy-tree.tsx

@@ -1,16 +1,16 @@
-import React, { memo, useCallback, useMemo, useState } from "react";
+import React, { memo, useCallback, useMemo, useReducer, useState } from "react";
 
 import styled from "@emotion/styled";
 import { TreeView } from "@editor-ui/editor";
-import { ListView } from "@editor-ui/listview";
 import { LayerRow } from "./editor-layer-hierarchy-item";
 import { useEditorState } from "core/states";
+import { useDispatch } from "core/dispatch";
 
 export function EditorLayerHierarchy() {
   const [state] = useEditorState();
+  const dispatch = useDispatch();
   const root = state.design?.current?.entry;
   const layers = root ? flatten(root) : [];
-  const [selected, setSelected] = useState<string | null>(null);
 
   const renderItem = useCallback(
     ({ id, name, depth }) => {
@@ -21,19 +21,19 @@ export function EditorLayerHierarchy() {
           id={id}
           expanded={haschildren(id) == true ? true : undefined}
           key={id}
-          selected={selected == id}
+          selected={state?.selectedNodes?.includes(id)}
           onAddClick={() => {}}
           onMenuClick={() => {}}
           onDoubleClick={() => {}}
           onPress={() => {
-            setSelected(id);
+            dispatch({ type: "select-node", node: id });
           }}
           onSelectMenuItem={() => {}}
           onContextMenu={() => {}}
         />
       );
     },
-    [selected]
+    [state?.selectedNodes]
   );
 
   const haschildren = useCallback((id: string) => {

editor/components/editor/editor-sidebar/editor-sidebar.tsx

@@ -6,7 +6,7 @@ import { EditorLayerHierarchy } from "../editor-layer-hierarchy";
 export function EditorSidebar() {
   return (
     <SideNavigation>
-      <EditorAppbarFragments.Sidebar />
+      {/* <EditorAppbarFragments.Sidebar /> */}
       <EditorLayerHierarchy />
     </SideNavigation>
   );

editor/core/actions/index.ts

@@ -11,10 +11,18 @@ export type HistoryAction =
 
 export type Action =
   //
-  PageAction;
+  | PageAction
+  //
+  | SelectNodeAction;
 
 export type ActionType = Action["type"];
 
+export type HierarchyAction = SelectNodeAction;
+export interface SelectNodeAction {
+  type: "select-node";
+  node: string;
+}
+
 export type PageAction = SelectPageAction;
 
 export interface SelectPageAction {

editor/core/reducers/editor-reducer.ts

@@ -1,9 +1,16 @@
-import { Action } from "core/actions";
+import produce from "immer";
+import { Action, SelectNodeAction } from "core/actions";
 import { EditorState } from "core/states";
 
 export function editorReducer(state: EditorState, action: Action): EditorState {
   // TODO: handle actions here.
   switch (action.type) {
+    case "select-node": {
+      const { node } = <SelectNodeAction>action;
+      return produce(state, (draft) => {
+        draft.selectedNodes = [node];
+      });
+    }
     case "select-page": {
       // return pageReducer(state, action);
     }

editor/core/reducers/history/history-reducer.ts

@@ -14,6 +14,7 @@ export function historyReducer(state: HistoryState, action: HistoryAction) {
           const nextPresent = draft.past.pop();
           if (nextPresent) {
             draft.future.unshift(
+              // @ts-ignore
               createHistoryEntry(nextPresent.actionType, currentState)
             );
             draft.present = nextPresent.state;
@@ -28,6 +29,7 @@ export function historyReducer(state: HistoryState, action: HistoryAction) {
           const nextPresent = draft.future.shift();
           if (nextPresent) {
             draft.past.push(
+              // @ts-ignore
               createHistoryEntry(nextPresent.actionType, currentState)
             );
             draft.present = nextPresent.state;
@@ -46,12 +48,17 @@ export function historyReducer(state: HistoryState, action: HistoryAction) {
         if (mergableEntry) {
           draft.past[draft.past.length - 1] = {
             ...historyEntry,
+            // @ts-ignore
             state: mergableEntry.state,
           };
         } else {
-          draft.past.push(historyEntry);
+          draft.past.push(
+            // @ts-ignore
+            historyEntry
+          );
         }
         draft.future = [];
+        // @ts-ignore
         draft.present = nextState;
       });
   }

editor/core/states/editor-initial-state.ts

@@ -4,6 +4,7 @@ export function createInitialEditorState(editor: EditorSnapshot): EditorState {
   return {
     selectedPage: editor.selectedPage,
     selectedNodes: editor.selectedNodes,
+    selectedLayersOnPreview: editor.selectedLayersOnPreview,
     design: editor.design,
   };
 }
@@ -12,6 +13,7 @@ export function createPendingEditorState(): EditorState {
   return {
     selectedPage: null,
     selectedNodes: [],
+    selectedLayersOnPreview: [],
     design: null,
   };
 }

editor/core/states/editor-state.ts

@@ -4,12 +4,14 @@ import { DesignInput } from "@designto/config/input";
 export interface EditorState {
   selectedPage: string;
   selectedNodes: string[];
+  selectedLayersOnPreview: string[];
   design: ReflectRepository;
 }
 
 export interface EditorSnapshot {
   selectedPage: string;
   selectedNodes: string[];
+  selectedLayersOnPreview: string[];
   design: ReflectRepository;
 }