From 1a74b2f94d303570762c93ffd26a87b7fe5352be Mon Sep 17 00:00:00 2001 From: Dasa Paddock Date: Thu, 11 Aug 2022 12:42:57 -0700 Subject: [PATCH] Update to 4.24 and don't use `tslib` from the CDN (#434) --- 4.x/typescript/Recenter/README.md | 24 ++++++++++++------------ 4.x/typescript/Recenter/index.html | 17 ++++++++--------- 4.x/typescript/Recenter/package.json | 6 +++--- 4.x/typescript/Recenter/tsconfig.json | 1 - 4 files changed, 23 insertions(+), 25 deletions(-) diff --git a/4.x/typescript/Recenter/README.md b/4.x/typescript/Recenter/README.md index 7189c9708..7e38dda53 100644 --- a/4.x/typescript/Recenter/README.md +++ b/4.x/typescript/Recenter/README.md @@ -17,10 +17,11 @@ The proceeding steps will begin with implementing the widget in the .tsx file. ## Usage ### Implement Recenter TSX file + #### Add dependency paths and import statements ```ts -import {subclass, property} from "esri/core/accessorSupport/decorators"; +import { subclass, property } from "esri/core/accessorSupport/decorators"; import Widget = require("esri/widgets/Widget"); import { init } from "esri/core/watchUtils"; @@ -39,7 +40,7 @@ First we're going to create a `Coordinates` type alias. `Coordinates` is an [esr type Coordinates = Point | number[] | any; ``` -Next, we will create a few [Typescript interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html) to aid in reusing object types. +Next, we will create a few [TypeScript interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html) to aid in reusing object types. ```ts interface Center { @@ -57,8 +58,8 @@ interface Style { } interface RecenterParams extends __esri.WidgetProperties { - view: MapView, - initialCenter: number[] + view: MapView; + initialCenter: number[]; } ``` @@ -90,13 +91,13 @@ class Recenter extends Widget { } ``` -Here, we are extending the [Widget][https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Widget.html) base class.The [@subclass](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-accessorSupport-decorators.html#subclass) decorator is for constructing subclasses off of a given base class. The [Custom Widget guide topic](https://developers.arcgis.com/javascript/latest/custom-widget/#subclass) has more information on using @subclass. +Here, we are extending the [Widget](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Widget.html) base class.The [@subclass](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-accessorSupport-decorators.html#subclass) decorator is for constructing subclasses off of a given base class. The [Custom Widget guide topic](https://developers.arcgis.com/javascript/latest/custom-widget/#subclass) has more information on using @subclass. The constructor logic is binding the `_onViewChange()` method to `this` widget instance. #### Add postInitialize logic -The [postInitialize](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Widget.html#postInitialize) method is called after the widget is created but before the UI is rendered. In this particular case, we will initialize [watchUtils](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-watchUtils.html#init) to watch for changes to the `View's` [center](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#center), [interacting](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#interacting), and [scale](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#scale) properties in which it then calls the method, `_onViewChange`. +The [postInitialize](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Widget.html#postInitialize) method is called after the widget is created but before the UI is rendered. In this particular case, we will initialize [watchUtils](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-watchUtils.html#init) to watch for changes to the `View's` [center](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#center), [interacting](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#interacting), and [scale](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#scale) properties in which it then calls the method, `_onViewChange`. Add the following code to handle this, @@ -205,7 +206,7 @@ export = Recenter; ### 2. Compiling the TSX file -Now that the widget's code is implemented, use the TypeScript compiler to compile the _.tsx_ file to its underlying JavaScript implementation. +Now that the widget's code is implemented, use the TypeScript compiler to compile the _.tsx_ file to its underlying JavaScript implementation. In the command prompt, browse to the location of this sample directory and type `npm run build`. This compiles any specified _.tsx_ files within the _tsconfig.json_'s files to their equivalent _.js_ files. You should now have a new _Recenter.js_ file generated in the same directory as its _.tsx_ file. @@ -215,7 +216,7 @@ Now that you generated the underlying _.js_ file for the widget, it can be added #### Add CSS -The widget references the `.recenter-tool' class. Add a style element that references this class as seen below. +The widget references the `.recenter-tool' class. Add a style element that references this class as seen below. ```css .recenter-tool { @@ -228,7 +229,7 @@ The widget references the `.recenter-tool' class. Add a style element that refe z-index: 999; } -.recenter-tool>p { +.recenter-tool > p { margin: 0; } ``` @@ -265,10 +266,9 @@ require([ "esri/views/MapView", "app/Recenter", // References the custom widget's module "esri/layers/VectorTileLayer" -], -(Map, MapView, Recenter, VectorTileLayer) => { +], (Map, MapView, Recenter, VectorTileLayer) => { let map, view; -}) +}); ``` Last, initialize the `Recenter` widget then add it to the `view.ui` to place the widget at the `top-right` of the map. diff --git a/4.x/typescript/Recenter/index.html b/4.x/typescript/Recenter/index.html index 567def8b5..25fb284d3 100644 --- a/4.x/typescript/Recenter/index.html +++ b/4.x/typescript/Recenter/index.html @@ -5,7 +5,7 @@ Custom Recenter Widget - + @@ -42,9 +42,9 @@ ] }; - +