@blaze-cms/plugin-google-maps-fe 0.124.0-alpha.2 → 0.124.0-alpha.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/plugin-google-maps-fe",
-  "version": "0.124.0-alpha.2",
+  "version": "0.124.0-alpha.20",
   "description": "Blaze Google maps plugin fe",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -28,7 +28,7 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@blaze-cms/nextjs-components": "^0.124.0-alpha.2",
-    "@blaze-cms/react-page-builder": "^0.124.0-alpha.2",
+    "@blaze-cms/react-page-builder": "^0.124.0-alpha.20",
     "@blaze-cms/setup-ui": "^0.92.0",
     "core-js": "^3.2.1",
     "lodash.isnumber": "^3.0.3",
@@ -44,5 +44,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "52045d2ed84e79531b9634ad5ce95b89f674382a"
+  "gitHead": "2e9866310c28c3be1283e8f4516b0a5f889c1e42"
 }

package/src/GoogleMaps/GoogleMaps.js

@@ -6,6 +6,7 @@ import { useInView } from '@blaze-react/utils/lib/customHooks';
 import { functions, isEqual, omit } from 'lodash';
 import { setMapOptions, addZoomListener } from './helpers';
 import { GOOGLE_MAPS_SCRIPT, LOAD, SCRIPT, IN_VIEW_CONFIG } from '../constants';
