-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Initial work on custom icon support in maps
* Re-uses code from Canvas asset manager component to upload images * Adds "Add Custom Icon" button to IconSelect component * Adds CustomIcons array to VectorStyle descriptor (not yet persisted to saved object)
- Loading branch information
Showing
12 changed files
with
442 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import { fromByteArray } from 'base64-js'; | ||
|
|
||
| export const imageTypes = ['image/svg+xml', 'image/jpeg', 'image/png', 'image/gif']; | ||
|
|
||
| export function encode(data: any | null, type = 'text/plain') { | ||
| // use FileReader if it's available, like in the browser | ||
| if (FileReader) { | ||
| return new Promise<string>((resolve, reject) => { | ||
| const reader = new FileReader(); | ||
| reader.onloadend = () => resolve(reader.result as string); | ||
| reader.onerror = (err) => reject(err); | ||
| reader.readAsDataURL(data); | ||
| }); | ||
| } | ||
|
|
||
| // otherwise fall back to fromByteArray | ||
| // note: Buffer doesn't seem to correctly base64 encode binary data | ||
| return Promise.resolve(`data:${type};base64,${fromByteArray(data)}`); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
250 changes: 250 additions & 0 deletions
250
x-pack/plugins/maps/public/classes/styles/vector/components/symbol/custom_icon_modal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,250 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React, { PureComponent } from 'react'; | ||
| import { get } from 'lodash'; | ||
| import PropTypes from 'prop-types'; | ||
| import { | ||
| EuiButton, | ||
| EuiButtonEmpty, | ||
| EuiFieldText, | ||
| EuiFilePicker, | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiFormRow, | ||
| EuiModal, | ||
| EuiModalBody, | ||
| EuiModalFooter, | ||
| EuiModalHeader, | ||
| EuiModalHeaderTitle, | ||
| EuiSpacer, | ||
| EuiText, | ||
| EuiTextArea, | ||
| EuiTitle, | ||
| } from '@elastic/eui'; | ||
| import { i18n } from '@kbn/i18n'; | ||
|
|
||
| import { encode } from '../../../../../../common/dataurl'; | ||
|
|
||
| const MAX_NAME_LENGTH = 40; | ||
| const MAX_DESCRIPTION_LENGTH = 100; | ||
|
|
||
| const strings = { | ||
| getCancelButtonLabel: () => | ||
| i18n.translate('xpack.maps.customIconModal.cancelButtonLabel', { | ||
| defaultMessage: 'Cancel', | ||
| }), | ||
| getCharactersRemainingDescription: (numberOfRemainingCharacter: number) => | ||
| i18n.translate('xpack.maps.customIconModal.remainingCharactersDescription', { | ||
| defaultMessage: '{numberOfRemainingCharacter} characters remaining', | ||
| values: { | ||
| numberOfRemainingCharacter, | ||
| }, | ||
| }), | ||
| getDescriptionInputLabel: () => | ||
| i18n.translate('xpack.maps.customIconModal.descriptionInputLabel', { | ||
| defaultMessage: 'Description', | ||
| }), | ||
| getElementPreviewTitle: () => | ||
| i18n.translate('xpack.maps.customIconModal.elementPreviewTitle', { | ||
| defaultMessage: 'Element preview', | ||
| }), | ||
| getImageFilePickerPlaceholder: () => | ||
| i18n.translate('xpack.maps.customIconModal.imageFilePickerPlaceholder', { | ||
| defaultMessage: 'Select or drag and drop an image', | ||
| }), | ||
| getImageInputDescription: () => | ||
| i18n.translate('xpack.maps.customIconModal.imageInputDescription', { | ||
| defaultMessage: | ||
| 'Take a screenshot of your element and upload it here. This can also be done after saving.', | ||
| }), | ||
| getImageInputLabel: () => | ||
| i18n.translate('xpack.maps.customIconModal.imageInputLabel', { | ||
| defaultMessage: 'Thumbnail image', | ||
| }), | ||
| getNameInputLabel: () => | ||
| i18n.translate('xpack.maps.customIconModal.nameInputLabel', { | ||
| defaultMessage: 'Name', | ||
| }), | ||
| getSaveButtonLabel: () => | ||
| i18n.translate('xpack.maps.customIconModal.saveButtonLabel', { | ||
| defaultMessage: 'Save', | ||
| }), | ||
| }; | ||
| interface Props { | ||
| /** | ||
| * initial value of the name of the custom element | ||
| */ | ||
| name?: string; | ||
| /** | ||
| * initial value of the description of the custom element | ||
| */ | ||
| description?: string; | ||
| /** | ||
| * initial value of the preview image of the custom element as a base64 dataurl | ||
| */ | ||
| image?: string; | ||
| /** | ||
| * title of the modal | ||
| */ | ||
| title: string; | ||
| /** | ||
| * A click handler for the save button | ||
| */ | ||
| onSave: (name: string, description: string, image: string) => void; | ||
| /** | ||
| * A click handler for the cancel button | ||
| */ | ||
| onCancel: () => void; | ||
| } | ||
|
|
||
| interface State { | ||
| /** | ||
| * name of the custom element to be saved | ||
| */ | ||
| name?: string; | ||
| /** | ||
| * description of the custom element to be saved | ||
| */ | ||
| description?: string; | ||
| /** | ||
| * image of the custom element to be saved | ||
| */ | ||
| image?: string; | ||
| } | ||
|
|
||
| export class CustomIconModal extends PureComponent<Props, State> { | ||
| public static propTypes = { | ||
| name: PropTypes.string, | ||
| description: PropTypes.string, | ||
| image: PropTypes.string, | ||
| title: PropTypes.string.isRequired, | ||
| onSave: PropTypes.func.isRequired, | ||
| onCancel: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| public state = { | ||
| name: this.props.name || '', | ||
| description: this.props.description || '', | ||
| image: this.props.image || '', | ||
| }; | ||
|
|
||
| private _handleChange = (type: 'name' | 'description' | 'image', img: string) => { | ||
| this.setState({ [type]: img }); | ||
| }; | ||
|
|
||
| private _handleUpload = (files: FileList | null) => { | ||
| if (files == null) return; | ||
| const file = files[0]; | ||
| const [type, subtype] = get(file, 'type', '').split('/'); | ||
| if (type === 'image') { | ||
| file.text().then((img: string) => this._handleChange('image', img)); | ||
| } | ||
| }; | ||
|
|
||
| public render() { | ||
| const { onSave, onCancel, title, ...rest } = this.props; | ||
| const { name, description, image } = this.state; | ||
|
|
||
| return ( | ||
| <EuiModal | ||
| {...rest} | ||
| className={`mapsCustomIconModal`} | ||
| maxWidth={700} | ||
| onClose={onCancel} | ||
| initialFocus=".mapsCustomIconForm__name" | ||
| > | ||
| <EuiModalHeader> | ||
| <EuiModalHeaderTitle> | ||
| <h3>{title}</h3> | ||
| </EuiModalHeaderTitle> | ||
| </EuiModalHeader> | ||
| <EuiModalBody> | ||
| <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexStart"> | ||
| <EuiFlexItem className="mapsCustomIconForm" grow={2}> | ||
| <EuiFormRow | ||
| label={strings.getNameInputLabel()} | ||
| helpText={strings.getCharactersRemainingDescription(MAX_NAME_LENGTH - name.length)} | ||
| display="rowCompressed" | ||
| > | ||
| <EuiFieldText | ||
| value={name} | ||
| className="mapsCustomIconForm__name" | ||
| onChange={(e) => | ||
| e.target.value.length <= MAX_NAME_LENGTH && | ||
| this._handleChange('name', e.target.value) | ||
| } | ||
| required | ||
| data-test-subj="mapsCustomIconForm-name" | ||
| /> | ||
| </EuiFormRow> | ||
| <EuiFormRow | ||
| label={strings.getDescriptionInputLabel()} | ||
| helpText={strings.getCharactersRemainingDescription( | ||
| MAX_DESCRIPTION_LENGTH - description.length | ||
| )} | ||
| > | ||
| <EuiTextArea | ||
| value={description} | ||
| rows={2} | ||
| onChange={(e) => | ||
| e.target.value.length <= MAX_DESCRIPTION_LENGTH && | ||
| this._handleChange('description', e.target.value) | ||
| } | ||
| data-test-subj="mapsCustomIconForm-description" | ||
| /> | ||
| </EuiFormRow> | ||
| <EuiFormRow | ||
| className="mapsCustomIconForm__thumbnail" | ||
| label={strings.getImageInputLabel()} | ||
| display="rowCompressed" | ||
| > | ||
| <EuiFilePicker | ||
| initialPromptText={strings.getImageFilePickerPlaceholder()} | ||
| onChange={this._handleUpload} | ||
| className="mapsImageUpload" | ||
| accept="image/*" | ||
| /> | ||
| </EuiFormRow> | ||
| <EuiText className="mapsCustomIconForm__thumbnailHelp" size="xs"> | ||
| <p>{strings.getImageInputDescription()}</p> | ||
| </EuiText> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem | ||
| className="mapsElementCard__wrapper mapsCustomIconForm__preview" | ||
| grow={1} | ||
| > | ||
| <EuiTitle size="xxxs"> | ||
| <h4>{strings.getElementPreviewTitle()}</h4> | ||
| </EuiTitle> | ||
| <EuiSpacer size="s" /> | ||
| {/* TODO Render a preview in a MapComponent */} | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </EuiModalBody> | ||
| <EuiModalFooter> | ||
| <EuiFlexGroup justifyContent="flexEnd"> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiButtonEmpty onClick={onCancel}>{strings.getCancelButtonLabel()}</EuiButtonEmpty> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiButton | ||
| fill | ||
| onClick={() => { | ||
| onSave(name, description, image); | ||
| }} | ||
| data-test-subj="mapsCustomIconForm-submit" | ||
| > | ||
| {strings.getSaveButtonLabel()} | ||
| </EuiButton> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </EuiModalFooter> | ||
| </EuiModal> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.