README

Form Minimap Vue

Vue components for Form Minimap. Please consult that documentation for further information on the concepts mentioned below.

Getting Started

Installation

npm install --save @eafmm/vue

Adding Form Minimap

The code sample below shows the lines added to a simple form to add a minimap (M) or a minimap with panel (P)

        <script>
M           import { FmmVueMinimap } from '@eafmm/vue'
  P         import { FmmVueMinimap, FmmVuePanel } from '@eafmm/vue'
            export default {
                name: 'App',
M P             components: {
M P                 FmmVueMinimap,
  P                 FmmVuePanel
M P             },
  P             data: () => ({
  P                 refPanel: undefined
  P             }),
  P             mounted() {
  P                 this.refPanel = this.$refs.panel;
  P             }
            }
        </script>

M P     <style>
M P         .fmm-frame { height: 50px; }
  P         .fmm-panel { height: 0; }
M P     </style>

        <template>
            <div id="app">
M               <div ref='parent' style='width:70px; height:50px; margin-left:200px'></div>
  P             <div ref='anchor' style='width:20px; height:20px; margin-left:200px'></div>
  P             <FmmVuePanel ref='panel'/>
                <form>
M                   <FmmVueMinimap :parent='this.$refs.parent' title='Title'/>
  P                 <FmmVueMinimap v-if='refPanel' :anchor='this.$refs.anchor' :panel='refPanel' title='Title'/>
                    <input id="Input1"/><br/>
                    <input id="Input2"/><br/>
                    <input id="Input3"/><br/>
                    <input id="Input4"/>
                </form>
            </div>
        </template>

API

FmmVueMinimap

Component to create and manage FmmMinimap. The minimap is detached when this component is unmounted. For minimaps in a panel, use the panelproperty; otherwise use the parent property to show an always-visible minimap, or anchor for a popup minimap.

Property	Type	Required
aggregateLabels	FmmMapString
anchor	HTMLElement
customElementIds	string[]
debounceMsec	Number
dynamicLabels	string[]
framework	FmmFramework
page	HTMLElement
panel	FmmVuePanel
parent	HTMLElement
store	FmmVueStore
title	String	✓
usePanelDetail	Boolean
useWidthToScale	Boolean
verbosity	Number
zoomFactor	Number

Event	Parameter	Description
update	FmmMinimapSnapshot	Dispatched when the minimap updates itself for whatever reason.

Method
destructor
takeSnapshot

FmmVuePanel

Component to create and manage FmmPanel.

Property	Type	Required
detailParent	HTMLDivElements
vertical	boolean

Method
destroyDetached

FmmVueStore

Component to create FmmStore.

Property	Type	Required
errors	FmmMapErrors
values	FmmMapValues	✓

FmmVuex

Component to create FmmStore when using Vuex.

Property	Type	Required
errors	FmmMapErrors

Usage no npm install needed!