@lancom/shared 0.0.62 → 0.0.66

package/components/editor/editor_layers/editor-layers.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="EditorLayers__wrapper">
+    <transition
+      name="fade"
+      mode="out-in">
+      <div
+        v-if="editModeSelectedLayer"
+        key="edit"
+        ignore-document-click
+        class="EditorLayers__edit-layer-container view-transition">
+        <component
+          :is="editableLayerType"
+          :layer="selectedLayer"
+          @set-layer-field="setLayerField">
+          <template v-slot:header="{ invalid }">
+            <div
+              class="lc_regular16 EditorLayers__close-editable"
+              @click="closeEditableLayer(invalid)">
+              <i class="icon-arrow-left EditorLayers__close-editable-icon"></i>
+              See all design layers
+            </div>
+          </template>
+        </component>
+      </div>
+      <div
+        v-else
+        key="list"
+        ignore-document-click
+        class="EditorLayers__list-wrapper view-transition">
+        <editor-layers-toolbar
+          @layer-added="handleLayerAdded">
+        </editor-layers-toolbar>
+        <div
+          v-if="editableLayers.length"
+          class="EditorLayers__list-content">
+          <div class="EditorLayers__list-header">
+            <h5 class="lc_h5">
+              Layers:
+            </h5>
+          </div>
+          <editor-layers-layer
+            v-for="(layer, index) in editableLayers"
+            :key="`${layer.createdAt}-${index}`"
+            :layer="layer"
+            :active="selectedLayer && selectedLayer.createdAt === layer.createdAt"
+            @select="setSelectedLayer(layer)"
+            @edit="editLayer(layer)"
+            @duplicate="duplicateLayer(layer)"
+            @remove="removeLayer(layer)">
+          </editor-layers-layer>
+        </div>
+      </div>
+    </transition>
+    <editor-pricing
+      v-if="hasPricing"
+      class="EditorLayers__pricing" />
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex';
+import EditorPricing from '@lancom/shared/components/editor/editor_pricing/editor-pricing';
+import { cloneLayerModel } from '@lancom/shared/assets/js/models/product-layers';
+import EditorLayerForms from './editor_layer_forms';
+import EditorLayersLayer from './editor_layers_layer/editor-layers-layer';
+import EditorLayersToolbar from './editor_layers_toolbar/editor-layers-toolbar';
+
+const { mapGetters, mapActions, mapMutations } = createNamespacedHelpers('product');
+
+export default {
+  name: 'EditorLayers',
+  components: {
+    ...EditorLayerForms,
+    EditorLayersLayer,
+    EditorLayersToolbar,
+    EditorPricing
+  },
+  props: {
+    hasPricing: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'template',
+      'editableLayers',
+      'selectedLayer',
+      'editModeSelectedLayer',
+      'editableSide'
+    ]),
+    editableLayerType() {
+      return this.selectedLayer ? `editor-layer-form-${this.selectedLayer.type}` : null;
+    }
+  },
+  watch: {
+    selectedLayer(selected) {
+      if (!selected || !selected.editableDetails) {
+        this.setEditModeSelectedLayer(false);
+      }
+    },
+    editableSide() {
+      this.setEditModeSelectedLayer(false);
+    }
+  },
+  methods: {
+    ...mapMutations([
+      'setSelectedLayer',
+      'setEditModeSelectedLayer',
+      'setSelectedLayerField',
+      'addTemplateLayer',
+      'removeTemplateLayer',
+      'updateTemplateLayer'
+    ]),
+    ...mapActions(['increaseLayersUpdatesCount']),
+    handleLayerAdded({ layer, toEditMode }) {
+      if (toEditMode) {
+        this.editLayer(layer);
+      }
+    },
+    editLayer(layer) {
+      if (layer.editableDetails) {
+        this.setSelectedLayer(layer);
+        this.setEditModeSelectedLayer(true);
+      }
+    },
+    setLayerField(params) {
+      this.setSelectedLayerField(params);
+      this.updateTemplateLayer(this.selectedLayer);
+      this.increaseLayersUpdatesCount();
+    },
+    duplicateLayer(layer) {
+      const copy = cloneLayerModel(layer);
+      this.setSelectedLayer(copy);
+      this.addTemplateLayer(copy);
+    },
+    removeLayer(layer) {
+      this.removeTemplateLayer(layer);
+      this.setSelectedLayer(null);
+    },
+    closeEditableLayer(invalid) {
+      if (invalid) {
+        this.removeTemplateLayer(this.selectedLayer);
+        this.setSelectedLayer(null);
+      }
+      this.setEditModeSelectedLayer(false);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-layers.scss';
+</style>

package/components/editor/editor_layers/editor_layer_forms/editor_layer_common_fields/editor-layer-common-fields.scss

@@ -0,0 +1,37 @@
+@import "@/assets/scss/variables";
+.EditorLayerCommonFields {
+  &__range {
+    &-container {
+      display: flex;
+      align-items: center;
+    }
+    &-sibling {
+      padding: 15px !important;
+      text-align: center !important;
+    }
+  }
+  &__align-options {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 12px 0;
+  }
+  &__align-option {
+    width: 42px;
+    height: 42px;
+    border: 1px solid #e5e5e5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 8px;
+    cursor: pointer;
+    color: #333;
+    box-shadow: $elevation0;
+    transition: box-shadow .2s ease-in-out, color .2s ease-in-out;
+    &:first-of-type { margin-left: 0; }
+    &:last-of-type { margin-right: 0; };
+    &:hover {
+      box-shadow: $elevation1;
+    }
+  }
+}

package/components/editor/editor_layers/editor_layer_forms/editor_layer_common_fields/editor-layer-common-fields.vue

@@ -0,0 +1,110 @@
+<template>
+  <fragment>
+    <div class="form-row low-dense">
+      <label
+        for="angle"
+        class="form-label">
+        Rotate:
+      </label>
+      <div class="row">
+        <div class="col-sm-9 col-12 EditorLayerCommonFields__range-container">
+          <range v-model="angle" :min="0" :max="360" />
+        </div>
+        <div class="col-sm-3 col-12">
+          <input
+            id="angle"
+            ref="angle"
+            v-model="angle"
+            type="text"
+            class="form-field EditorLayerCommonFields__range-sibling" />
+        </div>
+      </div>
+    </div>
+    <!-- <div class="form-row">
+      <div class="form-label">
+        Align:
+      </div>
+      <div class="EditorLayerCommonFields__align-options">
+        <div
+          v-tooltip="'Center vertically'"
+          class="EditorLayerCommonFields__align-option ripple"
+          :class="{ active: alignVertically === 'center' }"
+          @click="alignVertically = 'center'">
+          <i class="icon-vertical-align-center"></i>
+        </div>
+        <div
+          v-tooltip="'Center horizontally'"
+          class="EditorLayerCommonFields__align-option ripple"
+          :class="{ active: alignHorizontally === 'center' }"
+          @click="alignHorizontally = 'center'">
+          <i class="icon-horizonal-align-center"></i>
+        </div>
+        <div
+          v-tooltip="'Left'"
+          class="EditorLayerCommonFields__align-option ripple"
+          :class="{ active: alignHorizontally === 'left' }"
+          @click="alignHorizontally = 'left'">
+          <i class="icon-horizonal-align-left"></i>
+        </div>
+        <div
+          v-tooltip="'Right'"
+          class="EditorLayerCommonFields__align-option ripple"
+          :class="{ active: alignHorizontally === 'right' }"
+          @click="alignHorizontally = 'right'">
+          <i class="icon-horizonal-align-right"></i>
+        </div>
+        <div
+          v-tooltip="'Top'"
+          class="EditorLayerCommonFields__align-option ripple"
+          :class="{ active: alignVertically === 'top' }"
+          @click="alignVertically = 'top'">
+          <i class="icon-vertical-align-top"></i>
+        </div>
+        <div
+          v-tooltip="'Bottom'"
+          class="EditorLayerCommonFields__align-option ripple"
+          :class="{ active: alignVertically === 'bottom' }"
+          @click="alignVertically = 'bottom'">
+          <i class="icon-vertical-align-bottom"></i>
+        </div>
+      </div>
+    </div> -->
+  </fragment>
+</template>
+
+<script>
+import { inRange } from '@lancom/shared/assets/js/utils/filters';
+import Range from '@lancom/shared/components/common/range/range';
+
+const editableModel = (field, validation) => ({
+  get() {
+    return this.layer[field];
+  },
+  set(v) {
+    const value = validation ? validation(v) : v;
+    this.$emit('set-layer-field', { field, value });
+  }
+});
+
+export default {
+  name: 'EditorLayerCommonFields',
+  components: {
+    Range
+  },
+  props: {
+    layer: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    angle: editableModel('angle', v => inRange((Number(v) || 0), 0, 360)),
+    alignVertically: editableModel('alignVertically'),
+    alignHorizontally: editableModel('alignHorizontally')
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-layer-common-fields.scss';
+</style>

package/components/editor/editor_layers/editor_layer_forms/editor_layer_form_art/editor-layer-form-art.scss

@@ -0,0 +1,7 @@
+@import "@/assets/scss/variables";
+
+.EditorLayerFormArt {
+  &__content {
+    padding-top: 24px;
+  }
+}

package/components/editor/editor_layers/editor_layer_forms/editor_layer_form_art/editor-layer-form-art.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="EditorLayerFormArt__wrapper">
+    <validation-observer v-slot="{ valid, invalid }">
+      <slot
+        name="header"
+        :invalid="invalid">
+      </slot>
+      <!-- <div class="EditorLayerFormArt__content">
+        <input
+          v-model="url"
+          readonly
+          class="form-field" />
+      </div> -->
+      <editor-layer-common-fields
+        :layer="layer"
+        @set-layer-field="data => $emit('set-layer-field', data)">
+      </editor-layer-common-fields>
+    </validation-observer>
+  </div>
+</template>
+
+<script>
+import EditorLayerCommonFields from '../editor_layer_common_fields/editor-layer-common-fields';
+
+const editableModel = (field, prop) => ({
+  get() {
+    return prop
+      ? this[`${field}_options`].find(o => o[prop] === this.layer[field])
+      : this.layer[field];
+  },
+  set(v) {
+    const value = prop && Object.prototype.hasOwnProperty.call(v, prop) ? v[prop] : v;
+    this.$emit('set-layer-field', { field, value });
+  }
+});
+export default {
+  name: 'EditorLayerFormArt',
+  components: {
+    EditorLayerCommonFields
+  },
+  props: {
+    layer: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    url: editableModel('url')
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-layer-form-art';
+</style>

package/components/editor/editor_layers/editor_layer_forms/editor_layer_form_text/editor-layer-form-text.scss

@@ -0,0 +1,49 @@
+@import "@/assets/scss/variables";
+
+.EditorLayerFormText {
+  &__content {
+    padding-top: 24px;
+  }
+  &__align-options {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 12px 0;
+  }
+  &__align-option {
+    width: 42px;
+    height: 42px;
+    border: 1px solid #e5e5e5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 8px;
+    cursor: pointer;
+    color: #e5e5e5;
+    box-shadow: $elevation0;
+    transition: box-shadow .2s ease-in-out, color .2s ease-in-out;
+    &:first-of-type { margin-left: 0; }
+    &:last-of-type { margin-right: 0; };
+    &.active {
+      color: #333;
+    }
+    &:hover {
+      box-shadow: $elevation1;
+    }
+  }
+  &__field-action {
+    cursor: pointer;
+  }
+  &__fonts-dropdown {
+    &-option {
+    }
+  }
+  &__colorpicker {
+    margin-top: 12px;
+  }
+  &__label-with-checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}

package/components/editor/editor_layers/editor_layer_forms/editor_layer_form_text/editor-layer-form-text.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="EditorLayerFormText__wrapper">
+    <validation-observer v-slot="{ invalid }">
+      <slot
+        name="header"
+        :invalid="invalid">
+      </slot>
+      <div class="EditorLayerFormText__content">
+        <validation-provider
+          tag="div"
+          name="Copy"
+          rules="required|max:100"
+          class="form-row">
+          <label
+            for="copy"
+            class="form-label">
+            Write your text
+          </label>
+          <input
+            id="copy"
+            ref="copy"
+            v-model="copy"
+            type="text"
+            name="copy"
+            class="form-field bordered labelless"
+            placeholder="Your text here"
+            :class="{ filled: copy }" />
+        </validation-provider>
+        <fragment>
+          <div
+            v-if="copy.includes('\n')"
+            class="form-row">
+            <div class="form-label">
+              Align text
+            </div>
+            <div class="EditorLayerFormText__align-options">
+              <div
+                class="EditorLayerFormText__align-option ripple"
+                :class="{ active: textAlign === 'left' }"
+                @click="textAlign = 'left'">
+                <i class="icon-align-left"></i>
+              </div>
+              <div
+                class="EditorLayerFormText__align-option ripple"
+                :class="{ active: textAlign === 'center' }"
+                @click="textAlign = 'center'">
+                <i class="icon-align-center"></i>
+              </div>
+              <div
+                class="EditorLayerFormText__align-option ripple"
+                :class="{ active: textAlign === 'right' }"
+                @click="textAlign = 'right'">
+                <i class="icon-align-right"></i>
+              </div>
+            </div>
+          </div>
+          <div class="form-row low-dense">
+            <font-family-select
+              v-model="fontFamily"
+              @input="selectFont"
+              @select="selectFont" />
+            <input
+              type="text"
+              :value="fontFamily"
+              :class="{ 'filled': fontFamily }"
+              class="form-hidden-validator form-field" />
+          </div>
+          <div class="form-row--cols low-dense">
+            <div class="form-col col-half">
+              <label class="form-label">
+                Text color
+              </label>
+              <color-picker v-model="fill" />
+            </div>
+            <div class="form-col col-half">
+              <label
+                for="fontSize"
+                class="form-label">
+                Text size
+              </label>
+              <i
+                class="icon-minus form-icon-left  EditorLayerFormText__field-action"
+                @click="decreaseFontSize">
+              </i>
+              <input
+                id="fontSize"
+                ref="fontSize"
+                v-model.number="fontSize"
+                name="fontSize"
+                type="text"
+                class="form-field icon-inside-lr filled centered labelless" />
+              <i
+                class="icon-plus form-icon-right EditorLayerFormText__field-action"
+                @click="increaseFontSize">
+              </i>
+            </div>
+          </div>
+          <div class="form-row--cols low-dense">
+            <div class="form-col col-half">
+              <label class="form-label EditorLayerFormText__label-with-checkbox">
+                <span>
+                  Outline color
+                </span>
+                <Checkbox v-model="enableOutline" />
+              </label>
+              <color-picker
+                v-if="enableOutline"
+                v-model="stroke">
+              </color-picker>
+            </div>
+            <div
+              v-if="enableOutline"
+              class="form-col col-half">
+              <label
+                for="fontSize"
+                class="form-label">
+                Outline weight
+              </label>
+              <i
+                class="icon-minus form-icon-left  EditorLayerFormText__field-action"
+                @click="decreaseStrokeWidth">
+              </i>
+              <input
+                id="strokeWidth"
+                ref="strokeWidth"
+                v-model.number="strokeWidth"
+                name="strokeWidth"
+                type="text"
+                class="form-field icon-inside-lr filled centered labelless" />
+              <i
+                class="icon-plus form-icon-right EditorLayerFormText__field-action"
+                @click="increaseStrokeWidth">
+              </i>
+            </div>
+            <div
+              v-else
+              class="form-col col-half">
+              &nbsp;
+            </div>
+          </div>
+          <editor-layer-common-fields
+            :layer="layer"
+            @set-layer-field="data => $emit('set-layer-field', data)">
+          </editor-layer-common-fields>
+        </fragment>
+      </div>
+    </validation-observer>
+  </div>
+</template>
+
+<script>
+import { inRange } from '@lancom/shared/assets/js/utils/filters';
+import { availableFonts, loadFont } from '@lancom/shared/assets/js/utils/fonts-helper';
+import EditorLayerCommonFields from '../editor_layer_common_fields/editor-layer-common-fields';
+import FontFamilySelect from './font-family_select/font-family-select';
+
+const editableModel = (field, prop) => ({
+  get() {
+    return prop
+      ? this[`${field}_options`].find(o => o[prop] === this.layer[field])
+      : this.layer[field];
+  },
+  set(v) {
+    const value = prop && Object.prototype.hasOwnProperty.call(v, prop) ? v[prop] : v;
+    this.$emit('set-layer-field', { field, value });
+  }
+});
+export default {
+  name: 'EditorLayerFormText',
+  components: {
+    EditorLayerCommonFields,
+    FontFamilySelect
+  },
+  props: {
+    layer: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    copy: editableModel('copy'),
+    textAlign: editableModel('textAlign'),
+    fontFamily: editableModel('fontFamily', 'label'),
+    fill: editableModel('fill'),
+    stroke: editableModel('stroke'),
+    enableOutline: editableModel('enableOutline'),
+    fontSize: {
+      get() {
+        return this.layer.fontSize;
+      },
+      set(value) {
+        value = inRange(value, 1, 300);
+        this.$emit('set-layer-field', { field: 'fontSize', value });
+        this.$refs.fontSize.value = value;
+      }
+    },
+    strokeWidth: {
+      get() {
+        return this.layer.strokeWidth;
+      },
+      set(value) {
+        value = inRange(value, 1, 30);
+        this.$emit('set-layer-field', { field: 'strokeWidth', value });
+        this.$refs.strokeWidth.value = value;
+      }
+    },
+    fontFamily_options() {
+      return availableFonts.map(({ label, alias }) => ({ label, value: alias }));
+    }
+  },
+  methods: {
+    async selectFont({ value }) {
+      const font = await loadFont(value);
+      Object.keys(font).forEach(field => this.$emit('set-layer-field', {
+        field, value: font[field]
+      }));
+    },
+    increaseFontSize() {
+      this.fontSize += 1;
+    },
+    decreaseFontSize() {
+      this.fontSize -= 1;
+    },
+    increaseStrokeWidth() {
+      this.strokeWidth += 1;
+    },
+    decreaseStrokeWidth() {
+      this.strokeWidth -= 1;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-layer-form-text';
+</style>