feat: update link system and UI (#12)

* Add placeholder values to font setting selects, keep font colorpicker not set when no value, etc * Show infobox creation button on datasets too, show dataset title field, name default field area Template for dataset * fix bug where default fields showed on dataset children * update placeholders for typography fields * dont show dataset name on infobox pane, show unique template name for dataset, textBlock, imageBlock, etc * wip: link popup, add icons, etc * wip: update UI and fix restrictions * feat: plug-ins install page (#625) Co-authored-by: KaWaite <[email protected]> * wip:link system, dataset parent/children right panel mostly working * wip: fix storybook files that used deleted props * update dynamic colours for noneditablefield, get infoboxes working correctly with passed fields, etc * remove old console logs * fix colors, clean up some logic, etc * filter overrides correctly for layers(will now use any overridden values) * Update storybook files, condense logic, remove unused code, etc * change so only layers that are layerGroups can link dataset data * revert change that had non-linked items passing as linked * update storybook file, change group prop to isTemplate for better understanding * fix dependency flow * fix error * update gql * chore: lock file maintenance (#653) Co-authored-by: Renovate Bot <[email protected]> * chore: fix deployment workflow * fix: gql schema * chore: fix trigger_staging workflow * remove conditional that isn't necessary anymore * fix logic to work for all usecases: override, link, prop passing, nothing, parent, child * revert code to show backend bug again, fix linting * convert selectableType to string if URL since url from a dataset can be/probably will be of type string * missed yaml in last commit Co-authored-by: KaWaite <[email protected]> Co-authored-by: HideBa <[email protected]> Co-authored-by: KaWaite <[email protected]> Co-authored-by: rot1024 <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot <[email protected]>
reearth · Jul 8, 2021 · 51de778 · 51de778
1 parent 0310f50
commit 51de778
Show file tree

Hide file tree

Showing 59 changed files with 12,559 additions and 12,207 deletions.
diff --git a/src/components/atoms/AdditionButton/index.tsx b/src/components/atoms/AdditionButton/index.tsx
@@ -15,24 +15,24 @@ export interface Props {
 const AdditionButton: React.FC<Props> = ({ className, children, disabled, onClick }) => {
   const referenceElement = useRef<HTMLDivElement>(null);
   const popperElement = useRef<HTMLDivElement>(null);
-  const { styles, attributes, update: updatePopper } = usePopper(
-    referenceElement.current,
-    popperElement.current,
-    {
-      placement: "bottom",
-      strategy: "fixed",
-      modifiers: [
-        {
-          name: "eventListeners",
-          enabled: false,
-          options: {
-            scroll: false,
-            resize: false,
-          },
+  const {
+    styles,
+    attributes,
+    update: updatePopper,
+  } = usePopper(referenceElement.current, popperElement.current, {
+    placement: "bottom",
+    strategy: "fixed",
+    modifiers: [
+      {
+        name: "eventListeners",
+        enabled: false,
+        options: {
+          scroll: false,
+          resize: false,
         },
-      ],
-    },
-  );
+      },
+    ],
+  });
 
   const handleClick = useCallback(() => {
     if (disabled) return;

diff --git a/src/components/atoms/Icon/Icons/fieldClear.svg b/src/components/atoms/Icon/Icons/fieldClear.svg
diff --git a/src/components/atoms/Icon/Icons/fieldLinked.svg b/src/components/atoms/Icon/Icons/fieldLinked.svg
diff --git a/src/components/atoms/Icon/icons.ts b/src/components/atoms/Icon/icons.ts
@@ -89,6 +89,8 @@ import NewWorkspace from "./Icons/newWorkspace.svg";
 import Preview from "./Icons/preview.svg";
 import Install from "./Icons/install.svg";
 import CopyCode from "./Icons/copyCode.svg";
+import FieldClear from "./Icons/fieldClear.svg";
+import FieldLinked from "./Icons/fieldLinked.svg";
 
 // Misc
 import Logo from "./Icons/reearthLogo.svg";
@@ -197,6 +199,8 @@ export default {
   newWorkspace: NewWorkspace,
   preview: Preview,
   copyCode: CopyCode,
+  fieldLinked: FieldLinked,
+  fieldClear: FieldClear,
   map: MapIcon,
   noProjects: NoProjects,
   topPage: TopPage,

diff --git a/src/components/atoms/InsertionBar/index.tsx b/src/components/atoms/InsertionBar/index.tsx
@@ -22,24 +22,24 @@ const InsertionBar: React.FC<Props> = ({
 }) => {
   const referenceElement = useRef<HTMLDivElement>(null);
   const popperElement = useRef<HTMLDivElement>(null);
-  const { styles, attributes, update: updatePopper } = usePopper(
-    referenceElement.current,
-    popperElement.current,
-    {
-      placement: "bottom",
-      strategy: "fixed",
-      modifiers: [
-        {
-          name: "eventListeners",
-          enabled: false,
-          options: {
-            scroll: false,
-            resize: false,
-          },
+  const {
+    styles,
+    attributes,
+    update: updatePopper,
+  } = usePopper(referenceElement.current, popperElement.current, {
+    placement: "bottom",
+    strategy: "fixed",
+    modifiers: [
+      {
+        name: "eventListeners",
+        enabled: false,
+        options: {
+          scroll: false,
+          resize: false,
         },
-      ],
-    },
-  );
+      },
+    ],
+  });
 
   const handleClick = useCallback(() => {
     if (mode !== "visible") return;

diff --git a/src/components/atoms/Markdown/index.tsx b/src/components/atoms/Markdown/index.tsx
@@ -25,9 +25,10 @@ const Markdown: React.FC<Props> = ({
   onClick,
   onDoubleClick,
 }) => {
-  const dark = useMemo(() => (backgroundColor ? isDark(backgroundColor) : false), [
-    backgroundColor,
-  ]);
+  const dark = useMemo(
+    () => (backgroundColor ? isDark(backgroundColor) : false),
+    [backgroundColor],
+  );
 
   return (
     <Wrapper

diff --git a/src/components/atoms/PropertyGroup/index.tsx b/src/components/atoms/PropertyGroup/index.tsx
@@ -36,7 +36,6 @@ const PropertyTitle = styled.div`
   background-color: ${props => props.theme.properties.bg};
   padding: 8px 16px;
   text-align: left;
-  cursor: pointer;
   user-select: none;
   display: flex;
   align-items: center;

diff --git a/src/components/atoms/Select/index.tsx b/src/components/atoms/Select/index.tsx
@@ -2,9 +2,10 @@ import React, { useState, useRef, useCallback, useLayoutEffect } from "react";
 import { useClickAway } from "react-use";
 import { usePopper } from "react-popper";
 import { useMergeRefs } from "use-callback-ref";
+import { useIntl } from "react-intl";
+
 import { styled, css, useTheme, metrics } from "@reearth/theme";
 import { metricsSizes } from "@reearth/theme/metrics";
-import colors from "@reearth/theme/colors";
 import Icon from "@reearth/components/atoms/Icon";
 import Text from "@reearth/components/atoms/Text";
 
@@ -26,7 +27,9 @@ type OptionElement<Value extends string | number> = React.ReactElement<OptionPro
 export type Props<Value extends string | number> = {
   className?: string;
   value?: Value;
+  placeholder?: string;
   inactive?: boolean;
+  color?: string;
   fullWidth?: boolean;
   onChange?: (value: Value) => void;
   children?: OptionElement<Value>[];
@@ -41,49 +44,52 @@ const Select = <Value extends string | number>(
   {
     className,
     value: selectedValue,
+    placeholder,
     inactive = false,
+    color,
     fullWidth = false,
     onChange,
     children,
   }: Props<Value>,
   ref: React.Ref<HTMLDivElement>,
 ) => {
+  const intl = useIntl();
   const [open, setOpen] = useState(false);
   const [focusedValue, setFocusedValue] = useState(selectedValue);
 
   const wrapperRef = useRef<HTMLDivElement>(null);
   const listRef = useRef<HTMLUListElement>(null);
   const mergedRef = useMergeRefs(ref ? [ref, wrapperRef] : [wrapperRef]);
-  const { styles, attributes, update: updatePopper } = usePopper(
-    wrapperRef.current,
-    listRef.current,
-    {
-      placement: "bottom",
-      modifiers: [
-        {
-          name: "flip",
-          enabled: true,
-          options: {
-            fallbackPlacements: ["top"],
-          },
+  const {
+    styles,
+    attributes,
+    update: updatePopper,
+  } = usePopper(wrapperRef.current, listRef.current, {
+    placement: "bottom",
+    modifiers: [
+      {
+        name: "flip",
+        enabled: true,
+        options: {
+          fallbackPlacements: ["top"],
         },
-        {
-          name: "offset",
-          options: {
-            offset: [0, 4],
-          },
+      },
+      {
+        name: "offset",
+        options: {
+          offset: [0, 4],
         },
-        {
-          name: "eventListeners",
-          enabled: !open,
-          options: {
-            scroll: false,
-            resize: false,
-          },
+      },
+      {
+        name: "eventListeners",
+        enabled: !open,
+        options: {
+          scroll: false,
+          resize: false,
         },
-      ],
-    },
-  );
+      },
+    ],
+  });
 
   const isValidElement = (object: {} | null | undefined): object is OptionElement<Value> =>
     React.isValidElement(object);
@@ -219,8 +225,8 @@ const Select = <Value extends string | number>(
         <Selected
           inactive={inactive}
           size="xs"
-          color={inactive ? "" : theme.properties.contentsText}>
-          {selectedLabel}
+          color={!selectedValue ? theme.colors.text.weak : color}>
+          {selectedLabel || placeholder || intl.formatMessage({ defaultMessage: "not set" })}
         </Selected>
         <StyledDownArrow icon="arrowSelect" />
       </SelectWrapper>
@@ -277,8 +283,6 @@ const SelectWrapper = styled.div`
 const Selected = styled(Text)<{ inactive: boolean }>`
   flex: 1;
   padding: 3px;
-  color: ${({ inactive, theme }) =>
-    inactive ? colors.outline.main : theme.properties.contentsText};
 `;
 
 const OptionList = styled.ul<{ fullWidth: boolean; open: boolean }>`

diff --git a/src/components/atoms/SelectBox/index.tsx b/src/components/atoms/SelectBox/index.tsx
@@ -37,9 +37,10 @@ const SelectField = <Value extends string | number = string>({
       value={selected}
       inactive={disabled}
       onChange={onChange}
-      fullWidth>
+      fullWidth
+      color={color}>
       {items.map(({ key, label, icon }) => (
-        <Option key={key} textColor={color} value={key} label={label}>
+        <Option key={key} value={key} label={label}>
           <OptionCheck size="xs">{key === selected && <Icon icon="check" size={12} />}</OptionCheck>
           {hasIcon && <OptionIcon size="xs">{icon && <Icon icon={icon} />}</OptionIcon>}
           {label}
@@ -67,14 +68,13 @@ const OptionIcon = styled(Text)`
 
 const Option = styled.li<{
   focused?: boolean;
-  textColor?: string;
   label?: string;
 }>`
   display: flex;
   list-style: none;
   padding: 6px;
   font-size: ${fonts.sizes["2xs"]}px;
-  color: ${({ textColor, theme }) => textColor || theme.main.text};
+  color: ${({ theme }) => theme.main.text};
   background: ${({ focused, theme }) => (focused ? "transparent" : theme.properties.bg)};
   cursor: pointer;
 `;

diff --git a/src/components/atoms/SelectOption/index.tsx b/src/components/atoms/SelectOption/index.tsx
@@ -1,38 +1,18 @@
 import { styled } from "@reearth/theme";
-import colors from "@reearth/theme/colors";
 import fonts from "@reearth/theme/fonts";
 
 export type Props = {
   label: string;
-  linked?: boolean;
-  overridden?: boolean;
-  inactive?: boolean;
   focused?: boolean;
-  selected?: boolean;
 };
 
 const Option = styled.li<Props>`
   display: flex;
   list-style: none;
   padding: 6px;
   font-size: ${fonts.sizes.xs}px;
-  color: ${({ linked, overridden, selected, inactive, theme }) =>
-    selected && linked && overridden
-      ? colors.primary.main
-      : selected && linked
-      ? colors.primary.main
-      : selected && overridden
-      ? colors.danger.main
-      : selected
-      ? theme.properties.contentsText
-      : linked && overridden
-      ? colors.danger.main
-      : overridden
-      ? colors.primary.main
-      : inactive
-      ? colors.outline.main
-      : theme.properties.contentsText};
-  background: ${({ focused, theme }) => (focused ? theme.colors.bg[4] : theme.colors.bg[2])};
+  color: ${({ theme }) => theme.properties.contentsText};
+  background: ${({ focused }) => (focused ? "#222222" : "transparent")};
   cursor: pointer;
 `;
 

diff --git a/src/components/molecules/Common/Cesium/hooks.ts b/src/components/molecules/Common/Cesium/hooks.ts
@@ -130,9 +130,8 @@ export default ({
     }
   }, [cameraState, onCameraChange]);
 
-  const [imageryLayers, setImageryLayers] = useState<
-    [string, ImageryProvider, number | undefined, number | undefined][]
-  >();
+  const [imageryLayers, setImageryLayers] =
+    useState<[string, ImageryProvider, number | undefined, number | undefined][]>();
 
   useDeepCompareEffect(() => {
     const newTiles = (property?.tiles?.length ? property.tiles : undefined)
@@ -226,9 +225,11 @@ const getCamera = (viewer: CesiumViewer) => {
   if (!(camera.frustum instanceof PerspectiveFrustum)) return;
 
   const ellipsoid = viewer.scene.globe.ellipsoid;
-  const { latitude, longitude, height: altitude } = ellipsoid.cartesianToCartographic(
-    camera.position,
-  );
+  const {
+    latitude,
+    longitude,
+    height: altitude,
+  } = ellipsoid.cartesianToCartographic(camera.position);
   const lat = CesiumMath.toDegrees(latitude);
   const lng = CesiumMath.toDegrees(longitude);
   const { heading, pitch, roll } = camera;

diff --git a/src/components/molecules/Common/plugin/builtin/primitives/ellipsoid.tsx b/src/components/molecules/Common/plugin/builtin/primitives/ellipsoid.tsx
@@ -37,9 +37,10 @@ const Ellipsoid: PrimitiveComponent<Property, PluginProperty> = ({
     return new Cartesian3(radius, radius, radius);
   }, [radius]);
 
-  const material = useMemo(() => toColor(property?.default?.fillColor), [
-    property?.default?.fillColor,
-  ]);
+  const material = useMemo(
+    () => toColor(property?.default?.fillColor),
+    [property?.default?.fillColor],
+  );
 
   return !isVisible ? null : (
     <Entity id={id} onClick={onClick} position={position}>