+import GoogleMapsHtml from './GoogleMapsHtml';
 
 const shouldNotUpdate = (props, nextProps) => {
   const [funcs, nextFuncs] = [functions(props), functions(nextProps)];
@@ -86,7 +87,7 @@ const GoogleMaps = ({
   if (map && typeof onMount === `function`) onMount(map, onMountProps);
   if (isIntersecting) addZoomListener(map, router, mapShapes, imageData);
 
-  return <div className="google-maps" ref={mapRef} />;
+  return <GoogleMapsHtml mapRef={mapRef} />;
 };
 
 GoogleMaps.propTypes = {

package/src/GoogleMaps/GoogleMapsFactory.js

@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 import { useGetEntitySchemasAsObj } from '@blaze-cms/react-page-builder';
 import { buildShapesConfig } from './helpers';
 import GoogleMapsRender from './GoogleMapsRender';
+import GoogleMapsHtml from './GoogleMapsHtml';
 
 const GoogleMapsFactory = ({ entityGroups, parent, ...otherProps }) => {
   const { data, loading, error } = useGetEntitySchemasAsObj(
     entityGroups.map(({ entity }) => entity)
   );
 
-  if (loading) return '';
+  if (loading) return <GoogleMapsHtml />;
   if (error) return error.message;
 
   const shapeConfigs = buildShapesConfig(data, entityGroups, parent);

package/src/GoogleMaps/GoogleMapsHtml.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const GoogleMapsFactory = ({ mapRef }) => (
+  <div className={`google-maps ${!mapRef ? 'loading' : ''}`} ref={mapRef} />
+);
+
+GoogleMapsFactory.propTypes = {
+  mapRef: PropTypes.object
+};
+
+GoogleMapsFactory.defaultProps = {
+  mapRef: null
+};
+
+export default GoogleMapsFactory;

package/src/GoogleMaps/GoogleMapsRender.js

@@ -6,6 +6,7 @@ import { getAction } from '@blaze-cms/react-page-builder';
 import { useGetImages } from './hooks';
 import { buildQuery, getImageIds, getCenterCoordinates, buildMapShapes } from './helpers';
 import GoogleMaps from './GoogleMaps';
+import GoogleMapsHtml from './GoogleMapsHtml';
 
 const defaultQuery = getAction('getPublishedPages', 'id');
 
@@ -22,7 +23,7 @@ const GoogleMapsRender = ({ shapeConfigs, entityGroups, id, ...otherProps }) =>
     loading: imagesLoading,
     error: imagesError
   } = useGetImages(imageIds);
-  if (loading || imagesLoading) return '';
+  if (loading || imagesLoading) return <GoogleMapsHtml />;
   if (error || imagesError) return null;
 
   const centerCoordinates = getCenterCoordinates(mapShapes, otherProps);

package/src/GoogleMaps/helpers/build-map-shapes.js

@@ -22,16 +22,6 @@ const buildMapShapes = (shapesOptions, shapesData) => {
   shapesOptions.forEach(shape => {
     const { shapeKey, entityOptions, shapeOptions } = shape;
     const { dataSummaries, enableInfoPane } = entityOptions;
-    const {
-      imageId,
-      label,
-      markerHeight,
-      markerWidth,
-      maxZoom,
-      minZoom,
-      type,
-      useAsCenter
-    } = shapeOptions;
 
     const shapeData = Array.isArray(shapesData[shapeKey])
       ? shapesData[shapeKey]
@@ -44,19 +34,12 @@ const buildMapShapes = (shapesOptions, shapesData) => {
       const { latitude, longitude } = getLatLong(latProp, lonProp, shapeOptions, data);
 
       const formatedShape = {
+        ...shapeOptions,
         latitude,
         longitude,
         dataSummaries,
         enableInfoPane,
-        imageId,
-        label,
-        markerHeight,
-        markerWidth,
-        maxZoom,
-        minZoom,
-        type,
         url,
-        useAsCenter,
         shapeData: data
       };
 

package/src/GoogleMaps/helpers/build-shapes-configs.js

@@ -39,7 +39,7 @@ const buildFilters = filters => {
 const buiildShapeProps = (shape, shapeKey, dataSummaries, parentId, entityData, entityGroup) => {
   const { displayItems = [], filterBy } = shape;
   const { latProp, lonProp, entity } = entityGroup;
-  const { actions } = entityData;
+  const { actions, relations } = entityData;
   const action = actions ? actions.getAllPublished || actions.getAll : '';
 
   const dataSummaryProps = dataSummaries
@@ -59,7 +59,10 @@ const buiildShapeProps = (shape, shapeKey, dataSummaries, parentId, entityData,
   let propsQuery = dataSummaryProps ? `${dataSummaryProps}` : '';
   propsQuery = getUpdatedPropsQuery(propsQuery, entityData);
   if (latProp && lonProp) {
-    propsQuery = `${propsQuery} ${formatProp(latProp)} ${formatProp(lonProp)}`;
+    propsQuery = `${propsQuery} ${formatProp(latProp, relations)} ${formatProp(
+      lonProp,
+      relations
+    )}`;
   }
   if (ids.length && !propsQuery.includes(ID)) propsQuery = `${propsQuery.trim()} ${ID}`;
 
@@ -73,11 +76,12 @@ const buiildShapeProps = (shape, shapeKey, dataSummaries, parentId, entityData,
   };
 };
 
-const formatProp = prop => {
+const formatProp = (prop, relations = []) => {
   if (!prop.includes('.')) return prop;
 
   const [mainProp, nestedProp] = prop.split('.');
-  return `${mainProp}{${nestedProp}}`;
+  const idProp = relations.find(({ localField }) => localField === mainProp) ? 'id ' : '';
+  return `${mainProp}{${idProp}${nestedProp}}`;
 };
 
 const buildShapesConfig = (schemas, entityGroups, parent) => {

package/src/GoogleMaps/helpers/set-map-options.js

@@ -8,7 +8,8 @@ import {
   DISABLE_TRANSPORTATION_STYLES,
   DISABLE_POI_STYLES,
   DISABLE_BOUNDARIES_STYLES,
-  DISABLE_LABELS_STYLES
+  DISABLE_LABELS_STYLES,
+  DEFAULT_SELECT_VALUE
 } from '../../constants';
 
 const setCustomColor = (featureType, color, elementType) =>
@@ -60,7 +61,8 @@ const setMapOptions = otherProps => {
     enableTerrainScreen,
     waterColor,
     landscapeColor,
-    landscapeColorAll
+    landscapeColorAll,
+    mapType
   } = otherProps;
 
   const customColors = [
@@ -85,6 +87,7 @@ const setMapOptions = otherProps => {
     mapTypeControlOptions: {
       mapTypeIds: buildMapTypeIds(enableSatelliteView, enableTerrainScreen)
     },
+    mapTypeId: !mapType || mapType === DEFAULT_SELECT_VALUE ? undefined : mapType,
     styles: customColors
   };
 };

package/src/GoogleMaps/helpers/set-shapes.js

@@ -17,7 +17,8 @@ import {
   COLOR,
   CLICK,
   HEADING_LARGE,
-  LIST
+  LIST,
+  DEFAULT_CUSTOM_MARKER_PATH
 } from '../../constants';
 
 const shapesArray = [];
@@ -142,23 +143,54 @@ const infoWindowContent = async (imageData, dataSummaries, url, shapeData) => {
   );
 };
 
+function getIcon(imageData, shape) {
+  const {
+    imageId,
+    markerWidth = 50,
+    markerHeight = 50,
+    strokeColor,
+    strokeOpacity,
+    strokeWeight,
+    fillColor,
+    fillOpacity,
+    svgPath
+  } = shape;
+  const iconUrl = getIconUrl(imageId, imageData);
+
+  const icon = iconUrl
+    ? {
+        url: iconUrl,
+        scaledSize: new window.google.maps.Size(markerWidth || 50, markerHeight || 50)
+      }
+    : null;
+
+  if (icon) return icon;
+
+  if (!svgPath && !fillColor && !strokeColor) return {}; // any can be true for custom marker
+
+  const svgMarker = {
+    path: svgPath || DEFAULT_CUSTOM_MARKER_PATH,
+    strokeColor,
+    strokeOpacity,
+    strokeWeight,
+    fillColor,
+    fillOpacity,
+    rotation: 0,
+    scale: 2
+  };
+  return svgMarker;
+}
+
 const setMarker = (map, router, shape, imageData) => {
-  const { label = '', markerWidth = 50, markerHeight = 50, latitude, longitude, imageId } = shape;
+  const { label = '', latitude, longitude } = shape;
 
   if (isPositionCorrect(latitude, longitude)) {
-    const iconUrl = getIconUrl(imageId, imageData);
-
-    const icon = iconUrl
-      ? {
-          url: iconUrl,
-          scaledSize: new window.google.maps.Size(markerWidth || 50, markerHeight || 50)
-        }
-      : {};
+    const svgMarker = getIcon(imageData, shape);
 
     const marker = new window.google.maps.Marker({
       position: { lat: latitude, lng: longitude },
       map,
-      icon,
+      icon: svgMarker,
       title: label || ''
     });
 

package/src/GoogleMaps/queries.js

@@ -3,10 +3,12 @@ import { gql } from '@apollo/client';
 const GET_ENTITY_SCHEMAS = gql`
   query getEntitySchemas($identifier: String) {
     getEntitySchemas(identifier: $identifier) {
+      id
       identifier
       actions
       dynamicProperties
       properties
+      relations
     }
   }
 `;
@@ -24,12 +26,14 @@ const generateWhereQuery = queryString => gql`
 `;
 const generateQueryString = (action, query, props) => `
   ${query}: ${action}(where: $where){
+    id
     ${props}
   }
 `;
 
 const generateIdsQuery = (query, props, action, ids) => `
   ${query}: ${action}(where: { id: { _in: ${JSON.stringify(ids)} } }){
+    id
     ${props}
   }
 `;
@@ -38,6 +42,7 @@ const generateFiltersQuery = (query, props, rawQUery, filterQueryKey) => `
   ${query}:  searchPublishedContent(rawQueryStringified: ${JSON.stringify(rawQUery)}){
     results {
       ...on ${filterQueryKey} {
+        id
         ${props}
       }
     }

package/src/constants.js

@@ -122,6 +122,11 @@ const IN_VIEW_CONFIG = {
   offset: '200px'
 };
 
+const DEFAULT_SELECT_VALUE = 'Default';
+
+const DEFAULT_CUSTOM_MARKER_PATH =
+  'M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z';
+
 export {
   PLUGIN_NAME,
   GOOGLE_MAPS_SCRIPT,
@@ -155,5 +160,7 @@ export {
   DISABLE_TRANSPORTATION_STYLES,
   DISABLE_POI_STYLES,
   DISABLE_BOUNDARIES_STYLES,
-  DISABLE_LABELS_STYLES
+  DISABLE_LABELS_STYLES,
+  DEFAULT_SELECT_VALUE,
+  DEFAULT_CUSTOM_MARKER_PATH
 };